@messaia/cdk 12.3.5-rc14 → 12.3.5-rc15

package/bundles/messaia-cdk.umd.js

@@ -3426,10 +3426,11 @@
          * Checks, whether all items are selected
          */
         TableStaticDataSource.prototype.isAllSelected = function () {
+            var _a;
             if (this.selectionModel.isEmpty()) {
                 return false;
             }
-            return this.selectionModel.selected.length === this.total;
+            return this.selectionModel.selected.length === ((_a = this.paginator) === null || _a === void 0 ? void 0 : _a.length);
         };
         /**
          * Toggles selected items
@@ -3438,6 +3439,7 @@
          */
         TableStaticDataSource.prototype.toggleSelect = function (checkbox, predicate) {
             var _this = this;
+            var _a;
             if (this.selectionModel.hasValue()) {
                 this.selectionModel.clear();
                 checkbox.source.checked = false;
@@ -3446,7 +3448,7 @@
                 this.data.filter(predicate ? predicate : function (x) { return x; })
                     .filter(function (x) { return !x['locked']; })
                     .forEach(function (data) { return _this.selectionModel.select(data['id']); });
-                if (this.selectionModel.selected.length !== this.total) {
+                if (this.selectionModel.selected.length !== ((_a = this.paginator) === null || _a === void 0 ? void 0 : _a.length)) {
                     checkbox.source.checked = false;
                 }
             }
@@ -3478,6 +3480,10 @@
              * paginable?
              */
             this.paginable = false;
+            /**
+             * Shows the column 'Checkbox'
+             */
+            this.selectable = false;
             /**
              * Sticky header
              */
@@ -3602,6 +3608,10 @@
                             }));
                         }
                     }
+                    /* Add checkbox column */
+                    if (this.selectable) {
+                        this.columns.unshift({ name: 'select', type: exports.TableColumnType.Checkbox });
+                    }
                 }
             }
             /* Build displayed columns & filter */
@@ -3675,7 +3685,7 @@
     VdDynamicTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vd-dynamic-table',
-                    template: "<div class=\"loading-progress\">\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 [ngSwitch]=\"column.type\" *ngFor=\"let column of columns\">\r\n\t\t<!-- #region Checkbox for selection -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Checkbox\" [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef>\r\n\t\t\t\t<mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.total\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\">\r\n\t\t\t\t<mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row.id) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" [checked]=\"dataSource.selectionModel.isSelected(row.id)\"></mat-checkbox>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Enum column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Enum\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<span i18n=\"@@selection\">{column.content(row) | enum:column.enumType, select, type {type} other {{{column.content(row) | enum:column.enumType}}}}</span>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Toggle column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" (click)=\"$event.stopPropagation()\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<mat-slide-toggle [(ngModel)]=\"row[column.name]\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row)):null\" [disabled]=\"readonly || (column.disable && column.disable(row))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Date column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Date\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<span *ngIf=\"!column.shortDate\">{{column.content(row) | date:'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t<span *ngIf=\"column.shortDate\">{{column.content(row) | date:'dd.MM.yyyy'}}</span>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Action -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\" [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" (click)=\"$event.stopPropagation()\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<button type=\"button\" mat-icon-button [mat-menu-trigger-for]=\"menu\" [disabled]=\"row.locked || !hasVisibleActionMenus(row, column)\">\r\n\t\t\t\t\t<mat-icon>more_vert</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t\t<mat-menu x-position=\"before\" #menu=\"matMenu\">\r\n\t\t\t\t\t<ng-container *ngFor=\"let menuItem of column.actionMenus\">\r\n\t\t\t\t\t\t<ng-container *ngIf=\"!menuItem.subItems\">\r\n\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event(row):null\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\">{{menuItem.title}}</button>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<ng-container *ngIf=\"menuItem.subItems\">\r\n\t\t\t\t\t\t\t<mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n\t\t\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(row):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(row)\">{{menuSubItem.title}}</button>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\">{{menuItem.title}}</button>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</mat-menu>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Text Input column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" (click)=\"$event.preventDefault();$event.stopPropagation();\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\">\r\n\t\t\t\t\t<input type=\"{{column.inputType}}\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" (ngModelChange)=\"patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Other column types -->\r\n\t\t<ng-container *ngSwitchDefault [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<span *ngIf=\"column.content\" [innerHtml]=\"column.content(row)\"></span>\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 [ngSwitch]=\"column.type\" *ngFor=\"let column of columns\">\r\n\t\t\t<!-- #region No filter for checkbox -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.None || ColumnType.Checkbox\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Text filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Text\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region TextInput filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Number filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Number\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Select filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-select [endpoint]=\"column.endpoint\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Enum filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Enum\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-select [enum]=\"column.enumType\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Toggle filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-select [options]=\"column.options\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Date filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Date\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-date [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-clear [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\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.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<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns\"></tr>\r\n\t</ng-container>\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\"></tr>\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):null\"></tr>\r\n\t</ng-container>\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 tc-grey-700 bgc-grey-200 txt-italic\" *ngIf=\"!dataSource.filteredData?.length && !dataSource.total\" i18n>No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<mat-paginator *ngIf=\"paginable\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>",
+                    template: "<div class=\"loading-progress\">\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 [ngSwitch]=\"column.type\" *ngFor=\"let column of columns\">\r\n\t\t<!-- #region Checkbox for selection -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Checkbox\" [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef>\r\n\t\t\t\t<mat-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</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\">\r\n\t\t\t\t<mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row.id) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" [checked]=\"dataSource.selectionModel.isSelected(row.id)\"></mat-checkbox>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Enum column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Enum\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<span i18n=\"@@selection\">{column.content(row) | enum:column.enumType, select, type {type} other {{{column.content(row) | enum:column.enumType}}}}</span>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Toggle column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" (click)=\"$event.stopPropagation()\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<mat-slide-toggle [(ngModel)]=\"row[column.name]\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row)):null\" [disabled]=\"readonly || (column.disable && column.disable(row))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Date column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Date\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<span *ngIf=\"!column.shortDate\">{{column.content(row) | date:'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t<span *ngIf=\"column.shortDate\">{{column.content(row) | date:'dd.MM.yyyy'}}</span>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Action -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\" [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" (click)=\"$event.stopPropagation()\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<button type=\"button\" mat-icon-button [mat-menu-trigger-for]=\"menu\" [disabled]=\"row.locked || !hasVisibleActionMenus(row, column)\">\r\n\t\t\t\t\t<mat-icon>more_vert</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t\t<mat-menu x-position=\"before\" #menu=\"matMenu\">\r\n\t\t\t\t\t<ng-container *ngFor=\"let menuItem of column.actionMenus\">\r\n\t\t\t\t\t\t<ng-container *ngIf=\"!menuItem.subItems\">\r\n\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event(row):null\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\">{{menuItem.title}}</button>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t<ng-container *ngIf=\"menuItem.subItems\">\r\n\t\t\t\t\t\t\t<mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n\t\t\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(row):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(row)\">{{menuSubItem.title}}</button>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\">{{menuItem.title}}</button>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</mat-menu>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Text Input column -->\r\n\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\" [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" (click)=\"$event.preventDefault();$event.stopPropagation();\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\">\r\n\t\t\t\t\t<input type=\"{{column.inputType}}\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" (ngModelChange)=\"patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t</mat-form-field>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Other column types -->\r\n\t\t<ng-container *ngSwitchDefault [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\" [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.disabled\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">{{column.header}}</th>\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row\" [matTooltip]=\"column.tooltip?column.tooltip(row):null\" [matTooltipClass]=\"column.tooltipClass\" [ngClass]=\"column.cellNgClass?column.cellNgClass(row):{'text-right': column.arrowBefore}\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\">\r\n\t\t\t\t<span *ngIf=\"column.content\" [innerHtml]=\"column.content(row)\"></span>\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 [ngSwitch]=\"column.type\" *ngFor=\"let column of columns\">\r\n\t\t\t<!-- #region No filter for checkbox -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.None || ColumnType.Checkbox\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Text filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Text\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region TextInput filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Number filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Number\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Select filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-select [endpoint]=\"column.endpoint\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Enum filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Enum\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-select [enum]=\"column.enumType\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Toggle filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-select [options]=\"column.options\" [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Date filter -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Date\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-date [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\" cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef filter-clear [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}\" [attr.gt-xs]=\"column.showGtXs\" [attr.gt-sm]=\"column.showGtSm\" [attr.gt-md]=\"column.showGtMd\" [attr.gt-lg]=\"column.showGtLg\" [attr.gt-xl]=\"column.showGtXl\" [attr.gt-xxl]=\"column.showGtXxl\"></th>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\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.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<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns\"></tr>\r\n\t</ng-container>\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\"></tr>\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):null\"></tr>\r\n\t</ng-container>\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 tc-grey-700 bgc-grey-200 txt-italic\" *ngIf=\"!dataSource.filteredData?.length && !dataSource.total\" i18n>No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<mat-paginator *ngIf=\"paginable\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>",
                     animations: [
                         animations.trigger('detailExpand', [
                             animations.state('collapsed', animations.style({ display: 'none' })),
@@ -3706,6 +3716,7 @@
         dataSourceFilter: [{ type: i0.Input }],
         filterable: [{ type: i0.Input }],
         paginable: [{ type: i0.Input }],
+        selectable: [{ type: i0.Input }],
         sortActive: [{ type: i0.Input }],
         sortDirection: [{ type: i0.Input }],
         stickyHeader: [{ type: i0.Input }],