@messaia/cdk 13.0.1 → 13.3.0-rc01

package/esm2020/lib/select/select.module.mjs

@@ -13,22 +13,22 @@ const EXPORTED_DECLARATIONS = [
 ];
 export class VdSelectModule {
 }
-/** @nocollapse */ /** @nocollapse */ VdSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ VdSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdSelectModule, declarations: [VdSelectComponent,
+/** @nocollapse */ /** @nocollapse */ VdSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ VdSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectModule, declarations: [VdSelectComponent,
         VdSelectOptionDirective], imports: [CommonModule,
         FormsModule,
         MatSelectModule,
         MatIconModule,
         MatButtonModule], exports: [VdSelectComponent,
         VdSelectOptionDirective] });
-/** @nocollapse */ /** @nocollapse */ VdSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdSelectModule, imports: [[
+/** @nocollapse */ /** @nocollapse */ VdSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectModule, imports: [[
             CommonModule,
             FormsModule,
             MatSelectModule,
             MatIconModule,
             MatButtonModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/lib/table/components/dynamic-table/dynamic-table.component.mjs

@@ -232,15 +232,15 @@ export class VdDynamicTableComponent {
         this.table.renderRows();
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdDynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: i1.DynamicBuilder }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdDynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", classType: "classType", dataSourceFilter: "dataSourceFilter", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", actionMenus: "actionMenus" }, outputs: { rowClick: "rowClick" }, 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 }], ngImport: i0, 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:column.enumPrefix, select, type {type} other {{{column.content(row) | enum:column.enumType:column.enumPrefix}}}}</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\" [prefix]=\"column.enumPrefix\" [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=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<mat-paginator *ngIf=\"paginable\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>", 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]{display:none}::ng-deep .mat-table [gt-sm]{display:none}::ng-deep .mat-table [gt-md]{display:none}::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm]{display:none}::ng-deep .mat-table [gt-md]{display:none}::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md]{display:none}::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl]{display:none}}\n"], components: [{ type: i2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4.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: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i11.FilterInputComponent, selector: "mat-header-cell[filter-input],[mat-header-cell][filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: i12.FilterSelectComponent, selector: "mat-header-cell[filter-select],[mat-header-cell][filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { type: i13.FilterDateComponent, selector: "mat-header-cell[filter-date],[mat-header-cell][filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: i14.FilterClearComponent, selector: "mat-header-cell[filter-clear],[mat-header-cell][filter-clear]" }, { type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i17.DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i16.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i16.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i18.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i18.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i18.CdkCellDef, selector: "[cdkCellDef]" }, { type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i16.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i21.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: i20.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: i16.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i22.OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i3.MatCellDef, selector: "[matCellDef]" }, { type: i18.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i18.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "enum": i23.EnumPipe, "date": i16.DatePipe }, animations: [
+/** @nocollapse */ /** @nocollapse */ VdDynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: i1.DynamicBuilder }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @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", dataSourceFilter: "dataSourceFilter", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", actionMenus: "actionMenus" }, outputs: { rowClick: "rowClick" }, 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 }], ngImport: i0, 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:column.enumPrefix, select, type {type} other {{{column.content(row) | enum:column.enumType:column.enumPrefix}}}}</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\" [prefix]=\"column.enumPrefix\" [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=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<mat-paginator *ngIf=\"paginable\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>", 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]{display:none}::ng-deep .mat-table [gt-sm]{display:none}::ng-deep .mat-table [gt-md]{display:none}::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm]{display:none}::ng-deep .mat-table [gt-md]{display:none}::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md]{display:none}::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg]{display:none}::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl]{display:none}::ng-deep .mat-table [gt-xxl]{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl]{display:none}}\n"], components: [{ type: i2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4.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: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i11.FilterInputComponent, selector: "mat-header-cell[filter-input],[mat-header-cell][filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: i12.FilterSelectComponent, selector: "mat-header-cell[filter-select],[mat-header-cell][filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { type: i13.FilterDateComponent, selector: "mat-header-cell[filter-date],[mat-header-cell][filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: i14.FilterClearComponent, selector: "mat-header-cell[filter-clear],[mat-header-cell][filter-clear]" }, { type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i17.DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i16.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i16.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i18.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i18.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i18.CdkCellDef, selector: "[cdkCellDef]" }, { type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i16.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i20.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i20.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i21.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: i20.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: i16.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i22.OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i3.MatCellDef, selector: "[matCellDef]" }, { type: i18.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i18.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "enum": i23.EnumPipe, "date": i16.DatePipe }, animations: [
         trigger('detailExpand', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'initial' })),
             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdDynamicTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdDynamicTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-dynamic-table', animations: [
                         trigger('detailExpand', [

package/esm2020/lib/table/components/filter-clear.component.mjs

@@ -26,12 +26,12 @@ export class FilterClearComponent {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ FilterClearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterClearComponent, deps: [{ token: i1.MatTable }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ FilterClearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: FilterClearComponent, selector: "mat-header-cell[filter-clear],[mat-header-cell][filter-clear]", ngImport: i0, template: `
+/** @nocollapse */ /** @nocollapse */ FilterClearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterClearComponent, deps: [{ token: i1.MatTable }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterClearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FilterClearComponent, selector: "mat-header-cell[filter-clear],[mat-header-cell][filter-clear]", ngImport: i0, template: `
 		<button type="button" mat-icon-button (click)="clear()">
 			<mat-icon>backspace</mat-icon>
 		</button>`, isInline: true, components: [{ type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterClearComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterClearComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mat-header-cell[filter-clear],[mat-header-cell][filter-clear]',

package/esm2020/lib/table/components/filter-date.component.mjs

@@ -100,8 +100,8 @@ export class FilterDateComponent {
      */
     registerOnTouched(fn) { this.onTouched = fn; }
 }
-/** @nocollapse */ /** @nocollapse */ FilterDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterDateComponent, deps: [{ token: i1.MatTable }, { token: i2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ FilterDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: FilterDateComponent, selector: "mat-header-cell[filter-date],[mat-header-cell][filter-date]", inputs: { field: "field", debounce: "debounce", placeholder: "placeholder" }, providers: [
+/** @nocollapse */ /** @nocollapse */ FilterDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterDateComponent, deps: [{ token: i1.MatTable }, { token: i2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FilterDateComponent, selector: "mat-header-cell[filter-date],[mat-header-cell][filter-date]", inputs: { field: "field", debounce: "debounce", placeholder: "placeholder" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => FilterDateComponent)),
@@ -117,7 +117,7 @@ export class FilterDateComponent {
 			</button>
 			<mat-datepicker #picker></mat-datepicker>
 		</mat-form-field>`, isInline: true, components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ 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: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterDateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mat-header-cell[filter-date],[mat-header-cell][filter-date]',

package/esm2020/lib/table/components/filter-input.component.mjs

@@ -143,8 +143,8 @@ export class FilterInputComponent {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ FilterInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterInputComponent, deps: [{ token: i1.MatTable }, { token: i2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ FilterInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: FilterInputComponent, selector: "mat-header-cell[filter-input],[mat-header-cell][filter-input]", inputs: { field: "field", operator: "operator", onlyNumber: "onlyNumber", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [
+/** @nocollapse */ /** @nocollapse */ FilterInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterInputComponent, deps: [{ token: i1.MatTable }, { token: i2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FilterInputComponent, selector: "mat-header-cell[filter-input],[mat-header-cell][filter-input]", inputs: { field: "field", operator: "operator", onlyNumber: "onlyNumber", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => FilterInputComponent)),
@@ -158,7 +158,7 @@ export class FilterInputComponent {
 				<mat-icon>close</mat-icon>
 			</button>
 		</mat-form-field>`, isInline: true, components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6.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: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mat-header-cell[filter-input],[mat-header-cell][filter-input]',

package/esm2020/lib/table/components/filter-select.component.mjs

@@ -21,9 +21,9 @@ export class VdFilterOptionDirective extends TemplatePortalDirective {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdFilterOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFilterOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ VdFilterOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: VdFilterOptionDirective, selector: "[vd-filter-option]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdFilterOptionDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ VdFilterOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFilterOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ VdFilterOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdFilterOptionDirective, selector: "[vd-filter-option]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFilterOptionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-filter-option]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -227,8 +227,8 @@ export class FilterSelectComponent {
      */
     registerOnTouched(fn) { this.onTouched = fn; }
 }
-/** @nocollapse */ /** @nocollapse */ FilterSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterSelectComponent, deps: [{ token: i0.Injector }, { token: i1.MatTable }, { token: i2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ FilterSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: FilterSelectComponent, selector: "mat-header-cell[filter-select],[mat-header-cell][filter-select]", inputs: { endpoint: "endpoint", params: "params", projection: "projection", sortBy: "sortBy", sorted: "sorted", enum: "enum", key: "key", text: "text", prefix: "prefix", multiple: "multiple", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", field: "field", placeholder: "placeholder", cache: "cache" }, providers: [
+/** @nocollapse */ /** @nocollapse */ FilterSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterSelectComponent, deps: [{ token: i0.Injector }, { token: i1.MatTable }, { token: i2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: FilterSelectComponent, selector: "mat-header-cell[filter-select],[mat-header-cell][filter-select]", inputs: { endpoint: "endpoint", params: "params", projection: "projection", sortBy: "sortBy", sorted: "sorted", enum: "enum", key: "key", text: "text", prefix: "prefix", multiple: "multiple", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", field: "field", placeholder: "placeholder", cache: "cache" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => FilterSelectComponent)),
@@ -247,7 +247,7 @@ export class FilterSelectComponent {
 				</ng-template>
 			</mat-select>
 		</mat-form-field>`, isInline: true, styles: [".vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:11px 16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: FilterSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mat-header-cell[filter-select],[mat-header-cell][filter-select]',

package/esm2020/lib/table/directives/data-source-filter.directive.mjs

@@ -30,9 +30,9 @@ export class DataSourceFilterDirective {
         });
     }
 }
-/** @nocollapse */ /** @nocollapse */ DataSourceFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ DataSourceFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.3", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ DataSourceFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ DataSourceFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dataSourceFilter]'

package/esm2020/lib/table/paginator-intl.mjs

@@ -36,9 +36,9 @@ export class PaginatorIntl extends MatPaginatorIntl {
         };
     }
 }
-/** @nocollapse */ /** @nocollapse */ PaginatorIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ PaginatorIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PaginatorIntl });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: PaginatorIntl, decorators: [{
+/** @nocollapse */ /** @nocollapse */ PaginatorIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ PaginatorIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: PaginatorIntl });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: PaginatorIntl, decorators: [{
             type: Injectable
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdG9yLWludGwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jZGsvc3JjL2xpYi90YWJsZS9wYWdpbmF0b3ItaW50bC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOztBQUUvRDs7O0dBR0c7QUFFSCxNQUFNLE9BQU8sYUFBYyxTQUFRLGdCQUFnQjtJQURuRDs7UUFFQzs7V0FFRztRQUNILHNCQUFpQixHQUFHLEVBQUUsQ0FBQztRQUV2Qjs7V0FFRztRQUNILGtCQUFhLEdBQUcsRUFBRSxDQUFDO1FBRW5COztXQUVHO1FBQ0gsc0JBQWlCLEdBQUcsRUFBRSxDQUFDO1FBRXZCOzs7V0FHRztRQUNILGtCQUFhLEdBQUcsQ0FBQyxJQUFZLEVBQUUsUUFBZ0IsRUFBRSxNQUFjLEVBQUUsRUFBRTtZQUNsRSxJQUFJLE1BQU0sSUFBSSxDQUFDLElBQUksUUFBUSxJQUFJLENBQUMsRUFBRTtnQkFDakMsT0FBTyxPQUFPLE1BQU0sRUFBRSxDQUFDO2FBQ3ZCO1lBRUQsTUFBTSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLENBQUMsQ0FBQyxDQUFDO1lBQzdCLE1BQU0sVUFBVSxHQUFHLElBQUksR0FBRyxRQUFRLENBQUM7WUFFbkMsNkZBQTZGO1lBQzdGLE1BQU0sUUFBUSxHQUFHLFVBQVUsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsVUFBVSxHQUFHLFFBQVEsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQztZQUV2RyxPQUFPLEdBQUcsVUFBVSxHQUFHLENBQUMsTUFBTSxRQUFRLE1BQU0sTUFBTSxFQUFFLENBQUM7UUFDdEQsQ0FBQyxDQUFBO0tBQ0Q7O2dKQWpDWSxhQUFhO29KQUFiLGFBQWE7MkZBQWIsYUFBYTtrQkFEekIsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWF0UGFnaW5hdG9ySW50bCB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3BhZ2luYXRvcic7XHJcblxyXG4vKipcclxuICogVG8gbW9kaWZ5IHRoZSBsYWJlbHMgYW5kIHRleHQgZGlzcGxheWVkLCBjcmVhdGUgYSBuZXcgaW5zdGFuY2Ugb2YgTWRQYWdpbmF0b3JJbnRsIGFuZFxyXG4gKiBpbmNsdWRlIGl0IGluIGEgY3VzdG9tIHByb3ZpZGVyXHJcbiAqL1xyXG5ASW5qZWN0YWJsZSgpXHJcbmV4cG9ydCBjbGFzcyBQYWdpbmF0b3JJbnRsIGV4dGVuZHMgTWF0UGFnaW5hdG9ySW50bCB7XHJcblx0LyoqIFxyXG5cdCAqIEEgbGFiZWwgZm9yIHRoZSBwYWdlIHNpemUgc2VsZWN0b3JcclxuXHQgKi9cclxuXHRpdGVtc1BlclBhZ2VMYWJlbCA9ICcnO1xyXG5cclxuXHQvKiogXHJcblx0ICogQSBsYWJlbCBmb3IgdGhlIGJ1dHRvbiB0aGF0IGluY3JlbWVudHMgdGhlIGN1cnJlbnQgcGFnZVxyXG5cdCAqL1xyXG5cdG5leHRQYWdlTGFiZWwgPSAnJztcclxuXHJcblx0LyoqIFxyXG5cdCAqIEEgbGFiZWwgZm9yIHRoZSBidXR0b24gdGhhdCBkZWNyZW1lbnRzIHRoZSBjdXJyZW50IHBhZ2VcclxuXHQgKi9cclxuXHRwcmV2aW91c1BhZ2VMYWJlbCA9ICcnO1xyXG5cclxuXHQvKiogXHJcblx0ICogQSBsYWJlbCBmb3IgdGhlIHJhbmdlIG9mIGl0ZW1zIHdpdGhpbiB0aGUgY3VycmVudCBwYWdlIFxyXG5cdCAqIGFuZCB0aGUgbGVuZ3RoIG9mIHRoZSB3aG9sZSBsaXN0XHJcblx0ICovXHJcblx0Z2V0UmFuZ2VMYWJlbCA9IChwYWdlOiBudW1iZXIsIHBhZ2VTaXplOiBudW1iZXIsIGxlbmd0aDogbnVtYmVyKSA9PiB7XHJcblx0XHRpZiAobGVuZ3RoID09IDAgfHwgcGFnZVNpemUgPT0gMCkge1xyXG5cdFx0XHRyZXR1cm4gYDAgLyAke2xlbmd0aH1gO1xyXG5cdFx0fVxyXG5cclxuXHRcdGxlbmd0aCA9IE1hdGgubWF4KGxlbmd0aCwgMCk7XHJcblx0XHRjb25zdCBzdGFydEluZGV4ID0gcGFnZSAqIHBhZ2VTaXplO1xyXG5cclxuXHRcdC8qIElmIHRoZSBzdGFydCBpbmRleCBleGNlZWRzIHRoZSBsaXN0IGxlbmd0aCwgZG8gbm90IHRyeSBhbmQgZml4IHRoZSBlbmQgaW5kZXggdG8gdGhlIGVuZCAqL1xyXG5cdFx0Y29uc3QgZW5kSW5kZXggPSBzdGFydEluZGV4IDwgbGVuZ3RoID8gTWF0aC5taW4oc3RhcnRJbmRleCArIHBhZ2VTaXplLCBsZW5ndGgpIDogc3RhcnRJbmRleCArIHBhZ2VTaXplO1xyXG5cclxuXHRcdHJldHVybiBgJHtzdGFydEluZGV4ICsgMX0gLSAke2VuZEluZGV4fSAvICR7bGVuZ3RofWA7XHJcblx0fVxyXG59Il19

package/esm2020/lib/table/table.module.mjs

@@ -51,8 +51,8 @@ const DECLARATIONS = [
 ];
 export class VdTableModule {
 }
-/** @nocollapse */ /** @nocollapse */ VdTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ VdTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdTableModule, declarations: [FilterInputComponent,
+/** @nocollapse */ /** @nocollapse */ VdTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ VdTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdTableModule, declarations: [FilterInputComponent,
         FilterSelectComponent,
         FilterClearComponent,
         FilterDateComponent,
@@ -83,7 +83,7 @@ export class VdTableModule {
         DataSourceFilterDirective,
         VdFilterOptionDirective,
         VdDynamicTableComponent] });
-/** @nocollapse */ /** @nocollapse */ VdTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdTableModule, providers: [
+/** @nocollapse */ /** @nocollapse */ VdTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdTableModule, providers: [
         { provide: MatPaginatorIntl, useClass: PaginatorIntl }
     ], imports: [[
             CommonModule,
@@ -106,7 +106,7 @@ export class VdTableModule {
             MatPaginatorModule,
             MatTooltipModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: VdTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [