@messaia/cdk 13.3.6-rc10 → 13.3.6-rc13

package/fesm2015/messaia-cdk.mjs

@@ -74,15 +74,15 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import '@angular/localize/init';
 import { MatStepper } from '@angular/material/stepper';
 import { saveAs } from 'file-saver';
-import * as i8$1 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4$5 from '@angular/material/chips';
+import * as i9$1 from '@angular/material/autocomplete';
+import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i5$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i3$4 from '@angular/cdk/a11y';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i3$5 from '@angular/cdk/platform';
-import * as i4$6 from '@angular/cdk/text-field';
-import * as i5$2 from '@tinymce/tinymce-angular';
+import * as i4$5 from '@angular/cdk/text-field';
+import * as i5$3 from '@tinymce/tinymce-angular';
 import * as i1$8 from '@angular/cdk/bidi';
 
 class DisableControlDirective {
@@ -715,6 +715,20 @@ class Utils {
         catch (error) { }
         return obj;
     }
+    /**
+     * Checks if the specified objects are equal
+     * @param obj1
+     * @param obj2
+     * @returns
+     */
+    static equals(obj1, obj2) {
+        try {
+            return JSON.stringify(obj1) === JSON.stringify(obj2);
+        }
+        catch (error) {
+            return false;
+        }
+    }
     /**
      * Gets the query params and the hash from the specified url
      * @param url
@@ -3009,6 +3023,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
             }] } });
 
 class VdLayoutNavListComponent {
+    /**
+     * constructor
+     * @param _router
+     */
     constructor(_router) {
         this._router = _router;
         /**
@@ -3024,8 +3042,6 @@ class VdLayoutNavListComponent {
          * The mode or styling of the sidenav.
          * Defaults to "side".
          * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
          */
         this.mode = 'side';
         /**
@@ -3034,8 +3050,6 @@ class VdLayoutNavListComponent {
          * Defaults to "true".
          *
          * See "MatSidenav" documentation for more info.
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
          */
         this.opened = true;
         /**
@@ -3043,8 +3057,6 @@ class VdLayoutNavListComponent {
          *
          * Sets the "width" of the sidenav in either "px" or "%"
          * Defaults to "350px".
-         *
-         * https://github.com/angular/material2/tree/master/src/lib/sidenav
          */
         this.sidenavWidth = '350px';
     }
@@ -3052,15 +3064,14 @@ class VdLayoutNavListComponent {
      * 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'; }
     /**
      * Checks if router was injected.
      */
-    get routerEnabled() {
-        return !!this._router && !!this.navigationRoute;
-    }
+    get routerEnabled() { return !!this._router && !!this.navigationRoute; }
+    /**
+     * Handles navigation click
+     */
     handleNavigationClick() {
         if (this.routerEnabled) {
             this._router.navigateByUrl(this.navigationRoute);
@@ -3086,10 +3097,10 @@ class VdLayoutNavListComponent {
     }
 }
 /** @nocollapse */ VdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1$3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @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$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
+/** @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<!-- #region Sidenav -->\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<!-- #region Sidenav toolbar -->\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\" (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<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Sidenav content -->\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\t<!-- #endregion -->\r\n\t\t</mat-sidenav>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<!-- #region Toolbar projection -->\r\n\t\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-toolbar-content\"></ng-content>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Scrollable content -->\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<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Footer content -->\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t\t<!-- #endregion -->\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$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i2$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.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"] }]
+            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<!-- #region Sidenav -->\r\n\t\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t\t<!-- #region Sidenav toolbar -->\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\" (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<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Sidenav content -->\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\t<!-- #endregion -->\r\n\t\t</mat-sidenav>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-nav-list-main\">\r\n\t\t\t<!-- #region Toolbar projection -->\r\n\t\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-toolbar-content\"></ng-content>\r\n\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Scrollable content -->\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<!-- #endregion -->\r\n\r\n\t\t\t<!-- #region Footer content -->\r\n\t\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t\t<!-- #endregion -->\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"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.Router, decorators: [{
                         type: Optional
@@ -3098,38 +3109,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 type: ViewChild,
                 args: [MatSidenav, { static: true }]
             }], toolbarTitle: [{
-                type: Input,
-                args: ['toolbarTitle']
+                type: Input
             }], icon: [{
-                type: Input,
-                args: ['icon']
+                type: Input
             }], logo: [{
-                type: Input,
-                args: ['logo']
+                type: Input
             }], color: [{
-                type: Input,
-                args: ['color']
+                type: Input
             }], mode: [{
-                type: Input,
-                args: ['mode']
+                type: Input
             }], opened: [{
-                type: Input,
-                args: ['opened']
+                type: Input
             }], sidenavWidth: [{
-                type: Input,
-                args: ['sidenavWidth']
+                type: Input
             }], navigationRoute: [{
-                type: Input,
-                args: ['navigationRoute']
+                type: Input
             }] } });
 
 class VdLayoutNavListToggleDirective extends LayoutToggle {
+    /**
+     * Constructor
+     * @param layout
+     * @param renderer
+     * @param elementRef
+     */
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
     }
-    set vdLayoutNavListToggle(vdLayoutNavListToggle) {
-        this.disabled = !(vdLayoutNavListToggle === '' || vdLayoutNavListToggle);
-    }
+    /**
+     * Disables the navbar
+     */
+    set vdLayoutNavListToggle(vdLayoutNavListToggle) { this.disabled = !(vdLayoutNavListToggle === '' || vdLayoutNavListToggle); }
+    /**
+     * Opens the navbar
+     */
     onClick() {
         this._layout.toggle();
     }
@@ -3138,9 +3151,7 @@ class VdLayoutNavListToggleDirective extends LayoutToggle {
 /** @nocollapse */ VdLayoutNavListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavListToggleDirective, selector: "[vdLayoutNavListToggle]", inputs: { vdLayoutNavListToggle: "vdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListToggleDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[vdLayoutNavListToggle]',
-                }]
+            args: [{ selector: '[vdLayoutNavListToggle]' }]
         }], ctorParameters: function () {
         return [{ type: VdLayoutNavListComponent, decorators: [{
                         type: Inject,
@@ -3151,12 +3162,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 args: ['vdLayoutNavListToggle']
             }] } });
 class VdLayoutNavListCloseDirective extends LayoutToggle {
+    /**
+     * Constructor
+     * @param layout
+     * @param renderer
+     * @param elementRef
+     */
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
     }
-    set vdLayoutNavListClose(vdLayoutNavListClose) {
-        this.disabled = !(vdLayoutNavListClose === '' || vdLayoutNavListClose);
-    }
+    /**
+     * Disables the navbar
+     */
+    set vdLayoutNavListClose(vdLayoutNavListClose) { this.disabled = !(vdLayoutNavListClose === '' || vdLayoutNavListClose); }
+    /**
+     * Opens the navbar
+     */
     onClick() {
         this._layout.close();
     }
@@ -3165,9 +3186,7 @@ class VdLayoutNavListCloseDirective extends LayoutToggle {
 /** @nocollapse */ VdLayoutNavListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavListCloseDirective, selector: "[vdLayoutNavListClose]", inputs: { vdLayoutNavListClose: "vdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListCloseDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[vdLayoutNavListClose]',
-                }]
+            args: [{ selector: '[vdLayoutNavListClose]' }]
         }], ctorParameters: function () {
         return [{ type: VdLayoutNavListComponent, decorators: [{
                         type: Inject,
@@ -3178,12 +3197,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 args: ['vdLayoutNavListClose']
             }] } });
 class VdLayoutNavListOpenDirective extends LayoutToggle {
+    /**
+     * Constructor
+     * @param layout
+     * @param renderer
+     * @param elementRef
+     */
     constructor(layout, renderer, elementRef) {
         super(layout, renderer, elementRef);
     }
-    set vdLayoutNavListOpen(vdLayoutNavListOpen) {
-        this.disabled = !(vdLayoutNavListOpen === '' || vdLayoutNavListOpen);
-    }
+    /**
+     * Disables the navbar
+     */
+    set vdLayoutNavListOpen(vdLayoutNavListOpen) { this.disabled = !(vdLayoutNavListOpen === '' || vdLayoutNavListOpen); }
+    /**
+     * Opens the navbar
+     */
     onClick() {
         this._layout.open();
     }
@@ -3192,9 +3221,7 @@ class VdLayoutNavListOpenDirective extends LayoutToggle {
 /** @nocollapse */ VdLayoutNavListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdLayoutNavListOpenDirective, selector: "[vdLayoutNavListOpen]", inputs: { vdLayoutNavListOpen: "vdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdLayoutNavListOpenDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[vdLayoutNavListOpen]',
-                }]
+            args: [{ selector: '[vdLayoutNavListOpen]' }]
         }], ctorParameters: function () {
         return [{ type: VdLayoutNavListComponent, decorators: [{
                         type: Inject,
@@ -4610,11 +4637,11 @@ class TableDataSource extends DataSource {
      * @param paginator
      * @param sort
      */
-    constructor(service, paginator, sort) {
+    constructor(service, paginator, sorter) {
         super();
         this.service = service;
         this.paginator = paginator;
-        this.sort = sort;
+        this.sorter = sorter;
         /**
          * Represents a value that changes over time.
          * Observers can subscribe to the subject to receive filter changes
@@ -4634,6 +4661,18 @@ class TableDataSource extends DataSource {
          * Used to power selecting one or more options from a list.
          */
         this.selectionModel = new SelectionModel(true, []);
+        /**
+         * Sort change event emitter
+         */
+        this.onSortChange = new EventEmitter();
+        /**
+         * _sort: MatSort | null
+         */
+        this._sort = new MatSort();
+        /**
+         * isConnected: boolean
+         */
+        this.isConnected = false;
         /**
          * The navigations to includes
          */
@@ -4673,7 +4712,7 @@ class TableDataSource extends DataSource {
         /**
          * A flag to show loading process
          */
-        this.isLoading = true;
+        this.isLoading = false;
         /**
          * Get selected Items
          */
@@ -4682,6 +4721,7 @@ class TableDataSource extends DataSource {
          * Get selected Items
          */
         this.getSelectedIds = () => this.getSelected('id');
+        this.sort = sorter;
     }
     /**
      * Gets filter
@@ -4697,6 +4737,16 @@ class TableDataSource extends DataSource {
         }
         this._filterChange.next(filter);
     }
+    /**
+     * Instance of the MatSort directive used by the table to control its sorting. Sort changes
+     * emitted by the MatSort will trigger an update to the table's rendered data.
+     */
+    get sort() { return this._sort; }
+    set sort(sort) {
+        var _a;
+        this._sort = sort;
+        (_a = this._sort) === null || _a === void 0 ? void 0 : _a.sortChange.subscribe(x => this.onSortChange.emit(x));
+    }
     /**
      * Gets reload token
      */
@@ -4708,33 +4758,35 @@ class TableDataSource extends DataSource {
      * @returns Observable that emits a new value when the data changes.
      */
     connect(_ = null) {
-        var _a, _b;
+        var _a;
+        this.isConnected = true;
         /* A list of fields to observe  */
         const displayDataChanges = [
-            (_a = this.sort) === null || _a === void 0 ? void 0 : _a.sortChange,
-            ((_b = this.paginator) === null || _b === void 0 ? void 0 : _b.page) || 1,
+            this.onSortChange,
+            (_a = this.paginator) === null || _a === void 0 ? void 0 : _a.page,
             this._filterChange,
             this._reloadChange
         ];
         /* If the user changes the sort order, reset back to the first page */
-        this.sort.sortChange.subscribe(() => { this.paginator.pageIndex = 0; });
+        this.onSortChange.subscribe(() => { this.paginator.pageIndex = 0; });
         return merge$1(...displayDataChanges)
             .pipe(skip(1), switchMap(() => {
+            var _a, _b, _c, _d;
             /* Flip flag to show that loading has begun */
             this.isLoading = true;
             /* Remove empty filters */
-            Object.keys(this.fieldFilters).forEach((key) => ((this.fieldFilters[key] == null || this.fieldFilters[key] == '' || this.fieldFilters[key] == 'undefined')) && this.fieldFilters[key] != 0 && delete this.fieldFilters[key]);
-            Object.keys(this.staticFieldFilters).forEach((key) => ((this.staticFieldFilters[key] == null || this.staticFieldFilters[key] == '' || this.staticFieldFilters[key] == 'undefined')) && this.staticFieldFilters[key] != 0 && delete this.staticFieldFilters[key]);
+            Utils.cleanObject(this.fieldFilters);
+            Utils.cleanObject(this.staticFieldFilters);
             /* Load data and return it */
-            return this.service.getList(Object.assign({
+            return this.service.getList(Utils.cleanObject(Object.assign({
                 includes: this.includes,
                 projection: Array.isArray(this.projection) ? this.projection.join(',') : this.projection,
                 page: this.paginator.pageIndex + 1,
                 pageSize: this.paginator.pageSize,
                 search: this.filter.toLowerCase(),
-                sortBy: this.sort.active,
-                sortOrder: this.sort.direction
-            }, Utils.cleanObject(this.fieldFilters) || {}, this.staticFieldFilters), null, { 'CheckOut': 'Yes' });
+                sortBy: (_a = this.sort) === null || _a === void 0 ? void 0 : _a.active,
+                sortOrder: (_b = this.sort) === null || _b === void 0 ? void 0 : _b.direction
+            }, (_c = this.fieldFilters) !== null && _c !== void 0 ? _c : {}, (_d = this.staticFieldFilters) !== null && _d !== void 0 ? _d : {})), null, { 'CheckOut': 'Yes' });
         }), map((result) => {
             /* Flip flag to show that loading has finished */
             this.isLoading = false;
@@ -4760,7 +4812,9 @@ class TableDataSource extends DataSource {
      * @param _ The component that exposes a view over the data provided by this
      *     data source.
      */
-    disconnect(_ = null) { }
+    disconnect(_ = null) {
+        this.isConnected = false;
+    }
     /**
      * Reloads items
      * @param clearSelection
@@ -4771,6 +4825,13 @@ class TableDataSource extends DataSource {
             this.selectionModel.clear();
         }
     }
+    /**
+     * Clears field filters
+     */
+    applyFilters(newFilters = {}) {
+        this.fieldFilters = newFilters || {};
+        this.reload();
+    }
     /**
      * Clears field filters
      */
@@ -5179,7 +5240,7 @@ class VdDynamicTableComponent {
     }
 }
 /** @nocollapse */ VdDynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdDynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, host: { listeners: { "document:contextmenu": "handleContextMenuEvent($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource.filteredData?.length && !dataSource.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"], components: [{ type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["menu", "item", "context"] }, { type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i17.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i1$4.MatCellDef, selector: "[matCellDef]" }, { type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "async": i4$1.AsyncPipe, "enum": EnumPipe, "date": i4$1.DatePipe }, animations: [
+/** @nocollapse */ VdDynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, host: { listeners: { "document:contextmenu": "handleContextMenuEvent($event)" } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"], components: [{ type: i2$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["menu", "item", "context"] }, { type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enum", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i17.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { type: i1$4.MatCellDef, selector: "[matCellDef]" }, { type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }], pipes: { "async": i4$1.AsyncPipe, "enum": EnumPipe, "date": i4$1.DatePipe }, animations: [
         trigger('detailExpand', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'initial' })),
@@ -5194,7 +5255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                             state('expanded', style({ display: 'initial' })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource.filteredData?.length && !dataSource.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"] }]
+                    ], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !detailsTemplate}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t<!-- #region Column def -->\r\n\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\">{{column.header}}</span>\r\n\t\t\t</th>\r\n\r\n\t\t\t<!-- column.cellNgClass ? column.cellNgClass(row, context) : { 'text-right': column.arrowBefore } -->\r\n\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"column.event?(column.eventArgs?column.event(row,column.eventArgs):column.event(row, context)):null\" [disabled]=\"readonly || (column.disable && column.disable(row, context))\" color=\"primary\"></mat-slide-toggle>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{column.content(row, context) | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<input type=\"{{column.inputType}}\" autocomplete=\"none\" matInput name=\"{{column.name}}{{rowIndex}}\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"$event.target.blur();false\">\r\n\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t<vd-dynamic-menu [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [menu]=\"column.menu\" [item]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"column.content ? column.content(row, context):''\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</ng-container>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</ng-container>\r\n\r\n\t<!-- #region Filter row -->\r\n\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\">\r\n\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.showGtXs, 'gt-sm': column.showGtSm, 'gt-md': column.showGtMd, 'gt-lg': column.showGtLg, 'gt-xl': column.showGtXl, 'gt-xxl': column.showGtXxl}\">\r\n\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number || column.type == ColumnType.Menu\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Select || column.type == ColumnType.Enum || column.type == ColumnType.Toggle\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date\" filter-date></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t</th>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Details column -->\r\n\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t<td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate></div>\r\n\t\t</td>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Filter header -->\r\n\t<ng-container *ngIf=\"filterable\">\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n\r\n\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t<!-- #region Detrails row -->\r\n\t<ng-container *ngIf=\"detailsTemplate\">\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t</ng-container>\r\n\t<!-- #endregion -->\r\n</table>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-table .mat-row .mat-cell .mat-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-table [gt-xs],::ng-deep .mat-table .gt-xs{display:none}::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-table [gt-sm],::ng-deep .mat-table .gt-sm{display:none}::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-table [gt-md],::ng-deep .mat-table .gt-md{display:none}::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-table [gt-lg],::ng-deep .mat-table .gt-lg{display:none}::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-table [gt-xl],::ng-deep .mat-table .gt-xl{display:none}::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-table [gt-xxl],::ng-deep .mat-table .gt-xxl{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -7170,6 +7231,10 @@ class GenericListComponent extends BaseComponent {
          * If true, show the menu 'Duplicate'
          */
         this.duplicable = false;
+        /**
+         * If true, show the menu 'Configure table'
+         */
+        this.configurable = true;
         /**
          * rowNgClass: Function
          */
@@ -7596,11 +7661,14 @@ class GenericListComponent extends BaseComponent {
                 disable: () => !this.canExecuteMultipleOperations((x) => this.canDeleteItem(x))
             });
         }
-        this.toolbarMenuItems.push({
-            title: $localize `:@@configureTable:Configure table`,
-            icon: 'settings',
-            event: () => this.openConfigDialog()
-        });
+        /* Opens config dialog */
+        if (this.configurable) {
+            this.toolbarMenuItems.push({
+                title: $localize `:@@configureTable:Configure table`,
+                icon: 'settings',
+                event: () => this.openConfigDialog()
+            });
+        }
     }
     /**
      * Add row menu items
@@ -7649,7 +7717,7 @@ class GenericListComponent extends BaseComponent {
                 title: $localize `:@@edit:Edit`,
                 icon: 'edit_note',
                 iconClass: 'tc-blue-400',
-                event: (row) => this.edit(row),
+                event: (row) => this.edit(row, this),
                 hide: (row) => !this.canEditItem(row)
             });
         }
@@ -14605,20 +14673,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 args: ["focusout"]
             }] } });
 
-/**
- * VdChipDirective class
- */
-class VdChipDirective extends CdkPortal {
-    constructor(templateRef, viewContainerRef) {
-        super(templateRef, viewContainerRef);
-    }
-}
-/** @nocollapse */ VdChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdChipDirective, selector: "[vd-chip]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[vd-chip]ng-template' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
 /**
  * VdAutocompleteOptionDirective class
  */
@@ -14632,13 +14686,29 @@ class VdAutocompleteOptionDirective extends CdkPortal {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdAutocompleteOptionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-autocomplete-option]ng-template' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+
 /**
- * VdChipsComponent class
+ * VdChipDirective class
  */
+class VdChipDirective extends CdkPortal {
+    constructor(templateRef, viewContainerRef) {
+        super(templateRef, viewContainerRef);
+    }
+}
+/** @nocollapse */ VdChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: VdChipDirective, selector: "[vd-chip]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[vd-chip]ng-template' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
+
 class VdChipsComponent extends AbstractMatFormField {
     /**
      * Constructor
+     * @param injector
+     * @param media
+     * @param changeDetectorRef
      * @param ngControl
      * @param parentForm
      * @param parentFormGroup
@@ -14646,18 +14716,15 @@ class VdChipsComponent extends AbstractMatFormField {
      * @param focusMonitor
      * @param elementRef
      */
-    constructor(injector, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef) {
+    constructor(injector, media, changeDetectorRef, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef) {
         super("app-vd-chips", ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef);
         this.injector = injector;
+        this.media = media;
+        this.changeDetectorRef = changeDetectorRef;
         /**
-         * The http service from to get the data
-         */
-        this.http = null;
-        /**
-         * Represents a value that changes over time.
-         * Observers can subscribe to the subject to receive pdf file changes
+         * Page size options
          */
-        this._endpointChange = new BehaviorSubject(null);
+        this.pageSizeOptions = [5, 10, 15, 20, 30, 50, 100, 200];
         /**
          * Set up reactive formcontrol
          */
@@ -14671,9 +14738,9 @@ class VdChipsComponent extends AbstractMatFormField {
          */
         this.chips = [];
         /**
-         * _path: any
+         * Readonly
          */
-        this._path = '';
+        this._paginated = true;
         /**
          * key: string
          */
@@ -14686,14 +14753,6 @@ class VdChipsComponent extends AbstractMatFormField {
          * searchFields: string
          */
         this.searchFields = [];
-        /**
-         * termMinlength: number
-         */
-        this.termMinlength = 2;
-        /**
-         * limit: number
-         */
-        this.limit = 30;
         /**
          * removable: boolean
          */
@@ -14733,16 +14792,34 @@ class VdChipsComponent extends AbstractMatFormField {
          * Sends chip value as event.
          */
         this.chipFocus = new EventEmitter();
-        this.http = injector.get(HttpClient);
+        /**
+         * service: BaseService
+         */
+        this.service = new BaseService();
     }
+    /**
+     * A reference to VdDynamicTableComponent element
+     */
+    get dynamicTable() { return this._dynamicTable; }
+    set dynamicTable(dynamicTable) {
+        this._dynamicTable = dynamicTable;
+        if (this._dynamicTable) {
+            this.dataSource.sort = this._dynamicTable.matSort;
+        }
+    }
+    /**
+     * A reference to MdPaginator element
+     */
+    set paginator(paginator) { this._paginator = paginator; }
+    get paginator() { return this._paginator; }
     /**
      * Gets or sets endpoint
      */
     get endpoint() { return this._endpoint; }
     set endpoint(endpoint) {
         this._endpoint = endpoint;
+        this.service.endpoint = typeof endpoint === 'function' ? endpoint(this) : endpoint;
         this.clear();
-        this._endpointChange.next([this.endpoint, this.path, this.params, this.projection]);
     }
     /**
      * params: any
@@ -14750,14 +14827,9 @@ class VdChipsComponent extends AbstractMatFormField {
     get params() { return this._params; }
     set params(params) {
         /* Remove empty params */
-        Object.keys(params).forEach((key) => {
-            if ((params[key] == null || params[key] == '' || params[key] == 'undefined')) {
-                delete params[key];
-            }
-        });
-        if (JSON.stringify(this._params) !== JSON.stringify(params)) {
+        Utils.cleanObject(params);
+        if (!Utils.equals(this._params, params)) {
             this._params = params;
-            this._endpointChange.next([this.endpoint, this.path, this._params, this.projection]);
         }
     }
     /**
@@ -14767,20 +14839,9 @@ class VdChipsComponent extends AbstractMatFormField {
     set projection(projection) {
         this._projection = projection;
         this.clear();
-        this._endpointChange.next([this.endpoint, this.path, this.params, this.projection]);
     }
     /**
-     * Gets or sets path
-     */
-    get path() { return this._path; }
-    set path(path) {
-        this._path = path;
-        this.clear();
-        this._endpointChange.next([this.endpoint, this.path, this.params, this.projection]);
-    }
-    /**
-     * Sets the disabled.
-     * @param disabled
+     * Gets the disabled.
      */
     get disabled() {
         if (this._readonly) {
@@ -14788,39 +14849,60 @@ class VdChipsComponent extends AbstractMatFormField {
         }
         return super.disabled;
     }
+    /**
+     * Multiple select option
+     */
+    get paginated() { return this._paginated; }
+    set paginated(paginated) {
+        this._paginated = coerceBooleanProperty(paginated);
+        this.stateChanges.next();
+    }
     /**
      * Whether the select has a value.
      */
     get empty() { return this.chips.length <= 0; }
     /**
-     * Default chip
-     */
-    get default() { return this.chips[0]; }
-    set default(_chip) {
-        if (_chip) {
-            /* Add chip for selected option */
-            this.chips = [_chip];
-            /* 	Set the value (ngModel) */
-            this.value = _chip[this.key];
-            /* Diabled the input, allow only one chip */
-            this.autoCompleteChipList.disable();
-            /* Reset the autocomplete input text value */
-            this.stateChanges.next();
-        }
+     * Whether the `MatFormField` label should try to float.
+     */
+    get shouldLabelFloat() { var _a; return super.shouldLabelFloat || ((_a = this.autoCompleteChipList) === null || _a === void 0 ? void 0 : _a.value); }
+    /**
+     * Lifecycle hook that is called after data-bound properties of a
+     * directive are initialized.
+     */
+    ngOnInit() {
+        var _a, _b;
+        /* Listen to value changes of the search input */
+        this.autoCompleteChipList.valueChanges
+            .pipe(debounceTime(this.debounce))
+            .subscribe(v => {
+            if (typeof v === 'string') {
+                this.filterOptions(v);
+            }
+        });
+        (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.valueChanges) === null || _b === void 0 ? void 0 : _b.pipe(skip(1)).subscribe((value) => {
+            if (!value) {
+                this.chips = [];
+                this._value = "";
+                this.autoCompleteChipList.setValue("");
+                this.autoCompleteChipList.enable();
+            }
+        });
     }
     /**
-     * Whether the `MatFormField` label should try to float.
+     * Lifecycle hook that is called after a component's view has been fully initialized.
      */
-    get shouldLabelFloat() {
+    ngAfterViewInit() {
         var _a;
-        return super.shouldLabelFloat || !((_a = this.chipInput) === null || _a === void 0 ? void 0 : _a.empty);
+        this.media.broadcast();
+        /* Initilialize the data source with the current service, paginator and sort */
+        (_a = this.dataSource) !== null && _a !== void 0 ? _a : (this.dataSource = new TableDataSource(this.service, this.paginator, this.sort));
     }
     /**
      * From ControlValueAccessor interface
      * @param value
      */
     writeValue(value) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         /* Set the value */
         this._value = value;
         /* Clear the chips list */
@@ -14840,69 +14922,67 @@ class VdChipsComponent extends AbstractMatFormField {
             if (this.projection) {
                 _params.projection = this.projection;
             }
-            /* Get endpoint */
-            let endpoint = typeof this.endpoint === 'function' ? this.endpoint(this) : this.endpoint;
             /* Get base url */
-            var urlParts = endpoint.split('?');
-            this.http.get(`${urlParts[0]}/${value}${urlParts.length > 1 ? `?${urlParts[1]}` : ''}`, { params: Utils.cleanObject(_params) }).subscribe(x => {
-                this.loading = false;
-                /* Add chip for selected option */
-                this.chips.push(x);
-                /* Emit selected event */
-                this.initSelect.emit(x);
-                /* Diabled the input, allow only one chip */
-                this.autoCompleteChipList.disable();
-            }, _ => this.loading = false);
+            var urlParts = (_e = (_d = this.service) === null || _d === void 0 ? void 0 : _d.endpoint) === null || _e === void 0 ? void 0 : _e.split('?');
+            this.service.http.get(`${urlParts[0]}/${value}${urlParts.length > 1 ? `?${urlParts[1]}` : ''}`, { params: Utils.cleanObject(_params) }).subscribe({
+                next: (x) => {
+                    this.loading = false;
+                    /* Add chip for selected option */
+                    this.chips.push(x);
+                    /* Emit selected event */
+                    this.initSelect.emit(x);
+                },
+                error: () => this.loading = false
+            });
         }
         else {
             this.clear(false);
         }
     }
     /**
-     * Sets control focus
+     * Connects the data source and subscribe to the data changes
      */
-    focus() {
-        var _a;
-        (_a = this.chipInput) === null || _a === void 0 ? void 0 : _a.focus();
+    connect() {
+        var _a, _b;
+        /* Set focus */
+        this.opened = true;
+        /* Set some params */
+        this.dataSource.fieldFilters = this.getQueryParams();
+        /* Connect the data source manually for 'mat-option' triggers */
+        if (!this.classType && !((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a.isConnected)) {
+            (_b = this.dataSourceSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            this.dataSourceSubscription = this.dataSource.connect().subscribe();
+        }
+        /* Check the change detector and its children */
+        this.changeDetectorRef.detectChanges();
     }
     /**
-     * Lifecycle hook that is called after data-bound properties of a
-     * directive are initialized.
+     * Sets control focus
      */
-    ngOnInit() {
-        var _a, _b;
-        this.autoCompleteChipList.valueChanges
-            .pipe(debounceTime(this.debounce))
-            .subscribe(v => this.filterOptions(v));
-        (_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.valueChanges) === null || _b === void 0 ? void 0 : _b.pipe(skip(1)).subscribe((value) => {
-            if (!value) {
-                this.chips = [];
-                this._value = "";
-                this.autoCompleteChipList.setValue("");
-                this.autoCompleteChipList.enable();
-            }
-        });
+    focus() {
+        // this.autoCompleteChipList?.focus();
     }
     /**
      * Adds a chip
      * @param event
      * @param input
      */
-    addChip(event, input) {
-        /* Define selection constant */
-        const selection = event.option.value;
+    addChip(value, input) {
         /* Add chip for selected option */
-        this.chips.push(selection);
+        this.chips = [value];
         /* Emit selected event */
-        this.selected.emit(selection);
+        this.selected.emit(value);
         /* 	Set the value (ngModel) */
-        this.value = selection[this.key];
+        this.value = value[this.key];
         /* Diabled the input, allow only one chip */
-        this.autoCompleteChipList.disable();
+        this.autoCompleteChipList.disable({ emitEvent: false });
+        this.autoCompleteChipList.patchValue('', { emitEvent: false });
         /* Reset the autocomplete input text value */
         if (input) {
             input.value = '';
         }
+        /* Close the autocomplete panel, if not already done (for table row click) */
+        this.autocompleteTrigger.closePanel();
     }
     /**
      * Removes all chips
@@ -14916,12 +14996,14 @@ class VdChipsComponent extends AbstractMatFormField {
             this.ngControl.control.markAsTouched();
         }
         /* Reset the value (ngModel) */
-        this.autoCompleteChipList.setValue("");
+        this.autoCompleteChipList.patchValue('', { emitEvent: false });
         if (triggerStateChanges) {
             this.stateChanges.next();
         }
         /* Enable the input */
-        this.autoCompleteChipList.enable();
+        this.autoCompleteChipList.enable({ emitEvent: false });
+        /* Check the change detector and its children */
+        this.changeDetectorRef.detectChanges();
     }
     /**
      * Filters options
@@ -14929,37 +15011,29 @@ class VdChipsComponent extends AbstractMatFormField {
      */
     filterOptions(text) {
         var _a, _b;
-        this.filteredOptions = [];
-        if (this.endpoint && typeof text === 'string' && text.length >= this.termMinlength) {
+        /* Filter the results */
+        if (this.dataSource) {
             /* Init params if null */
-            this._params = this._params || {};
+            let _params = Object.assign({}, this.getQueryParams());
             /* Add search word to the params */
             if (this.searchField && this.searchFields.length <= 0) {
                 var result = new RegExp(`(\\${this.searchOperators.join('|\\')})?(.*)`).exec(this.searchField);
-                this._params[result[2]] = `${result[1] ? result[1] : ''}${text}`;
+                _params[result[2]] = `${result[1] ? result[1] : ''}${text}`;
             }
             /* Add search word to the params */
             (_b = (_a = this.searchFields) === null || _a === void 0 ? void 0 : _a.map(x => x.trim())) === null || _b === void 0 ? void 0 : _b.forEach(x => {
                 var result = new RegExp(`(\\${this.searchOperators.join('|\\')})?(.*)`).exec(x);
-                this._params[result[2]] = `${result[1] ? result[1] : ''}${text}`;
+                _params[result[2]] = `${result[1] ? result[1] : ''}${text}`;
             });
-            /* Add limit to the params */
-            this._params.limit = this.limit;
-            /* Add projection, if any */
-            if (this.projection) {
-                this._params.projection = this.projection;
+            /* Nothing has changed? */
+            if (Utils.equals(this._params, _params)) {
+                return;
             }
+            /* Set params */
+            this._params = _params;
             /* Get results from server */
             this.loading = true;
-            this.http.get(`${this.endpoint}${this.path || ''}`, { params: Utils.cleanObject(this._params) })
-                .subscribe({
-                next: (x) => {
-                    this.loading = false;
-                    this.filteredOptions = x;
-                    this.emptyResult = !x || !x.length;
-                },
-                error: () => this.loading = false
-            });
+            this.dataSource.applyFilters(this._params);
         }
     }
     /**
@@ -14981,18 +15055,35 @@ class VdChipsComponent extends AbstractMatFormField {
             this.onLaunch.emit(this.chips[0]);
         }
     }
+    /**
+     * Gets query params
+     * @returns
+     */
+    getQueryParams() {
+        /* Init params if null */
+        var params = this._params;
+        /* Add projection, if any */
+        if (this.projection) {
+            params.projection = this.projection;
+        }
+        return params;
+    }
+    /**
+     * A callback method that performs custom clean-up, invoked immediately
+     * before a directive, pipe, or service instance is destroyed.
+     */
+    ngOnDestroy() {
+        var _a;
+        (_a = this.dataSourceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
 }
-/** @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.ErrorStateMatcher }, { token: i3$4.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @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", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", termMinlength: "termMinlength", limit: "limit", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons", 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)=\"handleRemovedEvent()\" 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<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\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)\" [class]=\"autocompleteCssClass\">\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: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i4$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$5.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$5.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$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8$1.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"] }] });
+/** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsComponent, deps: [{ token: i0.Injector }, { token: VdMediaService }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: i3$4.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdChipsComponent, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", removable: "removable", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, 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: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\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)=\"handleRemovedEvent()\" 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<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\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}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></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.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\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\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"], components: [{ type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "classType", "context", "dataSourceFilter", "static", "filterable", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { type: i13.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i9$1.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$2.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: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9$1.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: [
-                        { provide: MatFormFieldControl, useExisting: VdChipsComponent }
-                    ], 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)=\"handleRemovedEvent()\" 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<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\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)\" [class]=\"autocompleteCssClass\">\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: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-chip .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}mat-spinner{margin-top:-9px;margin-right:6px}\n"] }]
+            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-list #chipList [required]=\"required\" [disabled]=\"readonly\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\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)=\"handleRemovedEvent()\" 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<ng-template let-button let-first=\"first\" ngFor [ngForOf]=\"suffixButtons\">\r\n\t\t\t\t<a mat-icon-button *ngIf=\"!button.hide || !button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\r\n\t\t\t\t\t<mat-icon>{{button.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-template>\r\n\t\t\t<a mat-icon-button *ngIf=\"onLaunch?.observers?.length > 0\" (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\r\n\t\t\t\t<mat-icon>launch</mat-icon>\r\n\t\t\t</a>\r\n\t\t\t<a mat-icon-button *ngIf=\"!readonly\">\r\n\t\t\t\t<mat-icon matChipRemove>close</mat-icon>\r\n\t\t\t</a>\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}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" #filterInput />\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Reset button -->\r\n\t<a mat-icon-button trailingIcon *ngIf=\"filterInput.value\" class=\"reset-input\" (click)=\"filterInput.value = ''\">\r\n\t\t<mat-icon>close</mat-icon>\r\n\t</a>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Progress -->\r\n\t<mat-spinner diameter=\"18\" *ngIf=\"dataSource?.isLoading\"></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.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\r\n\t<ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" ngFor [ngForOf]=\"dataSource?.items\">\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\t<ng-container *ngIf=\"classType && opened\">\r\n\t\t<mat-option hide=\"true\"></mat-option>\r\n\t\t<vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\r\n\t</ng-container>\r\n\t<mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\r\n</mat-autocomplete>\r\n<!-- #endregion -->", styles: [":host ::ng-deep .mat-chip-list-wrapper{min-height:24px}:host ::ng-deep .mat-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-chip .vd-chip-content{flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-top:-10px}:host ::ng-deep .mat-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-icon-button .mat-button-wrapper .mat-icon{font-size:21px;line-height:21px}::ng-deep .mat-autocomplete-panel{margin-top:9px}::ng-deep .mat-autocomplete-panel .mat-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-paginator .mat-paginator-container .mat-paginator-range-actions .mat-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-autocomplete-panel.table-autocomplete{max-height:400px}mat-spinner{margin-top:-9px;margin-right:6px}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
+        return [{ type: i0.Injector }, { type: VdMediaService }, { type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                         type: Optional
                     }, {
                         type: Self
@@ -15001,9 +15092,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                     }] }, { type: i1.FormGroupDirective, decorators: [{
                         type: Optional
                     }] }, { type: i2.ErrorStateMatcher }, { type: i3$4.FocusMonitor }, { type: i0.ElementRef }];
-    }, propDecorators: { chipInput: [{
+    }, propDecorators: { dynamicTable: [{
                 type: ViewChild,
-                args: [MatInput, { static: true }]
+                args: [VdDynamicTableComponent, { static: false }]
+            }], classType: [{
+                type: Input
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator, { static: true }]
+            }], sort: [{
+                type: ViewChild,
+                args: [MatSort, { static: false }]
             }], chips: [{
                 type: Input
             }], chipTemplate: [{
@@ -15012,13 +15111,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
             }], autocompleteOptionTemplate: [{
                 type: ContentChild,
                 args: [VdAutocompleteOptionDirective]
+            }], autocomplete: [{
+                type: ViewChild,
+                args: [MatAutocomplete, { static: false }]
+            }], autocompleteTrigger: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
             }], endpoint: [{
                 type: Input
             }], params: [{
                 type: Input
             }], projection: [{
                 type: Input
-            }], path: [{
+            }], paginated: [{
                 type: Input
             }], context: [{
                 type: Input
@@ -15028,15 +15133,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 type: Input
             }], searchFields: [{
                 type: Input
-            }], termMinlength: [{
-                type: Input
-            }], limit: [{
-                type: Input
             }], removable: [{
                 type: Input
             }], debounce: [{
-                type: Input,
-                args: ['debounce']
+                type: Input
             }], autocompleteCssClass: [{
                 type: Input
             }], initSelect: [{
@@ -15052,8 +15152,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 type: Input
             }], chipFocus: [{
                 type: Output
-            }], default: [{
-                type: Input
             }] } });
 
 const DECLARATIONS$2 = [
@@ -15068,7 +15166,8 @@ const MATRIAL_DECLARATIONS = [
     MatInputModule,
     MatSelectModule,
     MatAutocompleteModule,
-    MatProgressSpinnerModule
+    MatProgressSpinnerModule,
+    MatPaginatorModule
 ];
 class VdChipsModule {
 }
@@ -15077,19 +15176,22 @@ class VdChipsModule {
         VdAutocompleteOptionDirective,
         VdChipDirective], imports: [CommonModule,
         FormsModule,
-        ReactiveFormsModule, MatChipsModule,
+        ReactiveFormsModule,
+        VdTableModule, MatChipsModule,
         MatIconModule,
         MatButtonModule,
         MatInputModule,
         MatSelectModule,
         MatAutocompleteModule,
-        MatProgressSpinnerModule], exports: [VdChipsComponent,
+        MatProgressSpinnerModule,
+        MatPaginatorModule], exports: [VdChipsComponent,
         VdAutocompleteOptionDirective,
         VdChipDirective] });
 /** @nocollapse */ VdChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsModule, imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
+            VdTableModule,
             MATRIAL_DECLARATIONS
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdChipsModule, decorators: [{
@@ -15099,6 +15201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
+                        VdTableModule,
                         MATRIAL_DECLARATIONS
                     ],
                     declarations: [
@@ -16201,10 +16304,10 @@ class VdGenericFormComponent {
     }
 }
 /** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", fieldGroups: "fieldGroups", groupName: "groupName", context: "context", separatorKeysCodes: "separatorKeysCodes" }, 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            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <ng-container *ngIf=\"field.wrapped\">\r\n                    <!-- #region Text input -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Textarea -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Enum -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdSelect -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-select [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Chips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                            <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                <span>{{chip}}</span>\r\n                                <button matChipRemove>\r\n                                    <mat-icon>cancel</mat-icon>\r\n                                </button>\r\n                            </mat-chip>\r\n                            <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                        </mat-chip-list>\r\n                        <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdChips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, formGroup, context)\"></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, formGroup.value, formGroup, context)\"></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 were 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Select -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Autocomplete -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Date -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n                </ng-container>\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\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                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$5.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", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i4$5.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "context", "key", "searchField", "searchFields", "termMinlength", "limit", "removable", "debounce", "autocompleteCssClass", "suffixButtons", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$5.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$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { type: i4$5.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$5.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$5.MatSuffix, selector: "[matSuffix]" }] });
+/** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", fieldGroups: "fieldGroups", groupName: "groupName", context: "context", separatorKeysCodes: "separatorKeysCodes" }, 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            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <ng-container *ngIf=\"field.wrapped\">\r\n                    <!-- #region Text input -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Textarea -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Enum -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdSelect -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-select [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Chips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                            <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                <span>{{chip}}</span>\r\n                                <button matChipRemove>\r\n                                    <mat-icon>cancel</mat-icon>\r\n                                </button>\r\n                            </mat-chip>\r\n                            <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                        </mat-chip-list>\r\n                        <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdChips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, formGroup, context)\"></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, formGroup.value, formGroup, context)\"></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 were 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Select -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Autocomplete -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Date -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n                </ng-container>\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\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                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$5.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", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i5$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4$1.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$5.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$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$5.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { type: i5$2.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: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i9$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$5.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            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <ng-container *ngIf=\"field.wrapped\">\r\n                    <!-- #region Text input -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Textarea -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Enum -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdSelect -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-select [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Chips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                            <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                <span>{{chip}}</span>\r\n                                <button matChipRemove>\r\n                                    <mat-icon>cancel</mat-icon>\r\n                                </button>\r\n                            </mat-chip>\r\n                            <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                        </mat-chip-list>\r\n                        <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdChips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, formGroup, context)\"></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, formGroup.value, formGroup, context)\"></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 were 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Select -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Autocomplete -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Date -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n                </ng-container>\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\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                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
+            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            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <ng-container *ngIf=\"field.wrapped\">\r\n                    <!-- #region Text input -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Textarea -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Enum -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdSelect -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-select [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                <div [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                            <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                <div [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></div>\r\n                            </ng-template>\r\n                        </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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Chips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                            <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                <span>{{chip}}</span>\r\n                                <button matChipRemove>\r\n                                    <mat-icon>cancel</mat-icon>\r\n                                </button>\r\n                            </mat-chip>\r\n                            <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                        </mat-chip-list>\r\n                        <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region VdChips -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"isFunction(field.endpoint)?field.endpoint(formGroup.value, formGroup, context):field.endpoint\" [params]=\"isFunction(field.params)?field.params(formGroup.value, formGroup, context):(field.params||{})\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                            <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                <div [outerHTML]=\"field.chipTemplate(chip, formGroup.value, formGroup, context)\"></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, formGroup.value, formGroup, context)\"></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 were 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Select -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" 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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Autocomplete -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                    <!-- #endregion -->\r\n\r\n                    <!-- #region Date -->\r\n                    <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin appearance=\"outline\">\r\n                        <mat-label>{{field.header}}</mat-label>\r\n                        <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\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                    <!-- #endregion -->\r\n                </ng-container>\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\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                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\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                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -16371,7 +16474,7 @@ class MatFormFieldEditorDirective extends _EditorInputMixinBase {
         }
     }
 }
-/** @nocollapse */ MatFormFieldEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatFormFieldEditorDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: NG_VALUE_ACCESSOR, self: true }, { token: i3$5.Platform }, { token: i4$6.AutofillMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ MatFormFieldEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatFormFieldEditorDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: NG_VALUE_ACCESSOR, self: true }, { token: i3$5.Platform }, { token: i4$5.AutofillMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 /** @nocollapse */ MatFormFieldEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: MatFormFieldEditorDirective, selector: "[tinyMatFormControl]", inputs: { disabled: "disabled", id: "id", placeholder: "placeholder", required: "required", value: "value", errorStateMatcher: "errorStateMatcher" }, outputs: { editorChange: "editorChange" }, host: { listeners: { "onInit": "onEditorInit($event)" }, properties: { "attr.id": "id", "attr.aria-describedby": "ariaDescribedby || null", "attr.aria-invalid": "errorState", "attr.aria-required": "required.toString()" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatFormFieldEditorDirective }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: MatFormFieldEditorDirective, decorators: [{
             type: Directive,
@@ -16394,12 +16497,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                         type: Optional
                     }] }, { type: i1.FormGroupDirective, decorators: [{
                         type: Optional
-                    }] }, { type: i2.ErrorStateMatcher }, { type: i5$2.EditorComponent, decorators: [{
+                    }] }, { type: i2.ErrorStateMatcher }, { type: i5$3.EditorComponent, decorators: [{
                         type: Self
                     }, {
                         type: Inject,
                         args: [NG_VALUE_ACCESSOR]
-                    }] }, { type: i3$5.Platform }, { type: i4$6.AutofillMonitor }, { type: i0.NgZone }];
+                    }] }, { type: i3$5.Platform }, { type: i4$5.AutofillMonitor }, { type: i0.NgZone }];
     }, propDecorators: { disabled: [{
                 type: Input
             }], id: [{