@messaia/cdk 14.0.0 → 15.0.0-rc02

package/fesm2015/messaia-cdk.mjs

@@ -1,14 +1,14 @@
-import * as i5$3 from '@angular/cdk/drag-drop';
+import * as i5$4 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$2 from '@angular/common';
 import { CommonModule, Location, getLocaleNumberSymbol, NumberSymbol, DecimalPipe } from '@angular/common';
 import * as i1$6 from '@angular/common/http';
 import { HttpParams, HttpClient, HttpRequest, HttpHeaders, HttpEventType, HttpClientModule, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Directive, Input, Pipe, HostListener, Component, NgModule, Injectable, Injector, ViewEncapsulation, COMPILER_OPTIONS, CompilerFactory, Compiler, EventEmitter, Output, ViewChild, Optional, SkipSelf, NgZone, forwardRef, Inject, SecurityContext, ContentChildren, HostBinding, Self, ContentChild, TemplateRef, ViewContainerRef, ViewChildren, ElementRef, LOCALE_ID, Attribute } from '@angular/core';
+import { Directive, Input, Pipe, HostListener, Component, NgModule, Injectable, Injector, ViewEncapsulation, COMPILER_OPTIONS, CompilerFactory, Compiler, EventEmitter, Output, ViewChild, Optional, SkipSelf, NgZone, forwardRef, Inject, SecurityContext, ContentChildren, HostBinding, ChangeDetectionStrategy, Self, ContentChild, TemplateRef, ViewContainerRef, ViewChildren, ElementRef, LOCALE_ID, Attribute } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControlName, FormControlDirective, FormArray, FormGroup, FormControl, FormsModule, NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, NG_VALIDATORS, AbstractControl, FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import * as i5 from '@angular/material/button';
+import * as i5$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$5 from '@angular/material/dialog';
 import { MatDialogConfig, MatDialog, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -18,7 +18,7 @@ import * as i15 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i17 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i11 from '@angular/material/form-field';
+import * as i6$1 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -30,15 +30,15 @@ import * as i18 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import * as i14 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i5$2 from '@angular/material/select';
-import { MatSelect, MatSelectModule } from '@angular/material/select';
+import * as i5$3 from '@angular/material/select';
+import { MatSelect, MatSelectModule, MAT_SELECT_CONFIG } from '@angular/material/select';
 import * as i17$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i12 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i1$4 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i5$1 from '@angular/material/toolbar';
+import * as i5$2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i19 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -61,10 +61,10 @@ import * as i4$2 from '@angular/material/sidenav';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import * as i1$3 from '@angular/router';
 import { RouterModule, Router, NavigationEnd } from '@angular/router';
+import * as i5 from '@angular/material/divider';
+import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';
 import * as i2 from '@angular/material/core';
 import { mixinErrorState, MatNativeDateModule } from '@angular/material/core';
-import * as i6$1 from '@angular/material/divider';
-import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';
 import * as i3$2 from '@angular/cdk/a11y';
 import { CdkPortal, TemplatePortalDirective } from '@angular/cdk/portal';
 import { SelectionModel } from '@angular/cdk/collections';
@@ -74,14 +74,14 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import '@angular/localize/init';
 import { MatStepper } from '@angular/material/stepper';
 import { saveAs } from 'file-saver';
-import * as i11$1 from '@angular/material/autocomplete';
+import * as i11 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i3$3 from '@angular/cdk/platform';
 import * as i4$3 from '@angular/cdk/text-field';
-import * as i5$4 from '@tinymce/tinymce-angular';
+import * as i5$5 from '@tinymce/tinymce-angular';
 import * as i1$7 from '@angular/cdk/bidi';
 
 class DisableControlDirective {
@@ -106,9 +106,9 @@ class DisableControlDirective {
         }
     }
 }
-/** @nocollapse */ DisableControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisableControlDirective, deps: [{ token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DisableControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: DisableControlDirective, selector: "[disableControl]", inputs: { disableControl: "disableControl" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DisableControlDirective, decorators: [{
+/** @nocollapse */ DisableControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DisableControlDirective, deps: [{ token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DisableControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: DisableControlDirective, selector: "[disableControl]", inputs: { disableControl: "disableControl" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DisableControlDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[disableControl]' }]
         }], ctorParameters: function () { return [{ type: i1.NgControl }]; }, propDecorators: { disableControl: [{
@@ -120,9 +120,9 @@ class DataSourcePipe {
         return data ? new MatTableDataSource(data) : null;
     }
 }
-/** @nocollapse */ DataSourcePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DataSourcePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ DataSourcePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: DataSourcePipe, name: "dataSource" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DataSourcePipe, decorators: [{
+/** @nocollapse */ DataSourcePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DataSourcePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ DataSourcePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: DataSourcePipe, name: "dataSource" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DataSourcePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'dataSource' }]
         }] });
@@ -137,9 +137,9 @@ class EnumPipe {
         return `${prefix}${enumType[value]}${suffix}`;
     }
 }
-/** @nocollapse */ EnumPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ EnumPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: EnumPipe, name: "enum", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EnumPipe, decorators: [{
+/** @nocollapse */ EnumPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ EnumPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: EnumPipe, name: "enum", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EnumPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'enum',
@@ -176,9 +176,9 @@ class FileSizePipe {
         return `${bytes.toFixed(precision[unit])} ${unit}`;
     }
 }
-/** @nocollapse */ FileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: FileSizePipe, name: "fileSize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FileSizePipe, decorators: [{
+/** @nocollapse */ FileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ FileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: FileSizePipe, name: "fileSize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'fileSize' }]
         }] });
@@ -194,9 +194,9 @@ class FilterPipe {
         return items === null || items === void 0 ? void 0 : items.filter(item => item.id.indexOf(filterBy) !== -1);
     }
 }
-/** @nocollapse */ FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: FilterPipe, name: "filter", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterPipe, decorators: [{
+/** @nocollapse */ FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: FilterPipe, name: "filter", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filter',
@@ -215,9 +215,9 @@ class FirstLetterPipe {
         return uppercase ? val.toUpperCase() : val;
     }
 }
-/** @nocollapse */ FirstLetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FirstLetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FirstLetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: FirstLetterPipe, name: "firstLetter", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FirstLetterPipe, decorators: [{
+/** @nocollapse */ FirstLetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FirstLetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ FirstLetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: FirstLetterPipe, name: "firstLetter", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FirstLetterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'firstLetter',
@@ -231,9 +231,9 @@ class FormControlPipe {
         return value;
     }
 }
-/** @nocollapse */ FormControlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FormControlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: FormControlPipe, name: "formControl" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormControlPipe, decorators: [{
+/** @nocollapse */ FormControlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ FormControlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: FormControlPipe, name: "formControl" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FormControlPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'formControl' }]
         }] });
@@ -243,9 +243,9 @@ class FuncPipe {
         return value && typeof value === 'function' ? value(...args) : value;
     }
 }
-/** @nocollapse */ FuncPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FuncPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: FuncPipe, name: "func" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FuncPipe, decorators: [{
+/** @nocollapse */ FuncPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ FuncPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: FuncPipe, name: "func" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FuncPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'func' }]
         }] });
@@ -259,9 +259,9 @@ class KeysPipe {
         return keys;
     }
 }
-/** @nocollapse */ KeysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ KeysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: KeysPipe, name: "keys" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: KeysPipe, decorators: [{
+/** @nocollapse */ KeysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ KeysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: KeysPipe, name: "keys" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: KeysPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'keys' }]
         }] });
@@ -281,9 +281,9 @@ class MonthNamePipe {
         return (month < 1 || month > 12) ? 'N/A' : this.monthNames[month - 1];
     }
 }
-/** @nocollapse */ MonthNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ MonthNamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: MonthNamePipe, name: "monthName", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MonthNamePipe, decorators: [{
+/** @nocollapse */ MonthNamePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ MonthNamePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: MonthNamePipe, name: "monthName", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MonthNamePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'monthName',
@@ -328,9 +328,9 @@ class OnlyNumberDirective {
         }
     }
 }
-/** @nocollapse */ OnlyNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ OnlyNumberDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: { onlyNumber: "onlyNumber" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: OnlyNumberDirective, decorators: [{
+/** @nocollapse */ OnlyNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ OnlyNumberDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: { onlyNumber: "onlyNumber" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: OnlyNumberDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[onlyNumber]'
@@ -513,9 +513,9 @@ class OrderPipe {
         }, value);
     }
 }
-/** @nocollapse */ OrderPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: OrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ OrderPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: OrderPipe, name: "orderBy", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: OrderPipe, decorators: [{
+/** @nocollapse */ OrderPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: OrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ OrderPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: OrderPipe, name: "orderBy", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: OrderPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'orderBy',
@@ -536,9 +536,9 @@ class PlaceholderPipe {
         return '';
     }
 }
-/** @nocollapse */ PlaceholderPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PlaceholderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ PlaceholderPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: PlaceholderPipe, name: "placeholder", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PlaceholderPipe, decorators: [{
+/** @nocollapse */ PlaceholderPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PlaceholderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ PlaceholderPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: PlaceholderPipe, name: "placeholder", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PlaceholderPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'placeholder',
@@ -567,9 +567,9 @@ class SafeHtmlPipe {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
 }
-/** @nocollapse */ SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+/** @nocollapse */ SafeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ SafeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'safeHtml' }]
         }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
@@ -585,9 +585,9 @@ class TimePipe {
         return time;
     }
 }
-/** @nocollapse */ TimePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ TimePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: TimePipe, name: "time" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TimePipe, decorators: [{
+/** @nocollapse */ TimePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ TimePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: TimePipe, name: "time" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TimePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'time' }]
         }] });
@@ -597,9 +597,9 @@ class TitleCase {
         return input.length > 0 ? input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase())) : '';
     }
 }
-/** @nocollapse */ TitleCase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TitleCase, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ TitleCase.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: TitleCase, name: "titlecase", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TitleCase, decorators: [{
+/** @nocollapse */ TitleCase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TitleCase, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ TitleCase.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: TitleCase, name: "titlecase", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TitleCase, decorators: [{
             type: Pipe,
             args: [{ name: 'titlecase', pure: false }]
         }] });
@@ -796,9 +796,9 @@ Utils.germanMonthNames = [
     { name: 'November', id: 11 },
     { name: 'Dezember', id: 12 }
 ];
-/** @nocollapse */ Utils.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: Utils, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ Utils.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: Utils, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: Utils, decorators: [{
+/** @nocollapse */ Utils.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: Utils, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ Utils.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: Utils, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: Utils, decorators: [{
             type: Directive
         }] });
 
@@ -807,9 +807,9 @@ class TruncatePipe {
         return Utils.truncateText(text, length);
     }
 }
-/** @nocollapse */ TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: TruncatePipe, name: "truncate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TruncatePipe, decorators: [{
+/** @nocollapse */ TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: TruncatePipe, name: "truncate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'truncate' }]
         }] });
@@ -819,9 +819,9 @@ class ValuesPipe {
         return Object.keys(value).map(key => value[key]);
     }
 }
-/** @nocollapse */ ValuesPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ ValuesPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: ValuesPipe, name: "values", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ValuesPipe, decorators: [{
+/** @nocollapse */ ValuesPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ ValuesPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: ValuesPipe, name: "values", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ValuesPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'values', pure: false }]
         }] });
@@ -956,7 +956,7 @@ function Column(args) {
                 case 'date':
                     tableColumn.inputType || (tableColumn.inputType = 'date');
                     tableColumn.type || (tableColumn.type = TableColumnType.Date);
-                    tableColumn.maxWidth || (tableColumn.maxWidth = 80);
+                    tableColumn.maxWidth || (tableColumn.maxWidth = 94);
                     tableColumn.arrowBefore = tableColumn.arrowBefore !== undefined ? tableColumn.arrowBefore : true;
                     break;
                 case 'boolean':
@@ -1088,9 +1088,9 @@ class FormGroupPipe {
         return value;
     }
 }
-/** @nocollapse */ FormGroupPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FormGroupPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: FormGroupPipe, name: "formGroup" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FormGroupPipe, decorators: [{
+/** @nocollapse */ FormGroupPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FormGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ FormGroupPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: FormGroupPipe, name: "formGroup" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FormGroupPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'formGroup' }]
         }] });
@@ -1314,9 +1314,9 @@ AppStorage.getObjectEncoded = (key, defaultValue) => {
         return defaultValue;
     }
 };
-/** @nocollapse */ AppStorage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AppStorage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ AppStorage.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: AppStorage, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AppStorage, decorators: [{
+/** @nocollapse */ AppStorage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppStorage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ AppStorage.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: AppStorage, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppStorage, decorators: [{
             type: Directive
         }] });
 
@@ -1359,18 +1359,18 @@ class DynamicBuilder {
         return componentRef;
     }
 }
-/** @nocollapse */ DynamicBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicBuilder, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ DynamicBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicBuilder, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicBuilder, decorators: [{
+/** @nocollapse */ DynamicBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DynamicBuilder, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ DynamicBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DynamicBuilder, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DynamicBuilder, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.Compiler }]; } });
 
 class DynamicComponentCompiler {
 }
-/** @nocollapse */ DynamicComponentCompiler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicComponentCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ DynamicComponentCompiler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicComponentCompiler, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DynamicComponentCompiler, decorators: [{
+/** @nocollapse */ DynamicComponentCompiler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DynamicComponentCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ DynamicComponentCompiler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DynamicComponentCompiler, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DynamicComponentCompiler, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1395,9 +1395,9 @@ class ActionItem {
 
 class AppSetting {
 }
-/** @nocollapse */ AppSetting.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AppSetting, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ AppSetting.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AppSetting });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AppSetting, decorators: [{
+/** @nocollapse */ AppSetting.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppSetting, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ AppSetting.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppSetting });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AppSetting, decorators: [{
             type: Injectable
         }] });
 
@@ -2346,9 +2346,9 @@ class BaseService extends GenericService {
         super('');
     }
 }
-/** @nocollapse */ BaseService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ BaseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseService, decorators: [{
+/** @nocollapse */ BaseService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ BaseService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -2393,9 +2393,9 @@ class EnumService {
             .map(key => ({ id: enumType[key], name: `${prefix}${key}` }));
     }
 }
-/** @nocollapse */ EnumService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ EnumService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EnumService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EnumService, decorators: [{
+/** @nocollapse */ EnumService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ EnumService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EnumService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EnumService, decorators: [{
             type: Injectable
         }] });
 
@@ -2434,8 +2434,8 @@ const COMMON_DECLARATIONS = [
 ];
 class VdCommonModule {
 }
-/** @nocollapse */ VdCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdCommonModule, declarations: [DataSourcePipe,
+/** @nocollapse */ VdCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdCommonModule, declarations: [DataSourcePipe,
         DisableControlDirective,
         EnumPipe,
         FileSizePipe,
@@ -2472,8 +2472,8 @@ class VdCommonModule {
         TitleCase,
         TruncatePipe,
         ValuesPipe] });
-/** @nocollapse */ VdCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdCommonModule, providers: [...RUNTIME_COMPILER_PROVIDERS] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdCommonModule, decorators: [{
+/** @nocollapse */ VdCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdCommonModule, providers: [...RUNTIME_COMPILER_PROVIDERS] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -2511,11 +2511,11 @@ class VdMenuComponent {
         }
     }
 }
-/** @nocollapse */ VdMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" mat-list-icon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\">{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", inputs: ["disableRipple", "disabled"], exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListAvatarCssMatStyler, selector: "[mat-list-avatar], [matListAvatar]" }, { kind: "directive", type: i2.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i4.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMenuComponent, decorators: [{
+/** @nocollapse */ VdMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdMenuComponent, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", avatar: "avatar" }, outputs: { onClick: "click" }, ngImport: i0, template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4.MatListItemTitle, selector: "[matListItemTitle]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" mat-list-icon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\">{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>" }]
+            args: [{ selector: 'vd-menu', template: "<mat-nav-list>\r\n\t<ng-template let-item let-last=\"last\" ngFor [ngForOf]=\"items\">\r\n\t\t<a mat-list-item *ngIf=\"item.enabled\" [routerLink]=\"item.path\" [routerLinkActive]=\"['active']\" [routerLinkActiveOptions]=\"{exact:item.activeExact}\" (click)=\"itemClicked(item.event?item.event:$event)\">\r\n\t\t\t<mat-icon *ngIf=\"!avatar\" matListItemIcon>{{item.icon}}</mat-icon>\r\n\t\t\t<span *ngIf=\"!avatar\" matListItemTitle>{{item.title}}</span>\r\n\t\t\t<mat-icon *ngIf=\"avatar\" matListAvatar>{{item.icon}}</mat-icon>\r\n\t\t\t<h3 *ngIf=\"avatar\" matLine>{{item.title}}</h3>\r\n\t\t\t<p *ngIf=\"avatar && item.description\" matLine> {{item.description}} </p>\r\n\t\t</a>\r\n\t\t<mat-divider *ngIf=\"item.divider && !avatar\"></mat-divider>\r\n\t\t<mat-divider [inset]=\"avatar\" *ngIf=\"!item.divider && avatar && !last\"></mat-divider>\r\n\t</ng-template>\r\n</mat-nav-list>" }]
         }], propDecorators: { items: [{
                 type: Input
             }], activeExact: [{
@@ -2529,10 +2529,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 
 class VdHttpModule {
 }
-/** @nocollapse */ VdHttpModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdHttpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdHttpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdHttpModule, imports: [HttpClientModule] });
-/** @nocollapse */ VdHttpModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdHttpModule, imports: [HttpClientModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdHttpModule, decorators: [{
+/** @nocollapse */ VdHttpModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdHttpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdHttpModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdHttpModule, imports: [HttpClientModule] });
+/** @nocollapse */ VdHttpModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdHttpModule, imports: [HttpClientModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdHttpModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2550,9 +2550,9 @@ class MenuService extends GenericService {
         super('menu');
     }
 }
-/** @nocollapse */ MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuService, decorators: [{
+/** @nocollapse */ MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -6717,9 +6717,9 @@ class MenuItemService extends GenericService {
         super('menuitem');
     }
 }
-/** @nocollapse */ MenuItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ MenuItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuItemService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuItemService, decorators: [{
+/** @nocollapse */ MenuItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ MenuItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuItemService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuItemService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -6743,9 +6743,9 @@ class MenuResolve {
         return this.menuService.getList(route.data || {}, null, { cache: 'yes' });
     }
 }
-/** @nocollapse */ MenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ MenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuResolve });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MenuResolve, decorators: [{
+/** @nocollapse */ MenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ MenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuResolve });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MenuResolve, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: MenuService }]; } });
 /**
@@ -6775,9 +6775,9 @@ class SubMenuResolve {
         return [];
     }
 }
-/** @nocollapse */ SubMenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SubMenuResolve, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ SubMenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SubMenuResolve });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: SubMenuResolve, decorators: [{
+/** @nocollapse */ SubMenuResolve.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SubMenuResolve, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ SubMenuResolve.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SubMenuResolve });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: SubMenuResolve, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }]; } });
 
@@ -6786,16 +6786,16 @@ const DECLARATIONS$5 = [
 ];
 class VdMenuModule {
 }
-/** @nocollapse */ VdMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdMenuModule, declarations: [VdMenuComponent], imports: [CommonModule,
+/** @nocollapse */ VdMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdMenuModule, declarations: [VdMenuComponent], imports: [CommonModule,
         RouterModule,
         MatIconModule,
         MatListModule], exports: [VdMenuComponent] });
-/** @nocollapse */ VdMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMenuModule, providers: [MenuService], imports: [CommonModule,
+/** @nocollapse */ VdMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMenuModule, providers: [MenuService], imports: [CommonModule,
         RouterModule,
         MatIconModule,
         MatListModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6816,9 +6816,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 
 class VdDynamicMenuComponent {
 }
-/** @nocollapse */ VdDynamicMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDynamicMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdDynamicMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", context: "context" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }], ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n    <ng-container *ngFor=\"let menu of items\">\r\n        <a mat-icon-button [mat-menu-trigger-for]=\"matMenu\" *ngIf=\"menu?.items?.length && !(menu.hide && menu.hide(data, context))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context))\" (click)=\"$event.stopPropagation();\">\r\n            <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func\">{{(menu.icon | func) || 'more_vert'}}</mat-icon>\r\n            <span>{{menu.title}}</span>\r\n        </a>\r\n        <a mat-icon-button *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context))\" (click)=\"$event.stopPropagation(); menu.event?menu.event(data, context):null\">\r\n            <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func\">{{(menu.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n        </a>\r\n        <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n            <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n                <ng-container *ngIf=\"!menuItem.items\">\r\n                    <a mat-menu-item (click)=\"menuItem.event?menuItem.event(data, context):null\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context)\">\r\n                        <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func\">{{(menuItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                        <span>{{menuItem.title}}</span>\r\n                    </a>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"menuItem.items\">\r\n                    <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                        <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n                            <a mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(data, context):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context)\">\r\n                                <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass | func\">{{(menuSubItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                                <span>{{menuSubItem.title}}</span>\r\n                            </a>\r\n                        </ng-container>\r\n                    </mat-menu>\r\n                    <a mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context)\">\r\n                        <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func\">{{(menuItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                        <span>{{menuItem.title}}</span>\r\n                    </a>\r\n                </ng-container>\r\n            </ng-container>\r\n        </mat-menu>\r\n    </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDynamicMenuComponent, decorators: [{
+/** @nocollapse */ VdDynamicMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDynamicMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdDynamicMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", context: "context" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }], ngImport: i0, template: "<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n    <ng-container *ngFor=\"let menu of items\">\r\n        <a mat-icon-button [mat-menu-trigger-for]=\"matMenu\" *ngIf=\"menu?.items?.length && !(menu.hide && menu.hide(data, context))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context))\" (click)=\"$event.stopPropagation();\">\r\n            <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func\">{{(menu.icon | func) || 'more_vert'}}</mat-icon>\r\n            <span>{{menu.title}}</span>\r\n        </a>\r\n        <a mat-icon-button *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context))\" (click)=\"$event.stopPropagation(); menu.event?menu.event(data, context):null\">\r\n            <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func\">{{(menu.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n        </a>\r\n        <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n            <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n                <ng-container *ngIf=\"!menuItem.items\">\r\n                    <a mat-menu-item (click)=\"menuItem.event?menuItem.event(data, context):null\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context)\">\r\n                        <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func\">{{(menuItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                        <span>{{menuItem.title}}</span>\r\n                    </a>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"menuItem.items\">\r\n                    <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                        <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n                            <a mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(data, context):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context)\">\r\n                                <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass | func\">{{(menuSubItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                                <span>{{menuSubItem.title}}</span>\r\n                            </a>\r\n                        </ng-container>\r\n                    </mat-menu>\r\n                    <a mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context)\">\r\n                        <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func\">{{(menuItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                        <span>{{menuItem.title}}</span>\r\n                    </a>\r\n                </ng-container>\r\n            </ng-container>\r\n        </mat-menu>\r\n    </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDynamicMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-dynamic-menu', template: "<div layout=\"row\" layout-align=\"start center\" *ngIf=\"items\" flex>\r\n    <ng-container *ngFor=\"let menu of items\">\r\n        <a mat-icon-button [mat-menu-trigger-for]=\"matMenu\" *ngIf=\"menu?.items?.length && !(menu.hide && menu.hide(data, context))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context))\" (click)=\"$event.stopPropagation();\">\r\n            <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func\">{{(menu.icon | func) || 'more_vert'}}</mat-icon>\r\n            <span>{{menu.title}}</span>\r\n        </a>\r\n        <a mat-icon-button *ngIf=\"!menu?.items?.length && !(menu.hide && menu.hide(data, context))\" [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context))\" (click)=\"$event.stopPropagation(); menu.event?menu.event(data, context):null\">\r\n            <mat-icon fontSet=\"{{menu.iconFontSet}}\" [class]=\"menu.iconClass | func\">{{(menu.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n        </a>\r\n        <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n            <ng-container *ngFor=\"let menuItem of menu?.items\">\r\n                <ng-container *ngIf=\"!menuItem.items\">\r\n                    <a mat-menu-item (click)=\"menuItem.event?menuItem.event(data, context):null\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context)\">\r\n                        <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func\">{{(menuItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                        <span>{{menuItem.title}}</span>\r\n                    </a>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"menuItem.items\">\r\n                    <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                        <ng-container *ngFor=\"let menuSubItem of menuItem.items\">\r\n                            <a mat-menu-item (click)=\"menuSubItem.event?menuSubItem.event(data, context):null\" *ngIf=\"!menuSubItem.hide || !menuSubItem.hide(data, context)\" [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context)\">\r\n                                <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuSubItem.iconClass | func\">{{(menuSubItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                                <span>{{menuSubItem.title}}</span>\r\n                            </a>\r\n                        </ng-container>\r\n                    </mat-menu>\r\n                    <a mat-menu-item [matMenuTriggerFor]=\"subMenu\" *ngIf=\"!menuItem.hide || !menuItem.hide(data, context)\" [disabled]=\"menuItem.disable && menuItem.disable(data, context)\">\r\n                        <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-icons-outlined'}}\" [class]=\"menuItem.iconClass | func\">{{(menuItem.icon | func) || 'radio_button_unchecked'}}</mat-icon>\r\n                        <span>{{menuItem.title}}</span>\r\n                    </a>\r\n                </ng-container>\r\n            </ng-container>\r\n        </mat-menu>\r\n    </ng-container>\r\n</div>" }]
         }], propDecorators: { matMenu: [{
@@ -6850,11 +6850,11 @@ class VdLayoutCardOverComponent {
         this.color = 'primary';
     }
 }
-/** @nocollapse */ VdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}:host.accordion>.vd-layout-card-over-wrapper>.vd-layout-card-over ::ng-deep>.mat-card{background-color:transparent;box-shadow:none;padding-bottom:24px}:host.tab>.vd-layout-card-over-wrapper{margin:-56px 0}:host mat-expansion-panel .mat-expansion-panel-header{font-size:1.1em}:host mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{padding-right:0}:host mat-expansion-panel .mat-expansion-panel-header.enabled[aria-disabled=true]{color:inherit}:host mat-expansion-panel .enabled .mat-expansion-panel-header[aria-disabled=true]{color:inherit}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutCardOverComponent, decorators: [{
+/** @nocollapse */ VdLayoutCardOverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdLayoutCardOverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutCardOverComponent, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card appearance=\"outlined\">\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}:host.accordion>.vd-layout-card-over-wrapper>.vd-layout-card-over ::ng-deep>.mat-mdc-card{background-color:transparent;box-shadow:none;padding-bottom:24px;border:none}:host.tab>.vd-layout-card-over-wrapper{margin:-56px 0}:host mat-expansion-panel .mat-expansion-panel-header{font-size:1.1em}:host mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{padding-right:0}:host mat-expansion-panel .mat-expansion-panel-header.enabled[aria-disabled=true]{color:inherit}:host mat-expansion-panel .enabled .mat-expansion-panel-header[aria-disabled=true]{color:inherit}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutCardOverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-layout-card-over', template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card>\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}:host.accordion>.vd-layout-card-over-wrapper>.vd-layout-card-over ::ng-deep>.mat-card{background-color:transparent;box-shadow:none;padding-bottom:24px}:host.tab>.vd-layout-card-over-wrapper{margin:-56px 0}:host mat-expansion-panel .mat-expansion-panel-header{font-size:1.1em}:host mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{padding-right:0}:host mat-expansion-panel .mat-expansion-panel-header.enabled[aria-disabled=true]{color:inherit}:host mat-expansion-panel .enabled .mat-expansion-panel-header[aria-disabled=true]{color:inherit}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"] }]
+            args: [{ selector: 'vd-layout-card-over', template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n\t<div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\"\r\n\t [style.-webkit-box-flex]=\"1\">\r\n\t\t<mat-card appearance=\"outlined\">\r\n\t\t\t<mat-card-title *ngIf=\"cardTitle\">{{cardTitle}}</mat-card-title>\r\n\t\t\t<mat-card-subtitle *ngIf=\"cardSubtitle\">{{cardSubtitle}}</mat-card-subtitle>\r\n\t\t\t<mat-divider *ngIf=\"cardTitle || cardSubtitle\"></mat-divider>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</mat-card>\r\n\t\t<ng-content select=\"[vd-after-card]\"></ng-content>\r\n\t</div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}:host.accordion>.vd-layout-card-over-wrapper>.vd-layout-card-over ::ng-deep>.mat-mdc-card{background-color:transparent;box-shadow:none;padding-bottom:24px;border:none}:host.tab>.vd-layout-card-over-wrapper{margin:-56px 0}:host mat-expansion-panel .mat-expansion-panel-header{font-size:1.1em}:host mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{padding-right:0}:host mat-expansion-panel .mat-expansion-panel-header.enabled[aria-disabled=true]{color:inherit}:host mat-expansion-panel .enabled .mat-expansion-panel-header[aria-disabled=true]{color:inherit}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media (min-width: 960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media (max-width: 959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"] }]
         }], propDecorators: { cardTitle: [{
                 type: Input
             }], cardSubtitle: [{
@@ -6887,9 +6887,9 @@ class VdLayoutFooterComponent {
         return this._color;
     }
 }
-/** @nocollapse */ VdLayoutFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutFooterComponent, selector: "vd-layout-footer,vd-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutFooterComponent, decorators: [{
+/** @nocollapse */ VdLayoutFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdLayoutFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutFooterComponent, selector: "vd-layout-footer,vd-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-footer,vd-layout-footer-inner', template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { color: [{
@@ -6987,9 +6987,9 @@ class VdMediaService {
         this._querySources[query].next(matchMedia(query).matches);
     }
 }
-/** @nocollapse */ VdMediaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ VdMediaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaService, decorators: [{
+/** @nocollapse */ VdMediaService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ VdMediaService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 function MEDIA_PROVIDER_FACTORY(parent, ngZone) {
@@ -7092,11 +7092,11 @@ class VdLayoutManageListComponent {
      */
     close() { return this.sidenav.close(); }
 }
-/** @nocollapse */ VdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "avatar"], outputs: ["click"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
+/** @nocollapse */ VdLayoutManageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdLayoutManageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutManageListComponent, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "avatar"], outputs: ["click"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-layout-manage-list', template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep mat-nav-list a[mat-list-item] .mat-list-item-content{font-size:14px}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
+            args: [{ selector: 'vd-layout-manage-list', template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n\t<!-- #region Side nav -->\r\n\t<mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n\t\t<!-- #region Nav list toolbar -->\r\n\t\t<mat-toolbar dense *ngIf=\"title\">\r\n\t\t\t<span>{{title}}</span>\r\n\t\t\t<span flex></span>\r\n\t\t\t<button mat-icon-button (click)=\"close()\" *ngIf=\"closable\">\r\n\t\t\t\t<mat-icon>menu_open</mat-icon>\r\n\t\t\t</button>\r\n\t\t</mat-toolbar>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom title toolbar -->\r\n\t\t<ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n\t\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t\t\t<ng-content select=\"vd-menu\"></ng-content>\r\n\t\t\t<vd-menu [items]=\"menuItems\" *ngIf=\"menuItems\"></vd-menu>\r\n\t\t</div>\r\n\t</mat-sidenav>\r\n\t<!-- #endregion -->\r\n\r\n\t<!-- #region Main content -->\r\n\t<div class=\"vd-layout-manage-list-main\">\r\n\t\t<!-- #region Toolbar projection -->\r\n\t\t<ng-content select=\"mat-toolbar\"></ng-content>\r\n\t\t<ng-content select=\"vd-list-toolbar\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Scrollable content -->\r\n\t\t<div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Footer content -->\r\n\t\t<ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</div>\r\n\t<!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400}\n"] }]
         }], ctorParameters: function () { return [{ type: VdMediaService }]; }, propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: [MatSidenav, { static: true }]
@@ -7177,9 +7177,9 @@ class LayoutToggle {
         }
     }
 }
-/** @nocollapse */ LayoutToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LayoutToggle, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ LayoutToggle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: LayoutToggle, inputs: { hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LayoutToggle, decorators: [{
+/** @nocollapse */ LayoutToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LayoutToggle, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ LayoutToggle.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: LayoutToggle, inputs: { hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LayoutToggle, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hideWhenOpened: [{
                 type: Input,
@@ -7212,9 +7212,9 @@ class VdLayoutManageListToggleDirective extends LayoutToggle {
         this._layout.toggle();
     }
 }
-/** @nocollapse */ VdLayoutManageListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutManageListToggleDirective, selector: "[vdLayoutManageListToggle]", inputs: { vdLayoutManageListToggle: "vdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListToggleDirective, decorators: [{
+/** @nocollapse */ VdLayoutManageListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutManageListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutManageListToggleDirective, selector: "[vdLayoutManageListToggle]", inputs: { vdLayoutManageListToggle: "vdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListToggleDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdLayoutManageListToggle]' }]
         }], ctorParameters: function () {
@@ -7248,9 +7248,9 @@ class VdLayoutManageListCloseDirective extends LayoutToggle {
         this._layout.close();
     }
 }
-/** @nocollapse */ VdLayoutManageListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutManageListCloseDirective, selector: "[vdLayoutManageListClose]", inputs: { vdLayoutManageListClose: "vdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListCloseDirective, decorators: [{
+/** @nocollapse */ VdLayoutManageListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutManageListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutManageListCloseDirective, selector: "[vdLayoutManageListClose]", inputs: { vdLayoutManageListClose: "vdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListCloseDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdLayoutManageListClose]' }]
         }], ctorParameters: function () {
@@ -7284,9 +7284,9 @@ class VdLayoutManageListOpenDirective extends LayoutToggle {
         this._layout.open();
     }
 }
-/** @nocollapse */ VdLayoutManageListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: { vdLayoutManageListOpen: "vdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutManageListOpenDirective, decorators: [{
+/** @nocollapse */ VdLayoutManageListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutManageListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: { vdLayoutManageListOpen: "vdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutManageListOpenDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdLayoutManageListOpen]' }]
         }], ctorParameters: function () {
@@ -7372,9 +7372,9 @@ class VdLayoutNavListComponent {
         return this.sidenav.close();
     }
 }
-/** @nocollapse */ VdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1$3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListComponent, decorators: [{
+/** @nocollapse */ VdLayoutNavListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1$3.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdLayoutNavListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", 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"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", 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<!-- #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 () {
@@ -7423,9 +7423,9 @@ class VdLayoutNavListToggleDirective extends LayoutToggle {
         this._layout.toggle();
     }
 }
-/** @nocollapse */ VdLayoutNavListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutNavListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutNavListToggleDirective, selector: "[vdLayoutNavListToggle]", inputs: { vdLayoutNavListToggle: "vdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListToggleDirective, decorators: [{
+/** @nocollapse */ VdLayoutNavListToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutNavListToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutNavListToggleDirective, selector: "[vdLayoutNavListToggle]", inputs: { vdLayoutNavListToggle: "vdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavListToggleDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdLayoutNavListToggle]' }]
         }], ctorParameters: function () {
@@ -7458,9 +7458,9 @@ class VdLayoutNavListCloseDirective extends LayoutToggle {
         this._layout.close();
     }
 }
-/** @nocollapse */ VdLayoutNavListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutNavListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutNavListCloseDirective, selector: "[vdLayoutNavListClose]", inputs: { vdLayoutNavListClose: "vdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListCloseDirective, decorators: [{
+/** @nocollapse */ VdLayoutNavListCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutNavListCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutNavListCloseDirective, selector: "[vdLayoutNavListClose]", inputs: { vdLayoutNavListClose: "vdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavListCloseDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdLayoutNavListClose]' }]
         }], ctorParameters: function () {
@@ -7493,9 +7493,9 @@ class VdLayoutNavListOpenDirective extends LayoutToggle {
         this._layout.open();
     }
 }
-/** @nocollapse */ VdLayoutNavListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutNavListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutNavListOpenDirective, selector: "[vdLayoutNavListOpen]", inputs: { vdLayoutNavListOpen: "vdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavListOpenDirective, decorators: [{
+/** @nocollapse */ VdLayoutNavListOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutNavListOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutNavListOpenDirective, selector: "[vdLayoutNavListOpen]", inputs: { vdLayoutNavListOpen: "vdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavListOpenDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vdLayoutNavListOpen]' }]
         }], ctorParameters: function () {
@@ -7567,9 +7567,9 @@ class VdLayoutComponent {
         return this.sidenav.close();
     }
 }
-/** @nocollapse */ VdLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutComponent, selector: "vd-layout", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen>\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\"\r\n\t [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<ng-content></ng-content>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutComponent, decorators: [{
+/** @nocollapse */ VdLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutComponent, selector: "vd-layout", inputs: { mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen>\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\"\r\n\t [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<ng-content></ng-content>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: i4$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i4$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout', template: "<mat-sidenav-container fullscreen>\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\"\r\n\t [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<ng-content></ng-content>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:flex;flex-direction:column}\n"] }]
         }], propDecorators: { sidenav: [{
@@ -7597,9 +7597,9 @@ class VdLayoutToggleDirective extends LayoutToggle {
         this._layout.toggle();
     }
 }
-/** @nocollapse */ VdLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutToggleDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: { vdLayoutToggle: "vdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutToggleDirective, decorators: [{
+/** @nocollapse */ VdLayoutToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutToggleDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: { vdLayoutToggle: "vdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutToggle]',
@@ -7624,9 +7624,9 @@ class VdLayoutCloseDirective extends LayoutToggle {
         this._layout.close();
     }
 }
-/** @nocollapse */ VdLayoutCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutCloseDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutCloseDirective, selector: "[vdLayoutClose]", inputs: { vdLayoutClose: "vdLayoutClose" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutCloseDirective, decorators: [{
+/** @nocollapse */ VdLayoutCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutCloseDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutCloseDirective, selector: "[vdLayoutClose]", inputs: { vdLayoutClose: "vdLayoutClose" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutClose]',
@@ -7651,9 +7651,9 @@ class VdLayoutOpenDirective extends LayoutToggle {
         this._layout.open();
     }
 }
-/** @nocollapse */ VdLayoutOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutOpenDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdLayoutOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutOpenDirective, selector: "[vdLayoutOpen]", inputs: { vdLayoutClose: ["vdLayoutOpen", "vdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutOpenDirective, decorators: [{
+/** @nocollapse */ VdLayoutOpenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutOpenDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdLayoutOpenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutOpenDirective, selector: "[vdLayoutOpen]", inputs: { vdLayoutClose: ["vdLayoutOpen", "vdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutOpen]',
@@ -7720,9 +7720,9 @@ class VdLayoutNavComponent {
         }
     }
 }
-/** @nocollapse */ VdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1$3.Router, optional: true }, { token: i1$3.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", editMode: "editMode", actions: "actions", data: "data", context: "context", icon: "icon", logo: "logo", color: "color", hideToggle: "hideToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\" *ngIf=\"!hideToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>&nbsp;\r\n\t\t\t<span i18n=\"@@add\" *ngIf=\"editMode == false\">Add</span>\r\n\t\t\t<span i18n=\"@@edit\" *ngIf=\"editMode == true\">Edit</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Actions -->\r\n\t\t<vd-dynamic-menu *ngIf=\"editMode==true\" [items]=\"actions\" [data]=\"data\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t<!-- #endregion-->\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "context"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
+/** @nocollapse */ VdLayoutNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1$3.Router, optional: true }, { token: i1$3.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdLayoutNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdLayoutNavComponent, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", editMode: "editMode", actions: "actions", data: "data", context: "context", icon: "icon", logo: "logo", color: "color", hideToggle: "hideToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\" *ngIf=\"!hideToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>&nbsp;\r\n\t\t\t<span i18n=\"@@add\" *ngIf=\"editMode == false\">Add</span>\r\n\t\t\t<span i18n=\"@@edit\" *ngIf=\"editMode == true\">Edit</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Actions -->\r\n\t\t<vd-dynamic-menu *ngIf=\"editMode==true\" [items]=\"actions\" [data]=\"data\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t<!-- #endregion-->\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "context"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-nav', template: "<div class=\"vd-layout-nav-wrapper\">\r\n\t<mat-toolbar [color]=\"color\">\r\n\t\t<!-- #region Toggle buton -->\r\n\t\t<button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\" *ngIf=\"!hideToggle\">\r\n\t\t\t<mat-icon>menu</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Back button -->\r\n\t\t<button mat-icon-button vd-menu-button *ngIf=\"backNavigationRouteEnabled\" (click)=\"handleBackNavigationClick()\">\r\n\t\t\t<mat-icon>arrow_back</mat-icon>\r\n\t\t</button>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom buttons -->\r\n\t\t<ng-content select=\"[vd-menu-button]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Logo with home link -->\r\n\t\t<span *ngIf=\"icon || logo || toolbarTitle\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{icon}}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<span *ngIf=\"toolbarTitle\">{{toolbarTitle}}</span>&nbsp;\r\n\t\t\t<span i18n=\"@@add\" *ngIf=\"editMode == false\">Add</span>\r\n\t\t\t<span i18n=\"@@edit\" *ngIf=\"editMode == true\">Edit</span>\r\n\t\t</span>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Custom content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<span flex></span>\r\n\r\n\t\t<!-- #region Actions -->\r\n\t\t<vd-dynamic-menu *ngIf=\"editMode==true\" [items]=\"actions\" [data]=\"data\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t<!-- #endregion-->\r\n\r\n\t\t<!-- #region Custom right content -->\r\n\t\t<ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n\t\t<!-- #endregion -->\r\n\t</mat-toolbar>\r\n\t<div class=\"vd-layout-nav-content\" cdkScrollable>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<ng-content select=\"vd-layout-footer\"></ng-content>\r\n</div>", styles: [".vd-menu-button{margin-left:0}::ng-deep [dir=rtl] .vd-menu-button{margin-right:0;margin-left:6px}:host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"] }]
         }], ctorParameters: function () {
@@ -7769,9 +7769,9 @@ class VdListToolbarComponent {
         this.actions = [];
     }
 }
-/** @nocollapse */ VdListToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdListToolbarComponent, selector: "vd-list-toolbar", inputs: { subtitle: "subtitle", backButton: "backButton", actions: "actions" }, outputs: { back: "back" }, ngImport: i0, template: "<mat-toolbar dense [ngClass]=\"{'pad-left-none': backButton}\">\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        <button mat-icon-button [vdLayoutManageListOpen]=\"true\" [hideWhenOpened]=\"true\">\r\n            <mat-icon>menu</mat-icon>\r\n        </button>\r\n        <button mat-icon-button (click)=\"back.emit()\" *ngIf=\"backButton\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        <span>{{subtitle}}</span>\r\n        <span flex></span>\r\n        <vd-dynamic-menu [items]=\"actions\"></vd-dynamic-menu>\r\n    </div>\r\n</mat-toolbar>", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: ["vdLayoutManageListOpen"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "context"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdListToolbarComponent, decorators: [{
+/** @nocollapse */ VdListToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdListToolbarComponent, selector: "vd-list-toolbar", inputs: { subtitle: "subtitle", backButton: "backButton", actions: "actions" }, outputs: { back: "back" }, ngImport: i0, template: "<mat-toolbar dense [ngClass]=\"{'pad-left-none': backButton}\">\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        <button mat-icon-button [vdLayoutManageListOpen]=\"true\" [hideWhenOpened]=\"true\">\r\n            <mat-icon>menu</mat-icon>\r\n        </button>\r\n        <button mat-icon-button (click)=\"back.emit()\" *ngIf=\"backButton\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        <span>{{subtitle}}</span>\r\n        <span flex></span>\r\n        <vd-dynamic-menu [items]=\"actions\"></vd-dynamic-menu>\r\n    </div>\r\n</mat-toolbar>", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: VdLayoutManageListOpenDirective, selector: "[vdLayoutManageListOpen]", inputs: ["vdLayoutManageListOpen"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "context"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdListToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-list-toolbar', template: "<mat-toolbar dense [ngClass]=\"{'pad-left-none': backButton}\">\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        <button mat-icon-button [vdLayoutManageListOpen]=\"true\" [hideWhenOpened]=\"true\">\r\n            <mat-icon>menu</mat-icon>\r\n        </button>\r\n        <button mat-icon-button (click)=\"back.emit()\" *ngIf=\"backButton\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n        </button>\r\n        <span>{{subtitle}}</span>\r\n        <span flex></span>\r\n        <vd-dynamic-menu [items]=\"actions\"></vd-dynamic-menu>\r\n    </div>\r\n</mat-toolbar>" }]
         }], propDecorators: { subtitle: [{
@@ -7818,17 +7818,17 @@ const vdCollapseAnimation = trigger('vdCollapse', [
 
 class VdNavigationDrawerMenuDirective {
 }
-/** @nocollapse */ VdNavigationDrawerMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdNavigationDrawerMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdNavigationDrawerMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdNavigationDrawerMenuDirective, selector: "[vd-navigation-drawer-menu]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdNavigationDrawerMenuDirective, decorators: [{
+/** @nocollapse */ VdNavigationDrawerMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdNavigationDrawerMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdNavigationDrawerMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdNavigationDrawerMenuDirective, selector: "[vd-navigation-drawer-menu]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdNavigationDrawerMenuDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-navigation-drawer-menu]' }]
         }] });
 class VdNavigationDrawerToolbarDirective {
 }
-/** @nocollapse */ VdNavigationDrawerToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdNavigationDrawerToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdNavigationDrawerToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdNavigationDrawerToolbarDirective, selector: "[vd-navigation-drawer-toolbar]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdNavigationDrawerToolbarDirective, decorators: [{
+/** @nocollapse */ VdNavigationDrawerToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdNavigationDrawerToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdNavigationDrawerToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdNavigationDrawerToolbarDirective, selector: "[vd-navigation-drawer-toolbar]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdNavigationDrawerToolbarDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-navigation-drawer-toolbar]' }]
         }] });
@@ -7936,9 +7936,9 @@ class VdNavigationDrawerComponent {
         return this._layout.close();
     }
 }
-/** @nocollapse */ VdNavigationDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$3.Router, optional: true }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdNavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdNavigationDrawerComponent, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\">\r\n\t<ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n\t<ng-container *ngIf=\"!isCustomToolbar\">\r\n\t\t<div *ngIf=\"icon || logo || sidenavTitle || avatar\" class=\"vd-navigation-drawer-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<img *ngIf=\"avatar && !logo && !icon\" class=\"vd-nagivation-drawer-toolbar-avatar\" [attr.src]=\"avatar\" />\r\n\t\t\t<span *ngIf=\"sidenavTitle\" class=\"vd-navigation-drawer-title\">{{\r\n\t\t\t\tsidenavTitle\r\n\t\t\t\t}}</span>\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-name\" *ngIf=\"email && name\">\r\n\t\t\t{{ name }}\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\r\n\t\t\t<span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n\t\t\t<button mat-icon-button class=\"vd-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\r\n\t\t\t\t<mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\r\n\t\t\t\t<mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-container>\r\n</mat-toolbar>\r\n<div class=\"vd-navigation-drawer-content\" [@vdCollapse]=\"menuToggled\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\">\r\n\t<ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [vdCollapseAnimation] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
+/** @nocollapse */ VdNavigationDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$3.Router, optional: true }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdNavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdNavigationDrawerComponent, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\">\r\n\t<ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n\t<ng-container *ngIf=\"!isCustomToolbar\">\r\n\t\t<div *ngIf=\"icon || logo || sidenavTitle || avatar\" class=\"vd-navigation-drawer-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<img *ngIf=\"avatar && !logo && !icon\" class=\"vd-nagivation-drawer-toolbar-avatar\" [attr.src]=\"avatar\" />\r\n\t\t\t<span *ngIf=\"sidenavTitle\" class=\"vd-navigation-drawer-title\">{{\r\n\t\t\t\tsidenavTitle\r\n\t\t\t\t}}</span>\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-name\" *ngIf=\"email && name\">\r\n\t\t\t{{ name }}\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\r\n\t\t\t<span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n\t\t\t<button mat-icon-button class=\"vd-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\r\n\t\t\t\t<mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\r\n\t\t\t\t<mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-container>\r\n</mat-toolbar>\r\n<div class=\"vd-navigation-drawer-content\" [@vdCollapse]=\"menuToggled\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\">\r\n\t<ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [vdCollapseAnimation] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-navigation-drawer', animations: [vdCollapseAnimation], template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\">\r\n\t<ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n\t<ng-container *ngIf=\"!isCustomToolbar\">\r\n\t\t<div *ngIf=\"icon || logo || sidenavTitle || avatar\" class=\"vd-navigation-drawer-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\">\r\n\t\t\t<mat-icon *ngIf=\"icon\">{{ icon }}</mat-icon>\r\n\t\t\t<mat-icon *ngIf=\"logo && !icon\" class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n\t\t\t<img *ngIf=\"avatar && !logo && !icon\" class=\"vd-nagivation-drawer-toolbar-avatar\" [attr.src]=\"avatar\" />\r\n\t\t\t<span *ngIf=\"sidenavTitle\" class=\"vd-navigation-drawer-title\">{{\r\n\t\t\t\tsidenavTitle\r\n\t\t\t\t}}</span>\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-name\" *ngIf=\"email && name\">\r\n\t\t\t{{ name }}\r\n\t\t</div>\r\n\t\t<div class=\"vd-navigation-drawer-menu-toggle\" href *ngIf=\"email || name\" (click)=\"toggleMenu()\">\r\n\t\t\t<span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n\t\t\t<button mat-icon-button class=\"vd-navigation-drawer-menu-button\" *ngIf=\"isMenuAvailable\">\r\n\t\t\t\t<mat-icon *ngIf=\"!menuToggled\">arrow_drop_down</mat-icon>\r\n\t\t\t\t<mat-icon *ngIf=\"menuToggled\">arrow_drop_up</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t</ng-container>\r\n</mat-toolbar>\r\n<div class=\"vd-navigation-drawer-content\" [@vdCollapse]=\"menuToggled\">\r\n\t<ng-content></ng-content>\r\n</div>\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\">\r\n\t<ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host mat-toolbar{padding:16px}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px}:host>div{overflow:hidden}\n"] }]
         }], ctorParameters: function () {
@@ -7998,8 +7998,8 @@ const VD_LAYOUTS = [
 ];
 class VdLayoutModule {
 }
-/** @nocollapse */ VdLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutModule, declarations: [VdLayoutComponent,
+/** @nocollapse */ VdLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutModule, declarations: [VdLayoutComponent,
         VdLayoutToggleDirective,
         VdLayoutCloseDirective,
         VdLayoutOpenDirective,
@@ -8049,7 +8049,7 @@ class VdLayoutModule {
         VdNavigationDrawerToolbarDirective,
         VdListToolbarComponent,
         VdDynamicMenuComponent] });
-/** @nocollapse */ VdLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutModule, imports: [CommonModule,
+/** @nocollapse */ VdLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutModule, imports: [CommonModule,
         ScrollingModule,
         MatSidenavModule,
         MatToolbarModule,
@@ -8061,7 +8061,7 @@ class VdLayoutModule {
         MatProgressSpinnerModule,
         VdMenuModule,
         VdCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -8129,7 +8129,7 @@ class AbstractMatFormField extends _AbstractMatFormFieldBase$1 {
      * @param _focusMonitor
      * @param _elementRef
      */
-    constructor(controlType, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, _focusMonitor, _elementRef) {
+    constructor(controlType, ngControl, _parentForm, _parentFormGroup, _defaultErrorStateMatcher, _focusMonitor, _elementRef, changeDetectorRef) {
         super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
         this.controlType = controlType;
         this.ngControl = ngControl;
@@ -8138,6 +8138,7 @@ class AbstractMatFormField extends _AbstractMatFormFieldBase$1 {
         this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
         this._focusMonitor = _focusMonitor;
         this._elementRef = _elementRef;
+        this.changeDetectorRef = changeDetectorRef;
         /**
          * The placeholder for this control.
          */
@@ -8162,12 +8163,17 @@ class AbstractMatFormField extends _AbstractMatFormFieldBase$1 {
          * Whether the control is focused.
          */
         this.focused = false;
+        /**
+         * Whether the control is touched.
+         */
+        this.touched = false;
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
         _focusMonitor.monitor(this._elementRef.nativeElement, true).subscribe(origin => {
             this.focused = !!origin;
             this.stateChanges.next();
+            this.changeDetectorRef.markForCheck();
         });
     }
     /**
@@ -8178,6 +8184,7 @@ class AbstractMatFormField extends _AbstractMatFormFieldBase$1 {
         if (this.onChange) {
             this.onChange(value);
         }
+        this.stateChanges.next();
     }
     /**
      * Gets the value
@@ -8325,11 +8332,11 @@ class AbstractMatFormField extends _AbstractMatFormFieldBase$1 {
  * The element ID
  */
 AbstractMatFormField.nextId = 0;
-/** @nocollapse */ AbstractMatFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AbstractMatFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ AbstractMatFormField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: AbstractMatFormField, inputs: { placeholder: "placeholder", required: "required", readonly: "readonly", disabled: "disabled" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "id": "this.id", "attr.aria-describedBy": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AbstractMatFormField, decorators: [{
+/** @nocollapse */ AbstractMatFormField.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AbstractMatFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ AbstractMatFormField.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: AbstractMatFormField, inputs: { placeholder: "placeholder", required: "required", readonly: "readonly", disabled: "disabled" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class.floating": "this.shouldLabelFloat", "id": "this.id", "attr.aria-describedBy": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AbstractMatFormField, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: i1.NgControl }, { type: i1.NgForm }, { type: i1.FormGroupDirective }, { type: i2.ErrorStateMatcher }, { type: i3$2.FocusMonitor }, { type: i0.ElementRef }]; }, propDecorators: { placeholder: [{
+        }], ctorParameters: function () { return [{ type: undefined }, { type: i1.NgControl }, { type: i1.NgForm }, { type: i1.FormGroupDirective }, { type: i2.ErrorStateMatcher }, { type: i3$2.FocusMonitor }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -8337,6 +8344,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
             }], id: [{
                 type: HostBinding
             }], describedBy: [{
@@ -8360,9 +8370,9 @@ class VdSelectOptionDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdSelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdSelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectOptionDirective, decorators: [{
+/** @nocollapse */ VdSelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdSelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectOptionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-select-option]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -8380,9 +8390,9 @@ class VdSelectTriggerDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdSelectTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectTriggerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdSelectTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectTriggerDirective, decorators: [{
+/** @nocollapse */ VdSelectTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectTriggerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdSelectTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectTriggerDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-select-trigger]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -8400,8 +8410,8 @@ class VdSelectComponent extends AbstractMatFormField {
      * @param focusMonitor
      * @param elementRef
      */
-    constructor(injector, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef) {
-        super("vd-select", ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef);
+    constructor(injector, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef, changeDetectorRef) {
+        super("vd-select", ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef, changeDetectorRef);
         this.injector = injector;
         /**
          * The http service from to get the data
@@ -8415,6 +8425,10 @@ class VdSelectComponent extends AbstractMatFormField {
          * Sorts options
          */
         this._sorted = true;
+        /**
+         * Trigger mode
+         */
+        this._triggerMode = 'chip';
         /**
          * textPrefix?: any
          */
@@ -8494,7 +8508,6 @@ class VdSelectComponent extends AbstractMatFormField {
     }
     /**
      * Sets the disabled.
-     * @param disabled
      */
     get disabled() {
         if (this._readonly) {
@@ -8510,6 +8523,23 @@ class VdSelectComponent extends AbstractMatFormField {
         this._sorted = coerceBooleanProperty(multi);
         this.stateChanges.next();
     }
+    /**
+     * Trigger css class
+     */
+    get triggerCssClass() { return this._triggerCssClass; }
+    set triggerCssClass(triggerCssClass) {
+        this._triggerCssClass = triggerCssClass;
+        this.stateChanges.next();
+    }
+    /**
+     * Trigger mode
+     */
+    get triggerMode() { return this.triggerMode; }
+    set triggerMode(triggerMode) {
+        this._triggerMode = triggerMode;
+        this.triggerCssClass = 'chip';
+        this.stateChanges.next();
+    }
     /**
      * Whether the select has a value.
      */
@@ -8607,6 +8637,7 @@ class VdSelectComponent extends AbstractMatFormField {
                         if (Array.isArray(this.options)) {
                             this.handleItemSelected(this.value);
                         }
+                        this.writeValue(this.value);
                     });
                 }
             });
@@ -8649,6 +8680,7 @@ class VdSelectComponent extends AbstractMatFormField {
         if (!this.value) {
             (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.writeValue(null);
         }
+        this.changeDetectorRef.detectChanges();
     }
     /**
      * Method executed when an option changes
@@ -8722,11 +8754,11 @@ class VdSelectComponent extends AbstractMatFormField {
         }
     }
 }
-/** @nocollapse */ VdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon>search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = null; handleFilter(null)\">\r\n                <mat-icon>close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:0;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .mat-icon-button{margin:4px}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectComponent, decorators: [{
+/** @nocollapse */ VdSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.ErrorStateMatcher }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdSelectComponent, selector: "vd-select", inputs: { multiple: "multiple", disabled: "disabled", sorted: "sorted", triggerCssClass: "triggerCssClass", triggerMode: "triggerMode", textPrefix: "textPrefix", endpoint: "endpoint", params: "params", projection: "projection", enum: "enum", key: "key", text: "text", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", sortBy: "sortBy", mapper: "mapper", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon>search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = null; handleFilter(null)\">\r\n                <mat-icon>close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\" [class]=\"triggerCssClass\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:0;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon>search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = null; handleFilter(null)\">\r\n                <mat-icon>close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0px;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:0;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .mat-icon-button{margin:4px}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [disabled]=\"disabled\" flex>\r\n    <!-- #region Filter input -->\r\n    <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n        <div class=\"vd-select-filter-inner\">\r\n            <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n                <mat-icon>search</mat-icon>\r\n            </a>\r\n            <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = null; handleFilter(null)\">\r\n                <mat-icon>close</mat-icon>\r\n            </a>\r\n            <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n        </div>\r\n        <div class=\"mat-divider\"></div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"onLaunch?.observers?.length > 0\" [class]=\"triggerCssClass\">\r\n        <span>{{getTriggerValues(select.selected)}}</span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[key]\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], select, option {option} other {{{option[text]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n                <ng-container *ngIf=\"multiple\">\r\n                    <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n                        <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </span>\r\n                </ng-container>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"onLaunch?.observers?.length > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:0;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
                         type: Optional
@@ -8736,7 +8768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         type: Optional
                     }] }, { type: i1.FormGroupDirective, decorators: [{
                         type: Optional
-                    }] }, { type: i2.ErrorStateMatcher }, { type: i3$2.FocusMonitor }, { type: i0.ElementRef }];
+                    }] }, { type: i2.ErrorStateMatcher }, { type: i3$2.FocusMonitor }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]
@@ -8755,6 +8787,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }], sorted: [{
                 type: Input
+            }], triggerCssClass: [{
+                type: Input
+            }], triggerMode: [{
+                type: Input
             }], textPrefix: [{
                 type: Input
             }], endpoint: [{
@@ -8811,8 +8847,8 @@ const EXPORTED_DECLARATIONS = [
 ];
 class VdSelectModule {
 }
-/** @nocollapse */ VdSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdSelectModule, declarations: [VdSelectComponent,
+/** @nocollapse */ VdSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdSelectModule, declarations: [VdSelectComponent,
         VdSelectOptionDirective,
         VdSelectTriggerDirective], imports: [CommonModule,
         FormsModule,
@@ -8821,12 +8857,12 @@ class VdSelectModule {
         MatButtonModule], exports: [VdSelectComponent,
         VdSelectOptionDirective,
         VdSelectTriggerDirective] });
-/** @nocollapse */ VdSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectModule, imports: [CommonModule,
+/** @nocollapse */ VdSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectModule, imports: [CommonModule,
         FormsModule,
         MatSelectModule,
         MatIconModule,
         MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -9038,6 +9074,10 @@ class FilterInputComponent {
          * Placeholder for the underlying input component.
          */
         this.placeholder = 'Filter...';
+        /**
+         * Whether the control is focused.
+         */
+        this.focused = false;
         /**
          * Called when the control receives a change event.
          */
@@ -9052,6 +9092,11 @@ class FilterInputComponent {
         this.reload = () => this.table.dataSource['reload']();
         this.field = this.column.name.replace('filter.', '');
     }
+    /**
+     * Whether the control is focused.
+     */
+    onFocusIn() { this.focused = true; }
+    onFocusOut() { this.focused = false; }
     /**
      * Setters and getters for the input value
      */
@@ -9141,41 +9186,37 @@ class FilterInputComponent {
         }
     }
 }
-/** @nocollapse */ FilterInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterInputComponent, deps: [{ token: i1$4.MatTable }, { token: i2$1.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ FilterInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: { field: "field", operator: "operator", onlyNumber: "onlyNumber", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, providers: [
+/** @nocollapse */ FilterInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterInputComponent, deps: [{ token: i1$4.MatTable }, { token: i2$1.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ FilterInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: { field: "field", operator: "operator", onlyNumber: "onlyNumber", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown": "onKeyDown($event)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => FilterInputComponent)),
             multi: true
         }
     ], viewQueries: [{ propertyName: "_filter", first: true, predicate: ["filterElement"], descendants: true, static: true }], ngImport: i0, template: `
-		<mat-form-field flex>
-			<input matInput #filterElement ngControl="filterElement" autocomplete="off" type="input" [(ngModel)]="value" [placeholder]="placeholder" (search)="stopPropagation($event)"
-			(keyup.enter)="handleSearch($event)"/>
-			<button type="button" mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="clearSearch()">
+		<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
+			<input matInput #filterElement ngControl="filterElement" autocomplete="off" type="input" [(ngModel)]="value"  (search)="stopPropagation($event)" (keyup.enter)="handleSearch($event)"/>
+			<span matPrefix *ngIf="!value && !focused"><mat-icon>manage_search</mat-icon></span>
+			<button type="button" matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="clearSearch()">
 				<mat-icon>close</mat-icon>
 			</button>
-		</mat-form-field>`, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterInputComponent, decorators: [{
+		</mat-form-field>`, isInline: true, styles: [".mdc-icon-button{padding:3px;width:30px;height:30px}.mdc-icon-button mat-icon{line-height:1.125;font-size:.8em}mat-icon{opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]',
-                    template: `
-		<mat-form-field flex>
-			<input matInput #filterElement ngControl="filterElement" autocomplete="off" type="input" [(ngModel)]="value" [placeholder]="placeholder" (search)="stopPropagation($event)"
-			(keyup.enter)="handleSearch($event)"/>
-			<button type="button" mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="clearSearch()">
+            args: [{ selector: 'mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]', template: `
+		<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
+			<input matInput #filterElement ngControl="filterElement" autocomplete="off" type="input" [(ngModel)]="value"  (search)="stopPropagation($event)" (keyup.enter)="handleSearch($event)"/>
+			<span matPrefix *ngIf="!value && !focused"><mat-icon>manage_search</mat-icon></span>
+			<button type="button" matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="clearSearch()">
 				<mat-icon>close</mat-icon>
 			</button>
-		</mat-form-field>`,
-                    providers: [
+		</mat-form-field>`, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((() => FilterInputComponent)),
                             multi: true
                         }
-                    ]
-                }]
+                    ], styles: [".mdc-icon-button{padding:3px;width:30px;height:30px}.mdc-icon-button mat-icon{line-height:1.125;font-size:.8em}mat-icon{opacity:.6}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$4.MatTable }, { type: i2$1.CdkColumnDef }]; }, propDecorators: { _filter: [{
                 type: ViewChild,
                 args: ['filterElement', { static: true }]
@@ -9189,6 +9230,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ["focusin"]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ["focusout"]
             }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -9199,9 +9246,9 @@ class VdFilterOptionDirective extends TemplatePortalDirective {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdFilterOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFilterOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdFilterOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdFilterOptionDirective, selector: "[vd-filter-option]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFilterOptionDirective, decorators: [{
+/** @nocollapse */ VdFilterOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFilterOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdFilterOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdFilterOptionDirective, selector: "[vd-filter-option]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFilterOptionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-filter-option]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -9266,6 +9313,10 @@ class FilterSelectComponent {
          * The http service from to get the data
          */
         this.http = null;
+        /**
+         * Whether the control is focused.
+         */
+        this.focused = false;
         /**
          * Called when the control receives a change event.
          */
@@ -9337,6 +9388,11 @@ class FilterSelectComponent {
             this.onChange(v);
         }
     }
+    /**
+     * Whether the control is focused.
+     */
+    onFocusIn() { this.focused = true; }
+    onFocusOut() { this.focused = false; }
     /**
      * Lifecycle hook that is called after data-bound properties of a directive are initialized.
      */
@@ -9408,16 +9464,21 @@ class FilterSelectComponent {
      */
     registerOnTouched(fn) { this.onTouched = fn; }
 }
-/** @nocollapse */ FilterSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterSelectComponent, deps: [{ token: i0.Injector }, { token: i1$4.MatTable }, { token: i2$1.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ FilterSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: { endpoint: "endpoint", params: "params", projection: "projection", sortBy: "sortBy", sorted: "sorted", enum: "enum", key: "key", text: "text", prefix: "prefix", multiple: "multiple", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", field: "field", placeholder: "placeholder", cache: "cache" }, providers: [
+/** @nocollapse */ FilterSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterSelectComponent, deps: [{ token: i0.Injector }, { token: i1$4.MatTable }, { token: i2$1.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ FilterSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: { endpoint: "endpoint", params: "params", projection: "projection", sortBy: "sortBy", sorted: "sorted", enum: "enum", key: "key", text: "text", prefix: "prefix", multiple: "multiple", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", field: "field", placeholder: "placeholder", cache: "cache" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => FilterSelectComponent)),
             multi: true
+        },
+        {
+            provide: MAT_SELECT_CONFIG,
+            useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
         }
     ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: `
-		<mat-form-field flex>
-			<mat-select type="input" [(ngModel)]="value" [multiple]="multiple" [placeholder]="placeholder">
+		<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
+			<span matPrefix *ngIf="!value && value!=0 && !focused"><mat-icon>manage_search</mat-icon></span>
+			<mat-select type="input" [(ngModel)]="value" [multiple]="multiple">
 				<input #filterInput *ngIf="filterable" type="text" placeholder="Filter..." class="vd-select-filter" (keyup)="handleFilter($event)">
 				<mat-option *ngIf="!multiple" class="tc-grey-500"></mat-option>
 				<ng-template let-option let-first="first" ngFor [ngForOf]="filteredOptions">
@@ -9427,12 +9488,13 @@ class FilterSelectComponent {
 					</mat-option>
 				</ng-template>
 			</mat-select>
-		</mat-form-field>`, isInline: true, styles: [".vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:11px 16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterSelectComponent, decorators: [{
+		</mat-form-field>`, isInline: true, styles: [".vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:11px 16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:inherit;color:inherit;outline:none}mat-icon{opacity:.7}::ng-deep .vd-select-filter-overlay{min-width:150px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]" }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]', template: `
-		<mat-form-field flex>
-			<mat-select type="input" [(ngModel)]="value" [multiple]="multiple" [placeholder]="placeholder">
+		<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
+			<span matPrefix *ngIf="!value && value!=0 && !focused"><mat-icon>manage_search</mat-icon></span>
+			<mat-select type="input" [(ngModel)]="value" [multiple]="multiple">
 				<input #filterInput *ngIf="filterable" type="text" placeholder="Filter..." class="vd-select-filter" (keyup)="handleFilter($event)">
 				<mat-option *ngIf="!multiple" class="tc-grey-500"></mat-option>
 				<ng-template let-option let-first="first" ngFor [ngForOf]="filteredOptions">
@@ -9447,8 +9509,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((() => FilterSelectComponent)),
                             multi: true
+                        },
+                        {
+                            provide: MAT_SELECT_CONFIG,
+                            useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], styles: [".vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:11px 16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:#f5f5f5;outline:none}\n"] }]
+                    ], styles: [".vd-select-filter{position:sticky;top:0;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;padding:11px 16px;box-sizing:border-box;border:none;border-bottom:1px solid #dcdcdc;width:100%;background-color:inherit;color:inherit;outline:none}mat-icon{opacity:.7}::ng-deep .vd-select-filter-overlay{min-width:150px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$4.MatTable }, { type: i2$1.CdkColumnDef }]; }, propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdFilterOptionDirective]
@@ -9490,6 +9556,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }], cache: [{
                 type: Input
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ["focusin"]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ["focusout"]
             }] } });
 
 /**
@@ -9754,18 +9826,18 @@ class FilterClearComponent {
         }
     }
 }
-/** @nocollapse */ FilterClearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterClearComponent, deps: [{ token: i1$4.MatTable }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ FilterClearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]", ngImport: i0, template: `
-		<button type="button" mat-icon-button (click)="clear()">
-			<mat-icon>backspace</mat-icon>
-		</button>`, isInline: true, dependencies: [{ kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterClearComponent, decorators: [{
+/** @nocollapse */ FilterClearComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterClearComponent, deps: [{ token: i1$4.MatTable }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ FilterClearComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]", ngImport: i0, template: `
+		<button type="button" mat-icon-button (click)="clear()">
+			<mat-icon>backspace</mat-icon>
+		</button>`, isInline: true, dependencies: [{ kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterClearComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]',
-                    template: `
-		<button type="button" mat-icon-button (click)="clear()">
-			<mat-icon>backspace</mat-icon>
+                    template: `
+		<button type="button" mat-icon-button (click)="clear()">
+			<mat-icon>backspace</mat-icon>
 		</button>`,
                 }]
         }], ctorParameters: function () { return [{ type: i1$4.MatTable }]; } });
@@ -9792,6 +9864,10 @@ class FilterDateComponent {
          * Placeholder for the underlying input component.
          */
         this.placeholder = 'Filter...';
+        /**
+         * Whether the control is focused.
+         */
+        this.focused = false;
         /**
          * Called when the control receives a change event.
          */
@@ -9822,6 +9898,11 @@ class FilterDateComponent {
             this.onChange(v);
         }
     }
+    /**
+     * Whether the control is focused.
+     */
+    onFocusIn() { this.focused = true; }
+    onFocusOut() { this.focused = false; }
     /**
      * Call serch event
      */
@@ -9858,8 +9939,8 @@ class FilterDateComponent {
      */
     registerOnTouched(fn) { this.onTouched = fn; }
 }
-/** @nocollapse */ FilterDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterDateComponent, deps: [{ token: i1$4.MatTable }, { token: i2$1.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ FilterDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: { field: "field", debounce: "debounce", placeholder: "placeholder" }, providers: [
+/** @nocollapse */ FilterDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterDateComponent, deps: [{ token: i1$4.MatTable }, { token: i2$1.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ FilterDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: { field: "field", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => FilterDateComponent)),
@@ -9867,36 +9948,30 @@ class FilterDateComponent {
         }
     ], ngImport: i0, template: `
 		<mat-form-field flex>
-			<input matInput [matDatepicker]="picker" [ngModel]="value" (ngModelChange)="handleSearch($event)"
-			(click)="picker.open()" [placeholder]="placeholder" (search)="handleSearch($event)" (keyup.enter)="handleSearch($event)"
-			readonly>
+			<input matInput [matDatepicker]="picker" [ngModel]="value" (ngModelChange)="handleSearch($event)" (click)="picker.open()" (search)="handleSearch($event)" (keyup.enter)="handleSearch($event)" readonly>
+			<span matPrefix *ngIf="!value && !focused"><mat-icon>manage_search</mat-icon></span>
 			<button type="button" mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="clearSearch()">
 				<mat-icon>close</mat-icon>
 			</button>
 			<mat-datepicker #picker></mat-datepicker>
-		</mat-form-field>`, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FilterDateComponent, decorators: [{
+		</mat-form-field>`, isInline: true, styles: [".mdc-icon-button{padding:3px;width:30px;height:30px}.mdc-icon-button mat-icon{line-height:1.125;font-size:.8em}mat-icon{opacity:.7}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FilterDateComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]',
-                    template: `
+            args: [{ selector: 'mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]', template: `
 		<mat-form-field flex>
-			<input matInput [matDatepicker]="picker" [ngModel]="value" (ngModelChange)="handleSearch($event)"
-			(click)="picker.open()" [placeholder]="placeholder" (search)="handleSearch($event)" (keyup.enter)="handleSearch($event)"
-			readonly>
+			<input matInput [matDatepicker]="picker" [ngModel]="value" (ngModelChange)="handleSearch($event)" (click)="picker.open()" (search)="handleSearch($event)" (keyup.enter)="handleSearch($event)" readonly>
+			<span matPrefix *ngIf="!value && !focused"><mat-icon>manage_search</mat-icon></span>
 			<button type="button" mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="clearSearch()">
 				<mat-icon>close</mat-icon>
 			</button>
 			<mat-datepicker #picker></mat-datepicker>
-		</mat-form-field>`,
-                    providers: [
+		</mat-form-field>`, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((() => FilterDateComponent)),
                             multi: true
                         }
-                    ]
-                }]
+                    ], styles: [".mdc-icon-button{padding:3px;width:30px;height:30px}.mdc-icon-button mat-icon{line-height:1.125;font-size:.8em}mat-icon{opacity:.7}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$4.MatTable }, { type: i2$1.CdkColumnDef }]; }, propDecorators: { field: [{
                 type: Input
             }], debounce: [{
@@ -9905,6 +9980,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             }], placeholder: [{
                 type: Input,
                 args: ['placeholder']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ["focusin"]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ["focusout"]
             }] } });
 
 class DataSourceFilterDirective {
@@ -9935,9 +10016,9 @@ class DataSourceFilterDirective {
         });
     }
 }
-/** @nocollapse */ DataSourceFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ DataSourceFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
+/** @nocollapse */ DataSourceFilterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ DataSourceFilterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dataSourceFilter]'
@@ -10283,15 +10364,15 @@ class VdDynamicTableComponent {
         this.changeDetector.detectChanges();
     }
 }
-/** @nocollapse */ VdDynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdDynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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)" } }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], 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 && !templateRef}\" [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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [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<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row)\" [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)))\" [min]=\"column.inputMin?column.inputMin(row, context):null\" [max]=\"column.inputMax?column.inputMax(row, context):null\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\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 Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [options]=\"column.options\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (selectionChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\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 [items]=\"[column.menu]\" [data]=\"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\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-icons-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass, row)\">{{handleExpression(column.iconButton?.icon, row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t</a>\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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" 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 Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\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; let index = index\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</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 || templateRef\">\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"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "context"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", 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"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$1.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$1.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$1.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$1.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i2$1.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i17$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i18.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", 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"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "directive", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: EnumPipe, name: "enum" }], animations: [
+/** @nocollapse */ VdDynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdDynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", 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)" } }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], 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 && !templateRef}\" [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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [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<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row)\" [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)))\" [min]=\"column.inputMin?column.inputMin(row, context):null\" [max]=\"column.inputMax?column.inputMax(row, context):null\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\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 Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [options]=\"column.options\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (selectionChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\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 [items]=\"[column.menu]\" [data]=\"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\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-icons-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass, row)\">{{handleExpression(column.iconButton?.icon, row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t</a>\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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" 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 Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\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; let index = index\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</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 || templateRef\">\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-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "context"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "triggerCssClass", "triggerMode", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$1.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$1.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$1.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$1.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i2$1.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i17$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i18.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i19.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", 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"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "directive", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }, { kind: "pipe", type: EnumPipe, name: "enum" }], animations: [
         trigger('detailExpand', [
             state('collapsed', style({ height: '0px', minHeight: '0' })),
             state('expanded', style({ height: AUTO_STYLE })),
             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDynamicTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDynamicTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-dynamic-table', animations: [
                         trigger('detailExpand', [
@@ -10299,7 +10380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                             state('expanded', style({ height: AUTO_STYLE })),
                             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 && !templateRef}\" [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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [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<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row)\" [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)))\" [min]=\"column.inputMin?column.inputMin(row, context):null\" [max]=\"column.inputMax?column.inputMax(row, context):null\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\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 Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [options]=\"column.options\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (selectionChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\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 [items]=\"[column.menu]\" [data]=\"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\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-icons-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass, row)\">{{handleExpression(column.iconButton?.icon, row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t</a>\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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" 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 Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\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; let index = index\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</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 || templateRef\">\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 && !templateRef}\" [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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [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<td mat-cell *cdkCellDef=\"let row; let rowIndex = index\" [matTooltip]=\"column.tooltip?column.tooltip(row, context):null\" [matTooltipClass]=\"column.tooltipClass\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\" i18n=\"@@selection\">{column.content(row) | enum:column.enumType:column.enumPrefix, select, type {type} other {{{column.content(row, context) | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t<mat-slide-toggle *ngSwitchCase=\"ColumnType.Toggle\" [(ngModel)]=\"row[column.name]\" (click)=\"$event.stopPropagation();\" (ngModelChange)=\"handleModelChange(column, row)\" [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)))\" [min]=\"column.inputMin?column.inputMin(row, context):null\" [max]=\"column.inputMax?column.inputMax(row, context):null\" (ngModelChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\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 Text Input column -->\r\n\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t<vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [options]=\"column.options\" [(ngModel)]=\"row[column.name]\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, context)))\" (selectionChange)=\"column.change?column.change(row, context):patch(row, [column.name], row[column.name], column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\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 [items]=\"[column.menu]\" [data]=\"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\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton.event(row, context):null\">\r\n\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-icons-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass, row)\">{{handleExpression(column.iconButton?.icon, row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t</a>\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.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" 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 Text filter -->\r\n\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber\" [operator]=\"column.filterOperator\"></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notInputFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t</ng-template>\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<ng-template #notDateFilter>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t</ng-template>\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; let index = index\" [attr.colspan]=\"(displayedColumns$ | async).length\">\r\n\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</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 || templateRef\">\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-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}\n"] }]
         }], ctorParameters: function () { return [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -10404,9 +10485,9 @@ class PaginatorIntl extends MatPaginatorIntl {
         };
     }
 }
-/** @nocollapse */ PaginatorIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ PaginatorIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PaginatorIntl });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PaginatorIntl, decorators: [{
+/** @nocollapse */ PaginatorIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ PaginatorIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PaginatorIntl });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PaginatorIntl, decorators: [{
             type: Injectable
         }] });
 
@@ -10493,8 +10574,8 @@ const DECLARATIONS$4 = [
 ];
 class VdTableModule {
 }
-/** @nocollapse */ VdTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdTableModule, declarations: [FilterInputComponent,
+/** @nocollapse */ VdTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdTableModule, declarations: [FilterInputComponent,
         FilterSelectComponent,
         FilterClearComponent,
         FilterDateComponent,
@@ -10528,7 +10609,7 @@ class VdTableModule {
         DataSourceFilterDirective,
         VdFilterOptionDirective,
         VdDynamicTableComponent] });
-/** @nocollapse */ VdTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdTableModule, providers: [
+/** @nocollapse */ VdTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdTableModule, providers: [
         { provide: MatPaginatorIntl, useClass: PaginatorIntl }
     ], imports: [CommonModule,
         VdLayoutModule,
@@ -10552,7 +10633,7 @@ class VdTableModule {
         MatPaginatorModule,
         MatTooltipModule,
         MatToolbarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -10587,59 +10668,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 }]
         }] });
 
-class VdDialogTitleDirective {
-}
-/** @nocollapse */ VdDialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdDialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdDialogTitleDirective, selector: "vd-dialog-title", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogTitleDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'vd-dialog-title' }]
-        }] });
-class VdDialogContentDirective {
-}
-/** @nocollapse */ VdDialogContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdDialogContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdDialogContentDirective, selector: "vd-dialog-content", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogContentDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'vd-dialog-content' }]
-        }] });
-class VdDialogActionsDirective {
-}
-/** @nocollapse */ VdDialogActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdDialogActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdDialogActionsDirective, selector: "vd-dialog-actions", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogActionsDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'vd-dialog-actions' }]
-        }] });
-class VdDialogComponent {
-    ngAfterContentInit() {
-        if (this.dialogTitle.length > 1) {
-            throw new Error('Duplicate vd-dialog-title component at in vd-dialog.');
-        }
-        if (this.dialogContent.length > 1) {
-            throw new Error('Duplicate vd-dialog-content component at in vd-dialog.');
-        }
-        if (this.dialogActions.length > 1) {
-            throw new Error('Duplicate vd-dialog-actions component at in vd-dialog.');
-        }
-    }
-}
-/** @nocollapse */ VdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdDialogComponent, selector: "vd-dialog", queries: [{ propertyName: "dialogTitle", predicate: VdDialogTitleDirective }, { propertyName: "dialogContent", predicate: VdDialogContentDirective }, { propertyName: "dialogActions", predicate: VdDialogActionsDirective }], ngImport: i0, template: "<div class=\"vd-dialog-wrapper\">\r\n\t<h3 class=\"vd-dialog-title md-title\" *ngIf=\"dialogTitle.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-title\"></ng-content>\r\n\t</h3>\r\n\t<div class=\"vd-dialog-content\" *ngIf=\"dialogContent.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-content\"></ng-content>\r\n\t</div>\r\n\t<div class=\"vd-dialog-actions\" *ngIf=\"dialogActions.length > 0\" layout=\"row\">\r\n\t\t<span flex></span>\r\n\t\t<ng-content select=\"vd-dialog-actions\"></ng-content>\r\n\t</div>\r\n</div>", styles: [".vd-dialog-title{margin-top:0;margin-bottom:20px}.vd-dialog-content{margin-bottom:16px}.vd-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .vd-dialog-actions{right:16px;left:auto}:host{display:block}:host .vd-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .vd-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vd-dialog', template: "<div class=\"vd-dialog-wrapper\">\r\n\t<h3 class=\"vd-dialog-title md-title\" *ngIf=\"dialogTitle.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-title\"></ng-content>\r\n\t</h3>\r\n\t<div class=\"vd-dialog-content\" *ngIf=\"dialogContent.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-content\"></ng-content>\r\n\t</div>\r\n\t<div class=\"vd-dialog-actions\" *ngIf=\"dialogActions.length > 0\" layout=\"row\">\r\n\t\t<span flex></span>\r\n\t\t<ng-content select=\"vd-dialog-actions\"></ng-content>\r\n\t</div>\r\n</div>", styles: [".vd-dialog-title{margin-top:0;margin-bottom:20px}.vd-dialog-content{margin-bottom:16px}.vd-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .vd-dialog-actions{right:16px;left:auto}:host{display:block}:host .vd-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .vd-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}\n"] }]
-        }], propDecorators: { dialogTitle: [{
-                type: ContentChildren,
-                args: [VdDialogTitleDirective]
-            }], dialogContent: [{
-                type: ContentChildren,
-                args: [VdDialogContentDirective]
-            }], dialogActions: [{
-                type: ContentChildren,
-                args: [VdDialogActionsDirective]
-            }] } });
-
 class VdAlertDialogComponent {
     /**
      * Constructor
@@ -10656,11 +10684,24 @@ class VdAlertDialogComponent {
         this._dialogRef.close();
     }
 }
-/** @nocollapse */ VdAlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdAlertDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdAlertDialogComponent, selector: "vd-alert-dialog", ngImport: i0, template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content class=\"md-subhead\" [innerHtml]=\"message\"></vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button color=\"accent\" (click)=\"close()\">{{closeButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: VdDialogComponent, selector: "vd-dialog" }, { kind: "directive", type: VdDialogTitleDirective, selector: "vd-dialog-title" }, { kind: "directive", type: VdDialogActionsDirective, selector: "vd-dialog-actions" }, { kind: "directive", type: VdDialogContentDirective, selector: "vd-dialog-content" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdAlertDialogComponent, decorators: [{
+/** @nocollapse */ VdAlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdAlertDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdAlertDialogComponent, selector: "vd-alert-dialog", ngImport: i0, template: `
+		<h1 mat-dialog-title *ngIf="title">{{title}}</h1>
+		<mat-dialog-content class="md-subhead" [innerHtml]="message"></mat-dialog-content>
+		<mat-dialog-actions align="end">
+			<button mat-button color="accent" (click)="close()">{{closeButton}}</button>
+		</mat-dialog-actions>`, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdAlertDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-alert-dialog', template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content class=\"md-subhead\" [innerHtml]=\"message\"></vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button color=\"accent\" (click)=\"close()\">{{closeButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"] }]
+            args: [{
+                    selector: 'vd-alert-dialog',
+                    template: `
+		<h1 mat-dialog-title *ngIf="title">{{title}}</h1>
+		<mat-dialog-content class="md-subhead" [innerHtml]="message"></mat-dialog-content>
+		<mat-dialog-actions align="end">
+			<button mat-button color="accent" (click)="close()">{{closeButton}}</button>
+		</mat-dialog-actions>`
+                }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialogRef }]; } });
 
 class VdConfirmDialogComponent {
@@ -10686,13 +10727,81 @@ class VdConfirmDialogComponent {
         this._dialogRef.close(true);
     }
 }
-/** @nocollapse */ VdConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdConfirmDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdConfirmDialogComponent, selector: "vd-confirm-dialog", ngImport: i0, template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content class=\"md-subhead\" [innerHtml]=\"message\"></vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n\t\t<button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" (click)=\"accept()\">{{acceptButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: VdDialogComponent, selector: "vd-dialog" }, { kind: "directive", type: VdDialogTitleDirective, selector: "vd-dialog-title" }, { kind: "directive", type: VdDialogActionsDirective, selector: "vd-dialog-actions" }, { kind: "directive", type: VdDialogContentDirective, selector: "vd-dialog-content" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdConfirmDialogComponent, decorators: [{
+/** @nocollapse */ VdConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdConfirmDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdConfirmDialogComponent, selector: "vd-confirm-dialog", ngImport: i0, template: `
+		<h1 mat-dialog-title *ngIf="title">{{title}}</h1>
+		<mat-dialog-content class="md-subhead" [innerHtml]="message"></mat-dialog-content>
+		<mat-dialog-actions align="end">
+			<button mat-button #closeBtn (keydown.arrowright)="acceptBtn.focus()" (click)="cancel()">{{cancelButton}}</button>
+			<button mat-button color="accent" #acceptBtn (keydown.arrowleft)="closeBtn.focus()" (click)="accept()">{{acceptButton}}</button>
+		</mat-dialog-actions>`, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-confirm-dialog', template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content class=\"md-subhead\" [innerHtml]=\"message\"></vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n\t\t<button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" (click)=\"accept()\">{{acceptButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"] }]
+            args: [{
+                    selector: 'vd-confirm-dialog',
+                    template: `
+		<h1 mat-dialog-title *ngIf="title">{{title}}</h1>
+		<mat-dialog-content class="md-subhead" [innerHtml]="message"></mat-dialog-content>
+		<mat-dialog-actions align="end">
+			<button mat-button #closeBtn (keydown.arrowright)="acceptBtn.focus()" (click)="cancel()">{{cancelButton}}</button>
+			<button mat-button color="accent" #acceptBtn (keydown.arrowleft)="closeBtn.focus()" (click)="accept()">{{acceptButton}}</button>
+		</mat-dialog-actions>`
+                }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialogRef }]; } });
 
+class VdDialogTitleDirective {
+}
+/** @nocollapse */ VdDialogTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdDialogTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdDialogTitleDirective, selector: "vd-dialog-title", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogTitleDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'vd-dialog-title' }]
+        }] });
+class VdDialogContentDirective {
+}
+/** @nocollapse */ VdDialogContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdDialogContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdDialogContentDirective, selector: "vd-dialog-content", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogContentDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'vd-dialog-content' }]
+        }] });
+class VdDialogActionsDirective {
+}
+/** @nocollapse */ VdDialogActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdDialogActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdDialogActionsDirective, selector: "vd-dialog-actions", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogActionsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'vd-dialog-actions' }]
+        }] });
+class VdDialogComponent {
+    ngAfterContentInit() {
+        if (this.dialogTitle.length > 1) {
+            throw new Error('Duplicate vd-dialog-title component at in vd-dialog.');
+        }
+        if (this.dialogContent.length > 1) {
+            throw new Error('Duplicate vd-dialog-content component at in vd-dialog.');
+        }
+        if (this.dialogActions.length > 1) {
+            throw new Error('Duplicate vd-dialog-actions component at in vd-dialog.');
+        }
+    }
+}
+/** @nocollapse */ VdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdDialogComponent, selector: "vd-dialog", queries: [{ propertyName: "dialogTitle", predicate: VdDialogTitleDirective }, { propertyName: "dialogContent", predicate: VdDialogContentDirective }, { propertyName: "dialogActions", predicate: VdDialogActionsDirective }], ngImport: i0, template: "<div class=\"vd-dialog-wrapper\">\r\n\t<h3 class=\"vd-dialog-title md-title\" *ngIf=\"dialogTitle.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-title\"></ng-content>\r\n\t</h3>\r\n\t<div class=\"vd-dialog-content\" *ngIf=\"dialogContent.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-content\"></ng-content>\r\n\t</div>\r\n\t<div class=\"vd-dialog-actions\" *ngIf=\"dialogActions.length > 0\" layout=\"row\">\r\n\t\t<span flex></span>\r\n\t\t<ng-content select=\"vd-dialog-actions\"></ng-content>\r\n\t</div>\r\n</div>", styles: [".vd-dialog-title{margin-top:0;margin-bottom:20px}.vd-dialog-content{margin-bottom:16px}.vd-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .vd-dialog-actions{right:16px;left:auto}:host{display:block}:host .vd-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .vd-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vd-dialog', template: "<div class=\"vd-dialog-wrapper\">\r\n\t<h3 class=\"vd-dialog-title md-title\" *ngIf=\"dialogTitle.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-title\"></ng-content>\r\n\t</h3>\r\n\t<div class=\"vd-dialog-content\" *ngIf=\"dialogContent.length > 0\">\r\n\t\t<ng-content select=\"vd-dialog-content\"></ng-content>\r\n\t</div>\r\n\t<div class=\"vd-dialog-actions\" *ngIf=\"dialogActions.length > 0\" layout=\"row\">\r\n\t\t<span flex></span>\r\n\t\t<ng-content select=\"vd-dialog-actions\"></ng-content>\r\n\t</div>\r\n</div>", styles: [".vd-dialog-title{margin-top:0;margin-bottom:20px}.vd-dialog-content{margin-bottom:16px}.vd-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .vd-dialog-actions{right:16px;left:auto}:host{display:block}:host .vd-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px;padding-left:8px;padding-right:8px;min-width:64px}[dir=rtl] :host .vd-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}\n"] }]
+        }], propDecorators: { dialogTitle: [{
+                type: ContentChildren,
+                args: [VdDialogTitleDirective]
+            }], dialogContent: [{
+                type: ContentChildren,
+                args: [VdDialogContentDirective]
+            }], dialogActions: [{
+                type: ContentChildren,
+                args: [VdDialogActionsDirective]
+            }] } });
+
 class VdPromptDialogComponent {
     /**
      * Constructor
@@ -10716,9 +10825,9 @@ class VdPromptDialogComponent {
         this._dialogRef.close(this.value);
     }
 }
-/** @nocollapse */ VdPromptDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdPromptDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdPromptDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdPromptDialogComponent, selector: "vd-prompt-dialog", ngImport: i0, template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content layout=\"column\" class=\"md-subhead\">\r\n\t\t<span [innerHtml]=\"message\"></span>\r\n\t\t<form #form=\"ngForm\" layout=\"row\" novalidate flex>\r\n\t\t\t<mat-form-field flex>\r\n\t\t\t\t<input matInput (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\" [(ngModel)]=\"value\" name=\"value\" required />\r\n\t\t\t</mat-form-field>\r\n\t\t</form>\r\n\t</vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n\t\t<button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" [disabled]=\"!form.valid\" (click)=\"accept()\">{{acceptButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: VdDialogComponent, selector: "vd-dialog" }, { kind: "directive", type: VdDialogTitleDirective, selector: "vd-dialog-title" }, { kind: "directive", type: VdDialogActionsDirective, selector: "vd-dialog-actions" }, { kind: "directive", type: VdDialogContentDirective, selector: "vd-dialog-content" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdPromptDialogComponent, decorators: [{
+/** @nocollapse */ VdPromptDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdPromptDialogComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdPromptDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdPromptDialogComponent, selector: "vd-prompt-dialog", ngImport: i0, template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content layout=\"column\" class=\"md-subhead\">\r\n\t\t<span [innerHtml]=\"message\"></span>\r\n\t\t<form #form=\"ngForm\" layout=\"row\" novalidate flex>\r\n\t\t\t<mat-form-field flex>\r\n\t\t\t\t<input matInput (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\" [(ngModel)]=\"value\" name=\"value\" required />\r\n\t\t\t</mat-form-field>\r\n\t\t</form>\r\n\t</vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n\t\t<button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" [disabled]=\"!form.valid\" (click)=\"accept()\">{{acceptButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: VdDialogComponent, selector: "vd-dialog" }, { kind: "directive", type: VdDialogTitleDirective, selector: "vd-dialog-title" }, { kind: "directive", type: VdDialogActionsDirective, selector: "vd-dialog-actions" }, { kind: "directive", type: VdDialogContentDirective, selector: "vd-dialog-content" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdPromptDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-prompt-dialog', template: "<vd-dialog>\r\n\t<vd-dialog-title *ngIf=\"title\">{{title}}</vd-dialog-title>\r\n\t<vd-dialog-content layout=\"column\" class=\"md-subhead\">\r\n\t\t<span [innerHtml]=\"message\"></span>\r\n\t\t<form #form=\"ngForm\" layout=\"row\" novalidate flex>\r\n\t\t\t<mat-form-field flex>\r\n\t\t\t\t<input matInput (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\" [(ngModel)]=\"value\" name=\"value\" required />\r\n\t\t\t</mat-form-field>\r\n\t\t</form>\r\n\t</vd-dialog-content>\r\n\t<vd-dialog-actions>\r\n\t\t<button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n\t\t<button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" [disabled]=\"!form.valid\" (click)=\"accept()\">{{acceptButton}}</button>\r\n\t</vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media (min-width: 600px){vd-dialog{width:400px}}@media (max-width: 599px){vd-dialog{width:250px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialogRef }]; } });
@@ -10836,9 +10945,9 @@ class VdDialogService {
         return dialogConfig;
     }
 }
-/** @nocollapse */ VdDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogService, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ VdDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogService, decorators: [{
+/** @nocollapse */ VdDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogService, deps: [{ token: i1$5.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ VdDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$5.MatDialog }]; } });
@@ -11447,9 +11556,9 @@ class BaseComponent {
         this.matExpansionPanelSubscriptions.forEach(x => x.unsubscribe());
     }
 }
-/** @nocollapse */ BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ BaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: BaseComponent, inputs: { handleExpansionPanelChanges: "handleExpansionPanelChanges" }, viewQueries: [{ propertyName: "matExpansionPanelElementQueryList", predicate: MatExpansionPanel, descendants: true, read: ElementRef }, { propertyName: "matExpansionPanelQueryList", predicate: MatExpansionPanel, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseComponent, decorators: [{
+/** @nocollapse */ BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ BaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: BaseComponent, inputs: { handleExpansionPanelChanges: "handleExpansionPanelChanges" }, viewQueries: [{ propertyName: "matExpansionPanelElementQueryList", predicate: MatExpansionPanel, descendants: true, read: ElementRef }, { propertyName: "matExpansionPanelQueryList", predicate: MatExpansionPanel, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { handleExpansionPanelChanges: [{
                 type: Input
@@ -11515,27 +11624,27 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
         (_a = this.genericList) === null || _a === void 0 ? void 0 : _a.updateColumns();
     }
 }
-/** @nocollapse */ VdDynamicTableConfigDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDynamicTableConfigDialogComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdDynamicTableConfigDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdDynamicTableConfigDialogComponent, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: `
-        <div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" class="pad push-none" cdkDragHandle i18n="@@tableConfiguration">Table configuration</div>
-        <vd-dynamic-table [data]="columns" [classType]="classType" [filterable]="false" [pageSize]="10" [context]="this">
-            <div table-footer layout-padding class="push-xs">
-                <a mat-flat-button color="primary" (click)="save()" i18n="@@save">Save</a>
-                <a mat-flat-button (click)="apply()" i18n="@@apply">Apply</a>
-                <a mat-flat-button (click)="dialogRef.close()" i18n="@@close">Close</a>
-            </div>
-        </vd-dynamic-table>`, isInline: true, styles: [".mat-dialog-title{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", 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"] }, { kind: "component", type: i5.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"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
+/** @nocollapse */ VdDynamicTableConfigDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDynamicTableConfigDialogComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdDynamicTableConfigDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdDynamicTableConfigDialogComponent, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: `
+        <div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" class="pad push-none" cdkDragHandle i18n="@@tableConfiguration">Table configuration</div>
+        <vd-dynamic-table [data]="columns" [classType]="classType" [filterable]="false" [pageSize]="10" [context]="this">
+            <div table-footer layout-padding class="push-xs">
+                <a mat-flat-button color="primary" (click)="save()" i18n="@@save">Save</a>
+                <a mat-flat-button (click)="apply()" i18n="@@apply">Apply</a>
+                <a mat-flat-button (click)="dialogRef.close()" i18n="@@close">Close</a>
+            </div>
+        </vd-dynamic-table>`, isInline: true, styles: [".mat-mdc-dialog-title{cursor:move}\n"], dependencies: [{ kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", 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"] }, { kind: "component", type: i5$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i5$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-dynamic-table-config-dialog', template: `
-        <div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" class="pad push-none" cdkDragHandle i18n="@@tableConfiguration">Table configuration</div>
-        <vd-dynamic-table [data]="columns" [classType]="classType" [filterable]="false" [pageSize]="10" [context]="this">
-            <div table-footer layout-padding class="push-xs">
-                <a mat-flat-button color="primary" (click)="save()" i18n="@@save">Save</a>
-                <a mat-flat-button (click)="apply()" i18n="@@apply">Apply</a>
-                <a mat-flat-button (click)="dialogRef.close()" i18n="@@close">Close</a>
-            </div>
-        </vd-dynamic-table>`, styles: [".mat-dialog-title{cursor:move}\n"] }]
+            args: [{ selector: 'vd-dynamic-table-config-dialog', template: `
+        <div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" class="pad push-none" cdkDragHandle i18n="@@tableConfiguration">Table configuration</div>
+        <vd-dynamic-table [data]="columns" [classType]="classType" [filterable]="false" [pageSize]="10" [context]="this">
+            <div table-footer layout-padding class="push-xs">
+                <a mat-flat-button color="primary" (click)="save()" i18n="@@save">Save</a>
+                <a mat-flat-button (click)="apply()" i18n="@@apply">Apply</a>
+                <a mat-flat-button (click)="dialogRef.close()" i18n="@@close">Close</a>
+            </div>
+        </vd-dynamic-table>`, styles: [".mat-mdc-dialog-title{cursor:move}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -12217,9 +12326,9 @@ class GenericFormBaseComponent extends BaseComponent {
         }
     }
 }
-/** @nocollapse */ GenericFormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ GenericFormBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: GenericFormBaseComponent, inputs: { id: "id", _item: "_item", item: "item", includes: "includes", projection: "projection", query: "query", form: "form" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true }, { propertyName: "input", predicate: ["focus"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericFormBaseComponent, decorators: [{
+/** @nocollapse */ GenericFormBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ GenericFormBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: GenericFormBaseComponent, inputs: { id: "id", _item: "_item", item: "item", includes: "includes", projection: "projection", query: "query", form: "form" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true }, { propertyName: "input", predicate: ["focus"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericFormBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
@@ -12272,9 +12381,9 @@ class GenericFormComponent extends GenericFormBaseComponent {
     get formValue() { return this.item; }
     ;
 }
-/** @nocollapse */ GenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ GenericFormComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: GenericFormComponent, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericFormComponent, decorators: [{
+/** @nocollapse */ GenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ GenericFormComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: GenericFormComponent, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericFormComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: undefined }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
                 type: Input
@@ -12943,9 +13052,9 @@ class GenericListComponent extends BaseComponent {
      */
     get [Symbol.toStringTag]() { return 'GenericListComponent'; }
 }
-/** @nocollapse */ GenericListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericListComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ GenericListComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: GenericListComponent, inputs: { backButton: "backButton" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericListComponent, decorators: [{
+/** @nocollapse */ GenericListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericListComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ GenericListComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: GenericListComponent, inputs: { backButton: "backButton" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericListComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: undefined }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: undefined }]; }, propDecorators: { paginator: [{
                 type: ViewChild,
@@ -13003,9 +13112,9 @@ class BaseDirective {
         });
     }
 }
-/** @nocollapse */ BaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ BaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: BaseDirective, inputs: { model: "model" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseDirective, decorators: [{
+/** @nocollapse */ BaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ BaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: BaseDirective, inputs: { model: "model" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { model: [{
                 type: Input
@@ -13017,9 +13126,9 @@ class HtmlControlTemplateDirective {
     }
     ;
 }
-/** @nocollapse */ HtmlControlTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: HtmlControlTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ HtmlControlTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: HtmlControlTemplateDirective, selector: "[htmlControlTemplate]", inputs: { type: ["htmlControlTemplate", "type"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: HtmlControlTemplateDirective, decorators: [{
+/** @nocollapse */ HtmlControlTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: HtmlControlTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ HtmlControlTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: HtmlControlTemplateDirective, selector: "[htmlControlTemplate]", inputs: { type: ["htmlControlTemplate", "type"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: HtmlControlTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[htmlControlTemplate]'
@@ -13206,9 +13315,9 @@ class RxwebFormDirective extends BaseDirective {
     ngOnDestroy() {
     }
 }
-/** @nocollapse */ RxwebFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxwebFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ RxwebFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: { formGroup: "formGroup", ngForm: ["rxwebForm", "ngForm"] }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxwebFormDirective, decorators: [{
+/** @nocollapse */ RxwebFormDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxwebFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ RxwebFormDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: { formGroup: "formGroup", ngForm: ["rxwebForm", "ngForm"] }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxwebFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formGroup],[rxwebForm]',
@@ -13234,13 +13343,13 @@ class AsyncValidationDirective {
         return this.async ? this.async(control) : of(null);
     }
 }
-/** @nocollapse */ AsyncValidationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AsyncValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ AsyncValidationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: { async: "async" }, providers: [{
+/** @nocollapse */ AsyncValidationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AsyncValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ AsyncValidationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: { async: "async" }, providers: [{
             provide: NG_ASYNC_VALIDATORS,
             useExisting: forwardRef((() => AsyncValidationDirective)),
             multi: true
         }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: AsyncValidationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: AsyncValidationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[formControlName],[formControl]',
@@ -13311,13 +13420,13 @@ class FileControlDirective {
         return result;
     }
 }
-/** @nocollapse */ FileControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ FileControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: FileControlDirective, selector: "input[type=file]", inputs: { writeFile: "writeFile", extension: "extension", fileSize: "fileSize", file: "file" }, host: { listeners: { "change": "onChangeCall($event.target)", "blur": "onTouched()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileControlDirective, multi: true }, {
+/** @nocollapse */ FileControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ FileControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: FileControlDirective, selector: "input[type=file]", inputs: { writeFile: "writeFile", extension: "extension", fileSize: "fileSize", file: "file" }, host: { listeners: { "change": "onChangeCall($event.target)", "blur": "onTouched()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileControlDirective, multi: true }, {
             provide: NG_VALIDATORS,
             useExisting: forwardRef((() => FileControlDirective)),
             multi: true
         }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FileControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FileControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type=file]",
@@ -13366,13 +13475,13 @@ class ImageFileControlDirective {
         return of(null);
     }
 }
-/** @nocollapse */ ImageFileControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ImageFileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ImageFileControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ImageFileControlDirective, selector: "input[type=file]", inputs: { image: "image" }, providers: [{
+/** @nocollapse */ ImageFileControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ImageFileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ImageFileControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: ImageFileControlDirective, selector: "input[type=file]", inputs: { image: "image" }, providers: [{
             provide: NG_ASYNC_VALIDATORS,
             useExisting: forwardRef((() => ImageFileControlDirective)),
             multi: true
         }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ImageFileControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ImageFileControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type=file]",
@@ -13827,9 +13936,9 @@ class ControlExpressionProcess {
         }
     }
 }
-/** @nocollapse */ ControlExpressionProcess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ControlExpressionProcess, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ControlExpressionProcess.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ControlExpressionProcess, inputs: { name: "name", formControlName: "formControlName" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ControlExpressionProcess, decorators: [{
+/** @nocollapse */ ControlExpressionProcess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ControlExpressionProcess, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ControlExpressionProcess.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: ControlExpressionProcess, inputs: { name: "name", formControlName: "formControlName" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ControlExpressionProcess, decorators: [{
             type: Directive
         }], propDecorators: { name: [{
                 type: Input
@@ -13867,9 +13976,9 @@ class BaseValidator extends ControlExpressionProcess {
         this.eventName = eventName.toLowerCase();
     }
 }
-/** @nocollapse */ BaseValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ BaseValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: BaseValidator, inputs: { formControl: "formControl" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseValidator, decorators: [{
+/** @nocollapse */ BaseValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ BaseValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: BaseValidator, inputs: { formControl: "formControl" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseValidator, decorators: [{
             type: Directive
         }], propDecorators: { formControl: [{
                 type: Input
@@ -13930,9 +14039,9 @@ class DecimalProvider {
         this.isSetConfig = true;
     }
 }
-/** @nocollapse */ DecimalProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DecimalProvider, deps: [{ token: i1$2.DecimalPipe }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ DecimalProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DecimalProvider });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DecimalProvider, decorators: [{
+/** @nocollapse */ DecimalProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DecimalProvider, deps: [{ token: i1$2.DecimalPipe }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ DecimalProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DecimalProvider });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: DecimalProvider, decorators: [{
             type: Injectable
         }], ctorParameters: function () {
         return [{ type: i1$2.DecimalPipe }, { type: undefined, decorators: [{
@@ -14094,9 +14203,9 @@ class RxFormControlDirective extends BaseValidator {
             this.maskProvider.onDestroy();
     }
 }
-/** @nocollapse */ RxFormControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxFormControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DecimalProvider }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ RxFormControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: { rxalpha: "rxalpha", rxalphaNumeric: "rxalphaNumeric", rxascii: "rxascii", rxcompare: "rxcompare", rxcompose: "rxcompose", rxcontains: "rxcontains", rxcreditCard: "rxcreditCard", rxdataUri: "rxdataUri", rxdifferent: "rxdifferent", rxdigit: "rxdigit", rxemail: "rxemail", rxendsWith: "rxendsWith", rxeven: "rxeven", rxextension: "rxextension", rxfactor: "rxfactor", rxfileSize: "rxfileSize", rxgreaterThanEqualTo: "rxgreaterThanEqualTo", rxgreaterThan: "rxgreaterThan", rxhexColor: "rxhexColor", rxjson: "rxjson", rxlatitude: "rxlatitude", rxlatLong: "rxlatLong", rxleapYear: "rxleapYear", rxlessThan: "rxlessThan", rxlessThanEqualTo: "rxlessThanEqualTo", rxlongitude: "rxlongitude", rxlowerCase: "rxlowerCase", rxmac: "rxmac", rxmaxDate: "rxmaxDate", rxmaxLength: "rxmaxLength", rxmaxNumber: "rxmaxNumber", rxminDate: "rxminDate", rxminLength: "rxminLength", rxminNumber: "rxminNumber", rxnumeric: "rxnumeric", rxodd: "rxodd", rxpassword: "rxpassword", rxport: "rxport", rxprimeNumber: "rxprimeNumber", rxrequired: "rxrequired", rxrange: "rxrange", rxrule: "rxrule", rxstartsWith: "rxstartsWith", rxtime: "rxtime", rxupperCase: "rxupperCase", rxurl: "rxurl", rxunique: "rxunique", rxnotEmpty: "rxnotEmpty", rxcusip: "rxcusip", rxgrid: "rxgrid", rxdate: "rxdate" }, providers: [NGMODEL_BINDING], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxFormControlDirective, decorators: [{
+/** @nocollapse */ RxFormControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxFormControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DecimalProvider }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ RxFormControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: { rxalpha: "rxalpha", rxalphaNumeric: "rxalphaNumeric", rxascii: "rxascii", rxcompare: "rxcompare", rxcompose: "rxcompose", rxcontains: "rxcontains", rxcreditCard: "rxcreditCard", rxdataUri: "rxdataUri", rxdifferent: "rxdifferent", rxdigit: "rxdigit", rxemail: "rxemail", rxendsWith: "rxendsWith", rxeven: "rxeven", rxextension: "rxextension", rxfactor: "rxfactor", rxfileSize: "rxfileSize", rxgreaterThanEqualTo: "rxgreaterThanEqualTo", rxgreaterThan: "rxgreaterThan", rxhexColor: "rxhexColor", rxjson: "rxjson", rxlatitude: "rxlatitude", rxlatLong: "rxlatLong", rxleapYear: "rxleapYear", rxlessThan: "rxlessThan", rxlessThanEqualTo: "rxlessThanEqualTo", rxlongitude: "rxlongitude", rxlowerCase: "rxlowerCase", rxmac: "rxmac", rxmaxDate: "rxmaxDate", rxmaxLength: "rxmaxLength", rxmaxNumber: "rxmaxNumber", rxminDate: "rxminDate", rxminLength: "rxminLength", rxminNumber: "rxminNumber", rxnumeric: "rxnumeric", rxodd: "rxodd", rxpassword: "rxpassword", rxport: "rxport", rxprimeNumber: "rxprimeNumber", rxrequired: "rxrequired", rxrange: "rxrange", rxrule: "rxrule", rxstartsWith: "rxstartsWith", rxtime: "rxtime", rxupperCase: "rxupperCase", rxurl: "rxurl", rxunique: "rxunique", rxnotEmpty: "rxnotEmpty", rxcusip: "rxcusip", rxgrid: "rxgrid", rxdate: "rxdate" }, providers: [NGMODEL_BINDING], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxFormControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[formControlName],[formControl]',
@@ -14905,9 +15014,9 @@ class RxFormBuilder extends BaseFormBuilder {
         });
     }
 }
-/** @nocollapse */ RxFormBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxFormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ RxFormBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxFormBuilder });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxFormBuilder, decorators: [{
+/** @nocollapse */ RxFormBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxFormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ RxFormBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxFormBuilder });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxFormBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -14931,9 +15040,9 @@ class ControlHostDirective {
             this.viewContainerRef.clear();
     }
 }
-/** @nocollapse */ ControlHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ControlHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ControlHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ControlHostDirective, selector: "[controlHost]", inputs: { portal: ["controlHost", "portal"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ControlHostDirective, decorators: [{
+/** @nocollapse */ ControlHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ControlHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ControlHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: ControlHostDirective, selector: "[controlHost]", inputs: { portal: ["controlHost", "portal"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ControlHostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[controlHost]'
@@ -14955,19 +15064,19 @@ class TypedFormBuilder {
         return this.formBuilder.group(controlsConfig, options);
     }
 }
-/** @nocollapse */ TypedFormBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TypedFormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ TypedFormBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TypedFormBuilder });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TypedFormBuilder, decorators: [{
+/** @nocollapse */ TypedFormBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TypedFormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ TypedFormBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TypedFormBuilder });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: TypedFormBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
 class RxReactiveFormsModule {
     static forRoot() { return { ngModule: RxReactiveFormsModule, providers: [] }; }
 }
-/** @nocollapse */ RxReactiveFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxReactiveFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ RxReactiveFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: RxReactiveFormsModule, declarations: [RxwebFormDirective, HtmlControlTemplateDirective, ControlHostDirective, RxFormControlDirective, FileControlDirective, ImageFileControlDirective, AsyncValidationDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AsyncValidationDirective, RxwebFormDirective, HtmlControlTemplateDirective, RxFormControlDirective, FileControlDirective, ImageFileControlDirective] });
-/** @nocollapse */ RxReactiveFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxReactiveFormsModule, providers: [RxFormBuilder, DecimalProvider, DecimalPipe], imports: [CommonModule, FormsModule, ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: RxReactiveFormsModule, decorators: [{
+/** @nocollapse */ RxReactiveFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxReactiveFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ RxReactiveFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: RxReactiveFormsModule, declarations: [RxwebFormDirective, HtmlControlTemplateDirective, ControlHostDirective, RxFormControlDirective, FileControlDirective, ImageFileControlDirective, AsyncValidationDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AsyncValidationDirective, RxwebFormDirective, HtmlControlTemplateDirective, RxFormControlDirective, FileControlDirective, ImageFileControlDirective] });
+/** @nocollapse */ RxReactiveFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxReactiveFormsModule, providers: [RxFormBuilder, DecimalProvider, DecimalPipe], imports: [CommonModule, FormsModule, ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: RxReactiveFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RxwebFormDirective, HtmlControlTemplateDirective, ControlHostDirective, RxFormControlDirective, FileControlDirective, ImageFileControlDirective, AsyncValidationDirective],
@@ -14984,10 +15093,10 @@ class ReactiveTypedFormsModule {
     }
     static forRoot() { return { ngModule: ReactiveTypedFormsModule, providers: [] }; }
 }
-/** @nocollapse */ ReactiveTypedFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ReactiveTypedFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ ReactiveTypedFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: ReactiveTypedFormsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule], exports: [ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
-/** @nocollapse */ ReactiveTypedFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ReactiveTypedFormsModule, providers: [{ provide: FormBuilder, useClass: TypedFormBuilder }, TypedFormBuilder], imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule.forRoot(), ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ReactiveTypedFormsModule, decorators: [{
+/** @nocollapse */ ReactiveTypedFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ReactiveTypedFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ ReactiveTypedFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: ReactiveTypedFormsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule], exports: [ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
+/** @nocollapse */ ReactiveTypedFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ReactiveTypedFormsModule, providers: [{ provide: FormBuilder, useClass: TypedFormBuilder }, TypedFormBuilder], imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule.forRoot(), ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ReactiveTypedFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -15575,9 +15684,9 @@ class GenericReactiveFormComponent extends GenericFormBaseComponent {
         console.log(this.form.getErrorSummary(false));
     }
 }
-/** @nocollapse */ GenericReactiveFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericReactiveFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ GenericReactiveFormComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: GenericReactiveFormComponent, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GenericReactiveFormComponent, decorators: [{
+/** @nocollapse */ GenericReactiveFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericReactiveFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ GenericReactiveFormComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: GenericReactiveFormComponent, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: GenericReactiveFormComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Type }, { type: undefined }, { type: i1$3.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
                 type: Input
@@ -15706,9 +15815,9 @@ class BaseInterceptor {
         return errors.join('\n');
     }
 }
-/** @nocollapse */ BaseInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseInterceptor, deps: [{ token: AppSetting }, { token: i2$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ BaseInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseInterceptor, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BaseInterceptor, decorators: [{
+/** @nocollapse */ BaseInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseInterceptor, deps: [{ token: AppSetting }, { token: i2$2.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ BaseInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseInterceptor, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: BaseInterceptor, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: AppSetting }, { type: i2$2.MatSnackBar }]; } });
@@ -15769,9 +15878,9 @@ class CachingInterceptor {
         }));
     }
 }
-/** @nocollapse */ CachingInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CachingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ CachingInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CachingInterceptor, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: CachingInterceptor, decorators: [{
+/** @nocollapse */ CachingInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: CachingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ CachingInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: CachingInterceptor, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: CachingInterceptor, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -15813,9 +15922,9 @@ class LoadingScreenService {
         this.loading = false;
     }
 }
-/** @nocollapse */ LoadingScreenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoadingScreenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ LoadingScreenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoadingScreenService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoadingScreenService, decorators: [{
+/** @nocollapse */ LoadingScreenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoadingScreenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ LoadingScreenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoadingScreenService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoadingScreenService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -15872,9 +15981,9 @@ class LoadingScreenInterceptor {
     }
     ;
 }
-/** @nocollapse */ LoadingScreenInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoadingScreenInterceptor, deps: [{ token: LoadingScreenService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ LoadingScreenInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoadingScreenInterceptor });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LoadingScreenInterceptor, decorators: [{
+/** @nocollapse */ LoadingScreenInterceptor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoadingScreenInterceptor, deps: [{ token: LoadingScreenService }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ LoadingScreenInterceptor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoadingScreenInterceptor });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: LoadingScreenInterceptor, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: LoadingScreenService }]; } });
 
@@ -15886,9 +15995,9 @@ class FileService extends GenericService {
         super('file');
     }
 }
-/** @nocollapse */ FileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ FileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FileService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: FileService, decorators: [{
+/** @nocollapse */ FileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ FileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FileService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: FileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -15922,9 +16031,9 @@ class PrintService {
         });
     }
 }
-/** @nocollapse */ PrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PrintService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ PrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PrintService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: PrintService, decorators: [{
+/** @nocollapse */ PrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PrintService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ PrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PrintService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: PrintService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$3.Router }]; } });
@@ -15932,12 +16041,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 const DECLARATIONS$3 = [VdDynamicTableConfigDialogComponent];
 class MaterialModule {
 }
-/** @nocollapse */ MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: MaterialModule, exports: [MatButtonModule,
+/** @nocollapse */ MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: MaterialModule, exports: [MatButtonModule,
         DragDropModule] });
-/** @nocollapse */ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MaterialModule, imports: [MatButtonModule,
+/** @nocollapse */ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MaterialModule, imports: [MatButtonModule,
         DragDropModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MaterialModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -15948,13 +16057,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
         }] });
 class VdBaseModule {
 }
-/** @nocollapse */ VdBaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdBaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdBaseModule, declarations: [VdDynamicTableConfigDialogComponent], imports: [CommonModule,
+/** @nocollapse */ VdBaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdBaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdBaseModule, declarations: [VdDynamicTableConfigDialogComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatDialogModule,
         VdTableModule, MaterialModule], exports: [VdDynamicTableConfigDialogComponent] });
-/** @nocollapse */ VdBaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdBaseModule, providers: [
+/** @nocollapse */ VdBaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdBaseModule, providers: [
         { provide: HTTP_INTERCEPTORS, useClass: BaseInterceptor, multi: true },
         { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true },
         { provide: HTTP_INTERCEPTORS, useClass: LoadingScreenInterceptor, multi: true },
@@ -15964,7 +16073,7 @@ class VdBaseModule {
         MatDialogModule,
         VdTableModule,
         MaterialModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdBaseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdBaseModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -15997,9 +16106,9 @@ class VdAutocompleteOptionDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdAutocompleteOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdAutocompleteOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdAutocompleteOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdAutocompleteOptionDirective, decorators: [{
+/** @nocollapse */ VdAutocompleteOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdAutocompleteOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdAutocompleteOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdAutocompleteOptionDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-autocomplete-option]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -16012,9 +16121,9 @@ class VdChipDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdChipDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdChipDirective, selector: "[vd-chip]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdChipDirective, decorators: [{
+/** @nocollapse */ VdChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdChipDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdChipDirective, selector: "[vd-chip]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdChipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-chip]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -16033,7 +16142,7 @@ class VdChipsComponent extends AbstractMatFormField {
      * @param elementRef
      */
     constructor(injector, media, changeDetectorRef, ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef) {
-        super("app-vd-chips", ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef);
+        super("app-vd-chips", ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, focusMonitor, elementRef, changeDetectorRef);
         this.injector = injector;
         this.media = media;
         this.changeDetectorRef = changeDetectorRef;
@@ -16393,11 +16502,11 @@ class VdChipsComponent extends AbstractMatFormField {
         (_a = this.dataSourceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
-/** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.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$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.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:2em;height:2em;margin-top:-6px}: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}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{display:flex;align-items:center;flex-direction:row}::ng-deep mat-form-field.multiline .vd-chip-content{margin-top:-4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", 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"] }, { kind: "component", type: i7.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i11$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11$1.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i18.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdChipsComponent, decorators: [{
+/** @nocollapse */ VdChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", 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$2.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", 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-grid #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 [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-grid>\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-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-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-mdc-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-mdc-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-mdc-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-mdc-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-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}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{display:flex;align-items:center;flex-direction:row}::ng-deep mat-form-field.multiline .vd-chip-content{margin-top:-4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", 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"] }, { kind: "component", type: i7.MatChip, selector: "mat-basic-chip, mat-chip", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i11.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i18.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", 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\" 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:2em;height:2em;margin-top:-6px}: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}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{display:flex;align-items:center;flex-direction:row}::ng-deep mat-form-field.multiline .vd-chip-content{margin-top:-4px}\n"] }]
+            args: [{ selector: 'vd-chips', providers: [{ provide: MatFormFieldControl, useExisting: VdChipsComponent }], template: "<mat-chip-grid #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 [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-grid>\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-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center}:host ::ng-deep .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-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-mdc-chip .mat-icon{cursor:pointer}:host ::ng-deep .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center;width:2em;height:2em;margin-top:-6px}:host ::ng-deep .mat-mdc-icon-button .mat-button-wrapper{line-height:20px}:host ::ng-deep .mat-mdc-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-mdc-paginator{position:sticky;bottom:0}::ng-deep .mat-autocomplete-panel .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .mat-autocomplete-panel .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions{align-items:baseline}::ng-deep .mat-autocomplete-panel .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-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}::ng-deep mat-form-field.mat-form-field-type-app-vd-chips .mat-form-field-infix{display:flex;align-items:center;flex-direction:row}::ng-deep mat-form-field.multiline .vd-chip-content{margin-top:-4px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: VdMediaService }, { type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
                         type: Optional
@@ -16487,8 +16596,8 @@ const MATRIAL_DECLARATIONS = [
 ];
 class VdChipsModule {
 }
-/** @nocollapse */ VdChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdChipsModule, declarations: [VdChipsComponent,
+/** @nocollapse */ VdChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdChipsModule, declarations: [VdChipsComponent,
         VdAutocompleteOptionDirective,
         VdChipDirective], imports: [CommonModule,
         FormsModule,
@@ -16503,12 +16612,12 @@ class VdChipsModule {
         MatPaginatorModule], exports: [VdChipsComponent,
         VdAutocompleteOptionDirective,
         VdChipDirective] });
-/** @nocollapse */ VdChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdChipsModule, imports: [CommonModule,
+/** @nocollapse */ VdChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdChipsModule, imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         VdTableModule,
         MATRIAL_DECLARATIONS] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdChipsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdChipsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16543,8 +16652,8 @@ const VD_DIALOGS_ENTRY_COMPONENTS = [
 ];
 class VdDialogsModule {
 }
-/** @nocollapse */ VdDialogsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdDialogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdDialogsModule, declarations: [VdAlertDialogComponent,
+/** @nocollapse */ VdDialogsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdDialogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdDialogsModule, declarations: [VdAlertDialogComponent,
         VdConfirmDialogComponent,
         VdPromptDialogComponent,
         VdDialogComponent,
@@ -16561,14 +16670,14 @@ class VdDialogsModule {
         VdDialogTitleDirective,
         VdDialogActionsDirective,
         VdDialogContentDirective] });
-/** @nocollapse */ VdDialogsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogsModule, providers: [
+/** @nocollapse */ VdDialogsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogsModule, providers: [
         DIALOG_PROVIDER
     ], imports: [FormsModule,
         CommonModule,
         MatDialogModule,
         MatInputModule,
         MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdDialogsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdDialogsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16751,7 +16860,7 @@ class VdFileInputComponent {
     * Method executed when a file is selected.
     */
     handleSelect($event) {
-        let file = $event === null || $event === void 0 ? void 0 : $event.target.files[0];
+        let file = ($event === null || $event === void 0 ? void 0 : $event.target).files[0];
         if (file) {
             this.writeValue(file.name);
             this.onSelect.emit(file);
@@ -16823,39 +16932,39 @@ class VdFileInputComponent {
         this.fm.stopMonitoring(this._elementRef.nativeElement);
     }
 }
-/** @nocollapse */ VdFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFileInputComponent, deps: [{ token: i1.NgControl }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: { accept: "accept", placeholder: "placeholder", required: "required", multiple: "multiple", disabled: "disabled", errorState: "errorState" }, outputs: { onSelect: "select", onClear: "clear" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
+/** @nocollapse */ VdFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFileInputComponent, deps: [{ token: i1.NgControl }, { token: i3$2.FocusMonitor }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: { accept: "accept", placeholder: "placeholder", required: "required", multiple: "multiple", disabled: "disabled", errorState: "errorState" }, outputs: { onSelect: "select", onClear: "clear" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [
         { provide: MatFormFieldControl, useExisting: VdFileInputComponent }
-    ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["fileElement"], descendants: true, static: true }, { propertyName: "_fileInputElement", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: `
-		<div layout="row" flex>
-			<input matInput #fileElement [(ngModel)]="value" (click)="fileInput.click()" readonly="true" [placeholder]="placeholder" [disabled]="disabled" [required]="required">
-			<input hidden type="file" [accept]="accept" #fileInput (change)="handleSelect($event)" />
-			<div class="btn-suffix">
-				<button type="button" mat-button *ngIf="!value" matSuffix mat-icon-button (click)="fileInput.click()">
-					<mat-icon>file_upload</mat-icon>
-				</button>
-				<button type="button" mat-button *ngIf="value" matSuffix mat-icon-button (click)="clear()">
-					<mat-icon>close</mat-icon>
-				</button>
-			</div>
-		</div>`, isInline: true, styles: [".btn-suffix .mat-button{position:absolute;right:0;top:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFileInputComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["fileElement"], descendants: true, static: true }, { propertyName: "_fileInputElement", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: `
+		<div layout="row" flex>
+			<input matInput #fileElement [(ngModel)]="value" (click)="fileInput.click()" readonly="true" [placeholder]="placeholder" [disabled]="disabled" [required]="required">
+			<input hidden type="file" [accept]="accept" #fileInput (change)="handleSelect($event)" />
+			<div class="btn-suffix">
+				<button type="button" mat-button *ngIf="!value" matSuffix mat-icon-button (click)="fileInput.click()">
+					<mat-icon>file_upload</mat-icon>
+				</button>
+				<button type="button" mat-button *ngIf="value" matSuffix mat-icon-button (click)="clear()">
+					<mat-icon>close</mat-icon>
+				</button>
+			</div>
+		</div>`, isInline: true, styles: [".btn-suffix .mat-mdc-button{position:absolute;right:0;top:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.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"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[vd-file-input]', template: `
-		<div layout="row" flex>
-			<input matInput #fileElement [(ngModel)]="value" (click)="fileInput.click()" readonly="true" [placeholder]="placeholder" [disabled]="disabled" [required]="required">
-			<input hidden type="file" [accept]="accept" #fileInput (change)="handleSelect($event)" />
-			<div class="btn-suffix">
-				<button type="button" mat-button *ngIf="!value" matSuffix mat-icon-button (click)="fileInput.click()">
-					<mat-icon>file_upload</mat-icon>
-				</button>
-				<button type="button" mat-button *ngIf="value" matSuffix mat-icon-button (click)="clear()">
-					<mat-icon>close</mat-icon>
-				</button>
-			</div>
+            args: [{ selector: '[vd-file-input]', template: `
+		<div layout="row" flex>
+			<input matInput #fileElement [(ngModel)]="value" (click)="fileInput.click()" readonly="true" [placeholder]="placeholder" [disabled]="disabled" [required]="required">
+			<input hidden type="file" [accept]="accept" #fileInput (change)="handleSelect($event)" />
+			<div class="btn-suffix">
+				<button type="button" mat-button *ngIf="!value" matSuffix mat-icon-button (click)="fileInput.click()">
+					<mat-icon>file_upload</mat-icon>
+				</button>
+				<button type="button" mat-button *ngIf="value" matSuffix mat-icon-button (click)="clear()">
+					<mat-icon>close</mat-icon>
+				</button>
+			</div>
 		</div>`, providers: [
                         { provide: MatFormFieldControl, useExisting: VdFileInputComponent }
-                    ], styles: [".btn-suffix .mat-button{position:absolute;right:0;top:0}\n"] }]
+                    ], styles: [".btn-suffix .mat-mdc-button{position:absolute;right:0;top:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NgControl }, { type: i3$2.FocusMonitor }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { accept: [{
                 type: Input
             }], onSelect: [{
@@ -16892,18 +17001,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
 
 class VdFileModule {
 }
-/** @nocollapse */ VdFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdFileModule, declarations: [VdFileInputComponent], imports: [CommonModule,
+/** @nocollapse */ VdFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdFileModule, declarations: [VdFileInputComponent], imports: [CommonModule,
         FormsModule,
         MatInputModule,
         MatIconModule,
         MatButtonModule], exports: [VdFileInputComponent] });
-/** @nocollapse */ VdFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFileModule, imports: [CommonModule,
+/** @nocollapse */ VdFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFileModule, imports: [CommonModule,
         FormsModule,
         MatInputModule,
         MatIconModule,
         MatButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFileModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16937,15 +17046,15 @@ class MatFormFieldReadonlyDirective {
         return false;
     }
 }
-/** @nocollapse */ MatFormFieldReadonlyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i11.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ MatFormFieldReadonlyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: MatFormFieldReadonlyDirective, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
+/** @nocollapse */ MatFormFieldReadonlyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i6$1.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ MatFormFieldReadonlyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: MatFormFieldReadonlyDirective, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-form-field',
                     host: { '[class.mat-form-field-readonly]': 'isReadonlyInput()' }
                 }]
-        }], ctorParameters: function () { return [{ type: i11.MatFormField }]; } });
+        }], ctorParameters: function () { return [{ type: i6$1.MatFormField }]; } });
 
 class EmptyStringResetDirective {
     /**
@@ -16959,9 +17068,9 @@ class EmptyStringResetDirective {
         return null;
     }
 }
-/** @nocollapse */ EmptyStringResetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EmptyStringResetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ EmptyStringResetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EmptyStringResetDirective)), multi: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EmptyStringResetDirective, decorators: [{
+/** @nocollapse */ EmptyStringResetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EmptyStringResetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ EmptyStringResetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EmptyStringResetDirective)), multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EmptyStringResetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[formControlName],[formControl]',
@@ -16977,9 +17086,9 @@ class VdEditorDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdEditorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdEditorDirective, selector: "[vd-editor]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdEditorDirective, decorators: [{
+/** @nocollapse */ VdEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdEditorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdEditorDirective, selector: "[vd-editor]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdEditorDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-editor]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -16991,9 +17100,9 @@ class VdCodeDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdCodeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdCodeDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdCodeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdCodeDirective, selector: "[vd-code]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdCodeDirective, decorators: [{
+/** @nocollapse */ VdCodeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdCodeDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdCodeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdCodeDirective, selector: "[vd-code]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdCodeDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-code]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -17005,9 +17114,9 @@ class VdFileDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFileDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdFileDirective, selector: "[vd-file]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFileDirective, decorators: [{
+/** @nocollapse */ VdFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFileDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdFileDirective, selector: "[vd-file]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFileDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-file]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -17019,9 +17128,9 @@ class VdCustomDirective extends CdkPortal {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ VdCustomDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdCustomDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdCustomDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdCustomDirective, selector: "[vd-custom]ng-template", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdCustomDirective, decorators: [{
+/** @nocollapse */ VdCustomDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdCustomDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdCustomDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdCustomDirective, selector: "[vd-custom]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdCustomDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[vd-custom]ng-template' }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
@@ -17159,11 +17268,11 @@ class VdGenericFormComponent {
         this.fieldGroups = (_a = this.formDefinition) === null || _a === void 0 ? void 0 : _a.fieldGroups;
     }
 }
-/** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", 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 }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\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\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"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                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"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                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"readonly || (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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"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\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n                                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"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\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'pad-bottom-xs'\" layout-margin appearance=\"outline\">\r\n                        <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change($event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></div>\r\n                        </mat-form-field>\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\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formGroup?.value | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", 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"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", 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"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i11.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdGenericFormComponent, decorators: [{
+/** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", 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 }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\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]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-accent\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formGroup.value, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n                                <mat-chip-row *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-row>\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-grid>\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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"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);\" layout=\"row\" 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 *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n                                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"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 *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change($event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></div>\r\n                        </mat-form-field>\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\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formGroup?.value | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: ["vd-select ::ng-deep mat-select-trigger.chip .mat-mdc-chip{padding:12px;border-radius:100%;color:inherit}vd-select ::ng-deep mat-select-trigger.chip .mat-mdc-chip:not(:last-child){margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "triggerCssClass", "triggerMode", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", 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"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i17.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i17.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i17.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, mat-basic-chip-row", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", 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    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\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\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"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                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"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                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"readonly || (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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"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\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n                                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\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\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"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\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'pad-bottom-xs'\" layout-margin appearance=\"outline\">\r\n                        <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change($event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></div>\r\n                        </mat-form-field>\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\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formGroup?.value | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>" }]
+            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\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]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-accent\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formGroup.value, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formGroup.value, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\">\r\n                                <mat-chip-row *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-row>\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-grid>\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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint | func:formGroup.value:formGroup:context\" [params]=\"field.params | func:formGroup.value:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"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);\" layout=\"row\" 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 *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\" flex>\r\n                                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" (click)=\"suffixButton.event && suffixButton.event(formGroup?.value, context)\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formGroup?.value, context)\">\r\n                                    <mat-icon>{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"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 *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</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\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"readonly || (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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.header}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name\" (select)=\"field.change && field.change($event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"readonly || (field.readonly && field.readonly(formGroup?.value, formGroup, context))\"></div>\r\n                        </mat-form-field>\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\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0]?.row + 1}\"></ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formGroup?.value | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: ["vd-select ::ng-deep mat-select-trigger.chip .mat-mdc-chip{padding:12px;border-radius:100%;color:inherit}vd-select ::ng-deep mat-select-trigger.chip .mat-mdc-chip:not(:last-child){margin-right:6px}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -17316,9 +17425,9 @@ class MatFormFieldEditorDirective extends _AbstractMatFormFieldBase {
         }
     }
 }
-/** @nocollapse */ MatFormFieldEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.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$3.Platform }, { token: i4$3.AutofillMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ MatFormFieldEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.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: "14.0.0", ngImport: i0, type: MatFormFieldEditorDirective, decorators: [{
+/** @nocollapse */ MatFormFieldEditorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", 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$3.Platform }, { token: i4$3.AutofillMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ MatFormFieldEditorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", 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: "15.0.1", ngImport: i0, type: MatFormFieldEditorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tinyMatFormControl]',
@@ -17339,7 +17448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         type: Optional
                     }] }, { type: i1.FormGroupDirective, decorators: [{
                         type: Optional
-                    }] }, { type: i2.ErrorStateMatcher }, { type: i5$4.EditorComponent, decorators: [{
+                    }] }, { type: i2.ErrorStateMatcher }, { type: i5$5.EditorComponent, decorators: [{
                         type: Self
                     }, {
                         type: Inject,
@@ -17412,9 +17521,9 @@ class EqualValidator {
         return null;
     }
 }
-/** @nocollapse */ EqualValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EqualValidator, deps: [{ token: 'validateEqual', attribute: true }, { token: 'reverse', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ EqualValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: EqualValidator, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EqualValidator)), multi: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: EqualValidator, decorators: [{
+/** @nocollapse */ EqualValidator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EqualValidator, deps: [{ token: 'validateEqual', attribute: true }, { token: 'reverse', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ EqualValidator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: EqualValidator, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EqualValidator)), multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: EqualValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
@@ -17449,9 +17558,9 @@ class NativeElementInjectorDirective {
         }
     }
 }
-/** @nocollapse */ NativeElementInjectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NativeElementInjectorDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl }, { token: i1.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ NativeElementInjectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: NativeElementInjectorDirective, selector: "[ngModel]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NativeElementInjectorDirective, decorators: [{
+/** @nocollapse */ NativeElementInjectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: NativeElementInjectorDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl }, { token: i1.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ NativeElementInjectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: NativeElementInjectorDirective, selector: "[ngModel]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: NativeElementInjectorDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[ngModel]' }]
         }], ctorParameters: function () {
@@ -17507,9 +17616,9 @@ class UniqueValidatorDirective {
         }));
     }
 }
-/** @nocollapse */ UniqueValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UniqueValidatorDirective, deps: [{ token: i1$6.HttpClient }, { token: 'unique', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ UniqueValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: UniqueValidatorDirective, selector: "[unique]", inputs: { uniqueProperty: "uniqueProperty", uniqueId: "uniqueId", uniqueParams: "uniqueParams", invert: "invert" }, providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueValidatorDirective, multi: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: UniqueValidatorDirective, decorators: [{
+/** @nocollapse */ UniqueValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: UniqueValidatorDirective, deps: [{ token: i1$6.HttpClient }, { token: 'unique', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ UniqueValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: UniqueValidatorDirective, selector: "[unique]", inputs: { uniqueProperty: "uniqueProperty", uniqueId: "uniqueId", uniqueParams: "uniqueParams", invert: "invert" }, providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueValidatorDirective, multi: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: UniqueValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[unique]',
@@ -17658,9 +17767,9 @@ class ValueAccessorBase extends MatFormFieldControl {
         this.stateChanges.complete();
     }
 }
-/** @nocollapse */ ValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ValueAccessorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ValueAccessorBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: ValueAccessorBase, host: { properties: { "attr.aria-describedby": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ValueAccessorBase, decorators: [{
+/** @nocollapse */ ValueAccessorBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ValueAccessorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ValueAccessorBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: ValueAccessorBase, host: { properties: { "attr.aria-describedby": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: ValueAccessorBase, decorators: [{
             type: Directive
         }], propDecorators: { describedBy: [{
                 type: HostBinding,
@@ -17682,8 +17791,8 @@ const DECLARATIONS$1 = [
 ];
 class VdFormsModule {
 }
-/** @nocollapse */ VdFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdFormsModule, declarations: [EqualValidator,
+/** @nocollapse */ VdFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdFormsModule, declarations: [EqualValidator,
         UniqueValidatorDirective,
         NativeElementInjectorDirective,
         MatFormFieldReadonlyDirective,
@@ -17722,7 +17831,7 @@ class VdFormsModule {
         VdCustomDirective,
         EmptyStringResetDirective,
         VdGenericFormComponent] });
-/** @nocollapse */ VdFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFormsModule, imports: [CommonModule,
+/** @nocollapse */ VdFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFormsModule, imports: [CommonModule,
         VdCommonModule,
         VdSelectModule,
         VdChipsModule,
@@ -17741,7 +17850,7 @@ class VdFormsModule {
         MatNativeDateModule,
         MatAutocompleteModule,
         MatChipsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -17860,9 +17969,9 @@ class VdMediaToggleDirective {
         }
     }
 }
-/** @nocollapse */ VdMediaToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaToggleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ VdMediaToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type: VdMediaToggleDirective, selector: "[vdMediaToggle]", inputs: { query: ["vdMediaToggle", "query"], attributes: ["mediaAttributes", "attributes"], classes: ["mediaClasses", "classes"], styles: ["mediaStyles", "styles"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaToggleDirective, decorators: [{
+/** @nocollapse */ VdMediaToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaToggleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ VdMediaToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.1", type: VdMediaToggleDirective, selector: "[vdMediaToggle]", inputs: { query: ["vdMediaToggle", "query"], attributes: ["mediaAttributes", "attributes"], classes: ["mediaClasses", "classes"], styles: ["mediaStyles", "styles"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdMediaToggle]',
@@ -17886,12 +17995,12 @@ const VD_MEDIA = [
 ];
 class VdMediaModule {
 }
-/** @nocollapse */ VdMediaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdMediaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdMediaModule, declarations: [VdMediaToggleDirective], imports: [CommonModule], exports: [VdMediaToggleDirective] });
-/** @nocollapse */ VdMediaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaModule, providers: [
+/** @nocollapse */ VdMediaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdMediaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdMediaModule, declarations: [VdMediaToggleDirective], imports: [CommonModule], exports: [VdMediaToggleDirective] });
+/** @nocollapse */ VdMediaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaModule, providers: [
         MEDIA_PROVIDER,
     ], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdMediaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdMediaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -17978,8 +18087,8 @@ class VdSearchInputComponent {
         this.onSearchDebounce.emit(value);
     }
 }
-/** @nocollapse */ VdSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSearchInputComponent, deps: [{ token: i1$7.Dir, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdSearchInputComponent, selector: "vd-search-input", inputs: { showUnderline: "showUnderline", debounce: "debounce", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear", onBlur: "blur" }, viewQueries: [{ propertyName: "_input", first: true, predicate: MatInput, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-input\" layout=\"row\" layout-align=\"end center\">\r\n\t<mat-form-field [class.mat-hide-underline]=\"!showUnderline\" floatPlaceholder=\"never\" flex appearance=\"legacy\">\r\n\t\t<input matInput #searchElement type=\"search\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\" (blur)=\"handleBlur()\" (search)=\"stopPropagation($event)\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t</mat-form-field>\r\n\t<button mat-icon-button type=\"button\" [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\" (click)=\"clearSearch()\" flex=\"none\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>", styles: [".vd-search-input{overflow-x:hidden}.vd-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-input-underline{display:none}\n"], dependencies: [{ kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.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"] }], animations: [
+/** @nocollapse */ VdSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSearchInputComponent, deps: [{ token: i1$7.Dir, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdSearchInputComponent, selector: "vd-search-input", inputs: { showUnderline: "showUnderline", debounce: "debounce", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear", onBlur: "blur" }, viewQueries: [{ propertyName: "_input", first: true, predicate: MatInput, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-input\" layout=\"row\" layout-align=\"end center\">\r\n\t<mat-form-field [class.mat-hide-underline]=\"!showUnderline\" floatPlaceholder=\"never\" flex>\r\n\t\t<input matInput #searchElement type=\"search\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\" (blur)=\"handleBlur()\" (search)=\"stopPropagation($event)\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t</mat-form-field>\r\n\t<button mat-icon-button type=\"button\" [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\" (click)=\"clearSearch()\" flex=\"none\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>", styles: [".vd-search-input{overflow-x:hidden}.vd-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-input-underline{display:none}\n"], dependencies: [{ kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }], animations: [
         trigger('searchState', [
             state('hide-left', style({
                 transform: 'translateX(-150%)',
@@ -17997,7 +18106,7 @@ class VdSearchInputComponent {
             transition('show => *', animate('200ms ease-out')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSearchInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-search-input', animations: [
                         trigger('searchState', [
@@ -18016,7 +18125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                             transition('* => show', animate('200ms ease-in')),
                             transition('show => *', animate('200ms ease-out')),
                         ]),
-                    ], template: "<div class=\"vd-search-input\" layout=\"row\" layout-align=\"end center\">\r\n\t<mat-form-field [class.mat-hide-underline]=\"!showUnderline\" floatPlaceholder=\"never\" flex appearance=\"legacy\">\r\n\t\t<input matInput #searchElement type=\"search\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\" (blur)=\"handleBlur()\" (search)=\"stopPropagation($event)\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t</mat-form-field>\r\n\t<button mat-icon-button type=\"button\" [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\" (click)=\"clearSearch()\" flex=\"none\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>", styles: [".vd-search-input{overflow-x:hidden}.vd-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-input-underline{display:none}\n"] }]
+                    ], template: "<div class=\"vd-search-input\" layout=\"row\" layout-align=\"end center\">\r\n\t<mat-form-field [class.mat-hide-underline]=\"!showUnderline\" floatPlaceholder=\"never\" flex>\r\n\t\t<input matInput #searchElement type=\"search\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\" (blur)=\"handleBlur()\" (search)=\"stopPropagation($event)\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t</mat-form-field>\r\n\t<button mat-icon-button type=\"button\" [@searchState]=\"(searchElement.value ?  'show' : (isRTL ? 'hide-left' : 'hide-right'))\" (click)=\"clearSearch()\" flex=\"none\">\r\n\t\t<mat-icon>cancel</mat-icon>\r\n\t</button>\r\n</div>", styles: [".vd-search-input{overflow-x:hidden}.vd-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-input-underline{display:none}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$7.Dir, decorators: [{
                         type: Optional
@@ -18118,8 +18227,8 @@ class VdSearchBoxComponent {
         this.onClear.emit(undefined);
     }
 }
-/** @nocollapse */ VdSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ VdSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: VdSearchBoxComponent, selector: "vd-search-box", inputs: { backIcon: "backIcon", showUnderline: "showUnderline", debounce: "debounce", alwaysVisible: "alwaysVisible", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear" }, viewQueries: [{ propertyName: "_searchInput", first: true, predicate: VdSearchInputComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-box\" layout=\"row\" layout-align=\"end center\">\r\n\t<button mat-icon-button type=\"button\" class=\"vd-search-icon\" flex=\"none\" (click)=\"searchClicked()\">\r\n\t\t  <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{backIcon}}</mat-icon>\r\n\t\t  <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">search</mat-icon>\r\n\t\t</button>\r\n\t<vd-search-input #searchInput [@inputState]=\"alwaysVisible || searchVisible\" [debounce]=\"debounce\" [showUnderline]=\"showUnderline\"\r\n\t [placeholder]=\"placeholder\" (searchDebounce)=\"handleSearchDebounce($event)\" (search)=\"handleSearch($event)\" (clear)=\"handleClear(); toggleVisibility()\">\r\n\t</vd-search-input>\r\n</div>", styles: [":host{display:block}.vd-search-box vd-search-input{margin-left:12px}::ng-deep [dir=rtl] .vd-search-box vd-search-input{margin-right:12px;margin-left:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: VdSearchInputComponent, selector: "vd-search-input", inputs: ["showUnderline", "debounce", "placeholder"], outputs: ["searchDebounce", "search", "clear", "blur"] }], animations: [
+/** @nocollapse */ VdSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSearchBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ VdSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: VdSearchBoxComponent, selector: "vd-search-box", inputs: { backIcon: "backIcon", showUnderline: "showUnderline", debounce: "debounce", alwaysVisible: "alwaysVisible", placeholder: "placeholder" }, outputs: { onSearchDebounce: "searchDebounce", onSearch: "search", onClear: "clear" }, viewQueries: [{ propertyName: "_searchInput", first: true, predicate: VdSearchInputComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-search-box\" layout=\"row\" layout-align=\"end center\">\r\n\t<button mat-icon-button type=\"button\" class=\"vd-search-icon\" flex=\"none\" (click)=\"searchClicked()\">\r\n\t\t  <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{backIcon}}</mat-icon>\r\n\t\t  <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">search</mat-icon>\r\n\t\t</button>\r\n\t<vd-search-input #searchInput [@inputState]=\"alwaysVisible || searchVisible\" [debounce]=\"debounce\" [showUnderline]=\"showUnderline\"\r\n\t [placeholder]=\"placeholder\" (searchDebounce)=\"handleSearchDebounce($event)\" (search)=\"handleSearch($event)\" (clear)=\"handleClear(); toggleVisibility()\">\r\n\t</vd-search-input>\r\n</div>", styles: [":host{display:block}.vd-search-box vd-search-input{margin-left:12px}::ng-deep [dir=rtl] .vd-search-box vd-search-input{margin-right:12px;margin-left:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: VdSearchInputComponent, selector: "vd-search-input", inputs: ["showUnderline", "debounce", "placeholder"], outputs: ["searchDebounce", "search", "clear", "blur"] }], animations: [
         trigger('inputState', [
             state('false', style({
                 width: '0%',
@@ -18135,7 +18244,7 @@ class VdSearchBoxComponent {
             transition('1 => 0', animate('200ms ease-out')),
         ]),
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSearchBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSearchBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-search-box', animations: [
                         trigger('inputState', [
@@ -18188,20 +18297,20 @@ const DECLARATIONS = [
 ];
 class VdSearchModule {
 }
-/** @nocollapse */ VdSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ VdSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.0", ngImport: i0, type: VdSearchModule, declarations: [VdSearchInputComponent,
+/** @nocollapse */ VdSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ VdSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: VdSearchModule, declarations: [VdSearchInputComponent,
         VdSearchBoxComponent], imports: [CommonModule,
         FormsModule,
         MatButtonModule,
         MatIconModule,
         MatInputModule], exports: [VdSearchInputComponent,
         VdSearchBoxComponent] });
-/** @nocollapse */ VdSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSearchModule, imports: [CommonModule,
+/** @nocollapse */ VdSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSearchModule, imports: [CommonModule,
         FormsModule,
         MatButtonModule,
         MatIconModule,
         MatInputModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: VdSearchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: VdSearchModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [