@messaia/cdk 13.3.8 → 13.3.9

package/fesm2015/messaia-cdk.mjs

@@ -5217,6 +5217,24 @@ class VdDynamicTableComponent {
             'gt-xxl': column.showGtXxl
         };
     }
+    /**
+     * Gets row classes
+     * @param column
+     * @param row
+     * @returns
+     */
+    getRowClasses(column, row) {
+        return Object.assign({
+            'gt-xs': column.showGtXs,
+            'gt-sm': column.showGtSm,
+            'gt-md': column.showGtMd,
+            'gt-lg': column.showGtLg,
+            'gt-xl': column.showGtXl,
+            'gt-xxl': column.showGtXxl,
+            'hidden': column.hidden,
+            'text-right': column.arrowBefore
+        }, column.cellNgClass ? column.cellNgClass(row, this.context) : {});
+    }
     /**
      * Responds to user-initiated events
      * @param event
@@ -5240,7 +5258,7 @@ class VdDynamicTableComponent {
     }
 }
 /** @nocollapse */ VdDynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdDynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, host: { listeners: { "document:contextmenu": "handleContextMenuEvent($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"], components: [{ type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["menu", "item", "context"] }, { type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i17.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i1$4.MatCellDef, selector: "[matCellDef]" }, { type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "async": i4$1.AsyncPipe, "enum": EnumPipe, "date": i4$1.DatePipe }, animations: [
+/** @nocollapse */ VdDynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, host: { listeners: { "document:contextmenu": "handleContextMenuEvent($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"], components: [{ type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["menu", "item", "context"] }, { type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i17.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i1$4.MatCellDef, selector: "[matCellDef]" }, { type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "async": i4$1.AsyncPipe, "enum": EnumPipe, "date": i4$1.DatePipe }, animations: [
         trigger('detailExpand', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'initial' })),
@@ -5255,7 +5273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                             state('expanded', style({ display: 'initial' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"] }]
+                    ], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']