@messaia/cdk 13.3.2-rc05 → 13.3.2

package/fesm2020/messaia-cdk.mjs

@@ -31,7 +31,7 @@ import { MatInput, MatInputModule } from '@angular/material/input';
 import { MatStepper } from '@angular/material/stepper';
 import * as i15 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
-import * as i5 from '@angular/material/sort';
+import * as i5$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { saveAs } from 'file-saver';
 import { trigger, state, style, transition, animate, AUTO_STYLE, group, query, animateChild } from '@angular/animations';
@@ -41,16 +41,16 @@ import 'reflect-metadata';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i2$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i4$3 from '@angular/material/checkbox';
+import * as i4$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i6 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i4$1 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/cdk/table';
 import { DataSource, CdkTableModule } from '@angular/cdk/table';
 import { TemplatePortalDirective, CdkPortal } from '@angular/cdk/portal';
-import * as i4$2 from '@angular/material/select';
+import * as i4$1 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i2$1 from '@angular/material/core';
 import { mixinErrorState, MatNativeDateModule } from '@angular/material/core';
@@ -60,23 +60,23 @@ import * as i19 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i7$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4$4 from '@angular/material/chips';
+import * as i4$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i6$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3$2 from '@angular/cdk/a11y';
-import * as i3$4 from '@angular/cdk/scrolling';
+import * as i8 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i2$4 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i1$8 from '@angular/material/list';
+import * as i1$7 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i2$5 from '@angular/material/sidenav';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$7 from '@angular/material/toolbar';
+import * as i3$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i3$3 from '@angular/material/divider';
-import * as i1$9 from '@angular/cdk/bidi';
+import * as i1$8 from '@angular/cdk/bidi';
 
 class DisableControlDirective {
     /**
@@ -2424,7 +2424,7 @@ class GenericFormBaseComponent extends BaseComponent {
         /**
          * Toolbar menu items
          */
-        this.toolbarMenus = [];
+        this.toolbarMenuItems = [];
         /**
          * panelId: string
          */
@@ -2710,7 +2710,7 @@ class GenericFormBaseComponent extends BaseComponent {
     addToolbarMenuItems() {
         /* Add 'Delete' menu item */
         if (this.deletable) {
-            this.toolbarMenus.push({
+            this.toolbarMenuItems.push({
                 title: $localize `:@@delete:Delete`,
                 icon: 'delete_forever',
                 iconClass: 'tc-orange-800',
@@ -3246,7 +3246,7 @@ class FilterInputComponent {
 			<button type="button" mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="clearSearch()">
 				<mat-icon>close</mat-icon>
 			</button>
-		</mat-form-field>`, isInline: true, components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
+		</mat-form-field>`, isInline: true, components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -3515,7 +3515,7 @@ class FilterSelectComponent {
 					</mat-option>
 				</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: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+		</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: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -3705,7 +3705,7 @@ class FilterDateComponent {
 				<mat-icon>close</mat-icon>
 			</button>
 			<mat-datepicker #picker></mat-datepicker>
-		</mat-form-field>`, isInline: true, components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.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: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
+		</mat-form-field>`, isInline: true, components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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: i7$1.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: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterDateComponent, decorators: [{
             type: Component,
             args: [{
@@ -3969,7 +3969,7 @@ class FilterClearComponent {
 /** @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: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+		</button>`, isInline: true, components: [{ type: i3.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: FilterClearComponent, decorators: [{
             type: Component,
             args: [{
@@ -4067,7 +4067,7 @@ class VdDynamicTableComponent {
         /**
          * Table row menu items
          */
-        this.actionMenus = [];
+        this.rowMenuItems = [];
         /**
          * Columns to exclude
          */
@@ -4136,13 +4136,13 @@ class VdDynamicTableComponent {
             var tableDefinition = getTableDefinition(new this.classType);
             if (tableDefinition) {
                 this.columns = [...tableDefinition.columns];
-                if (this.actionMenus?.length > 0) {
+                if (this.rowMenuItems?.length > 0) {
                     /* Check if the action column already exists */
                     var actionColmun = this._columns?.find(x => x.name == 'action');
                     /* If so, just add the menu items to it */
                     if (actionColmun != null) {
-                        actionColmun.actionMenus = [];
-                        this.actionMenus.forEach(y => actionColmun.actionMenus.unshift(y));
+                        actionColmun.rowMenuItems = [];
+                        this.rowMenuItems.forEach(y => actionColmun.rowMenuItems.unshift(y));
                     }
                     /* Otherwise add a new one */
                     else {
@@ -4151,7 +4151,7 @@ class VdDynamicTableComponent {
                             name: 'action',
                             type: TableColumnType.Action,
                             disabled: true,
-                            actionMenus: this.actionMenus
+                            rowMenuItems: this.rowMenuItems
                         }));
                     }
                 }
@@ -4171,8 +4171,8 @@ class VdDynamicTableComponent {
      * @param column
      * @returns
      */
-    hasVisibleActionMenus(row, column) {
-        return column?.actionMenus?.filter(x => !x.hide || !x.hide(row))?.length > 0;
+    hasVisibleRowMenuItems(row, column) {
+        return column?.rowMenuItems?.filter(x => !x.hide || !x.hide(row))?.length > 0;
     }
     /**
      * A function to to compute the identity of items in an iterable.
@@ -4260,7 +4260,7 @@ class VdDynamicTableComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdDynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: 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", excludedColumns: "excludedColumns" }, outputs: { rowClick: "rowClick" }, host: { listeners: { "document:contextmenu": "handleContextMenuEvent($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\">\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) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></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<ng-container *ngIf=\"column.actionMenus?.length > 0\">\r\n\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" *ngIf=\"!row.locked && hasVisibleActionMenus(row, column)\"></div>\r\n\t\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\t<mat-icon>more_vert</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<mat-menu x-position=\"before\" #menu=\"matMenu\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let menuItem of column.actionMenus\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!menuItem.subItems\">\r\n\t\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)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"menuItem.subItems\">\r\n\t\t\t\t\t\t\t\t<mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n\t\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\t<button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(row):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(row)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t\t\t<span>{{menuSubItem.title}}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</mat-menu>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\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)\" (contextmenu)=\"handleRowRightClick($event, 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$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4$3.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: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: FilterInputComponent, selector: "mat-header-cell[filter-input],[mat-header-cell][filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: 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: FilterDateComponent, selector: "mat-header-cell[filter-date],[mat-header-cell][filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: FilterClearComponent, selector: "mat-header-cell[filter-clear],[mat-header-cell][filter-clear]" }, { type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2.CdkCellDef, selector: "[cdkCellDef]" }, { type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i1$5.MatCellDef, selector: "[matCellDef]" }, { type: i2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "enum": EnumPipe, "date": i4.DatePipe }, animations: [
+/** @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", rowMenuItems: "rowMenuItems", excludedColumns: "excludedColumns" }, outputs: { rowClick: "rowClick" }, host: { listeners: { "document:contextmenu": "handleContextMenuEvent($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\">\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) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></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<ng-container *ngIf=\"column.rowMenuItems?.length > 0\">\r\n\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" *ngIf=\"!row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t<button type=\"button\" mat-icon-button [mat-menu-trigger-for]=\"menu\" [disabled]=\"row.locked || !hasVisibleRowMenuItems(row, column)\">\r\n\t\t\t\t\t\t<mat-icon>more_vert</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<mat-menu x-position=\"before\" #menu=\"matMenu\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let menuItem of column.rowMenuItems\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!menuItem.subItems\">\r\n\t\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)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"menuItem.subItems\">\r\n\t\t\t\t\t\t\t\t<mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n\t\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\t<button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(row):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(row)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t\t\t<span>{{menuSubItem.title}}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</mat-menu>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\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)\" (contextmenu)=\"handleRowRightClick($event, 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$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4$2.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$1.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: i3.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: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: FilterInputComponent, selector: "mat-header-cell[filter-input],[mat-header-cell][filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: 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: FilterDateComponent, selector: "mat-header-cell[filter-date],[mat-header-cell][filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: FilterClearComponent, selector: "mat-header-cell[filter-clear],[mat-header-cell][filter-clear]" }, { type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i15.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2.CdkCellDef, selector: "[cdkCellDef]" }, { type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i1$5.MatCellDef, selector: "[matCellDef]" }, { type: i2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "enum": EnumPipe, "date": i4.DatePipe }, animations: [
         trigger('detailExpand', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'initial' })),
@@ -4275,7 +4275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                             state('expanded', style({ display: 'initial' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<div class=\"loading-progress\">\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) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></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<ng-container *ngIf=\"column.actionMenus?.length > 0\">\r\n\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" *ngIf=\"!row.locked && hasVisibleActionMenus(row, column)\"></div>\r\n\t\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\t<mat-icon>more_vert</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<mat-menu x-position=\"before\" #menu=\"matMenu\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let menuItem of column.actionMenus\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!menuItem.subItems\">\r\n\t\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)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"menuItem.subItems\">\r\n\t\t\t\t\t\t\t\t<mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n\t\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\t<button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(row):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(row)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t\t\t<span>{{menuSubItem.title}}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</mat-menu>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\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)\" (contextmenu)=\"handleRowRightClick($event, 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"] }]
+                    ], 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) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></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<ng-container *ngIf=\"column.rowMenuItems?.length > 0\">\r\n\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" *ngIf=\"!row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t<button type=\"button\" mat-icon-button [mat-menu-trigger-for]=\"menu\" [disabled]=\"row.locked || !hasVisibleRowMenuItems(row, column)\">\r\n\t\t\t\t\t\t<mat-icon>more_vert</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<mat-menu x-position=\"before\" #menu=\"matMenu\">\r\n\t\t\t\t\t\t<ng-container *ngFor=\"let menuItem of column.rowMenuItems\">\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!menuItem.subItems\">\r\n\t\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)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"menuItem.subItems\">\r\n\t\t\t\t\t\t\t\t<mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n\t\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\t<button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(row):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(row)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t\t\t<span>{{menuSubItem.title}}</span>\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t</mat-menu>\r\n\t\t\t\t\t\t\t\t<button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(row)\" [disabled]=\"menuItem.disable && menuItem.disable(row)\">\r\n\t\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n\t\t\t\t\t\t\t\t\t<span>{{menuItem.title}}</span>\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</mat-menu>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\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)\" (contextmenu)=\"handleRowRightClick($event, 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"] }]
         }], ctorParameters: function () { return [{ type: DynamicBuilder }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -4322,7 +4322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 args: [MatPaginator]
             }], columns: [{
                 type: Input
-            }], actionMenus: [{
+            }], rowMenuItems: [{
                 type: Input
             }], excludedColumns: [{
                 type: Input
@@ -4412,11 +4412,11 @@ class GenericListComponent extends BaseComponent {
         /**
          * Toolbar menu items
          */
-        this.toolbarMenus = [];
+        this.toolbarMenuItems = [];
         /**
          * Table row menu items
          */
-        this.actionMenus = [];
+        this.rowMenuItems = [];
     }
     /**
      * Lifecycle hook that is called after data-bound properties
@@ -4483,8 +4483,8 @@ class GenericListComponent extends BaseComponent {
             var actionColmun = this.columns?.find(x => x.name == 'action');
             /* If so, just add the menu items to it */
             if (actionColmun != null) {
-                actionColmun.actionMenus = actionColmun.actionMenus || [];
-                this.actionMenus.forEach(y => actionColmun.actionMenus.unshift(y));
+                actionColmun.rowMenuItems = actionColmun.rowMenuItems || [];
+                this.rowMenuItems.forEach(y => actionColmun.rowMenuItems.unshift(y));
             }
             /* Otherwise add a new one */
             else {
@@ -4493,7 +4493,7 @@ class GenericListComponent extends BaseComponent {
                     name: 'action',
                     type: TableColumnType.Action,
                     disabled: true,
-                    actionMenus: this.actionMenus
+                    rowMenuItems: this.rowMenuItems
                 }));
             }
         }
@@ -4697,7 +4697,7 @@ class GenericListComponent extends BaseComponent {
     addToolbarMenuItems() {
         /* Add 'Delete selected' menu item */
         if (this.deletable) {
-            this.toolbarMenus.push({
+            this.toolbarMenuItems.push({
                 title: $localize `:@@deleteSelected:Delete selected`,
                 icon: 'delete_forever',
                 iconClass: 'tc-orange-800',
@@ -4721,7 +4721,7 @@ class GenericListComponent extends BaseComponent {
         }
         /* Add duplicate menu */
         if (this.duplicable) {
-            this.actionMenus.unshift({
+            this.rowMenuItems.unshift({
                 title: $localize `:@@duplicate:Duplicate`,
                 icon: 'file_copy',
                 event: (row) => this.duplicate(row),
@@ -4730,7 +4730,7 @@ class GenericListComponent extends BaseComponent {
         }
         /* Add download menu */
         if (this.downloadable) {
-            this.actionMenus.unshift({
+            this.rowMenuItems.unshift({
                 title: $localize `:@@download:Download`,
                 icon: 'file_download',
                 event: (row) => this.download(row),
@@ -4739,7 +4739,7 @@ class GenericListComponent extends BaseComponent {
         }
         /* Add delete menu */
         if (this.deletable) {
-            this.actionMenus.unshift({
+            this.rowMenuItems.unshift({
                 title: $localize `:@@delete:Delete`,
                 icon: 'delete_forever',
                 iconClass: 'tc-orange-800',
@@ -4749,7 +4749,7 @@ class GenericListComponent extends BaseComponent {
         }
         /* Add edit menu */
         if (this.editable) {
-            this.actionMenus.unshift({
+            this.rowMenuItems.unshift({
                 title: $localize `:@@edit:Edit`,
                 icon: 'edit_note',
                 iconClass: 'tc-blue-400',
@@ -12550,7 +12550,7 @@ class VdChipsComponent extends AbstractMatFormField {
 /** @nocollapse */ /** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 /** @nocollapse */ /** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", path: "path", key: "key", searchField: "searchField", searchFields: "searchFields", termMinlength: "termMinlength", limit: "limit", debounce: "debounce", default: "default" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [
         { provide: MatFormFieldControl, useExisting: VdChipsComponent }
-    ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "chipInput", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"cleared.observers.length?cleared.emit(value):clear()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-chip-launch\" [ngClass]=\"{'removable': !readonly}\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">launch</mat-icon>\r\n\t\t\t<mat-icon matChipRemove *ngIf=\"!readonly\">backspace</mat-icon>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [formControl]=\"autoCompleteChipList\" #chipInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"loading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event, chipInput)\">\r\n\t<ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ item }}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [".mat-chip{display:flex;flex-direction:row;width:100%;padding:4px 5px}.mat-chip.mat-chip-disabled{color:#000000a3}.mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-chip .mat-icon{cursor:pointer;color:initial;top:calc(50% - 13px);position:absolute;right:8px}.mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}.mat-chip .vd-chip-launch.removable{right:34px}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i4$4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i7$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$4.MatChipRemove, selector: "[matChipRemove]" }, { 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: i4$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i7$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "chipInput", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\">\r\n\t<!-- #region Chips -->\r\n\t<ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"chips\">\r\n\t\t<mat-basic-chip [selectable]=\"!readonly\" [removable]=\"!readonly\" (removed)=\"cleared.observers.length?cleared.emit(value):clear()\" disableRipple>\r\n\t\t\t<span class=\"vd-chip-content\">\r\n\t\t\t\t<span *ngIf=\"!chipTemplate?.templateRef\">\r\n\t\t\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ chip }}</span>\r\n\t\t\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-template *ngIf=\"chipTemplate?.templateRef\" [ngTemplateOutlet]=\"chipTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\r\n\t\t\t</span>\r\n\t\t\t<mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-chip-launch\" [ngClass]=\"{'removable': !readonly}\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">launch</mat-icon>\r\n\t\t\t<mat-icon matChipRemove *ngIf=\"!readonly\">backspace</mat-icon>\r\n\t\t</mat-basic-chip>\r\n\t</ng-template>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Search box -->\r\n\t<input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [formControl]=\"autoCompleteChipList\" #chipInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"loading\"></mat-spinner>\r\n\t<!-- #endregion -->\r\n</mat-chip-list>\r\n\r\n<!-- #region Autocomplete -->\r\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event, chipInput)\">\r\n\t<ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n\t\t<mat-option [value]=\"item\">\r\n\t\t\t<span *ngIf=\"!autocompleteOptionTemplate?.templateRef\">{{ item }}</span>\r\n\t\t\t<ng-template *ngIf=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\r\n\t\t</mat-option>\r\n\t</ng-template>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [".mat-chip{display:flex;flex-direction:row;width:100%;padding:4px 5px}.mat-chip.mat-chip-disabled{color:#000000a3}.mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-chip .mat-icon{cursor:pointer;color:initial;top:calc(50% - 13px);position:absolute;right:8px}.mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}.mat-chip .vd-chip-launch.removable{right:34px}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i4$3.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i7$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { 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: i4$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i7$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-chips', providers: [
@@ -12980,7 +12980,7 @@ class VdFileInputComponent {
 					<mat-icon>close</mat-icon>
 				</button>
 			</div>
-		</div>`, isInline: true, styles: [".btn-suffix .mat-button{position:absolute;right:0;top:0}\n"], components: [{ type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
+		</div>`, isInline: true, styles: [".btn-suffix .mat-button{position:absolute;right:0;top:0}\n"], components: [{ type: i3.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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFileInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -13408,7 +13408,7 @@ class VdSelectComponent extends AbstractMatFormField {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [disabled]=\"disabled\" flex>\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{select.selected?select.selected['viewValue']:''}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n</mat-select>\r\n\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+/** @nocollapse */ /** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [disabled]=\"disabled\" flex>\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{select.selected?select.selected['viewValue']:''}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n</mat-select>\r\n\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], components: [{ type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [disabled]=\"disabled\" flex>\r\n    <input #filterInput *ngIf=\"filterable\" type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event.target.value)\">\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{select.selected?select.selected['viewValue']:''}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n</mat-select>\r\n\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;color:#000000a3;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
@@ -13598,7 +13598,7 @@ class VdGenericFormComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text input -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text area -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Enum -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdSelect -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdChips -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Select -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Autocomplete -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Date -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Checkbox -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Editor -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Code -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region File -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Custom -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "key", "searchField", "searchFields", "termMinlength", "limit", "debounce", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i7$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i7$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i4$3.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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i7$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
+/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text input -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text area -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Enum -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdSelect -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdChips -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Select -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Autocomplete -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Date -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Checkbox -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Editor -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Code -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region File -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Custom -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "key", "searchField", "searchFields", "termMinlength", "limit", "debounce", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i7$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i7$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i4$2.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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i7$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text input -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Text area -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Enum -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdSelect -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" flex></vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region VdChips -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Select -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Autocomplete -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" autocomplete=\"false\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Date -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Checkbox -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Editor -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Code -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region File -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n\r\n            <!-- #region Custom -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value)\">\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
@@ -14234,10 +14234,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
+class VdMenuComponent {
+    constructor() {
+        /**
+         * Menu items
+         */
+        this.items = [];
+        /**
+         * This will add the classes only when the url matches the link exactly.
+         */
+        this.activeExact = false;
+        /**
+        * click?: function
+        * Event emitted when a menu item is clicked.
+        */
+        this.onClick = new EventEmitter();
+    }
+    /**
+     * Event emitted when a meni item is clicked.
+     */
+    itemClicked($event) {
+        if ($event instanceof EventEmitter) {
+            $event.emit();
+        }
+        else {
+            this.onClick.emit($event);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ VdMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" mat-list-icon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\">{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], components: [{ type: i1$7.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i1$7.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$7.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i1$7.MatListAvatarCssMatStyler, selector: "[mat-list-avatar], [matListAvatar]" }, { type: i2$1.MatLine, selector: "[mat-line], [matLine]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" mat-list-icon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\">{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], activeExact: [{
+                type: Input
+            }], avatar: [{
+                type: Input
+            }], onClick: [{
+                type: Output,
+                args: ['click']
+            }] } });
+
+class MenuService extends GenericService {
+    /**
+     * Constructor
+     * @param _http
+     */
+    constructor() {
+        super('menu');
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+var MenuScope;
+(function (MenuScope) {
+    MenuScope[MenuScope["Site"] = 0] = "Site";
+    MenuScope[MenuScope["Admin"] = 1] = "Admin";
+})(MenuScope || (MenuScope = {}));
+
+class Menu {
+}
+
+class MenuItem {
+}
+
+class MenuItemService extends GenericService {
+    /**
+     * Constructor
+     * @param _http
+     */
+    constructor() {
+        super('menuitem');
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MenuItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ MenuItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuItemService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuItemService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * Menu resolve service
+ */
+class MenuResolve {
+    /**
+     * Constructor
+     * @param menuService
+     */
+    constructor(menuService) {
+        this.menuService = menuService;
+    }
+    /**
+     * Resolves menu items
+     * @param route
+     */
+    resolve(route) {
+        return this.menuService.getList(route.data || {}, null, { cache: 'yes' });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ MenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuResolve });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuResolve, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: MenuService }]; } });
+/**
+ * Submenu resolve service
+ */
+class SubMenuResolve {
+    /**
+     * Resolves menu items
+     * @param route
+     * @param state
+     */
+    resolve(route, state) {
+        /* Check menu items in route data */
+        if (route.parent.data.menu) {
+            /* Get Admin menu */
+            var adminMenu = route.parent.data.menu[0];
+            if (adminMenu && adminMenu.items) {
+                return adminMenu.items.filter(x => x.path == `/${route.url[0].path}`)[0];
+            }
+        }
+        return [];
+    }
+}
+/** @nocollapse */ /** @nocollapse */ SubMenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SubMenuResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ SubMenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SubMenuResolve });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SubMenuResolve, decorators: [{
+            type: Injectable
+        }] });
+
+const DECLARATIONS$2 = [
+    VdMenuComponent
+];
+class VdMenuModule {
+}
+/** @nocollapse */ /** @nocollapse */ VdMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ VdMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, declarations: [VdMenuComponent], imports: [CommonModule,
+        RouterModule,
+        MatIconModule,
+        MatListModule], exports: [VdMenuComponent] });
+/** @nocollapse */ /** @nocollapse */ VdMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, providers: [MenuService], imports: [[
+            CommonModule,
+            RouterModule,
+            MatIconModule,
+            MatListModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        MatIconModule,
+                        MatListModule
+                    ],
+                    declarations: [
+                        DECLARATIONS$2
+                    ],
+                    exports: [
+                        DECLARATIONS$2
+                    ],
+                    providers: [MenuService]
+                }]
+        }] });
+
 class VdFormToolbarMenuComponent {
 }
 /** @nocollapse */ /** @nocollapse */ VdFormToolbarMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormToolbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdFormToolbarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdFormToolbarMenuComponent, selector: "vd-form-toolbar-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button [mat-menu-trigger-for]=\"toolbarMenu\" *ngIf=\"menuItems?.length\">\r\n        <mat-icon>more_vert</mat-icon>\r\n    </button>\r\n    <mat-menu x-position=\"before\" #toolbarMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let menuItem of menuItems\">\r\n            <ng-container *ngIf=\"!menuItem.subItems\">\r\n                <button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event():null\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"menuItem.subItems\">\r\n                <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                    <ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n                        <button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event():null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide()\" [disabled]=\"menuSubItem.disable && menuSubItem.disable()\">\r\n                            <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                            <span>{{menuSubItem.title}}</span>\r\n                        </button>\r\n                    </ng-container>\r\n                </mat-menu>\r\n                <button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </mat-menu>\r\n</div>", components: [{ type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ /** @nocollapse */ VdFormToolbarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdFormToolbarMenuComponent, selector: "vd-form-toolbar-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button [mat-menu-trigger-for]=\"toolbarMenu\" *ngIf=\"menuItems?.length\">\r\n        <mat-icon>more_vert</mat-icon>\r\n    </button>\r\n    <mat-menu x-position=\"before\" #toolbarMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let menuItem of menuItems\">\r\n            <ng-container *ngIf=\"!menuItem.subItems\">\r\n                <button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event():null\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"menuItem.subItems\">\r\n                <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                    <ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n                        <button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event():null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide()\" [disabled]=\"menuSubItem.disable && menuSubItem.disable()\">\r\n                            <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                            <span>{{menuSubItem.title}}</span>\r\n                        </button>\r\n                    </ng-container>\r\n                </mat-menu>\r\n                <button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </mat-menu>\r\n</div>", components: [{ type: i3.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: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormToolbarMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-form-toolbar-menu', template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button [mat-menu-trigger-for]=\"toolbarMenu\" *ngIf=\"menuItems?.length\">\r\n        <mat-icon>more_vert</mat-icon>\r\n    </button>\r\n    <mat-menu x-position=\"before\" #toolbarMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let menuItem of menuItems\">\r\n            <ng-container *ngIf=\"!menuItem.subItems\">\r\n                <button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event():null\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"menuItem.subItems\">\r\n                <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                    <ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n                        <button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event():null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide()\" [disabled]=\"menuSubItem.disable && menuSubItem.disable()\">\r\n                            <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                            <span>{{menuSubItem.title}}</span>\r\n                        </button>\r\n                    </ng-container>\r\n                </mat-menu>\r\n                <button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </mat-menu>\r\n</div>" }]
@@ -14254,7 +14428,7 @@ class VdFormToolbarComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdFormToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdFormToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdFormToolbarComponent, selector: "vd-form-toolbar", inputs: { subtitle: "subtitle", menuItems: "menuItems", loading: "loading" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button *ngIf=\"reload?.observed\" (click)=\"reload.emit($event)\">\r\n        <mat-icon *ngIf=\"!loading\">sync</mat-icon>\r\n        <mat-progress-spinner *ngIf=\"loading\" color=\"accent\" class=\"mat-icon\" diameter=\"24\" mode=\"indeterminate\"> </mat-progress-spinner>\r\n    </button>\r\n    <vd-form-toolbar-menu [menuItems]=\"menuItems\"></vd-form-toolbar-menu>\r\n</div>", components: [{ type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: VdFormToolbarMenuComponent, selector: "vd-form-toolbar-menu", inputs: ["menuItems"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ /** @nocollapse */ VdFormToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdFormToolbarComponent, selector: "vd-form-toolbar", inputs: { subtitle: "subtitle", menuItems: "menuItems", loading: "loading" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button *ngIf=\"reload?.observed\" (click)=\"reload.emit($event)\">\r\n        <mat-icon *ngIf=\"!loading\">sync</mat-icon>\r\n        <mat-progress-spinner *ngIf=\"loading\" color=\"accent\" class=\"mat-icon\" diameter=\"24\" mode=\"indeterminate\"> </mat-progress-spinner>\r\n    </button>\r\n    <vd-form-toolbar-menu [menuItems]=\"menuItems\"></vd-form-toolbar-menu>\r\n</div>", components: [{ type: i3.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$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: VdFormToolbarMenuComponent, selector: "vd-form-toolbar-menu", inputs: ["menuItems"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdFormToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-form-toolbar', template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button *ngIf=\"reload?.observed\" (click)=\"reload.emit($event)\">\r\n        <mat-icon *ngIf=\"!loading\">sync</mat-icon>\r\n        <mat-progress-spinner *ngIf=\"loading\" color=\"accent\" class=\"mat-icon\" diameter=\"24\" mode=\"indeterminate\"> </mat-progress-spinner>\r\n    </button>\r\n    <vd-form-toolbar-menu [menuItems]=\"menuItems\"></vd-form-toolbar-menu>\r\n</div>" }]
@@ -14287,7 +14461,7 @@ class VdLayoutCardOverComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], components: [{ type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }] });
+/** @nocollapse */ /** @nocollapse */ VdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], components: [{ type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i2$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutCardOverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-card-over', template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"] }]
@@ -14343,6 +14517,11 @@ class VdLayoutManageListComponent {
      */
     constructor(media) {
         this.media = media;
+        /**
+         * closable: boolean
+         * If false, hide close button
+         */
+        this.closable = true;
         /**
          * mode?: 'side', 'push' or 'over'
          *
@@ -14393,9 +14572,7 @@ class VdLayoutManageListComponent {
      * Checks if `ESC` should close the sidenav
      * Should only close it for `push` and `over` modes
      */
-    get disableClose() {
-        return this.mode === 'side';
-    }
+    get disableClose() { return this.mode === 'side'; }
     /**
      * Lifecycle hook that is called after data-bound properties
      * of a directive are initialized.
@@ -14414,48 +14591,42 @@ class VdLayoutManageListComponent {
     /**
      * Proxy toggle method to access sidenav from outside (from vd-layout template).
      */
-    toggle() {
-        return this.sidenav.toggle(!this.sidenav.opened);
-    }
+    toggle() { return this.sidenav.toggle(!this.sidenav.opened); }
     /**
      * Proxy open method to access sidenav from outside (from vd-layout template).
      */
-    open() {
-        return this.sidenav.open();
-    }
+    open() { return this.sidenav.open(); }
     /**
      * Proxy close method to access sidenav from outside (from vd-layout template).
      */
-    close() {
-        return this.sidenav.close();
-    }
+    close() { return this.sidenav.close(); }
 }
 /** @nocollapse */ /** @nocollapse */ VdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t [style.min-width]=\"sidenavWidth\">\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t</div>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], components: [{ type: i2$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }], directives: [{ type: i3$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+/** @nocollapse */ /** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], components: [{ type: i2$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "avatar"], outputs: ["click"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-layout-manage-list', template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t [style.min-width]=\"sidenavWidth\">\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t</div>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
+            args: [{ selector: 'vd-layout-manage-list', template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
         }], ctorParameters: function () { return [{ type: VdMediaService }]; }, propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: [MatSidenav, { static: true }]
+            }], title: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], menuItems: [{
+                type: Input
             }], mode: [{
-                type: Input,
-                args: ['mode']
+                type: Input
             }], sideGt: [{
-                type: Input,
-                args: ['sideGt']
+                type: Input
             }], opened: [{
-                type: Input,
-                args: ['opened']
+                type: Input
             }], openedGt: [{
-                type: Input,
-                args: ['openedGt']
+                type: Input
             }], sidenavWidth: [{
-                type: Input,
-                args: ['sidenavWidth']
+                type: Input
             }], sidenavGtXsWidth: [{
-                type: Input,
-                args: ['sidenavGtXsWidth']
+                type: Input
             }] } });
 
 class LayoutToggle {
@@ -14528,12 +14699,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
             }] } });
 
 class VdLayoutManageListToggleDirective extends LayoutToggle {
+    /**
+     * Constructor
+     * @param layout
+     * @param renderer
+     * @param elementRef
+     */
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
     }
+    /**
+     * Sets vdLayoutManageListToggle
+     */
     set vdLayoutManageListToggle(vdLayoutManageListToggle) {
         this.disabled = !(vdLayoutManageListToggle === '' || vdLayoutManageListToggle);
     }
+    /**
+     * Opens the list
+     */
     onClick() {
         this._layout.toggle();
     }
@@ -14542,23 +14725,32 @@ class VdLayoutManageListToggleDirective extends LayoutToggle {
 /** @nocollapse */ /** @nocollapse */ VdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListToggleDirective, selector: "[vdLayoutManageListToggle]", inputs: { vdLayoutManageListToggle: "vdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListToggleDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[vdLayoutManageListToggle]',
-                }]
+            args: [{ selector: '[vdLayoutManageListToggle]' }]
         }], ctorParameters: function () { return [{ type: VdLayoutManageListComponent, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => VdLayoutManageListComponent)]
                 }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { vdLayoutManageListToggle: [{
-                type: Input,
-                args: ['vdLayoutManageListToggle']
+                type: Input
             }] } });
 class VdLayoutManageListCloseDirective extends LayoutToggle {
+    /**
+     * Constructor
+     * @param layout
+     * @param renderer
+     * @param elementRef
+     */
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
     }
+    /**
+     * Sets vdLayoutManageListClose
+     */
     set vdLayoutManageListClose(vdLayoutManageListClose) {
         this.disabled = !(vdLayoutManageListClose === '' || vdLayoutManageListClose);
     }
+    /**
+     * Opens the list
+     */
     onClick() {
         this._layout.close();
     }
@@ -14567,23 +14759,32 @@ class VdLayoutManageListCloseDirective extends LayoutToggle {
 /** @nocollapse */ /** @nocollapse */ VdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListCloseDirective, selector: "[vdLayoutManageListClose]", inputs: { vdLayoutManageListClose: "vdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListCloseDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[vdLayoutManageListClose]',
-                }]
+            args: [{ selector: '[vdLayoutManageListClose]' }]
         }], ctorParameters: function () { return [{ type: VdLayoutManageListComponent, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => VdLayoutManageListComponent)]
                 }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { vdLayoutManageListClose: [{
-                type: Input,
-                args: ['vdLayoutManageListClose']
+                type: Input
             }] } });
 class VdLayoutManageListOpenDirective extends LayoutToggle {
+    /**
+     * Constructor
+     * @param layout
+     * @param renderer
+     * @param elementRef
+     */
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
     }
+    /**
+     * Sets vdLayoutManageListOpen
+     */
     set vdLayoutManageListOpen(vdLayoutManageListOpen) {
         this.disabled = !(vdLayoutManageListOpen === '' || vdLayoutManageListOpen);
     }
+    /**
+     * Opens the list
+     */
     onClick() {
         this._layout.open();
     }
@@ -14592,15 +14793,12 @@ class VdLayoutManageListOpenDirective extends LayoutToggle {
 /** @nocollapse */ /** @nocollapse */ VdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: { vdLayoutManageListOpen: "vdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutManageListOpenDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[vdLayoutManageListOpen]',
-                }]
+            args: [{ selector: '[vdLayoutManageListOpen]' }]
         }], ctorParameters: function () { return [{ type: VdLayoutManageListComponent, decorators: [{
                     type: Inject,
                     args: [forwardRef(() => VdLayoutManageListComponent)]
                 }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { vdLayoutManageListOpen: [{
-                type: Input,
-                args: ['vdLayoutManageListOpen']
+                type: Input
             }] } });
 
 class VdLayoutNavListComponent {
@@ -14681,7 +14879,7 @@ class VdLayoutNavListComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1$4.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavListComponent, selector: "vd-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n\t<mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t\t [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t\t\t<span *ngIf=\"icon || logo || toolbarTitle\" class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t</div>\r\n\t\t</mat-sidenav>\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content></ng-content>\r\n\t\t\t</div>\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"], components: [{ type: i2$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+/** @nocollapse */ /** @nocollapse */ VdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavListComponent, selector: "vd-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n\t<mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t\t [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t\t\t<span *ngIf=\"icon || logo || toolbarTitle\" class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t</div>\r\n\t\t</mat-sidenav>\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content></ng-content>\r\n\t\t\t</div>\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"], components: [{ type: i2$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-nav-list', template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n\t<mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\"\r\n\t\t [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t\t\t<span *ngIf=\"icon || logo || toolbarTitle\" class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t\t\t</span>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t</div>\r\n\t\t</mat-sidenav>\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<mat-toolbar [color]=\"color\">\r\n\t\t\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t\t</mat-toolbar>\r\n\t\t\t<div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n\t\t\t\t<ng-content></ng-content>\r\n\t\t\t</div>\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t</div>\r\n\t</mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}\n"] }]
@@ -14961,6 +15159,12 @@ class VdLayoutNavComponent {
          * If [color] is not set, primary is used.
          */
         this.color = 'primary';
+        /**
+         * hideToggle?: boolean
+         *
+         * Hides toggle button
+         */
+        this.hideToggle = false;
     }
     /**
      * Checks if router was injected.
@@ -14989,10 +15193,10 @@ class VdLayoutNavComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1$4.Router, optional: true }, { token: i1$4.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", showToggle: "showToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button vdLayoutToggle *ngIf=\"showToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }, { type: i3$4.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+/** @nocollapse */ /** @nocollapse */ VdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", hideToggle: "hideToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button vdLayoutToggle *ngIf=\"!hideToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }, { type: i8.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-layout-nav', template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button vdLayoutToggle *ngIf=\"showToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"] }]
+            args: [{ selector: 'vd-layout-nav', template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button vdLayoutToggle *ngIf=\"!hideToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$4.Router, decorators: [{
                     type: Optional
                 }] }, { type: i1$4.ActivatedRoute, decorators: [{
@@ -15005,7 +15209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 type: Input
             }], color: [{
                 type: Input
-            }], showToggle: [{
+            }], hideToggle: [{
                 type: Input
             }], backNavigationRoute: [{
                 type: Input
@@ -15016,7 +15220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
 class VdListToolbarMenuComponent {
 }
 /** @nocollapse */ /** @nocollapse */ VdListToolbarMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdListToolbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdListToolbarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdListToolbarMenuComponent, selector: "vd-list-toolbar-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button [mat-menu-trigger-for]=\"toolbarMenu\" *ngIf=\"menuItems?.length\">\r\n        <mat-icon>more_vert</mat-icon>\r\n    </button>\r\n    <mat-menu x-position=\"before\" #toolbarMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let menuItem of menuItems\">\r\n            <ng-container *ngIf=\"!menuItem.subItems\">\r\n                <button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event():null\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"menuItem.subItems\">\r\n                <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                    <ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n                        <button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event():null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide()\" [disabled]=\"menuSubItem.disable && menuSubItem.disable()\">\r\n                            <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                            <span>{{menuSubItem.title}}</span>\r\n                        </button>\r\n                    </ng-container>\r\n                </mat-menu>\r\n                <button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </mat-menu>\r\n</div>", components: [{ type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ /** @nocollapse */ VdListToolbarMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdListToolbarMenuComponent, selector: "vd-list-toolbar-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button [mat-menu-trigger-for]=\"toolbarMenu\" *ngIf=\"menuItems?.length\">\r\n        <mat-icon>more_vert</mat-icon>\r\n    </button>\r\n    <mat-menu x-position=\"before\" #toolbarMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let menuItem of menuItems\">\r\n            <ng-container *ngIf=\"!menuItem.subItems\">\r\n                <button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event():null\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"menuItem.subItems\">\r\n                <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                    <ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n                        <button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event():null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide()\" [disabled]=\"menuSubItem.disable && menuSubItem.disable()\">\r\n                            <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                            <span>{{menuSubItem.title}}</span>\r\n                        </button>\r\n                    </ng-container>\r\n                </mat-menu>\r\n                <button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </mat-menu>\r\n</div>", components: [{ type: i3.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: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdListToolbarMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-list-toolbar-menu', template: "<div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button [mat-menu-trigger-for]=\"toolbarMenu\" *ngIf=\"menuItems?.length\">\r\n        <mat-icon>more_vert</mat-icon>\r\n    </button>\r\n    <mat-menu x-position=\"before\" #toolbarMenu=\"matMenu\">\r\n        <ng-container *ngFor=\"let menuItem of menuItems\">\r\n            <ng-container *ngIf=\"!menuItem.subItems\">\r\n                <button type=\"button\" mat-menu-item (click)=\"menuItem.event?menuItem.event():null\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"menuItem.subItems\">\r\n                <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                    <ng-container *ngFor=\"let menuSubItem of menuItem.subItems\">\r\n                        <button type=\"button\" mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event():null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide()\" [disabled]=\"menuSubItem.disable && menuSubItem.disable()\">\r\n                            <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass\">{{menuSubItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                            <span>{{menuSubItem.title}}</span>\r\n                        </button>\r\n                    </ng-container>\r\n                </mat-menu>\r\n                <button type=\"button\" mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide()\" [disabled]=\"menuItem.disable && menuItem.disable()\">\r\n                    <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass\">{{menuItem.icon || 'radio_button_unchecked'}}</mat-icon>\r\n                    <span>{{menuItem.title}}</span>\r\n                </button>\r\n            </ng-container>\r\n        </ng-container>\r\n    </mat-menu>\r\n</div>" }]
@@ -15027,7 +15231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
 class VdListToolbarComponent {
 }
 /** @nocollapse */ /** @nocollapse */ VdListToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdListToolbarComponent, selector: "vd-list-toolbar", inputs: { dataSource: "dataSource", subtitle: "subtitle", menuItems: "menuItems" }, ngImport: i0, template: "<mat-toolbar dense>\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        <button mat-icon-button vdLayoutManageListOpen [hideWhenOpened]=\"true\">\r\n            <mat-icon>menu</mat-icon>\r\n        </button>\r\n        <span>{{subtitle}}</span>\r\n        <span flex></span>\r\n        <button mat-icon-button (click)=\"dataSource.reload()\" *ngIf=\"dataSource\">\r\n            <mat-icon>sync</mat-icon>\r\n        </button>\r\n        <vd-list-toolbar-menu [menuItems]=\"menuItems\"></vd-list-toolbar-menu>\r\n    </div>\r\n</mat-toolbar>", components: [{ type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: VdListToolbarMenuComponent, selector: "vd-list-toolbar-menu", inputs: ["menuItems"] }], directives: [{ type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: ["vdLayoutManageListOpen"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ /** @nocollapse */ VdListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdListToolbarComponent, selector: "vd-list-toolbar", inputs: { dataSource: "dataSource", subtitle: "subtitle", menuItems: "menuItems" }, ngImport: i0, template: "<mat-toolbar dense>\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        <button mat-icon-button vdLayoutManageListOpen [hideWhenOpened]=\"true\">\r\n            <mat-icon>menu</mat-icon>\r\n        </button>\r\n        <span>{{subtitle}}</span>\r\n        <span flex></span>\r\n        <button mat-icon-button (click)=\"dataSource.reload()\" *ngIf=\"dataSource\">\r\n            <mat-icon>sync</mat-icon>\r\n        </button>\r\n        <vd-list-toolbar-menu [menuItems]=\"menuItems\"></vd-list-toolbar-menu>\r\n    </div>\r\n</mat-toolbar>", components: [{ type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.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: VdListToolbarMenuComponent, selector: "vd-list-toolbar-menu", inputs: ["menuItems"] }], directives: [{ type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: ["vdLayoutManageListOpen"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdListToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-list-toolbar', template: "<mat-toolbar dense>\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        <button mat-icon-button vdLayoutManageListOpen [hideWhenOpened]=\"true\">\r\n            <mat-icon>menu</mat-icon>\r\n        </button>\r\n        <span>{{subtitle}}</span>\r\n        <span flex></span>\r\n        <button mat-icon-button (click)=\"dataSource.reload()\" *ngIf=\"dataSource\">\r\n            <mat-icon>sync</mat-icon>\r\n        </button>\r\n        <vd-list-toolbar-menu [menuItems]=\"menuItems\"></vd-list-toolbar-menu>\r\n    </div>\r\n</mat-toolbar>" }]
@@ -15195,7 +15399,7 @@ class VdNavigationDrawerComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdNavigationDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$4.Router, optional: true }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdNavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdNavigationDrawerComponent, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\"\r\n class=\"vd-nagivation-drawer-toolbar\">\r\n\t<ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n\t<ng-container *ngIf=\"!isCustomToolbar\">\r\n\t\t<div *ngIf=\"icon || logo || sidenavTitle\" class=\"vd-navigation-drawer-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"sidenavTitle\" class=\"vd-navigation-drawer-title\">{{sidenavTitle}}</span>\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-name\" *ngIf=\"email && name\">{{name}}</div>\r\n\t\t<div class=\"vd-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\r\n\t\t\t<span class=\"vd-navigation-drawer-label\">{{email || name}}</span>\r\n\t\t\t<button mat-icon-button class=\"vd-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\r\n\t\t\t\t<mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\r\n\t\t\t\t<mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-container>\r\n</mat-toolbar>\r\n<div class=\"vd-navigation-drawer-content\" [@vdCollapse]=\"menuToggled\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\">\r\n\t<ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"], components: [{ type: i1$7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [VdCollapseAnimation()] });
+/** @nocollapse */ /** @nocollapse */ VdNavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdNavigationDrawerComponent, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\"\r\n class=\"vd-nagivation-drawer-toolbar\">\r\n\t<ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n\t<ng-container *ngIf=\"!isCustomToolbar\">\r\n\t\t<div *ngIf=\"icon || logo || sidenavTitle\" class=\"vd-navigation-drawer-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"sidenavTitle\" class=\"vd-navigation-drawer-title\">{{sidenavTitle}}</span>\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-name\" *ngIf=\"email && name\">{{name}}</div>\r\n\t\t<div class=\"vd-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\r\n\t\t\t<span class=\"vd-navigation-drawer-label\">{{email || name}}</span>\r\n\t\t\t<button mat-icon-button class=\"vd-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\r\n\t\t\t\t<mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\r\n\t\t\t\t<mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-container>\r\n</mat-toolbar>\r\n<div class=\"vd-navigation-drawer-content\" [@vdCollapse]=\"menuToggled\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\">\r\n\t<ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"], components: [{ type: i3$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.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"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [VdCollapseAnimation()] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-navigation-drawer', animations: [VdCollapseAnimation()], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\"\r\n class=\"vd-nagivation-drawer-toolbar\">\r\n\t<ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n\t<ng-container *ngIf=\"!isCustomToolbar\">\r\n\t\t<div *ngIf=\"icon || logo || sidenavTitle\" class=\"vd-navigation-drawer-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\"\r\n\t\t (click)=\"handleNavigationClick()\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"sidenavTitle\" class=\"vd-navigation-drawer-title\">{{sidenavTitle}}</span>\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-name\" *ngIf=\"email && name\">{{name}}</div>\r\n\t\t<div class=\"vd-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\r\n\t\t\t<span class=\"vd-navigation-drawer-label\">{{email || name}}</span>\r\n\t\t\t<button mat-icon-button class=\"vd-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\r\n\t\t\t\t<mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\r\n\t\t\t\t<mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-container>\r\n</mat-toolbar>\r\n<div class=\"vd-navigation-drawer-content\" [@vdCollapse]=\"menuToggled\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\">\r\n\t<ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"] }]
@@ -15293,7 +15497,8 @@ class VdLayoutModule {
         MatCardModule,
         MatListModule,
         MatMenuModule,
-        MatProgressSpinnerModule], exports: [VdLayoutComponent,
+        MatProgressSpinnerModule,
+        VdMenuModule], exports: [VdLayoutComponent,
         VdLayoutToggleDirective,
         VdLayoutCloseDirective,
         VdLayoutOpenDirective,
@@ -15325,7 +15530,8 @@ class VdLayoutModule {
             MatCardModule,
             MatListModule,
             MatMenuModule,
-            MatProgressSpinnerModule
+            MatProgressSpinnerModule,
+            VdMenuModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutModule, decorators: [{
             type: NgModule,
@@ -15340,7 +15546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                         MatCardModule,
                         MatListModule,
                         MatMenuModule,
-                        MatProgressSpinnerModule
+                        MatProgressSpinnerModule,
+                        VdMenuModule
                     ],
                     declarations: [
                         VD_LAYOUTS,
@@ -15492,180 +15699,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }]
         }] });
 
-class VdMenuComponent {
-    constructor() {
-        /**
-         * Menu items
-         */
-        this.items = [];
-        /**
-         * This will add the classes only when the url matches the link exactly.
-         */
-        this.activeExact = false;
-        /**
-        * click?: function
-        * Event emitted when a menu item is clicked.
-        */
-        this.onClick = new EventEmitter();
-    }
-    /**
-     * Event emitted when a meni item is clicked.
-     */
-    itemClicked($event) {
-        if ($event instanceof EventEmitter) {
-            $event.emit();
-        }
-        else {
-            this.onClick.emit($event);
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ VdMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" mat-list-icon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\">{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], components: [{ type: i1$8.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { type: i1$8.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1$8.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { type: i1$8.MatListAvatarCssMatStyler, selector: "[mat-list-avatar], [matListAvatar]" }, { type: i2$1.MatLine, selector: "[mat-line], [matLine]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" mat-list-icon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\">{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""] }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], activeExact: [{
-                type: Input
-            }], avatar: [{
-                type: Input
-            }], onClick: [{
-                type: Output,
-                args: ['click']
-            }] } });
-
-class MenuService extends GenericService {
-    /**
-     * Constructor
-     * @param _http
-     */
-    constructor() {
-        super('menu');
-    }
-}
-/** @nocollapse */ /** @nocollapse */ MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
-
-var MenuScope;
-(function (MenuScope) {
-    MenuScope[MenuScope["Site"] = 0] = "Site";
-    MenuScope[MenuScope["Admin"] = 1] = "Admin";
-})(MenuScope || (MenuScope = {}));
-
-class Menu {
-}
-
-class MenuItem {
-}
-
-class MenuItemService extends GenericService {
-    /**
-     * Constructor
-     * @param _http
-     */
-    constructor() {
-        super('menuitem');
-    }
-}
-/** @nocollapse */ /** @nocollapse */ MenuItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ MenuItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuItemService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuItemService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
-
-/**
- * Menu resolve service
- */
-class MenuResolve {
-    /**
-     * Constructor
-     * @param menuService
-     */
-    constructor(menuService) {
-        this.menuService = menuService;
-    }
-    /**
-     * Resolves menu items
-     * @param route
-     */
-    resolve(route) {
-        return this.menuService.getList(route.data || {}, null, { cache: 'yes' });
-    }
-}
-/** @nocollapse */ /** @nocollapse */ MenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ MenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuResolve });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MenuResolve, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: MenuService }]; } });
-/**
- * Submenu resolve service
- */
-class SubMenuResolve {
-    /**
-     * Resolves menu items
-     * @param route
-     * @param state
-     */
-    resolve(route, state) {
-        /* Check menu items in route data */
-        if (route.parent.data.menu) {
-            /* Get Admin menu */
-            var adminMenu = route.parent.data.menu[0];
-            if (adminMenu && adminMenu.items) {
-                return adminMenu.items.filter(x => x.path == `/${route.url[0].path}`)[0];
-            }
-        }
-        return [];
-    }
-}
-/** @nocollapse */ /** @nocollapse */ SubMenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SubMenuResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ SubMenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SubMenuResolve });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: SubMenuResolve, decorators: [{
-            type: Injectable
-        }] });
-
-const DECLARATIONS$2 = [
-    VdMenuComponent
-];
-class VdMenuModule {
-}
-/** @nocollapse */ /** @nocollapse */ VdMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ VdMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, declarations: [VdMenuComponent], imports: [CommonModule,
-        RouterModule,
-        MatIconModule,
-        MatListModule], exports: [VdMenuComponent] });
-/** @nocollapse */ /** @nocollapse */ VdMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, providers: [MenuService], imports: [[
-            CommonModule,
-            RouterModule,
-            MatIconModule,
-            MatListModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        MatIconModule,
-                        MatListModule
-                    ],
-                    declarations: [
-                        DECLARATIONS$2
-                    ],
-                    exports: [
-                        DECLARATIONS$2
-                    ],
-                    providers: [MenuService]
-                }]
-        }] });
-
 class VdSearchInputComponent {
     constructor(_dir) {
         this._dir = _dir;
@@ -15735,8 +15768,8 @@ class VdSearchInputComponent {
         this.onSearchDebounce.emit(value);
     }
 }
-/** @nocollapse */ /** @nocollapse */ VdSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSearchInputComponent, deps: [{ token: i1$9.Dir, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSearchInputComponent, selector: "vd-search-input", inputs: { showUnderline: "showUnderline", debounce: "debounce", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear", onBlur: "blur" }, viewQueries: [{ propertyName: "_input", first: true, predicate: MatInput, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-input\" layout=\"row\" layout-align=\"end center\">\r\n\t<mat-form-field [class.mat-hide-underline]=\"!showUnderline\" floatPlaceholder=\"never\" flex appearance=\"legacy\">\r\n\t\t<input matInput #searchElement type=\"search\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\" (blur)=\"handleBlur()\" (search)=\"stopPropagation($event)\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t</mat-form-field>\r\n\t<button mat-icon-button type=\"button\" [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\" (click)=\"clearSearch()\" flex=\"none\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>", styles: [".vd-search-input{overflow-x:hidden}.vd-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-input-underline{display:none}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
+/** @nocollapse */ /** @nocollapse */ VdSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSearchInputComponent, deps: [{ token: i1$8.Dir, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ VdSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSearchInputComponent, selector: "vd-search-input", inputs: { showUnderline: "showUnderline", debounce: "debounce", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear", onBlur: "blur" }, viewQueries: [{ propertyName: "_input", first: true, predicate: MatInput, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-input\" layout=\"row\" layout-align=\"end center\">\r\n\t<mat-form-field [class.mat-hide-underline]=\"!showUnderline\" floatPlaceholder=\"never\" flex appearance=\"legacy\">\r\n\t\t<input matInput #searchElement type=\"search\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\" (blur)=\"handleBlur()\" (search)=\"stopPropagation($event)\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t</mat-form-field>\r\n\t<button mat-icon-button type=\"button\" [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\" (click)=\"clearSearch()\" flex=\"none\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>", styles: [".vd-search-input{overflow-x:hidden}.vd-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-input-underline{display:none}\n"], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
         trigger('searchState', [
             state('hide-left', style({
                 transform: 'translateX(-150%)',
@@ -15774,7 +15807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                             transition('show => *', animate('200ms ease-out')),
                         ]),
                     ], template: "<div class=\"vd-search-input\" layout=\"row\" layout-align=\"end center\">\r\n\t<mat-form-field [class.mat-hide-underline]=\"!showUnderline\" floatPlaceholder=\"never\" flex appearance=\"legacy\">\r\n\t\t<input matInput #searchElement type=\"search\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\" (blur)=\"handleBlur()\" (search)=\"stopPropagation($event)\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t</mat-form-field>\r\n\t<button mat-icon-button type=\"button\" [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\" (click)=\"clearSearch()\" flex=\"none\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>", styles: [".vd-search-input{overflow-x:hidden}.vd-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-input-underline{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$9.Dir, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$8.Dir, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { _input: [{
                 type: ViewChild,
@@ -15874,7 +15907,7 @@ class VdSearchBoxComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdSearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSearchBoxComponent, selector: "vd-search-box", inputs: { backIcon: "backIcon", showUnderline: "showUnderline", debounce: "debounce", alwaysVisible: "alwaysVisible", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear" }, viewQueries: [{ propertyName: "_searchInput", first: true, predicate: VdSearchInputComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-box\" layout=\"row\" layout-align=\"end center\">\r\n\t<button mat-icon-button type=\"button\" class=\"vd-search-icon\" flex=\"none\" (click)=\"searchClicked()\">\r\n\t\t  <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{backIcon}}</mat-icon>\r\n\t\t  <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">search</mat-icon>\r\n\t\t</button>\r\n\t<vd-search-input #searchInput [@inputState]=\"alwaysVisible || searchVisible\" [debounce]=\"debounce\" [showUnderline]=\"showUnderline\"\r\n\t [placeholder]=\"placeholder\" (searchDebounce)=\"handleSearchDebounce($event)\" (search)=\"handleSearch($event)\" (clear)=\"handleClear(); toggleVisibility()\">\r\n\t</vd-search-input>\r\n</div>", styles: [":host{display:block}.vd-search-box vd-search-input{margin-left:12px}::ng-deep [dir=rtl] .vd-search-box vd-search-input{margin-right:12px;margin-left:0!important}\n"], components: [{ type: i3.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: VdSearchInputComponent, selector: "vd-search-input", inputs: ["showUnderline", "debounce", "placeholder"], outputs: ["searchDebounce", "search", "clear", "blur"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+/** @nocollapse */ /** @nocollapse */ VdSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdSearchBoxComponent, selector: "vd-search-box", inputs: { backIcon: "backIcon", showUnderline: "showUnderline", debounce: "debounce", alwaysVisible: "alwaysVisible", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear" }, viewQueries: [{ propertyName: "_searchInput", first: true, predicate: VdSearchInputComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-box\" layout=\"row\" layout-align=\"end center\">\r\n\t<button mat-icon-button type=\"button\" class=\"vd-search-icon\" flex=\"none\" (click)=\"searchClicked()\">\r\n\t\t  <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{backIcon}}</mat-icon>\r\n\t\t  <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">search</mat-icon>\r\n\t\t</button>\r\n\t<vd-search-input #searchInput [@inputState]=\"alwaysVisible || searchVisible\" [debounce]=\"debounce\" [showUnderline]=\"showUnderline\"\r\n\t [placeholder]=\"placeholder\" (searchDebounce)=\"handleSearchDebounce($event)\" (search)=\"handleSearch($event)\" (clear)=\"handleClear(); toggleVisibility()\">\r\n\t</vd-search-input>\r\n</div>", styles: [":host{display:block}.vd-search-box vd-search-input{margin-left:12px}::ng-deep [dir=rtl] .vd-search-box vd-search-input{margin-right:12px;margin-left:0!important}\n"], components: [{ type: i3.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: VdSearchInputComponent, selector: "vd-search-input", inputs: ["showUnderline", "debounce", "placeholder"], outputs: ["searchDebounce", "search", "clear", "blur"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger('inputState', [
             state('false', style({
                 width: '0%',
@@ -16053,8 +16086,8 @@ function Table(tableDefinition) {
         if (actions?.length > 0 && pTableDefinition.columns?.length > 0) {
             var actionColmun = pTableDefinition.columns?.find(x => x.name == 'action');
             if (actionColmun != null) {
-                actionColmun.actionMenus = actionColmun.actionMenus || [];
-                actions.forEach(y => actionColmun.actionMenus.push(y));
+                actionColmun.rowMenuItems = actionColmun.rowMenuItems || [];
+                actions.forEach(y => actionColmun.rowMenuItems.push(y));
             }
             else {
                 pTableDefinition.columns.push(new TableColumn({
@@ -16062,7 +16095,7 @@ function Table(tableDefinition) {
                     name: 'action',
                     type: TableColumnType.Action,
                     disabled: true,
-                    actionMenus: actions
+                    rowMenuItems: actions
                 }));
             }
         }