@devopmaat/badaboom 1.3.13 → 1.4.0

package/fesm2022/devopmaat-badaboom.mjs

@@ -1,37 +1,40 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Input, HostBinding, Component, EventEmitter, Output, inject, Injectable, makeEnvironmentProviders, Directive, Injector, Pipe, ContentChildren, ViewChild, Optional, Self, HostListener, LOCALE_ID, Inject } from '@angular/core';
+import { InjectionToken, Input, HostBinding, Component, EventEmitter, Output, inject, Injectable, makeEnvironmentProviders, input, signal, Directive, Injector, Pipe, viewChild, contentChildren, effect, computed, output, Optional, Self, HostListener, LOCALE_ID, Inject, DestroyRef, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { HttpClient, HttpErrorResponse, provideHttpClient, withInterceptors } from '@angular/common/http';
-import { BehaviorSubject, of, catchError as catchError$1, throwError, filter as filter$1, take, concatMap as concatMap$1, tap as tap$1, map, Subject, finalize, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
+import * as i2$4 from '@angular/router';
+import { Router, RouterOutlet, provideRouter, ActivatedRoute, NavigationStart, RouterModule, RouterLink } from '@angular/router';
+import { BehaviorSubject, of, catchError as catchError$1, throwError, filter as filter$1, take, concatMap as concatMap$1, tap as tap$1, map, Subject, finalize, takeUntil, debounceTime, distinctUntilChanged, switchMap, merge } from 'rxjs';
 import * as i1$1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import * as i2$3 from '@angular/router';
-import { Router, RouterOutlet, provideRouter, RouterLink } from '@angular/router';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { tap, catchError, filter, concatMap, shareReplay, map as map$1 } from 'rxjs/operators';
 import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import * as i7 from '@angular/material/button';
+import { CommonModule, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$2 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i1$2 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, ControlContainer, Validators, FormGroup } from '@angular/forms';
+import { ReactiveFormsModule, FormControl, Validators, NgControl, ControlContainer, FormGroup } from '@angular/forms';
+import * as i2$2 from '@angular/material/toolbar';
+import { MatToolbarModule, MatToolbar } from '@angular/material/toolbar';
 import * as i1$3 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i5 from '@angular/material/menu';
-import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import * as i2$1 from '@angular/material/table';
-import { MatTableModule } from '@angular/material/table';
-import * as i3 from '@angular/material/checkbox';
+import * as i3$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i5 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import * as i4 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
-import * as i6 from '@angular/material/autocomplete';
+import * as i2$1 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i5$1 from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
-import * as i5$1 from '@angular/material/input';
+import * as i5$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$4 from '@angular/youtube-player';
 import { YouTubePlayerModule } from '@angular/youtube-player';
@@ -40,7 +43,12 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$5 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import { MatProgressBar } from '@angular/material/progress-bar';
-import * as i3$1 from '@angular/material/card';
+import { parseISO } from 'date-fns';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i6 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i3$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 
 class BdbAuthOptionsBuilder {
@@ -118,10 +126,10 @@ class BdbAlertComponent {
         this.icon = 'task_alt';
         this.inline = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: BdbAlertComponent, isStandalone: true, selector: "bdb-alert", inputs: { label: "label", icon: "icon", inline: "inline" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"bdb-alert-wrapper\" [ngStyle]=\"{ display: inline ? 'inline-flex' : 'flex' }\">\r\n  <div class=\"bdb-icon-container\">\r\n    <mat-icon>{{ icon }}</mat-icon>\r\n  </div>\r\n  <div class=\"content-container\">\r\n    <div>\r\n      <div class=\"label\">\r\n        {{ label }}\r\n      </div>\r\n      <div class=\"content\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".bdb-alert-wrapper{border-radius:4px;border:1px solid}.bdb-alert-wrapper .bdb-icon-container{min-height:100%;min-width:48px;display:flex;justify-content:center;align-items:center}.bdb-alert-wrapper .inline{max-width:100%}.content-container{padding:8px;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.bdb-icon-container{background-color:var(--bdb-alert-container-color);color:var(--bdb-alert-icon-color);border-top-left-radius:inherit;border-bottom-left-radius:inherit}.bdb-alert-wrapper{border-color:var(--bdb-alert-border-color)}.content-container{background-color:var(--bdb-alert-content-container-color);color:var(--bdb-alert-content-color);flex:1}.label{font-weight:500;font-size:1.1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BdbAlertComponent, isStandalone: true, selector: "bdb-alert", inputs: { label: "label", icon: "icon", inline: "inline" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"bdb-alert-wrapper\" [ngStyle]=\"{ display: inline ? 'inline-flex' : 'flex' }\">\r\n  <div class=\"bdb-icon-container\">\r\n    <mat-icon>{{ icon }}</mat-icon>\r\n  </div>\r\n  <div class=\"content-container\">\r\n    <div>\r\n      <div class=\"label\">\r\n        {{ label }}\r\n      </div>\r\n      <div class=\"content\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".bdb-alert-wrapper{border-radius:4px;border:1px solid}.bdb-alert-wrapper .bdb-icon-container{min-height:100%;min-width:48px;display:flex;justify-content:center;align-items:center}.bdb-alert-wrapper .inline{max-width:100%}.content-container{padding:8px;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.bdb-icon-container{background-color:var(--bdb-alert-container-color);color:var(--bdb-alert-icon-color);border-top-left-radius:inherit;border-bottom-left-radius:inherit}.bdb-alert-wrapper{border-color:var(--bdb-alert-border-color)}.content-container{background-color:var(--bdb-alert-content-container-color);color:var(--bdb-alert-content-color);flex:1}.label{font-weight:500;font-size:1.1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-alert', imports: [CommonModule, MatIconModule], template: "<div class=\"bdb-alert-wrapper\" [ngStyle]=\"{ display: inline ? 'inline-flex' : 'flex' }\">\r\n  <div class=\"bdb-icon-container\">\r\n    <mat-icon>{{ icon }}</mat-icon>\r\n  </div>\r\n  <div class=\"content-container\">\r\n    <div>\r\n      <div class=\"label\">\r\n        {{ label }}\r\n      </div>\r\n      <div class=\"content\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".bdb-alert-wrapper{border-radius:4px;border:1px solid}.bdb-alert-wrapper .bdb-icon-container{min-height:100%;min-width:48px;display:flex;justify-content:center;align-items:center}.bdb-alert-wrapper .inline{max-width:100%}.content-container{padding:8px;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.bdb-icon-container{background-color:var(--bdb-alert-container-color);color:var(--bdb-alert-icon-color);border-top-left-radius:inherit;border-bottom-left-radius:inherit}.bdb-alert-wrapper{border-color:var(--bdb-alert-border-color)}.content-container{background-color:var(--bdb-alert-content-container-color);color:var(--bdb-alert-content-color);flex:1}.label{font-weight:500;font-size:1.1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { class: [{
@@ -228,10 +236,10 @@ class BdbAlertErrorResponseComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbAlertErrorResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbAlertErrorResponseComponent, isStandalone: true, selector: "bdb-alert-error-response", inputs: { value: "value", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, usesOnChanges: true, ngImport: i0, template: "@if (value) {\r\n  <bdb-alert [icon]=\"icon\" [label]=\"label\" [class]=\"alertClass\">\r\n    @switch (value.status) {\r\n      @case (400) {\r\n        @for (message of validationFailures(); track message) {\r\n          <div>{{ message }}</div>\r\n        }\r\n      }\r\n      @case (500) {\r\n        @if (errorCode) {\r\n          Foutcode voor technische ondersteuning: <strong>{{ errorCode }}</strong>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n        }\r\n      }\r\n      @default {\r\n        <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n      }\r\n    }\r\n    @if (dismissable) {\r\n      <button mat-icon-button class=\"error dismiss-button\" (click)=\"dismiss.emit()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n  </bdb-alert>\r\n}\r\n\r\n<ng-template #displayMessage>\r\n  {{ message }}\r\n</ng-template>\r\n", styles: [".alert{padding:8px;border-radius:4px;border:1px solid}.alert.warn{background-color:#fbe9e7;border-color:#d84315}.alert.danger{background-color:#ffebee;border-color:#c62828}bdb-alert{position:relative}.dismiss-button{position:absolute;z-index:1;top:4px;right:4px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbAlertErrorResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbAlertErrorResponseComponent, isStandalone: true, selector: "bdb-alert-error-response", inputs: { value: "value", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, usesOnChanges: true, ngImport: i0, template: "@if (value) {\r\n  <bdb-alert [icon]=\"icon\" [label]=\"label\" [class]=\"alertClass\">\r\n    @switch (value.status) {\r\n      @case (400) {\r\n        @for (message of validationFailures(); track message) {\r\n          <div>{{ message }}</div>\r\n        }\r\n      }\r\n      @case (500) {\r\n        @if (errorCode) {\r\n          Foutcode voor technische ondersteuning: <strong>{{ errorCode }}</strong>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n        }\r\n      }\r\n      @default {\r\n        <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n      }\r\n    }\r\n    @if (dismissable) {\r\n      <button mat-icon-button class=\"error dismiss-button\" (click)=\"dismiss.emit()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n  </bdb-alert>\r\n}\r\n\r\n<ng-template #displayMessage>\r\n  {{ message }}\r\n</ng-template>\r\n", styles: [".alert{padding:8px;border-radius:4px;border:1px solid}.alert.warn{background-color:#fbe9e7;border-color:#d84315}.alert.danger{background-color:#ffebee;border-color:#c62828}bdb-alert{position:relative}.dismiss-button{position:absolute;z-index:1;top:4px;right:4px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbAlertErrorResponseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbAlertErrorResponseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-alert-error-response', imports: [CommonModule, BdbAlertComponent, MatButtonModule, MatIconModule], template: "@if (value) {\r\n  <bdb-alert [icon]=\"icon\" [label]=\"label\" [class]=\"alertClass\">\r\n    @switch (value.status) {\r\n      @case (400) {\r\n        @for (message of validationFailures(); track message) {\r\n          <div>{{ message }}</div>\r\n        }\r\n      }\r\n      @case (500) {\r\n        @if (errorCode) {\r\n          Foutcode voor technische ondersteuning: <strong>{{ errorCode }}</strong>\r\n        } @else {\r\n          <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n        }\r\n      }\r\n      @default {\r\n        <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n      }\r\n    }\r\n    @if (dismissable) {\r\n      <button mat-icon-button class=\"error dismiss-button\" (click)=\"dismiss.emit()\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    }\r\n  </bdb-alert>\r\n}\r\n\r\n<ng-template #displayMessage>\r\n  {{ message }}\r\n</ng-template>\r\n", styles: [".alert{padding:8px;border-radius:4px;border:1px solid}.alert.warn{background-color:#fbe9e7;border-color:#d84315}.alert.danger{background-color:#ffebee;border-color:#c62828}bdb-alert{position:relative}.dismiss-button{position:absolute;z-index:1;top:4px;right:4px;cursor:pointer}\n"] }]
         }], propDecorators: { value: [{
@@ -246,10 +254,10 @@ class BdbErrorResponseDialogComponent {
     constructor() {
         this.data = inject(MAT_DIALOG_DATA);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbErrorResponseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: BdbErrorResponseDialogComponent, isStandalone: true, selector: "bdb-error-response-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\r\n<div mat-dialog-content>\r\n  <bdb-alert-error-response [value]=\"data.error\"></bdb-alert-error-response>\r\n</div>\r\n<div mat-dialog-actions align=\"end\">\r\n  <button mat-button type=\"button\" mat-dialog-close class=\"warn\"><mat-icon>close</mat-icon> Sluiten</button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbErrorResponseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BdbErrorResponseDialogComponent, isStandalone: true, selector: "bdb-error-response-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.title }}</h2>\r\n<div mat-dialog-content>\r\n  <bdb-alert-error-response [value]=\"data.error\"></bdb-alert-error-response>\r\n</div>\r\n<div mat-dialog-actions align=\"end\">\r\n  <button mat-button type=\"button\" mat-dialog-close class=\"warn\"><mat-icon>close</mat-icon> Sluiten</button>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbErrorResponseDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbErrorResponseDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-error-response-dialog', imports: [MatDialogModule, BdbAlertErrorResponseComponent, MatIconModule, MatButtonModule], template: "<h2 mat-dialog-title>{{ data.title }}</h2>\r\n<div mat-dialog-content>\r\n  <bdb-alert-error-response [value]=\"data.error\"></bdb-alert-error-response>\r\n</div>\r\n<div mat-dialog-actions align=\"end\">\r\n  <button mat-button type=\"button\" mat-dialog-close class=\"warn\"><mat-icon>close</mat-icon> Sluiten</button>\r\n</div>\r\n" }]
         }] });
@@ -281,10 +289,10 @@ class AccountService extends BdbService {
     validateResetPasswordToken(value) {
         return this.httpClient.post(`${this.baseUrl}/validate-reset-password-token`, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AccountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AccountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -413,10 +421,10 @@ class AuthService {
             claims: claims,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AuthService, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AuthService, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -440,11 +448,25 @@ const tokenExpiredInterceptor = (req, next) => {
     }));
 };
 
+const tokenInterceptor = (req, next) => {
+    const authService = inject(AuthService);
+    return authService.token$.pipe(take(1), concatMap$1(x => {
+        const request = x === null
+            ? req
+            : req.clone({
+                setHeaders: {
+                    Authorization: getAuthorizationHeaderFromToken(x ?? ''),
+                },
+            });
+        return next(request);
+    }));
+};
+
 class AuthContainerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AuthContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: AuthContainerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<router-outlet></router-outlet>\r\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AuthContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: AuthContainerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<router-outlet></router-outlet>\r\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AuthContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AuthContainerComponent, decorators: [{
             type: Component,
             args: [{ imports: [RouterOutlet], template: "<router-outlet></router-outlet>\r\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"] }]
         }] });
@@ -461,6 +483,26 @@ const loggedOutGuard = (_, state) => {
         : true;
 };
 
+const resetPasswordResolver = route => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const bdbOptions = inject(BDB_OPTIONS);
+    const invalidTokenPath = bdbOptions.authOptions?.invalidTokenPath;
+    const model = {
+        token: route.queryParams['token'],
+        email: route.queryParams['email'],
+    };
+    return of(model).pipe(tap$1(x => {
+        if (!x.token || !x.email) {
+            throw new Error('Could not obtain token');
+        }
+    }), concatMap$1(x => authService.validateResetPasswordToken(x)), tap$1(x => {
+        if (!x) {
+            throw new Error('Token is not valid');
+        }
+    }), catchError$1(() => router.navigate(['/', invalidTokenPath])), map(() => model));
+};
+
 function roleGuard(...roles) {
     return (_, state) => {
         const authService = inject(AuthService);
@@ -485,40 +527,6 @@ function roleGuard(...roles) {
     };
 }
 
-const resetPasswordResolver = route => {
-    const authService = inject(AuthService);
-    const router = inject(Router);
-    const bdbOptions = inject(BDB_OPTIONS);
-    const invalidTokenPath = bdbOptions.authOptions?.invalidTokenPath;
-    const model = {
-        token: route.queryParams['token'],
-        email: route.queryParams['email'],
-    };
-    return of(model).pipe(tap$1(x => {
-        if (!x.token || !x.email) {
-            throw new Error('Could not obtain token');
-        }
-    }), concatMap$1(x => authService.validateResetPasswordToken(x)), tap$1(x => {
-        if (!x) {
-            throw new Error('Token is not valid');
-        }
-    }), catchError$1(() => router.navigate(['/', invalidTokenPath])), map(() => model));
-};
-
-const tokenInterceptor = (req, next) => {
-    const authService = inject(AuthService);
-    return authService.token$.pipe(take(1), concatMap$1(x => {
-        const request = x === null
-            ? req
-            : req.clone({
-                setHeaders: {
-                    Authorization: getAuthorizationHeaderFromToken(x ?? ''),
-                },
-            });
-        return next(request);
-    }));
-};
-
 /**
  * Configures BaDaBoom by providing necessary tokens.
  * Takes root routes and provides the router with these routes, appending routes if specified
@@ -617,6 +625,41 @@ class BdbDataSource {
     }
 }
 
+class BdbFormDialogComponent {
+    constructor() {
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.submitFx = input.required(...(ngDevMode ? [{ debugName: "submitFx" }] : []));
+        this.title = input('Form', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.typeIcon = input(undefined, ...(ngDevMode ? [{ debugName: "typeIcon" }] : []));
+        this.cancelLabel = input('Annuleer', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+        this.submitLabel = input('Verwerk', ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
+        this.error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.dialogRef = inject((MatDialogRef));
+    }
+    formSubmit() {
+        this.error.set(undefined);
+        if (!this.formGroup().valid) {
+            this.formGroup().markAllAsTouched();
+            return;
+        }
+        this.formGroup().disable();
+        this.submitFx()().subscribe({
+            next: x => this.dialogRef.close(x),
+            error: err => {
+                this.error.set(err);
+                this.formGroup().enable();
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFormDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbFormDialogComponent, isStandalone: true, selector: "bdb-form-dialog", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, submitFx: { classPropertyName: "submitFx", publicName: "submitFx", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, typeIcon: { classPropertyName: "typeIcon", publicName: "typeIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form [formGroup]=\"formGroup()\" (ngSubmit)=\"formSubmit()\">\r\n  <div mat-dialog-title style=\"display: flex; align-items: center; gap: 8px\">\r\n    @if (icon()) {\r\n      <mat-icon>{{ icon() }}</mat-icon>\r\n    }\r\n    <div style=\"flex-grow: 1\">\r\n      {{ title() }}\r\n    </div>\r\n    @if (typeIcon()) {\r\n      <mat-icon class=\"secondary\">{{ typeIcon() }}</mat-icon>\r\n    }\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"content-container\">\r\n      <bdb-alert-error-response [value]=\"error()\"></bdb-alert-error-response>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button type=\"button\" [mat-dialog-close]=\"false\" tabIndex=\"-1\" class=\"warn\">{{ cancelLabel() }}</button>\r\n    <button mat-flat-button>{{ submitLabel() }}</button>\r\n  </mat-dialog-actions>\r\n</form>\r\n", styles: [".content-container{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFormDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-form-dialog', imports: [ReactiveFormsModule, MatDialogModule, MatButtonModule, MatIconModule, BdbAlertErrorResponseComponent], template: "<form [formGroup]=\"formGroup()\" (ngSubmit)=\"formSubmit()\">\r\n  <div mat-dialog-title style=\"display: flex; align-items: center; gap: 8px\">\r\n    @if (icon()) {\r\n      <mat-icon>{{ icon() }}</mat-icon>\r\n    }\r\n    <div style=\"flex-grow: 1\">\r\n      {{ title() }}\r\n    </div>\r\n    @if (typeIcon()) {\r\n      <mat-icon class=\"secondary\">{{ typeIcon() }}</mat-icon>\r\n    }\r\n  </div>\r\n  <mat-dialog-content>\r\n    <div class=\"content-container\">\r\n      <bdb-alert-error-response [value]=\"error()\"></bdb-alert-error-response>\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button type=\"button\" [mat-dialog-close]=\"false\" tabIndex=\"-1\" class=\"warn\">{{ cancelLabel() }}</button>\r\n    <button mat-flat-button>{{ submitLabel() }}</button>\r\n  </mat-dialog-actions>\r\n</form>\r\n", styles: [".content-container{display:flex;flex-direction:column;gap:8px}\n"] }]
+        }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], submitFx: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitFx", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], typeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeIcon", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }] } });
+
 class LayoutError extends Error {
     constructor(message) {
         super(message);
@@ -713,10 +756,10 @@ class BdbFlexDirective {
     validateSpacing(spacing) {
         return spacing;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BdbFlexDirective, isStandalone: true, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: { bdbFlex: "bdbFlex", bdbFlexDirection: "bdbFlexDirection", bdbFlexGap: "bdbFlexGap", bdbFlexSpacing: "bdbFlexSpacing" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BdbFlexDirective, isStandalone: true, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: { bdbFlex: "bdbFlex", bdbFlexDirection: "bdbFlexDirection", bdbFlexGap: "bdbFlexGap", bdbFlexSpacing: "bdbFlexSpacing" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFlexDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFlexDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]',
@@ -732,42 +775,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }] } });
 
-class BdbQueryInputComponent {
-    constructor() {
-        this.class = 'bdb-query-input';
-        this._onDestroy = new Subject();
-        this.queryFormControl = new FormControl(undefined, { nonNullable: true });
-    }
-    ngOnInit() {
-        this.queryFormControl.valueChanges
-            .pipe(debounceTime(100), distinctUntilChanged(), takeUntil(this._onDestroy))
-            .subscribe({
-            next: x => {
-                if (this.dataSource) {
-                    this.dataSource.request.query = x;
-                    this.dataSource.request.page = 0;
-                    this.dataSource.load();
-                }
-            },
-        });
-    }
-    ngOnDestroy() {
-        this._onDestroy.next();
-        this._onDestroy.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbQueryInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbQueryInputComponent, isStandalone: true, selector: "bdb-query-input[dataSource]", inputs: { dataSource: "dataSource" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbQueryInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bdb-query-input[dataSource]', imports: [CommonModule, ReactiveFormsModule, MatIconModule], template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], dataSource: [{
-                type: Input
-            }] } });
-
 class BdbPaginatorComponent {
     constructor() {
         this._onDestroy = new Subject();
@@ -790,54 +797,49 @@ class BdbPaginatorComponent {
         this.dataSource.request.pageSize = event.pageSize;
         this.dataSource.load();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: BdbPaginatorComponent, isStandalone: true, selector: "bdb-paginator", inputs: { dataSource: "dataSource" }, ngImport: i0, template: "<mat-paginator\r\n  [pageSize]=\"pageSize\"\r\n  [pageIndex]=\"page\"\r\n  [length]=\"length\"\r\n  (page)=\"changePage($event)\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n  [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BdbPaginatorComponent, isStandalone: true, selector: "bdb-paginator", inputs: { dataSource: "dataSource" }, ngImport: i0, template: "<mat-paginator\r\n  [pageSize]=\"pageSize\"\r\n  [pageIndex]=\"page\"\r\n  [length]=\"length\"\r\n  (page)=\"changePage($event)\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n  [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-paginator', imports: [MatPaginatorModule], template: "<mat-paginator\r\n  [pageSize]=\"pageSize\"\r\n  [pageIndex]=\"page\"\r\n  [length]=\"length\"\r\n  (page)=\"changePage($event)\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n  [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }] } });
 
-class DynamicPipe {
-    constructor(injector) {
-        this.injector = injector;
+class BdbQueryInputComponent {
+    constructor() {
+        this.class = 'bdb-query-input';
+        this._onDestroy = new Subject();
+        this.queryFormControl = new FormControl(undefined, { nonNullable: true });
     }
-    transform(value, requiredPipe, pipeArgs) {
-        const injector = Injector.create({
-            name: 'DynamicPipe',
-            parent: this.injector,
-            providers: [{ provide: requiredPipe }],
+    ngOnInit() {
+        this.queryFormControl.valueChanges
+            .pipe(debounceTime(100), distinctUntilChanged(), takeUntil(this._onDestroy))
+            .subscribe({
+            next: x => {
+                if (this.dataSource) {
+                    this.dataSource.request.query = x;
+                    this.dataSource.request.page = 0;
+                    this.dataSource.load();
+                }
+            },
         });
-        const pipe = injector.get(requiredPipe);
-        return pipe.transform(value, pipeArgs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DynamicPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'dynamicPipe',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
-
-class BdbBooleanDisplayComponent {
-    constructor() {
-        this.class = 'bdb-boolean-display';
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbBooleanDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbBooleanDisplayComponent, isStandalone: true, selector: "bdb-boolean-display", inputs: { value: "value" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "@if (value === false) {\r\n  <mat-icon class=\"false\">clear</mat-icon>\r\n} @else if (value === true) {\r\n  <mat-icon class=\"true\">check</mat-icon>\r\n}\r\n", styles: [".false{display:block;color:var(--mat-sys-error)}.true{display:block;color:var(--bdb-sys-success)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbQueryInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbQueryInputComponent, isStandalone: true, selector: "bdb-query-input[dataSource]", inputs: { dataSource: "dataSource" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbBooleanDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbQueryInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-boolean-display', imports: [CommonModule, MatIconModule], template: "@if (value === false) {\r\n  <mat-icon class=\"false\">clear</mat-icon>\r\n} @else if (value === true) {\r\n  <mat-icon class=\"true\">check</mat-icon>\r\n}\r\n", styles: [".false{display:block;color:var(--mat-sys-error)}.true{display:block;color:var(--bdb-sys-success)}\n"] }]
+            args: [{ selector: 'bdb-query-input[dataSource]', imports: [ReactiveFormsModule, MatIconModule], template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
-            }], value: [{
+            }], dataSource: [{
                 type: Input
             }] } });
 
@@ -846,10 +848,10 @@ class BdbCellDirective {
         this.templateRef = templateRef;
         this.bdbCellDef = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BdbCellDirective, isStandalone: true, selector: "ng-template[bdbCellDef]", inputs: { bdbCellDef: "bdbCellDef" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BdbCellDirective, isStandalone: true, selector: "ng-template[bdbCellDef]", inputs: { bdbCellDef: "bdbCellDef" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[bdbCellDef]',
@@ -859,6 +861,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }] } });
 
+class BdbBooleanDisplayComponent {
+    constructor() {
+        this.class = 'bdb-boolean-display';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbBooleanDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbBooleanDisplayComponent, isStandalone: true, selector: "bdb-boolean-display", inputs: { value: "value" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "@if (value === false) {\r\n  <mat-icon class=\"false\">clear</mat-icon>\r\n} @else if (value === true) {\r\n  <mat-icon class=\"true\">check</mat-icon>\r\n}\r\n", styles: [".false{display:block;color:var(--mat-sys-error)}.true{display:block;color:var(--bdb-sys-success)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbBooleanDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-boolean-display', imports: [MatIconModule], template: "@if (value === false) {\r\n  <mat-icon class=\"false\">clear</mat-icon>\r\n} @else if (value === true) {\r\n  <mat-icon class=\"true\">check</mat-icon>\r\n}\r\n", styles: [".false{display:block;color:var(--mat-sys-error)}.true{display:block;color:var(--bdb-sys-success)}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], value: [{
+                type: Input
+            }] } });
+
 var BdbColumnType;
 (function (BdbColumnType) {
     BdbColumnType["String"] = "String";
@@ -871,6 +890,30 @@ var BdbColumnType;
     BdbColumnType["Custom"] = "Custom";
 })(BdbColumnType || (BdbColumnType = {}));
 
+class DynamicPipe {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    transform(value, requiredPipe, pipeArgs) {
+        const injector = Injector.create({
+            name: 'DynamicPipe',
+            parent: this.injector,
+            providers: [{ provide: requiredPipe }],
+        });
+        const pipe = injector.get(requiredPipe);
+        return pipe.transform(value, pipeArgs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DynamicPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dynamicPipe',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
 class BdbTableComponent {
     constructor() {
         this._onDestroy = new Subject();
@@ -883,6 +926,8 @@ class BdbTableComponent {
         this.isClickable = true;
         this.rowClick = new EventEmitter();
         this.contextAction = new EventEmitter();
+        this.contextMenu = viewChild.required(MatMenuTrigger);
+        this.cellTemplates = contentChildren(BdbCellDirective, { ...(ngDevMode ? { debugName: "cellTemplates" } : {}), descendants: true });
         this.columnType = BdbColumnType;
         this.contextMenuPosition = { x: '0px', y: '0px' };
         this.trackById = (_, item) => {
@@ -914,8 +959,8 @@ class BdbTableComponent {
         this.dataSource.load();
     }
     setColumnTemplates() {
-        const templates = this.cellTemplates;
-        if (templates == undefined || !this.cellTemplates?.length) {
+        const templates = this.cellTemplates();
+        if (templates == undefined || !this.cellTemplates()?.length) {
             return;
         }
         if (this.columns && this.columns.length) {
@@ -948,11 +993,11 @@ class BdbTableComponent {
         if (this.contextActions && this.contextActions.length) {
             this.contextMenuPosition.x = event.clientX + 'px';
             this.contextMenuPosition.y = event.clientY + 'px';
-            this.contextMenu.menuData = { row: row };
-            if (this.contextMenu.menu) {
-                this.contextMenu.menu.focusFirstItem('mouse');
+            this.contextMenu().menuData = { row: row };
+            if (this.contextMenu().menu) {
+                this.contextMenu().menu.focusFirstItem('mouse');
             }
-            this.contextMenu.openMenu();
+            this.contextMenu().openMenu();
         }
     }
     onContextMenuAction(action, row) {
@@ -1000,10 +1045,10 @@ class BdbTableComponent {
         }
         return ret;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbTableComponent, isStandalone: true, selector: "bdb-table[dataSource]", inputs: { columns: "columns", dataSource: "dataSource", autoLoad: "autoLoad", displayedColumns: "displayedColumns", contextActions: "contextActions", selection: "selection", selectOnRowClick: "selectOnRowClick", selectedRowClass: "selectedRowClass", isClickable: "isClickable", rowColor: "rowColor" }, outputs: { rowClick: "rowClick", contextAction: "contextAction" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bdb-table-container\">\r\n  @if (dataSource) {\r\n    <table\r\n      mat-table\r\n      class=\"bdb-table\"\r\n      [class.is-clickable]=\"isClickable\"\r\n      [dataSource]=\"dataSource\"\r\n      matSort\r\n      (matSortChange)=\"sortData($event)\"\r\n      [trackBy]=\"trackById\">\r\n      <ng-container matColumnDef=\"selection\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (selection) {\r\n            <mat-checkbox\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n              color=\"primary\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (selection) {\r\n            <mat-checkbox\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"$event ? selection.toggle(row) : null\"\r\n              [checked]=\"selection.isSelected(row)\"\r\n              color=\"accent\">\r\n            </mat-checkbox>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      @for (column of columns; track column) {\r\n        <ng-container [matColumnDef]=\"column.id\">\r\n          <ng-container>\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              mat-sort-header=\"{{ column.id }}\"\r\n              [disabled]=\"column.sortDisabled\"\r\n              [width]=\"column.width\"\r\n              [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n              [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n              {{ column.title }}\r\n            </th>\r\n          </ng-container>\r\n\r\n          <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                column.template ? column.template : cellTemplate;\r\n                context: { $implicit: row, column: column }\r\n              \"></ng-container>\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: displayedColumns\"\r\n        (click)=\"onRowClick(row)\"\r\n        [ngClass]=\"rowClass(row)\"\r\n        (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n      <tr class=\"mat-row\" *matNoDataRow>\r\n        <td class=\"mat-cell\" [colSpan]=\"displayedColumns.length\">\r\n          @if (dataSource && (dataSource.error$ | async)) {\r\n            <bdb-alert-error-response [value]=\"dataSource.error$ | async\"> </bdb-alert-error-response>\r\n          } @else {\r\n            <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n      context: { $implicit: row, column: column }\r\n    \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n  {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case (columnType.String) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Number) {\r\n      {{ column.field(row) | number: column.format }}\r\n    }\r\n    @case (columnType.Percentage) {\r\n      {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Currency) {\r\n      {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Date) {\r\n      {{ column.field(row) | date: column.format }}\r\n    }\r\n    @case (columnType.Boolean) {\r\n      <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n    }\r\n    @case (columnType.Enum) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Custom) {\r\n      *?*\r\n    }\r\n    @default {\r\n      {{ column.field(row) | json }}\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n  style=\"visibility: hidden; position: fixed\"\r\n  [style.left]=\"contextMenuPosition.x\"\r\n  [style.top]=\"contextMenuPosition.y\"\r\n  [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @for (action of contextActions; track action) {\r\n      @if (action.condition === undefined || action.condition(row)) {\r\n        <button mat-menu-item (click)=\"onContextMenuAction(action, row)\">\r\n          <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n        </button>\r\n      }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table.is-clickable tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbTableComponent, isStandalone: true, selector: "bdb-table[dataSource]", inputs: { columns: "columns", dataSource: "dataSource", autoLoad: "autoLoad", displayedColumns: "displayedColumns", contextActions: "contextActions", selection: "selection", selectOnRowClick: "selectOnRowClick", selectedRowClass: "selectedRowClass", isClickable: "isClickable", rowColor: "rowColor" }, outputs: { rowClick: "rowClick", contextAction: "contextAction" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bdb-table-container\">\r\n  @if (dataSource) {\r\n    <table\r\n      mat-table\r\n      class=\"bdb-table\"\r\n      [class.is-clickable]=\"isClickable\"\r\n      [dataSource]=\"dataSource\"\r\n      matSort\r\n      (matSortChange)=\"sortData($event)\"\r\n      [trackBy]=\"trackById\">\r\n      <ng-container matColumnDef=\"selection\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (selection) {\r\n            <mat-checkbox\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n              color=\"primary\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (selection) {\r\n            <mat-checkbox\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"$event ? selection.toggle(row) : null\"\r\n              [checked]=\"selection.isSelected(row)\"\r\n              color=\"accent\">\r\n            </mat-checkbox>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      @for (column of columns; track column) {\r\n        <ng-container [matColumnDef]=\"column.id\">\r\n          <ng-container>\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              mat-sort-header=\"{{ column.id }}\"\r\n              [disabled]=\"column.sortDisabled\"\r\n              [width]=\"column.width\"\r\n              [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n              [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n              {{ column.title }}\r\n            </th>\r\n          </ng-container>\r\n\r\n          <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                column.template ? column.template : cellTemplate;\r\n                context: { $implicit: row, column: column }\r\n              \"></ng-container>\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: displayedColumns\"\r\n        (click)=\"onRowClick(row)\"\r\n        [ngClass]=\"rowClass(row)\"\r\n        (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n      <tr class=\"mat-row\" *matNoDataRow>\r\n        <td class=\"mat-cell\" [colSpan]=\"displayedColumns.length\">\r\n          @if (dataSource && (dataSource.error$ | async)) {\r\n            <bdb-alert-error-response [value]=\"dataSource.error$ | async\"> </bdb-alert-error-response>\r\n          } @else {\r\n            <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n      context: { $implicit: row, column: column }\r\n    \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n  {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case (columnType.String) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Number) {\r\n      {{ column.field(row) | number: column.format }}\r\n    }\r\n    @case (columnType.Percentage) {\r\n      {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Currency) {\r\n      {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Date) {\r\n      {{ column.field(row) | date: column.format }}\r\n    }\r\n    @case (columnType.Boolean) {\r\n      <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n    }\r\n    @case (columnType.Enum) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Custom) {\r\n      *?*\r\n    }\r\n    @default {\r\n      {{ column.field(row) | json }}\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n  style=\"visibility: hidden; position: fixed\"\r\n  [style.left]=\"contextMenuPosition.x\"\r\n  [style.top]=\"contextMenuPosition.y\"\r\n  [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @for (action of contextActions; track action) {\r\n      @if (action.condition === undefined || action.condition(row)) {\r\n        <button mat-menu-item (click)=\"onContextMenuAction(action, row)\">\r\n          <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n        </button>\r\n      }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table.is-clickable tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-table[dataSource]', imports: [
                         CommonModule,
@@ -1038,13 +1083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Output
             }], contextAction: [{
                 type: Output
-            }], contextMenu: [{
-                type: ViewChild,
-                args: [MatMenuTrigger]
-            }], cellTemplates: [{
-                type: ContentChildren,
-                args: [BdbCellDirective, { descendants: true }]
-            }], rowColor: [{
+            }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }], rowColor: [{
                 type: Input
             }] } });
 
@@ -1057,93 +1096,477 @@ class BdbFullTableComponent {
         this.showToolbar = true;
         this.rowClick = new EventEmitter();
         this.contextAction = new EventEmitter();
+        this.cellTemplates = contentChildren(BdbCellDirective, { ...(ngDevMode ? { debugName: "cellTemplates" } : {}), descendants: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbFullTableComponent, isStandalone: true, selector: "bdb-full-table", inputs: { dataSource: "dataSource", columns: "columns", displayedColumns: "displayedColumns", autoLoad: "autoLoad", selection: "selection", contextActions: "contextActions", rowColor: "rowColor", showToolbar: "showToolbar" }, outputs: { rowClick: "rowClick", contextAction: "contextAction" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (showToolbar) {\r\n  <mat-toolbar>\r\n    <div bdbFlex=\"row 8px start center\">\r\n      <ng-content select=\"toolbar-item\"></ng-content>\r\n    </div>\r\n    <bdb-query-input [dataSource]=\"dataSource\"></bdb-query-input>\r\n  </mat-toolbar>\r\n}\r\n<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [autoLoad]=\"autoLoad\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [rowColor]=\"rowColor\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"contextAction.emit($event)\"\r\n  (rowClick)=\"rowClick.emit($event)\">\r\n  @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n    <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n      <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</bdb-table>\r\n<bdb-paginator [dataSource]=\"dataSource\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: BdbQueryInputComponent, selector: "bdb-query-input[dataSource]", inputs: ["dataSource"] }, { kind: "component", type: BdbPaginatorComponent, selector: "bdb-paginator", inputs: ["dataSource"] }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFullTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-full-table', imports: [
+                        CommonModule,
+                        BdbFlexDirective,
+                        MatToolbarModule,
+                        BdbQueryInputComponent,
+                        BdbPaginatorComponent,
+                        BdbTableComponent,
+                        BdbCellDirective,
+                    ], template: "@if (showToolbar) {\r\n  <mat-toolbar>\r\n    <div bdbFlex=\"row 8px start center\">\r\n      <ng-content select=\"toolbar-item\"></ng-content>\r\n    </div>\r\n    <bdb-query-input [dataSource]=\"dataSource\"></bdb-query-input>\r\n  </mat-toolbar>\r\n}\r\n<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [autoLoad]=\"autoLoad\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [rowColor]=\"rowColor\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"contextAction.emit($event)\"\r\n  (rowClick)=\"rowClick.emit($event)\">\r\n  @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n    <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n      <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</bdb-table>\r\n<bdb-paginator [dataSource]=\"dataSource\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}\n"] }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], autoLoad: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], contextActions: [{
+                type: Input
+            }], rowColor: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], contextAction: [{
+                type: Output
+            }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class BdbPaginatorV2Component {
+    constructor() {
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this._onDestroy = new Subject();
+        this._disabled = false;
+    }
+    set disabled(disabled) {
+        this._disabled = disabled;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    ngOnInit() {
+        this.dataSource()
+            .response$.pipe(takeUntil(this._onDestroy))
+            .subscribe({
+            next: (x) => {
+                if (x === undefined) {
+                    this.disabled = true;
+                }
+                else {
+                    this.disabled = false;
+                    this.pageSize = x.pageSize;
+                    this.page = x.page;
+                    this.length = x.count;
+                }
+            },
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    changePage(event) {
+        this.dataSource().page = event.pageIndex;
+        this.dataSource().pageSize = event.pageSize;
+        this.dataSource().load();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPaginatorV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: BdbPaginatorV2Component, isStandalone: true, selector: "bdb-paginator-v2", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-paginator\r\n  [pageSize]=\"pageSize\"\r\n  [pageIndex]=\"page\"\r\n  [length]=\"length\"\r\n  [disabled]=\"disabled\"\r\n  (page)=\"changePage($event)\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n  [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [":host{--mat-paginator-container-background-color: transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPaginatorV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-paginator-v2', imports: [MatPaginatorModule], template: "<mat-paginator\r\n  [pageSize]=\"pageSize\"\r\n  [pageIndex]=\"page\"\r\n  [length]=\"length\"\r\n  [disabled]=\"disabled\"\r\n  (page)=\"changePage($event)\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n  [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [":host{--mat-paginator-container-background-color: transparent}\n"] }]
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }] } });
+
+class BdbQueryInputV2Component {
+    constructor() {
+        this.class = 'bdb-query-input';
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.queryFormControl = new FormControl(undefined, { nonNullable: true });
+        this.queryFormControl.valueChanges.pipe(debounceTime(100), distinctUntilChanged(), takeUntilDestroyed()).subscribe({
+            next: x => {
+                const dataSource = this.dataSource();
+                if (dataSource) {
+                    dataSource.query = x;
+                    dataSource.page = 0;
+                    dataSource.load();
+                }
+            },
+        });
+        effect(() => {
+            const dataSource = this.dataSource();
+            this.queryFormControl.setValue(dataSource.query, { emitEvent: false });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbQueryInputV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbQueryInputV2Component, isStandalone: true, selector: "bdb-query-input-v2[dataSource]", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbQueryInputV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-query-input-v2[dataSource]', imports: [ReactiveFormsModule, MatIconModule], template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }] } });
+
+class BdbTableV2Component {
+    constructor() {
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
+        this.activeColumns = computed(() => {
+            let ret = [];
+            const columns = this.columns();
+            const displayedColumns = this.displayedColumns();
+            const selection = this.selection();
+            if (columns && !displayedColumns.length) {
+                ret = columns.map(x => x.id);
+            }
+            else {
+                ret = [...displayedColumns];
+            }
+            if (selection && selection.isMultipleSelection() && !(displayedColumns[0] === 'selection')) {
+                ret.unshift('selection');
+            }
+            return ret;
+        }, ...(ngDevMode ? [{ debugName: "activeColumns" }] : []));
+        this.selection = input(...(ngDevMode ? [undefined, { debugName: "selection" }] : []));
+        this.selectOnRowClick = input(true, ...(ngDevMode ? [{ debugName: "selectOnRowClick" }] : []));
+        this.contextActions = input([], ...(ngDevMode ? [{ debugName: "contextActions" }] : []));
+        this.contextAction = output();
+        this.rowColor = input(...(ngDevMode ? [undefined, { debugName: "rowColor" }] : []));
+        this.error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.rowClick = output();
+        this.matSortDisabled = input(false, ...(ngDevMode ? [{ debugName: "matSortDisabled" }] : []));
+        this.sortChange = output();
+        this.contextMenu = viewChild.required(MatMenuTrigger);
+        this.cellTemplates = contentChildren(BdbCellDirective, { ...(ngDevMode ? { debugName: "cellTemplates" } : {}), descendants: true });
+        this.columnType = BdbColumnType;
+        this.contextMenuPosition = { x: '0px', y: '0px' };
+        this.trackBy = input((_, x) => {
+            return x['id'];
+        }, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
+    }
+    ngAfterContentInit() {
+        this.setColumnTemplates();
+    }
+    setColumnTemplates() {
+        const columns = this.columns();
+        const templates = this.cellTemplates();
+        if (templates == undefined || !templates?.length) {
+            return;
+        }
+        if (columns && columns.length) {
+            columns.forEach(x => {
+                const tpl = templates.filter(y => y.bdbCellDef === x.id)[0];
+                if (tpl) {
+                    x.template = tpl.templateRef;
+                }
+            });
+        }
+    }
+    onRowClick(row) {
+        const selection = this.selection();
+        if (selection && this.selectOnRowClick()) {
+            selection.toggle(row);
+        }
+        this.rowClick.emit(row);
+    }
+    // SORT
+    // sortData(event: Sort): void {
+    //   const dataSource = this.dataSource();
+    //   const column = this.columns.find(x => x.id === event.active);
+    //   if (column && dataSource) {
+    //     dataSource.sortField = column.id;
+    //     dataSource.sortDirection = event.direction === '' ? 'asc' : (event.direction as 'asc' | 'desc');
+    //     dataSource.load();
+    //   }
+    // }
+    // CONTEXT MENU
+    onContextMenu(event, row) {
+        event.preventDefault();
+        const contextActions = this.contextActions();
+        const contextMenu = this.contextMenu();
+        if (contextActions && contextActions.length && contextMenu) {
+            this.contextMenuPosition.x = event.clientX + 'px';
+            this.contextMenuPosition.y = event.clientY + 'px';
+            contextMenu.menuData = { row: row };
+            if (contextMenu.menu) {
+                contextMenu.menu.focusFirstItem('mouse');
+            }
+            contextMenu.openMenu();
+        }
+    }
+    isAllSelected() {
+        const selection = this.selection();
+        if (!selection) {
+            return false;
+        }
+        return this.dataSource()?.every((x) => selection.isSelected(x)) ?? false;
+    }
+    anySelected() {
+        const selection = this.selection();
+        if (!selection) {
+            return false;
+        }
+        return this.dataSource()?.some((x) => selection.isSelected(x)) ?? false;
+    }
+    toggleAllRows() {
+        const selection = this.selection();
+        if (!(selection && this.dataSource)) {
+            return;
+        }
+        if (this.isAllSelected()) {
+            selection.deselect(...this.dataSource());
+        }
+        else {
+            selection.select(...this.dataSource());
+        }
+    }
+    rowClass(row) {
+        const selection = this.selection();
+        const rowColorFx = this.rowColor();
+        if (!(this.selection || rowColorFx)) {
+            return undefined;
+        }
+        const ret = {};
+        if (selection) {
+            ret['selected'] = selection.isSelected(row);
+        }
+        if (rowColorFx) {
+            const palette = rowColorFx(row);
+            if (palette) {
+                ret['bdb-' + palette] = true;
+            }
+            else if (selection) {
+                return undefined;
+            }
+        }
+        return ret;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbTableV2Component, isStandalone: true, selector: "bdb-table-v2", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectOnRowClick: { classPropertyName: "selectOnRowClick", publicName: "selectOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, contextActions: { classPropertyName: "contextActions", publicName: "contextActions", isSignal: true, isRequired: false, transformFunction: null }, rowColor: { classPropertyName: "rowColor", publicName: "rowColor", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, matSortDisabled: { classPropertyName: "matSortDisabled", publicName: "matSortDisabled", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextAction: "contextAction", rowClick: "rowClick", sortChange: "sortChange" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bdb-table-container\">\r\n  @if (dataSource()) {\r\n    <table\r\n      mat-table\r\n      class=\"bdb-table\"\r\n      [dataSource]=\"dataSource()\"\r\n      matSort\r\n      [matSortDisabled]=\"matSortDisabled()\"\r\n      disableClear=\"true\"\r\n      (matSortChange)=\"sortChange.emit($event)\"\r\n      [trackBy]=\"trackBy()\">\r\n      <ng-container matColumnDef=\"selection\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (selection()) {\r\n            <mat-checkbox\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection()?.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n              color=\"primary\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (selection()) {\r\n            <mat-checkbox\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"$event ? selection()?.toggle(row) : null\"\r\n              [checked]=\"selection()?.isSelected(row)\"\r\n              color=\"accent\">\r\n            </mat-checkbox>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.id\">\r\n          <ng-container>\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              mat-sort-header=\"{{ column.id }}\"\r\n              [disabled]=\"column.sortDisabled\"\r\n              [width]=\"column.width\"\r\n              [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n              [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n              {{ column.title }}\r\n            </th>\r\n          </ng-container>\r\n\r\n          <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                column.template ? column.template : cellTemplate;\r\n                context: { $implicit: row, column: column }\r\n              \"></ng-container>\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"activeColumns(); sticky: true\"></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: activeColumns()\"\r\n        (click)=\"onRowClick(row)\"\r\n        [ngClass]=\"rowClass(row)\"\r\n        (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n      <tr class=\"mat-row\" *matNoDataRow>\r\n        <td class=\"mat-cell\" [colSpan]=\"activeColumns().length\">\r\n          @if (error()) {\r\n            <bdb-alert-error-response [value]=\"error()\"> </bdb-alert-error-response>\r\n          } @else {\r\n            <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n      context: { $implicit: row, column: column }\r\n    \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n  {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case (columnType.String) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Number) {\r\n      {{ column.field(row) | number: column.format }}\r\n    }\r\n    @case (columnType.Percentage) {\r\n      {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Currency) {\r\n      {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Date) {\r\n      {{ column.field(row) | date: column.format }}\r\n    }\r\n    @case (columnType.Boolean) {\r\n      <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n    }\r\n    @case (columnType.Enum) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Custom) {\r\n      *?*\r\n    }\r\n    @default {\r\n      {{ column.field(row) | json }}\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n  style=\"visibility: hidden; position: fixed\"\r\n  [style.left]=\"contextMenuPosition.x\"\r\n  [style.top]=\"contextMenuPosition.y\"\r\n  [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @for (action of contextActions(); track action) {\r\n      @if (action.condition === undefined || action.condition(row)) {\r\n        <button mat-menu-item (click)=\"contextAction.emit({ action, row })\">\r\n          <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n        </button>\r\n      }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-table-v2', imports: [
+                        CommonModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatSortModule,
+                        BdbAlertErrorResponseComponent,
+                        DynamicPipe,
+                        BdbBooleanDisplayComponent,
+                        MatMenuModule,
+                        MatIconModule,
+                    ], template: "<div class=\"bdb-table-container\">\r\n  @if (dataSource()) {\r\n    <table\r\n      mat-table\r\n      class=\"bdb-table\"\r\n      [dataSource]=\"dataSource()\"\r\n      matSort\r\n      [matSortDisabled]=\"matSortDisabled()\"\r\n      disableClear=\"true\"\r\n      (matSortChange)=\"sortChange.emit($event)\"\r\n      [trackBy]=\"trackBy()\">\r\n      <ng-container matColumnDef=\"selection\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          @if (selection()) {\r\n            <mat-checkbox\r\n              (change)=\"$event ? toggleAllRows() : null\"\r\n              [checked]=\"selection()?.hasValue() && isAllSelected()\"\r\n              [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n              color=\"primary\">\r\n            </mat-checkbox>\r\n          }\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          @if (selection()) {\r\n            <mat-checkbox\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"$event ? selection()?.toggle(row) : null\"\r\n              [checked]=\"selection()?.isSelected(row)\"\r\n              color=\"accent\">\r\n            </mat-checkbox>\r\n          }\r\n        </td>\r\n      </ng-container>\r\n\r\n      @for (column of columns(); track column) {\r\n        <ng-container [matColumnDef]=\"column.id\">\r\n          <ng-container>\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              mat-sort-header=\"{{ column.id }}\"\r\n              [disabled]=\"column.sortDisabled\"\r\n              [width]=\"column.width\"\r\n              [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n              [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n              {{ column.title }}\r\n            </th>\r\n          </ng-container>\r\n\r\n          <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n            <ng-container\r\n              *ngTemplateOutlet=\"\r\n                column.template ? column.template : cellTemplate;\r\n                context: { $implicit: row, column: column }\r\n              \"></ng-container>\r\n          </td>\r\n        </ng-container>\r\n      }\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"activeColumns(); sticky: true\"></tr>\r\n      <tr\r\n        mat-row\r\n        *matRowDef=\"let row; columns: activeColumns()\"\r\n        (click)=\"onRowClick(row)\"\r\n        [ngClass]=\"rowClass(row)\"\r\n        (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n      <tr class=\"mat-row\" *matNoDataRow>\r\n        <td class=\"mat-cell\" [colSpan]=\"activeColumns().length\">\r\n          @if (error()) {\r\n            <bdb-alert-error-response [value]=\"error()\"> </bdb-alert-error-response>\r\n          } @else {\r\n            <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n          }\r\n        </td>\r\n      </tr>\r\n    </table>\r\n  }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n      context: { $implicit: row, column: column }\r\n    \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n  {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n  @switch (column.type) {\r\n    @case (columnType.String) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Number) {\r\n      {{ column.field(row) | number: column.format }}\r\n    }\r\n    @case (columnType.Percentage) {\r\n      {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Currency) {\r\n      {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n    }\r\n    @case (columnType.Date) {\r\n      {{ column.field(row) | date: column.format }}\r\n    }\r\n    @case (columnType.Boolean) {\r\n      <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n    }\r\n    @case (columnType.Enum) {\r\n      {{ column.field(row) }}\r\n    }\r\n    @case (columnType.Custom) {\r\n      *?*\r\n    }\r\n    @default {\r\n      {{ column.field(row) | json }}\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n  style=\"visibility: hidden; position: fixed\"\r\n  [style.left]=\"contextMenuPosition.x\"\r\n  [style.top]=\"contextMenuPosition.y\"\r\n  [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @for (action of contextActions(); track action) {\r\n      @if (action.condition === undefined || action.condition(row)) {\r\n        <button mat-menu-item (click)=\"contextAction.emit({ action, row })\">\r\n          <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n        </button>\r\n      }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"] }]
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selectOnRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnRowClick", required: false }] }], contextActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextActions", required: false }] }], contextAction: [{ type: i0.Output, args: ["contextAction"] }], rowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowColor", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], matSortDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "matSortDisabled", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }] } });
+
+class BdbGridComponent {
+    constructor() {
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.columns = [];
+        this.displayedColumns = [];
+        this.contextActions = input([], ...(ngDevMode ? [{ debugName: "contextActions" }] : []));
+        this.contextAction = output();
+        this.rowColor = input(...(ngDevMode ? [undefined, { debugName: "rowColor" }] : []));
+        this.rowClick = new EventEmitter();
+        this.filterDrawerOpened = output();
+        this.cellTemplates = contentChildren(BdbCellDirective, { ...(ngDevMode ? { debugName: "cellTemplates" } : {}), descendants: true });
+    }
+    onContextAction(action, row) {
+        this.contextAction.emit({ action, row });
+    }
+    sortChange(event) {
+        const dataSource = this.dataSource();
+        const column = this.columns.find(x => x.id === event.active);
+        if (column && dataSource) {
+            dataSource.sortField = column.id;
+            dataSource.sortDirection = event.direction === '' ? 'asc' : event.direction;
+            dataSource.load();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbGridComponent, isStandalone: true, selector: "bdb-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, contextActions: { classPropertyName: "contextActions", publicName: "contextActions", isSignal: true, isRequired: false, transformFunction: null }, rowColor: { classPropertyName: "rowColor", publicName: "rowColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextAction: "contextAction", rowClick: "rowClick", filterDrawerOpened: "filterDrawerOpened" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"filterDrawerOpen = !filterDrawerOpen; filterDrawerOpened.emit(filterDrawerOpen)\">\r\n    @if (filterDrawerOpen) {\r\n      <mat-icon>filter_alt</mat-icon>\r\n    } @else {\r\n      <mat-icon>filter_arrow_right</mat-icon>\r\n    }\r\n  </button>\r\n  <div style=\"flex: 1; display: flex; align-items: center; gap: 8px\">\r\n    <ng-content select=\"toolbar-item\"></ng-content>\r\n  </div>\r\n  <bdb-paginator-v2 [dataSource]=\"dataSource()\"></bdb-paginator-v2>\r\n  <bdb-query-input-v2 [dataSource]=\"dataSource()\"></bdb-query-input-v2>\r\n</mat-toolbar>\r\n\r\n<mat-drawer-container class=\"filter-drawer\">\r\n  <mat-drawer mode=\"side\" [opened]=\"filterDrawerOpen\">\r\n    <ng-content select=\"filter-drawer\"></ng-content>\r\n  </mat-drawer>\r\n  <mat-drawer-content>\r\n    <bdb-table-v2\r\n      [columns]=\"columns\"\r\n      [dataSource]=\"dataSource().data\"\r\n      [error]=\"dataSource().error()\"\r\n      [displayedColumns]=\"displayedColumns\"\r\n      [selection]=\"selection\"\r\n      [rowColor]=\"rowColor()\"\r\n      [contextActions]=\"contextActions()\"\r\n      (contextAction)=\"contextAction.emit($event)\"\r\n      (rowClick)=\"rowClick.emit($event)\"\r\n      (sortChange)=\"sortChange($event)\">\r\n      @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n        <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n          <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n        </ng-template>\r\n      }\r\n    </bdb-table-v2>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:start;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}.filter-drawer{flex-grow:1;--mat-sidenav-content-background-color: var(--mat-sys-surface)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: BdbTableV2Component, selector: "bdb-table-v2", inputs: ["dataSource", "columns", "displayedColumns", "selection", "selectOnRowClick", "contextActions", "rowColor", "error", "matSortDisabled", "trackBy"], outputs: ["contextAction", "rowClick", "sortChange"] }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }, { kind: "component", type: BdbQueryInputV2Component, selector: "bdb-query-input-v2[dataSource]", inputs: ["dataSource"] }, { kind: "component", type: BdbPaginatorV2Component, selector: "bdb-paginator-v2", inputs: ["dataSource"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-grid', imports: [
+                        CommonModule,
+                        NgTemplateOutlet,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatSidenavModule,
+                        BdbTableV2Component,
+                        BdbCellDirective,
+                        BdbQueryInputV2Component,
+                        BdbPaginatorV2Component,
+                    ], template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"filterDrawerOpen = !filterDrawerOpen; filterDrawerOpened.emit(filterDrawerOpen)\">\r\n    @if (filterDrawerOpen) {\r\n      <mat-icon>filter_alt</mat-icon>\r\n    } @else {\r\n      <mat-icon>filter_arrow_right</mat-icon>\r\n    }\r\n  </button>\r\n  <div style=\"flex: 1; display: flex; align-items: center; gap: 8px\">\r\n    <ng-content select=\"toolbar-item\"></ng-content>\r\n  </div>\r\n  <bdb-paginator-v2 [dataSource]=\"dataSource()\"></bdb-paginator-v2>\r\n  <bdb-query-input-v2 [dataSource]=\"dataSource()\"></bdb-query-input-v2>\r\n</mat-toolbar>\r\n\r\n<mat-drawer-container class=\"filter-drawer\">\r\n  <mat-drawer mode=\"side\" [opened]=\"filterDrawerOpen\">\r\n    <ng-content select=\"filter-drawer\"></ng-content>\r\n  </mat-drawer>\r\n  <mat-drawer-content>\r\n    <bdb-table-v2\r\n      [columns]=\"columns\"\r\n      [dataSource]=\"dataSource().data\"\r\n      [error]=\"dataSource().error()\"\r\n      [displayedColumns]=\"displayedColumns\"\r\n      [selection]=\"selection\"\r\n      [rowColor]=\"rowColor()\"\r\n      [contextActions]=\"contextActions()\"\r\n      (contextAction)=\"contextAction.emit($event)\"\r\n      (rowClick)=\"rowClick.emit($event)\"\r\n      (sortChange)=\"sortChange($event)\">\r\n      @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n        <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n          <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n        </ng-template>\r\n      }\r\n    </bdb-table-v2>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:start;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}.filter-drawer{flex-grow:1;--mat-sidenav-content-background-color: var(--mat-sys-surface)}\n"] }]
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], contextActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextActions", required: false }] }], contextAction: [{ type: i0.Output, args: ["contextAction"] }], rowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowColor", required: false }] }], rowClick: [{
+                type: Output
+            }], filterDrawerOpened: [{ type: i0.Output, args: ["filterDrawerOpened"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+
+class BdbSearchInputComponent {
+    // MatFormFieldControl required properties
+    static { this.nextId = 0; }
+    get required() {
+        return this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    get errorState() {
+        // return true;
+        const control = this.ngControl?.control;
+        if (!control) {
+            return false;
+        }
+        return control.invalid && control.touched;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+        this.onChange(val);
+        this.stateChanges.next();
+    }
+    get empty() {
+        return !this._value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this.stateChanges.next();
+    }
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.displayFn = input.required(...(ngDevMode ? [{ debugName: "displayFn" }] : []));
+        this.placeholder = '';
+        // autofilled?: boolean | undefined;
+        // userAriaDescribedBy?: string | undefined;
+        // disableAutomaticLabeling?: boolean | undefined;
+        // describedByIds?: string[] | undefined;
+        this.searchCtrl = new FormControl('');
+        this.id = `bdb-search-input-${BdbSearchInputComponent.nextId++}`;
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.controlType = 'bdb-search-input';
+        this.describedBy = '';
+        // ControlValueAccessor
+        this._value = undefined;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this._disabled = false;
+        // Replace the provider from above with this.
+        if (this.ngControl != null) {
+            const test = this.ngControl.control != null;
+            // Setting the value accessor directly (instead of using
+            // the providers) to avoid running into a circular import.
+            this.ngControl.valueAccessor = this;
+        }
+        this.searchCtrl.valueChanges
+            .pipe(takeUntilDestroyed(), debounceTime(300), distinctUntilChanged(), filter$1(x => typeof x === 'string'))
+            .subscribe({
+            next: (value) => {
+                this.dataSource().query = value;
+                this.dataSource().load();
+            },
+        });
+    }
+    writeValue(obj) {
+        this._value = obj;
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick(event) {
+        // Focus the input element if needed
+    }
+    selectOption($event) {
+        this.value = $event.option.value;
+        this.onChange(this.value);
+    }
+    clear() {
+        this.searchCtrl.setValue('');
+        this.value = undefined;
+        this.onChange(this.value);
+        this.stateChanges.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbFullTableComponent, isStandalone: true, selector: "bdb-full-table", inputs: { dataSource: "dataSource", columns: "columns", displayedColumns: "displayedColumns", autoLoad: "autoLoad", selection: "selection", contextActions: "contextActions", rowColor: "rowColor", showToolbar: "showToolbar" }, outputs: { rowClick: "rowClick", contextAction: "contextAction" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true }], ngImport: i0, template: "@if (showToolbar) {\r\n  <mat-toolbar>\r\n    <div bdbFlex=\"row 8px start center\">\r\n      <ng-content select=\"toolbar-item\"></ng-content>\r\n    </div>\r\n    <bdb-query-input [dataSource]=\"dataSource\"></bdb-query-input>\r\n  </mat-toolbar>\r\n}\r\n<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [autoLoad]=\"autoLoad\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [rowColor]=\"rowColor\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"contextAction.emit($event)\"\r\n  (rowClick)=\"rowClick.emit($event)\">\r\n  @for (cellTemplate of cellTemplates; track cellTemplate.bdbCellDef) {\r\n    <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n      <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</bdb-table>\r\n<bdb-paginator [dataSource]=\"dataSource\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: BdbQueryInputComponent, selector: "bdb-query-input[dataSource]", inputs: ["dataSource"] }, { kind: "component", type: BdbPaginatorComponent, selector: "bdb-paginator", inputs: ["dataSource"] }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFullTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bdb-full-table', imports: [
-                        CommonModule,
-                        BdbFlexDirective,
-                        MatToolbarModule,
-                        BdbQueryInputComponent,
-                        BdbPaginatorComponent,
-                        BdbTableComponent,
-                        BdbCellDirective,
-                    ], template: "@if (showToolbar) {\r\n  <mat-toolbar>\r\n    <div bdbFlex=\"row 8px start center\">\r\n      <ng-content select=\"toolbar-item\"></ng-content>\r\n    </div>\r\n    <bdb-query-input [dataSource]=\"dataSource\"></bdb-query-input>\r\n  </mat-toolbar>\r\n}\r\n<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [autoLoad]=\"autoLoad\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [rowColor]=\"rowColor\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"contextAction.emit($event)\"\r\n  (rowClick)=\"rowClick.emit($event)\">\r\n  @for (cellTemplate of cellTemplates; track cellTemplate.bdbCellDef) {\r\n    <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n      <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</bdb-table>\r\n<bdb-paginator [dataSource]=\"dataSource\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}\n"] }]
-        }], propDecorators: { dataSource: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], displayedColumns: [{
-                type: Input
-            }], autoLoad: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], contextActions: [{
-                type: Input
-            }], rowColor: [{
-                type: Input
-            }], showToolbar: [{
-                type: Input
-            }], rowClick: [{
-                type: Output
-            }], contextAction: [{
-                type: Output
-            }], cellTemplates: [{
-                type: ContentChildren,
-                args: [BdbCellDirective, { descendants: true }]
-            }] } });
-
-class BdbSearchWrapperBaseComponent {
-    constructor() {
-        this.controlContainer = inject(ControlContainer);
+    onFocus() {
+        this.focused = true;
+        this.stateChanges.next();
     }
-    ngOnInit() {
-        if (this.control) {
-            this.formControl = this.control;
-            return;
-        }
-        if (!this.controlName) {
-            throw 'No FormControl or FormControlName provided';
-        }
-        const ctrl = this.controlContainer.control?.get(this.controlName);
-        if (!ctrl) {
-            throw `FormControl '${this.controlName}' not found`;
+    onBlur() {
+        this.ngControl?.control?.markAsTouched();
+        // this.ngControl?.control?.markAsDirty();
+        if (this.dataSource().data.length === 1) {
+            this.value = this.dataSource().data[0];
+            this.onChange(this.value);
         }
-        this.formControl = ctrl;
+        this.focused = false;
+        this.onTouched();
+        this.stateChanges.next();
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbSearchWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: BdbSearchWrapperBaseComponent, isStandalone: true, selector: "ng-component", inputs: { controlName: "controlName", control: "control" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbSearchInputComponent, isStandalone: true, selector: "bdb-search-input", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: BdbSearchInputComponent }], ngImport: i0, template: "<input\r\n  type=\"text\"\r\n  matInput\r\n  [formControl]=\"searchCtrl\"\r\n  [matAutocomplete]=\"autoComplete\"\r\n  [placeholder]=\"placeholder\"\r\n  (blur)=\"onBlur()\" />\r\n<mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn()\">\r\n  @for (option of dataSource().data; track option.id) {\r\n    <mat-option [value]=\"option\">\r\n      {{ displayFn()(option) }}\r\n    </mat-option>\r\n  }\r\n</mat-autocomplete>\r\n", styles: [":host{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px}:host .mdc-list-item__start,:host .mdc-list-item__end{--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:48px}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:64px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbSearchWrapperBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ template: '', standalone: true }]
-        }], propDecorators: { controlName: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'bdb-search-input', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule], providers: [{ provide: MatFormFieldControl, useExisting: BdbSearchInputComponent }], template: "<input\r\n  type=\"text\"\r\n  matInput\r\n  [formControl]=\"searchCtrl\"\r\n  [matAutocomplete]=\"autoComplete\"\r\n  [placeholder]=\"placeholder\"\r\n  (blur)=\"onBlur()\" />\r\n<mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn()\">\r\n  @for (option of dataSource().data; track option.id) {\r\n    <mat-option [value]=\"option\">\r\n      {{ displayFn()(option) }}\r\n    </mat-option>\r\n  }\r\n</mat-autocomplete>\r\n", styles: [":host{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px}:host .mdc-list-item__start,:host .mdc-list-item__end{--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:48px}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:64px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], displayFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFn", required: true }] }] } });
 
-// Opzettelijk geen bdb prefix, aangezien dit een pure util is
-// Daartoe in eerste instantie ook niet beschikbaar gesteld in public api
-// Als hier wel reden toe is: heroverwegen bdb prefix toe te voegen
-class FunctionPipe {
-    transform(value, fn) {
-        return fn(value);
+class SearchV2Base {
+    get formControl() {
+        return this.ngControl.control;
+    }
+    constructor() {
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.ngControl = inject(NgControl, { optional: false, self: true });
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "function" }); }
+    writeValue(obj) { }
+    registerOnChange(fn) { }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SearchV2Base, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: SearchV2Base, isStandalone: true, inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FunctionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'function',
-                    standalone: true,
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SearchV2Base, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }] } });
 
 const errorMessageMap = new Map([
     ['required', 'Verplicht'],
@@ -1203,10 +1626,10 @@ class BdbFormErrorDirective {
         const errorMessage = getErrorMessage(validationErrorKey, validationErrorValue);
         this.renderer.setProperty(this.element.nativeElement, 'innerText', errorMessage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.ControlContainer }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BdbFormErrorDirective, isStandalone: true, selector: "[bdbFormError]", inputs: { bdbFormError: "bdbFormError" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.ControlContainer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BdbFormErrorDirective, isStandalone: true, selector: "[bdbFormError]", inputs: { bdbFormError: "bdbFormError" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFormErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFormErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbFormError]',
@@ -1216,12 +1639,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }] } });
 
+class BdbSearchV2Component {
+    get formControl() {
+        return this.ngControl?.control;
+    }
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.displayFn = input.required(...(ngDevMode ? [{ debugName: "displayFn" }] : []));
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        this.isDisabled = false;
+        this.searchInput = viewChild.required('searchInput');
+        ngControl.valueAccessor = this;
+    }
+    writeValue(obj) {
+        this.value = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    clear() {
+        this.searchInput().clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchV2Component, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbSearchV2Component, isStandalone: true, selector: "bdb-search-v2", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field floatLabel=\"always\">\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <bdb-search-input\r\n    #searchInput\r\n    [formControl]=\"formControl\"\r\n    [dataSource]=\"dataSource()\"\r\n    [displayFn]=\"displayFn()\"\r\n    [hidden]=\"formControl.value\"></bdb-search-input>\r\n  @if (formControl.value) {\r\n    {{ displayFn()(formControl.value) }}\r\n  }\r\n  @if (formControl.value) {\r\n    <mat-icon matSuffix (click)=\"clear()\" style=\"cursor: pointer\">clear</mat-icon>\r\n  } @else {\r\n    <mat-icon matSuffix>search</mat-icon>\r\n  }\r\n  <mat-error [bdbFormError]=\"formControl\"></mat-error>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: BdbSearchInputComponent, selector: "bdb-search-input", inputs: ["dataSource", "displayFn"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchV2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-search-v2', imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        BdbSearchInputComponent,
+                        BdbFormErrorDirective,
+                        MatIconModule,
+                        MatButtonModule,
+                    ], template: "<mat-form-field floatLabel=\"always\">\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <bdb-search-input\r\n    #searchInput\r\n    [formControl]=\"formControl\"\r\n    [dataSource]=\"dataSource()\"\r\n    [displayFn]=\"displayFn()\"\r\n    [hidden]=\"formControl.value\"></bdb-search-input>\r\n  @if (formControl.value) {\r\n    {{ displayFn()(formControl.value) }}\r\n  }\r\n  @if (formControl.value) {\r\n    <mat-icon matSuffix (click)=\"clear()\" style=\"cursor: pointer\">clear</mat-icon>\r\n  } @else {\r\n    <mat-icon matSuffix>search</mat-icon>\r\n  }\r\n  <mat-error [bdbFormError]=\"formControl\"></mat-error>\r\n</mat-form-field>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], displayFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFn", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+class BdbSearchWrapperBaseComponent {
+    constructor() {
+        this.controlContainer = inject(ControlContainer);
+    }
+    ngOnInit() {
+        if (this.control) {
+            this.formControl = this.control;
+            return;
+        }
+        if (!this.controlName) {
+            throw 'No FormControl or FormControlName provided';
+        }
+        const ctrl = this.controlContainer.control?.get(this.controlName);
+        if (!ctrl) {
+            throw `FormControl '${this.controlName}' not found`;
+        }
+        this.formControl = ctrl;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BdbSearchWrapperBaseComponent, isStandalone: true, selector: "ng-component", inputs: { controlName: "controlName", control: "control" }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchWrapperBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '', standalone: true }]
+        }], propDecorators: { controlName: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+// Opzettelijk geen bdb prefix, aangezien dit een pure util is
+// Daartoe in eerste instantie ook niet beschikbaar gesteld in public api
+// Als hier wel reden toe is: heroverwegen bdb prefix toe te voegen
+class FunctionPipe {
+    transform(value, fn) {
+        return fn(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "function" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'function',
+                    standalone: true,
+                }]
+        }] });
+
 class BdbSearchComponent {
     constructor(ngControl) {
         this.ngControl = ngControl;
         this.label = '';
         this.hint = '';
         this.placeholder = '';
+        this.searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+        this.clearButton = viewChild('clearButton', ...(ngDevMode ? [{ debugName: "clearButton" }] : []));
+        this.autoCompleteTrigger = viewChild(MatAutocompleteTrigger, ...(ngDevMode ? [{ debugName: "autoCompleteTrigger" }] : []));
         this._onDestroy = new Subject();
         this.viewChange = new BehaviorSubject({
             start: 0,
@@ -1251,11 +1772,11 @@ class BdbSearchComponent {
         });
     }
     ngAfterViewInit() {
-        this.autoCompleteTrigger?.panelClosingActions.pipe(takeUntil(this._onDestroy)).subscribe({
+        this.autoCompleteTrigger()?.panelClosingActions.pipe(takeUntil(this._onDestroy)).subscribe({
             next: x => {
                 if (x === null) {
                     this.searchCtrl.setValue('');
-                    this.searchInput?.nativeElement.blur();
+                    this.searchInput()?.nativeElement.blur();
                 }
             },
         });
@@ -1287,9 +1808,9 @@ class BdbSearchComponent {
     }
     onFocus() {
         if (this.hasValue) {
-            this.searchInput?.nativeElement.blur();
-            this.autoCompleteTrigger?.closePanel();
-            this.clearButton?.focus();
+            this.searchInput()?.nativeElement.blur();
+            this.autoCompleteTrigger()?.closePanel();
+            this.clearButton()?.focus();
         }
     }
     onBlur() {
@@ -1304,7 +1825,7 @@ class BdbSearchComponent {
         }
         this.inputTabIndex = -1;
         this.hasValue = true;
-        this.searchInput?.nativeElement.blur();
+        this.searchInput()?.nativeElement.blur();
         const value = event.option.value;
         this.onChange(value);
     }
@@ -1315,13 +1836,13 @@ class BdbSearchComponent {
         this.hasValue = false;
         this.inputTabIndex = 0;
         this.searchCtrl.setValue('');
-        this.searchInput?.nativeElement.focus();
+        this.searchInput()?.nativeElement.focus();
         this.onChange(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbSearchComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbSearchComponent, isStandalone: true, selector: "bdb-search", inputs: { dataSource: "dataSource", displayFn: "displayFn", label: "label", hint: "hint", placeholder: "placeholder" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }, { propertyName: "autoCompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<div class=\"search-container\">\r\n  @if (hasValue) {\r\n    <div class=\"search-disabled-cover\">\r\n      <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" color=\"danger\">\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  <mat-form-field class=\"search-form-field\">\r\n    <mat-label>{{ label }}</mat-label>\r\n    <input\r\n      type=\"text\"\r\n      matInput\r\n      [formControl]=\"searchCtrl\"\r\n      [matAutocomplete]=\"autoComplete\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      #searchInput\r\n      [tabIndex]=\"inputTabIndex\"\r\n      [placeholder]=\"placeholder\" />\r\n    <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n      @for (option of searchOptions | async; track option) {\r\n        <mat-option [value]=\"option\">\r\n          {{ option | function: displayFn }}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n\r\n    @if (!hasValue) {\r\n      <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n    }\r\n    <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n    <mat-hint>{{ hint }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "function" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbSearchComponent, isStandalone: true, selector: "bdb-search", inputs: { dataSource: "dataSource", displayFn: "displayFn", label: "label", hint: "hint", placeholder: "placeholder" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }, { propertyName: "autoCompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search-container\">\r\n  @if (hasValue) {\r\n    <div class=\"search-disabled-cover\">\r\n      <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" color=\"danger\">\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  <mat-form-field class=\"search-form-field\">\r\n    <mat-label>{{ label }}</mat-label>\r\n    <input\r\n      type=\"text\"\r\n      matInput\r\n      [formControl]=\"searchCtrl\"\r\n      [matAutocomplete]=\"autoComplete\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      #searchInput\r\n      [tabIndex]=\"inputTabIndex\"\r\n      [placeholder]=\"placeholder\" />\r\n    <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n      @for (option of searchOptions | async; track option.id) {\r\n        <mat-option [value]=\"option\">\r\n          {{ option | function: displayFn }}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n\r\n    @if (!hasValue) {\r\n      <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n    }\r\n    <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n    <mat-hint>{{ hint }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "function" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-search', imports: [
                         CommonModule,
@@ -1333,7 +1854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         BdbFormErrorDirective,
                         FunctionPipe,
                         MatButtonModule,
-                    ], template: "<div class=\"search-container\">\r\n  @if (hasValue) {\r\n    <div class=\"search-disabled-cover\">\r\n      <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" color=\"danger\">\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  <mat-form-field class=\"search-form-field\">\r\n    <mat-label>{{ label }}</mat-label>\r\n    <input\r\n      type=\"text\"\r\n      matInput\r\n      [formControl]=\"searchCtrl\"\r\n      [matAutocomplete]=\"autoComplete\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      #searchInput\r\n      [tabIndex]=\"inputTabIndex\"\r\n      [placeholder]=\"placeholder\" />\r\n    <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n      @for (option of searchOptions | async; track option) {\r\n        <mat-option [value]=\"option\">\r\n          {{ option | function: displayFn }}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n\r\n    @if (!hasValue) {\r\n      <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n    }\r\n    <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n    <mat-hint>{{ hint }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"] }]
+                    ], template: "<div class=\"search-container\">\r\n  @if (hasValue) {\r\n    <div class=\"search-disabled-cover\">\r\n      <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" color=\"danger\">\r\n        <mat-icon>clear</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n  <mat-form-field class=\"search-form-field\">\r\n    <mat-label>{{ label }}</mat-label>\r\n    <input\r\n      type=\"text\"\r\n      matInput\r\n      [formControl]=\"searchCtrl\"\r\n      [matAutocomplete]=\"autoComplete\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      #searchInput\r\n      [tabIndex]=\"inputTabIndex\"\r\n      [placeholder]=\"placeholder\" />\r\n    <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n      @for (option of searchOptions | async; track option.id) {\r\n        <mat-option [value]=\"option\">\r\n          {{ option | function: displayFn }}\r\n        </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n\r\n    @if (!hasValue) {\r\n      <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n    }\r\n    <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n    <mat-hint>{{ hint }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -1348,16 +1869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }], clearButton: [{
-                type: ViewChild,
-                args: ['clearButton']
-            }], autoCompleteTrigger: [{
-                type: ViewChild,
-                args: [MatAutocompleteTrigger]
-            }] } });
+            }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], clearButton: [{ type: i0.ViewChild, args: ['clearButton', { isSignal: true }] }], autoCompleteTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatAutocompleteTrigger), { isSignal: true }] }] } });
 
 class BdbColumnBuilder {
     build(...columns) {
@@ -1446,10 +1958,10 @@ class BdbColumnBuilder {
             textAlign: options?.textAlign,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbColumnBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbColumnBuilder, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbColumnBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbColumnBuilder, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbColumnBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbColumnBuilder, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1483,13 +1995,13 @@ class ExceptionLogTableComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExceptionLogTableComponent, deps: [{ token: BdbColumnBuilder }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: ExceptionLogTableComponent, isStandalone: true, selector: "bdb-exception-log-table[dataSource]", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  (contextAction)=\"onContextAction($event)\">\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExceptionLogTableComponent, deps: [{ token: BdbColumnBuilder }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ExceptionLogTableComponent, isStandalone: true, selector: "bdb-exception-log-table[dataSource]", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  (contextAction)=\"onContextAction($event)\">\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExceptionLogTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExceptionLogTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-exception-log-table[dataSource]', imports: [CommonModule, BdbTableComponent], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  (contextAction)=\"onContextAction($event)\">\r\n</bdb-table>\r\n" }]
-        }], ctorParameters: () => [{ type: BdbColumnBuilder }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }], propDecorators: { dataSource: [{
+            args: [{ selector: 'bdb-exception-log-table[dataSource]', imports: [BdbTableComponent], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  (contextAction)=\"onContextAction($event)\">\r\n</bdb-table>\r\n" }]
+        }], ctorParameters: () => [{ type: BdbColumnBuilder }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }], propDecorators: { dataSource: [{
                 type: Input
             }], displayedColumns: [{
                 type: Input
@@ -1510,10 +2022,10 @@ class FileSizePipe {
         const i = Math.floor(Math.log(bytes) / Math.log(1024));
         return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(1))} ${sizes[i]}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fileSize',
@@ -1523,6 +2035,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 class BdbYoutubePlayerComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
+        //https://stackoverflow.com/a/72043964
+        this.youTubePlayer = viewChild.required('youTubePlayer');
         this.videoHeight = 100;
         this.videoWidth = 100;
     }
@@ -1532,21 +2046,18 @@ class BdbYoutubePlayerComponent {
     }
     onResize() {
         // you can remove this line if you want to have wider video player than 1200px
-        this.videoWidth = Math.min(this.youTubePlayer.nativeElement.clientWidth, 1200);
+        this.videoWidth = Math.min(this.youTubePlayer().nativeElement.clientWidth, 1200);
         // so you keep the ratio
         this.videoHeight = this.videoWidth * 0.6;
         this.changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbYoutubePlayerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: BdbYoutubePlayerComponent, isStandalone: true, selector: "bdb-youtube-player", inputs: { videoId: "videoId" }, viewQueries: [{ propertyName: "youTubePlayer", first: true, predicate: ["youTubePlayer"], descendants: true }], ngImport: i0, template: "<div #youTubePlayer class=\"bdb-youtube-player\">\r\n  <youtube-player [width]=\"videoWidth\" [height]=\"videoHeight\" [videoId]=\"videoId\"></youtube-player>\r\n</div>\r\n", styles: [".bdb-youtube-player-container{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1}\n"], dependencies: [{ kind: "ngmodule", type: YouTubePlayerModule }, { kind: "component", type: i1$4.YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbYoutubePlayerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: BdbYoutubePlayerComponent, isStandalone: true, selector: "bdb-youtube-player", inputs: { videoId: "videoId" }, viewQueries: [{ propertyName: "youTubePlayer", first: true, predicate: ["youTubePlayer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #youTubePlayer class=\"bdb-youtube-player\">\r\n  <youtube-player [width]=\"videoWidth\" [height]=\"videoHeight\" [videoId]=\"videoId\"></youtube-player>\r\n</div>\r\n", styles: [".bdb-youtube-player-container{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1}\n"], dependencies: [{ kind: "ngmodule", type: YouTubePlayerModule }, { kind: "component", type: i1$4.YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbYoutubePlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbYoutubePlayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-youtube-player', imports: [YouTubePlayerModule], template: "<div #youTubePlayer class=\"bdb-youtube-player\">\r\n  <youtube-player [width]=\"videoWidth\" [height]=\"videoHeight\" [videoId]=\"videoId\"></youtube-player>\r\n</div>\r\n", styles: [".bdb-youtube-player-container{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { youTubePlayer: [{
-                type: ViewChild,
-                args: ['youTubePlayer']
-            }], videoId: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { youTubePlayer: [{ type: i0.ViewChild, args: ['youTubePlayer', { isSignal: true }] }], videoId: [{
                 type: Input
             }] } });
 
@@ -1575,10 +2086,10 @@ class MediaTypeIconPipe {
                 return undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTypeIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: MediaTypeIconPipe, isStandalone: true, name: "mediaTypeIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaTypeIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MediaTypeIconPipe, isStandalone: true, name: "mediaTypeIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTypeIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaTypeIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mediaTypeIcon',
@@ -1649,10 +2160,10 @@ class BdbMediaDisplayComponent {
         }
         return parts.pop()?.toLocaleLowerCase();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbMediaDisplayComponent, isStandalone: true, selector: "bdb-media-display", inputs: { media: "media", mode: "mode", overlayBehavior: "overlayBehavior", width: "width", height: "height", alt: "alt" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (media) {\r\n  @if (hasError) {\r\n    <ng-container *ngTemplateOutlet=\"noMedia\"></ng-container>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"overlay\"></ng-container>\r\n    @switch (media.type) {\r\n      @case (mediaType.Video) {\r\n        <ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n      }\r\n      @case (mediaType.File) {\r\n        <ng-container *ngTemplateOutlet=\"file\"></ng-container>\r\n      }\r\n      @default {\r\n        <img [src]=\"src\" [alt]=\"alt\" (error)=\"hasError = true\" />\r\n      }\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"underlay\"></ng-container>\r\n  }\r\n}\r\n\r\n<ng-template #overlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"overlay\" [class.on-hover]=\"overlayBehavior === 'hover'\">\r\n      <div class=\"media-details\">\r\n        <mat-icon>{{ media.type | mediaTypeIcon }}</mat-icon>\r\n        <div>\r\n          @switch (media.type) {\r\n            @case (mediaType.Video) {\r\n              {{ media.reference }}\r\n            }\r\n            @case (mediaType.File) {\r\n              {{ media.originalFileName }}, {{ media.fileSize | fileSize }}\r\n            }\r\n            @case (mediaType.Image) {\r\n              @if (media.fileName?.endsWith('.svg')) {\r\n                SVG,\r\n              } @else {\r\n                {{ media.width }} x {{ media.height }} px,\r\n              }\r\n              {{ media.fileSize | fileSize }}\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #underlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"underlay\"></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #video>\r\n  @if (mode === 'live') {\r\n    <bdb-youtube-player [videoId]=\"media?.reference\"></bdb-youtube-player>\r\n  } @else {\r\n    <div bdbFlex=\"col 0px center center\">\r\n      <mat-icon>play_circle_outline</mat-icon>\r\n      @if (src) {\r\n        <img [src]=\"src\" [alt]=\"alt\" />\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #file>\r\n  @if (src) {\r\n    <img [src]=\"src\" [alt]=\"alt\" />\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n  }\r\n  @if (mode === 'live') {\r\n    <div class=\"file-overlay\">\r\n      <a mat-fab aria-label=\"Download\" [href]=\"getSource(media, true)\" target=\"_blank\" download class=\"primary\">\r\n        <mat-icon>save_alt</mat-icon>\r\n      </a>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noPreviewAvailable>\r\n  <div class=\"no-preview-available\">\r\n    <em>Geen preview beschikbaar</em>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noMedia>\r\n  <svg version=\"1.1\" viewBox=\"0 0 180 180\" xmlns:svg=\"http://www.w3.org/2000/svg\">\r\n    <g transform=\"translate(-2,-6)\">\r\n      <rect style=\"fill: #9f9f9f\" width=\"90\" height=\"90\" x=\"-18\" y=\"85\" ry=\"8.4\" transform=\"rotate(-16.3)\" />\r\n      <g transform=\"rotate(16.3,229,-1658.3)\">\r\n        <rect\r\n          ry=\"4.6\"\r\n          y=\"1.6\"\r\n          x=\"547\"\r\n          height=\"110\"\r\n          width=\"110\"\r\n          style=\"fill: #a2a2a2; stroke: #ffffff; stroke-width: 5.4\" />\r\n        <g\r\n          style=\"stroke: #ffffff; stroke-width: 13; stroke-miterlimit: 4\"\r\n          transform=\"matrix(0.17265471,0,0,0.17265471,512.49324,-6.3296456)\">\r\n          <rect style=\"fill: #cccccc\" width=\"491\" height=\"449\" x=\"270\" y=\"107\" />\r\n          <rect style=\"fill: #ffffff\" id=\"rect3342\" width=\"491\" height=\"209\" x=\"270\" y=\"107\" />\r\n          <path\r\n            style=\"fill: #cccccc\"\r\n            d=\"m 300,317.36255 38.46147,-53.53818 60.53097,-45.16084 15.88277,18.57394 13.61285,-38.68356 8.20133,-2.98188 13.3106,-28.2093 180,179.99979\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; paint-order: stroke\"\r\n            d=\"m 180,60 c 4.09311,16.474688 7.71219,33.067277 10.85156,49.75 2.38256,12.66097 4.48857,25.37408 6.31641,38.12695 l -22.06445,-7.16015 -46.11133,-29.41602 5.32422,46.42578 -1.61524,24.78711 10.05274,30.37695 73.18554,-11.75585 L 300,180 252.19922,102.56641 242.5,117.5 215.375,95.375 Z\"\r\n            transform=\"translate(270,107.36227)\" />\r\n          <path\r\n            d=\"m 419.99999,347.36252 81.89918,-74.42959 18.50574,-9.68009 23.6512,-44.18894 25.94388,-21.70121 179.99999,179.99979\"\r\n            style=\"fill: #cccccc; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\"\r\n            d=\"m 569.99999,197.36269 35.9388,80.91289 v 30.11038 30.11038 l 22.45864,19.46652 c 6.52453,-6.45031 14.14893,-11.78526 22.44431,-15.70477 14.8245,-7.00447 31.33823,-9.35959 47.17057,-13.6217 6.42776,-1.73037 12.90672,-3.85419 18.21343,-7.87277 1.35174,-1.02362 2.61592,-2.16281 3.77424,-3.40107 h -30 l -40.52149,-40.55006 -29.85645,-48.91972 -10.25307,8.83886 z\" />\r\n          <path\r\n            style=\"fill: #ffffff\"\r\n            d=\"m 419.99999,557.36227 c -0.41699,-9.60089 -8.81759,-17.60878 17.1252,-30.66806 31.8318,-16.02389 125.895,-35.88836 152.1537,-59.98434 19.42709,-17.82687 -70.4154,-37.66945 -55.0191,-59.07323 6.981,-9.70528 59.037,-19.96947 82.1463,-30.27386 21.90569,-9.76799 15.14129,-19.80328 31.4046,-29.97507 15.7092,-9.82558 68.3499,-19.77358 72.18929,-30.02516 -10.41359,10.52188 -68.83379,20.40327 -89.99999,30.00026 -22.3377,10.128 -21.4689,19.93018 -49.4313,29.48367 -30.1245,10.29239 -89.142,20.55268 -102.7077,30.51626 -28.4133,20.86858 46.863,42.59995 16.2024,59.99993 C 452.54309,490.92554 344.7219,510.65712 300,527.3626 c -30.9039,11.54369 -28.4079,17.74799 -30,29.99967\" />\r\n        </g>\r\n      </g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative}:host .overlay{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;inset:0;z-index:1;background-color:#0000004d}:host .overlay button{margin:4px}:host .overlay .media-details{display:flex;justify-content:center;align-items:center;gap:8px;background-color:#000000b3;font-size:11px;color:#fff}:host .underlay{position:absolute;inset:0;background-color:var(--bdb-media-display-container);border:1px dashed var(--bdb-media-display-outline-color);z-index:-1}:host .overlay.on-hover{display:none}:host:hover .overlay.on-hover{display:flex}img{object-fit:contain;max-width:100%;max-height:100%}.file-live{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.file-live .file-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.no-preview-available{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--bdb-sys-warn)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BdbYoutubePlayerComponent, selector: "bdb-youtube-player", inputs: ["videoId"] }, { kind: "pipe", type: MediaTypeIconPipe, name: "mediaTypeIcon" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbMediaDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbMediaDisplayComponent, isStandalone: true, selector: "bdb-media-display", inputs: { media: "media", mode: "mode", overlayBehavior: "overlayBehavior", width: "width", height: "height", alt: "alt" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "@if (hasError || !media) {\r\n  <ng-container *ngTemplateOutlet=\"noMedia\"></ng-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"overlay\"></ng-container>\r\n  @switch (media.type) {\r\n    @case (mediaType.Video) {\r\n      <ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n    }\r\n    @case (mediaType.File) {\r\n      <ng-container *ngTemplateOutlet=\"file\"></ng-container>\r\n    }\r\n    @default {\r\n      <img [src]=\"src\" [alt]=\"alt\" (error)=\"hasError = true\" />\r\n    }\r\n  }\r\n}\r\n<ng-container *ngTemplateOutlet=\"underlay\"></ng-container>\r\n\r\n<ng-template #overlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"overlay\" [class.on-hover]=\"overlayBehavior === 'hover'\">\r\n      <div class=\"media-details\">\r\n        <mat-icon>{{ media.type | mediaTypeIcon }}</mat-icon>\r\n        <div>\r\n          @switch (media.type) {\r\n            @case (mediaType.Video) {\r\n              {{ media.reference }}\r\n            }\r\n            @case (mediaType.File) {\r\n              {{ media.originalFileName }}, {{ media.fileSize | fileSize }}\r\n            }\r\n            @case (mediaType.Image) {\r\n              @if (media.fileName?.endsWith('.svg')) {\r\n                SVG,\r\n              } @else {\r\n                {{ media.width }} x {{ media.height }} px,\r\n              }\r\n              {{ media.fileSize | fileSize }}\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #underlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"underlay\"></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #video>\r\n  @if (mode === 'live') {\r\n    <bdb-youtube-player [videoId]=\"media?.reference\"></bdb-youtube-player>\r\n  } @else {\r\n    <div bdbFlex=\"col 0px center center\">\r\n      <mat-icon>play_circle_outline</mat-icon>\r\n      @if (src) {\r\n        <img [src]=\"src\" [alt]=\"alt\" />\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #file>\r\n  @if (src) {\r\n    <img [src]=\"src\" [alt]=\"alt\" />\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n  }\r\n  @if (mode === 'live') {\r\n    <div class=\"file-overlay\">\r\n      <a mat-fab aria-label=\"Download\" [href]=\"getSource(media, true)\" target=\"_blank\" download class=\"primary\">\r\n        <mat-icon>save_alt</mat-icon>\r\n      </a>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noPreviewAvailable>\r\n  <div class=\"no-preview-available\">\r\n    <em>Geen preview beschikbaar</em>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noMedia>\r\n  <svg version=\"1.1\" viewBox=\"0 0 180 180\" xmlns:svg=\"http://www.w3.org/2000/svg\">\r\n    <g transform=\"translate(-2,-6)\">\r\n      <rect style=\"fill: #9f9f9f\" width=\"90\" height=\"90\" x=\"-18\" y=\"85\" ry=\"8.4\" transform=\"rotate(-16.3)\" />\r\n      <g transform=\"rotate(16.3,229,-1658.3)\">\r\n        <rect\r\n          ry=\"4.6\"\r\n          y=\"1.6\"\r\n          x=\"547\"\r\n          height=\"110\"\r\n          width=\"110\"\r\n          style=\"fill: #a2a2a2; stroke: #ffffff; stroke-width: 5.4\" />\r\n        <g\r\n          style=\"stroke: #ffffff; stroke-width: 13; stroke-miterlimit: 4\"\r\n          transform=\"matrix(0.17265471,0,0,0.17265471,512.49324,-6.3296456)\">\r\n          <rect style=\"fill: #cccccc\" width=\"491\" height=\"449\" x=\"270\" y=\"107\" />\r\n          <rect style=\"fill: #ffffff\" id=\"rect3342\" width=\"491\" height=\"209\" x=\"270\" y=\"107\" />\r\n          <path\r\n            style=\"fill: #cccccc\"\r\n            d=\"m 300,317.36255 38.46147,-53.53818 60.53097,-45.16084 15.88277,18.57394 13.61285,-38.68356 8.20133,-2.98188 13.3106,-28.2093 180,179.99979\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; paint-order: stroke\"\r\n            d=\"m 180,60 c 4.09311,16.474688 7.71219,33.067277 10.85156,49.75 2.38256,12.66097 4.48857,25.37408 6.31641,38.12695 l -22.06445,-7.16015 -46.11133,-29.41602 5.32422,46.42578 -1.61524,24.78711 10.05274,30.37695 73.18554,-11.75585 L 300,180 252.19922,102.56641 242.5,117.5 215.375,95.375 Z\"\r\n            transform=\"translate(270,107.36227)\" />\r\n          <path\r\n            d=\"m 419.99999,347.36252 81.89918,-74.42959 18.50574,-9.68009 23.6512,-44.18894 25.94388,-21.70121 179.99999,179.99979\"\r\n            style=\"fill: #cccccc; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\"\r\n            d=\"m 569.99999,197.36269 35.9388,80.91289 v 30.11038 30.11038 l 22.45864,19.46652 c 6.52453,-6.45031 14.14893,-11.78526 22.44431,-15.70477 14.8245,-7.00447 31.33823,-9.35959 47.17057,-13.6217 6.42776,-1.73037 12.90672,-3.85419 18.21343,-7.87277 1.35174,-1.02362 2.61592,-2.16281 3.77424,-3.40107 h -30 l -40.52149,-40.55006 -29.85645,-48.91972 -10.25307,8.83886 z\" />\r\n          <path\r\n            style=\"fill: #ffffff\"\r\n            d=\"m 419.99999,557.36227 c -0.41699,-9.60089 -8.81759,-17.60878 17.1252,-30.66806 31.8318,-16.02389 125.895,-35.88836 152.1537,-59.98434 19.42709,-17.82687 -70.4154,-37.66945 -55.0191,-59.07323 6.981,-9.70528 59.037,-19.96947 82.1463,-30.27386 21.90569,-9.76799 15.14129,-19.80328 31.4046,-29.97507 15.7092,-9.82558 68.3499,-19.77358 72.18929,-30.02516 -10.41359,10.52188 -68.83379,20.40327 -89.99999,30.00026 -22.3377,10.128 -21.4689,19.93018 -49.4313,29.48367 -30.1245,10.29239 -89.142,20.55268 -102.7077,30.51626 -28.4133,20.86858 46.863,42.59995 16.2024,59.99993 C 452.54309,490.92554 344.7219,510.65712 300,527.3626 c -30.9039,11.54369 -28.4079,17.74799 -30,29.99967\" />\r\n        </g>\r\n      </g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative}:host .overlay{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;inset:0;z-index:1;background-color:#0000004d}:host .overlay button{margin:4px}:host .overlay .media-details{display:flex;justify-content:center;align-items:center;gap:8px;background-color:#000000b3;font-size:11px;color:#fff}:host .underlay{position:absolute;inset:0;background-color:var(--bdb-media-display-container);border:1px dashed var(--bdb-media-display-outline-color);z-index:-1}:host .overlay.on-hover{display:none}:host:hover .overlay.on-hover{display:flex}img{object-fit:contain;max-width:100%;max-height:100%}.file-live{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.file-live .file-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.no-preview-available{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--bdb-sys-warn)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BdbYoutubePlayerComponent, selector: "bdb-youtube-player", inputs: ["videoId"] }, { kind: "pipe", type: MediaTypeIconPipe, name: "mediaTypeIcon" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbMediaDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-media-display', imports: [
                         MatButtonModule,
@@ -1661,7 +2172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         BdbYoutubePlayerComponent,
                         MediaTypeIconPipe,
                         FileSizePipe,
-                    ], template: "@if (media) {\r\n  @if (hasError) {\r\n    <ng-container *ngTemplateOutlet=\"noMedia\"></ng-container>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"overlay\"></ng-container>\r\n    @switch (media.type) {\r\n      @case (mediaType.Video) {\r\n        <ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n      }\r\n      @case (mediaType.File) {\r\n        <ng-container *ngTemplateOutlet=\"file\"></ng-container>\r\n      }\r\n      @default {\r\n        <img [src]=\"src\" [alt]=\"alt\" (error)=\"hasError = true\" />\r\n      }\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"underlay\"></ng-container>\r\n  }\r\n}\r\n\r\n<ng-template #overlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"overlay\" [class.on-hover]=\"overlayBehavior === 'hover'\">\r\n      <div class=\"media-details\">\r\n        <mat-icon>{{ media.type | mediaTypeIcon }}</mat-icon>\r\n        <div>\r\n          @switch (media.type) {\r\n            @case (mediaType.Video) {\r\n              {{ media.reference }}\r\n            }\r\n            @case (mediaType.File) {\r\n              {{ media.originalFileName }}, {{ media.fileSize | fileSize }}\r\n            }\r\n            @case (mediaType.Image) {\r\n              @if (media.fileName?.endsWith('.svg')) {\r\n                SVG,\r\n              } @else {\r\n                {{ media.width }} x {{ media.height }} px,\r\n              }\r\n              {{ media.fileSize | fileSize }}\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #underlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"underlay\"></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #video>\r\n  @if (mode === 'live') {\r\n    <bdb-youtube-player [videoId]=\"media?.reference\"></bdb-youtube-player>\r\n  } @else {\r\n    <div bdbFlex=\"col 0px center center\">\r\n      <mat-icon>play_circle_outline</mat-icon>\r\n      @if (src) {\r\n        <img [src]=\"src\" [alt]=\"alt\" />\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #file>\r\n  @if (src) {\r\n    <img [src]=\"src\" [alt]=\"alt\" />\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n  }\r\n  @if (mode === 'live') {\r\n    <div class=\"file-overlay\">\r\n      <a mat-fab aria-label=\"Download\" [href]=\"getSource(media, true)\" target=\"_blank\" download class=\"primary\">\r\n        <mat-icon>save_alt</mat-icon>\r\n      </a>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noPreviewAvailable>\r\n  <div class=\"no-preview-available\">\r\n    <em>Geen preview beschikbaar</em>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noMedia>\r\n  <svg version=\"1.1\" viewBox=\"0 0 180 180\" xmlns:svg=\"http://www.w3.org/2000/svg\">\r\n    <g transform=\"translate(-2,-6)\">\r\n      <rect style=\"fill: #9f9f9f\" width=\"90\" height=\"90\" x=\"-18\" y=\"85\" ry=\"8.4\" transform=\"rotate(-16.3)\" />\r\n      <g transform=\"rotate(16.3,229,-1658.3)\">\r\n        <rect\r\n          ry=\"4.6\"\r\n          y=\"1.6\"\r\n          x=\"547\"\r\n          height=\"110\"\r\n          width=\"110\"\r\n          style=\"fill: #a2a2a2; stroke: #ffffff; stroke-width: 5.4\" />\r\n        <g\r\n          style=\"stroke: #ffffff; stroke-width: 13; stroke-miterlimit: 4\"\r\n          transform=\"matrix(0.17265471,0,0,0.17265471,512.49324,-6.3296456)\">\r\n          <rect style=\"fill: #cccccc\" width=\"491\" height=\"449\" x=\"270\" y=\"107\" />\r\n          <rect style=\"fill: #ffffff\" id=\"rect3342\" width=\"491\" height=\"209\" x=\"270\" y=\"107\" />\r\n          <path\r\n            style=\"fill: #cccccc\"\r\n            d=\"m 300,317.36255 38.46147,-53.53818 60.53097,-45.16084 15.88277,18.57394 13.61285,-38.68356 8.20133,-2.98188 13.3106,-28.2093 180,179.99979\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; paint-order: stroke\"\r\n            d=\"m 180,60 c 4.09311,16.474688 7.71219,33.067277 10.85156,49.75 2.38256,12.66097 4.48857,25.37408 6.31641,38.12695 l -22.06445,-7.16015 -46.11133,-29.41602 5.32422,46.42578 -1.61524,24.78711 10.05274,30.37695 73.18554,-11.75585 L 300,180 252.19922,102.56641 242.5,117.5 215.375,95.375 Z\"\r\n            transform=\"translate(270,107.36227)\" />\r\n          <path\r\n            d=\"m 419.99999,347.36252 81.89918,-74.42959 18.50574,-9.68009 23.6512,-44.18894 25.94388,-21.70121 179.99999,179.99979\"\r\n            style=\"fill: #cccccc; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\"\r\n            d=\"m 569.99999,197.36269 35.9388,80.91289 v 30.11038 30.11038 l 22.45864,19.46652 c 6.52453,-6.45031 14.14893,-11.78526 22.44431,-15.70477 14.8245,-7.00447 31.33823,-9.35959 47.17057,-13.6217 6.42776,-1.73037 12.90672,-3.85419 18.21343,-7.87277 1.35174,-1.02362 2.61592,-2.16281 3.77424,-3.40107 h -30 l -40.52149,-40.55006 -29.85645,-48.91972 -10.25307,8.83886 z\" />\r\n          <path\r\n            style=\"fill: #ffffff\"\r\n            d=\"m 419.99999,557.36227 c -0.41699,-9.60089 -8.81759,-17.60878 17.1252,-30.66806 31.8318,-16.02389 125.895,-35.88836 152.1537,-59.98434 19.42709,-17.82687 -70.4154,-37.66945 -55.0191,-59.07323 6.981,-9.70528 59.037,-19.96947 82.1463,-30.27386 21.90569,-9.76799 15.14129,-19.80328 31.4046,-29.97507 15.7092,-9.82558 68.3499,-19.77358 72.18929,-30.02516 -10.41359,10.52188 -68.83379,20.40327 -89.99999,30.00026 -22.3377,10.128 -21.4689,19.93018 -49.4313,29.48367 -30.1245,10.29239 -89.142,20.55268 -102.7077,30.51626 -28.4133,20.86858 46.863,42.59995 16.2024,59.99993 C 452.54309,490.92554 344.7219,510.65712 300,527.3626 c -30.9039,11.54369 -28.4079,17.74799 -30,29.99967\" />\r\n        </g>\r\n      </g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative}:host .overlay{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;inset:0;z-index:1;background-color:#0000004d}:host .overlay button{margin:4px}:host .overlay .media-details{display:flex;justify-content:center;align-items:center;gap:8px;background-color:#000000b3;font-size:11px;color:#fff}:host .underlay{position:absolute;inset:0;background-color:var(--bdb-media-display-container);border:1px dashed var(--bdb-media-display-outline-color);z-index:-1}:host .overlay.on-hover{display:none}:host:hover .overlay.on-hover{display:flex}img{object-fit:contain;max-width:100%;max-height:100%}.file-live{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.file-live .file-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.no-preview-available{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--bdb-sys-warn)}\n"] }]
+                    ], template: "@if (hasError || !media) {\r\n  <ng-container *ngTemplateOutlet=\"noMedia\"></ng-container>\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"overlay\"></ng-container>\r\n  @switch (media.type) {\r\n    @case (mediaType.Video) {\r\n      <ng-container *ngTemplateOutlet=\"video\"></ng-container>\r\n    }\r\n    @case (mediaType.File) {\r\n      <ng-container *ngTemplateOutlet=\"file\"></ng-container>\r\n    }\r\n    @default {\r\n      <img [src]=\"src\" [alt]=\"alt\" (error)=\"hasError = true\" />\r\n    }\r\n  }\r\n}\r\n<ng-container *ngTemplateOutlet=\"underlay\"></ng-container>\r\n\r\n<ng-template #overlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"overlay\" [class.on-hover]=\"overlayBehavior === 'hover'\">\r\n      <div class=\"media-details\">\r\n        <mat-icon>{{ media.type | mediaTypeIcon }}</mat-icon>\r\n        <div>\r\n          @switch (media.type) {\r\n            @case (mediaType.Video) {\r\n              {{ media.reference }}\r\n            }\r\n            @case (mediaType.File) {\r\n              {{ media.originalFileName }}, {{ media.fileSize | fileSize }}\r\n            }\r\n            @case (mediaType.Image) {\r\n              @if (media.fileName?.endsWith('.svg')) {\r\n                SVG,\r\n              } @else {\r\n                {{ media.width }} x {{ media.height }} px,\r\n              }\r\n              {{ media.fileSize | fileSize }}\r\n            }\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #underlay>\r\n  @if (media && mode === 'details') {\r\n    <div class=\"underlay\"></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #video>\r\n  @if (mode === 'live') {\r\n    <bdb-youtube-player [videoId]=\"media?.reference\"></bdb-youtube-player>\r\n  } @else {\r\n    <div bdbFlex=\"col 0px center center\">\r\n      <mat-icon>play_circle_outline</mat-icon>\r\n      @if (src) {\r\n        <img [src]=\"src\" [alt]=\"alt\" />\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #file>\r\n  @if (src) {\r\n    <img [src]=\"src\" [alt]=\"alt\" />\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"noPreviewAvailable\"></ng-container>\r\n  }\r\n  @if (mode === 'live') {\r\n    <div class=\"file-overlay\">\r\n      <a mat-fab aria-label=\"Download\" [href]=\"getSource(media, true)\" target=\"_blank\" download class=\"primary\">\r\n        <mat-icon>save_alt</mat-icon>\r\n      </a>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #noPreviewAvailable>\r\n  <div class=\"no-preview-available\">\r\n    <em>Geen preview beschikbaar</em>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noMedia>\r\n  <svg version=\"1.1\" viewBox=\"0 0 180 180\" xmlns:svg=\"http://www.w3.org/2000/svg\">\r\n    <g transform=\"translate(-2,-6)\">\r\n      <rect style=\"fill: #9f9f9f\" width=\"90\" height=\"90\" x=\"-18\" y=\"85\" ry=\"8.4\" transform=\"rotate(-16.3)\" />\r\n      <g transform=\"rotate(16.3,229,-1658.3)\">\r\n        <rect\r\n          ry=\"4.6\"\r\n          y=\"1.6\"\r\n          x=\"547\"\r\n          height=\"110\"\r\n          width=\"110\"\r\n          style=\"fill: #a2a2a2; stroke: #ffffff; stroke-width: 5.4\" />\r\n        <g\r\n          style=\"stroke: #ffffff; stroke-width: 13; stroke-miterlimit: 4\"\r\n          transform=\"matrix(0.17265471,0,0,0.17265471,512.49324,-6.3296456)\">\r\n          <rect style=\"fill: #cccccc\" width=\"491\" height=\"449\" x=\"270\" y=\"107\" />\r\n          <rect style=\"fill: #ffffff\" id=\"rect3342\" width=\"491\" height=\"209\" x=\"270\" y=\"107\" />\r\n          <path\r\n            style=\"fill: #cccccc\"\r\n            d=\"m 300,317.36255 38.46147,-53.53818 60.53097,-45.16084 15.88277,18.57394 13.61285,-38.68356 8.20133,-2.98188 13.3106,-28.2093 180,179.99979\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; paint-order: stroke\"\r\n            d=\"m 180,60 c 4.09311,16.474688 7.71219,33.067277 10.85156,49.75 2.38256,12.66097 4.48857,25.37408 6.31641,38.12695 l -22.06445,-7.16015 -46.11133,-29.41602 5.32422,46.42578 -1.61524,24.78711 10.05274,30.37695 73.18554,-11.75585 L 300,180 252.19922,102.56641 242.5,117.5 215.375,95.375 Z\"\r\n            transform=\"translate(270,107.36227)\" />\r\n          <path\r\n            d=\"m 419.99999,347.36252 81.89918,-74.42959 18.50574,-9.68009 23.6512,-44.18894 25.94388,-21.70121 179.99999,179.99979\"\r\n            style=\"fill: #cccccc; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\" />\r\n          <path\r\n            style=\"fill: #b3b3b3; stroke: #ffffff; stroke-width: 13.0708; paint-order: stroke\"\r\n            d=\"m 569.99999,197.36269 35.9388,80.91289 v 30.11038 30.11038 l 22.45864,19.46652 c 6.52453,-6.45031 14.14893,-11.78526 22.44431,-15.70477 14.8245,-7.00447 31.33823,-9.35959 47.17057,-13.6217 6.42776,-1.73037 12.90672,-3.85419 18.21343,-7.87277 1.35174,-1.02362 2.61592,-2.16281 3.77424,-3.40107 h -30 l -40.52149,-40.55006 -29.85645,-48.91972 -10.25307,8.83886 z\" />\r\n          <path\r\n            style=\"fill: #ffffff\"\r\n            d=\"m 419.99999,557.36227 c -0.41699,-9.60089 -8.81759,-17.60878 17.1252,-30.66806 31.8318,-16.02389 125.895,-35.88836 152.1537,-59.98434 19.42709,-17.82687 -70.4154,-37.66945 -55.0191,-59.07323 6.981,-9.70528 59.037,-19.96947 82.1463,-30.27386 21.90569,-9.76799 15.14129,-19.80328 31.4046,-29.97507 15.7092,-9.82558 68.3499,-19.77358 72.18929,-30.02516 -10.41359,10.52188 -68.83379,20.40327 -89.99999,30.00026 -22.3377,10.128 -21.4689,19.93018 -49.4313,29.48367 -30.1245,10.29239 -89.142,20.55268 -102.7077,30.51626 -28.4133,20.86858 46.863,42.59995 16.2024,59.99993 C 452.54309,490.92554 344.7219,510.65712 300,527.3626 c -30.9039,11.54369 -28.4079,17.74799 -30,29.99967\" />\r\n        </g>\r\n      </g>\r\n    </g>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative}:host .overlay{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;inset:0;z-index:1;background-color:#0000004d}:host .overlay button{margin:4px}:host .overlay .media-details{display:flex;justify-content:center;align-items:center;gap:8px;background-color:#000000b3;font-size:11px;color:#fff}:host .underlay{position:absolute;inset:0;background-color:var(--bdb-media-display-container);border:1px dashed var(--bdb-media-display-outline-color);z-index:-1}:host .overlay.on-hover{display:none}:host:hover .overlay.on-hover{display:flex}img{object-fit:contain;max-width:100%;max-height:100%}.file-live{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.file-live .file-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.no-preview-available{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--bdb-sys-warn)}\n"] }]
         }], propDecorators: { media: [{
                 type: Input
             }], mode: [{
@@ -1686,10 +2197,10 @@ class MediaTypePipe {
         }
         return MediaTypeMap.get(value) ?? '???';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: MediaTypePipe, isStandalone: true, name: "mediaType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MediaTypePipe, isStandalone: true, name: "mediaType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaTypePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mediaType',
@@ -1706,10 +2217,10 @@ class MediaFullTableComponent {
         this.cb = inject((BdbColumnBuilder));
         this.columns = this.cb.build(this.cb.enum(x => x.type, 'Type', { pipe: MediaTypePipe, width: 120 }), this.cb.string(x => x.fileName, 'Bestandsnaam'), this.cb.string(x => x.reference, 'Referentie', { width: 200 }), this.cb.number(x => x.fileSize, 'Bestandsgrootte', { pipe: FileSizePipe, width: 200 }), this.cb.number(x => x.height, 'Hoogte', { width: 200 }), this.cb.number(x => x.width, 'Breedte', { width: 200 }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MediaFullTableComponent, isStandalone: true, selector: "bdb-media-full-table", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", selection: "selection", showToolbar: "showToolbar", contextActions: "contextActions" }, outputs: { contextAction: "contextAction", rowClick: "rowClick" }, ngImport: i0, template: "<bdb-full-table\r\n  [dataSource]=\"dataSource\"\r\n  [columns]=\"columns\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [showToolbar]=\"showToolbar\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n  <ng-content select=\"toolbar-item\" ngProjectAs=\"toolbar-item\"></ng-content>\r\n  <ng-content></ng-content>\r\n</bdb-full-table>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: BdbFullTableComponent, selector: "bdb-full-table", inputs: ["dataSource", "columns", "displayedColumns", "autoLoad", "selection", "contextActions", "rowColor", "showToolbar"], outputs: ["rowClick", "contextAction"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MediaFullTableComponent, isStandalone: true, selector: "bdb-media-full-table", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", selection: "selection", showToolbar: "showToolbar", contextActions: "contextActions" }, outputs: { contextAction: "contextAction", rowClick: "rowClick" }, ngImport: i0, template: "<bdb-full-table\r\n  [dataSource]=\"dataSource\"\r\n  [columns]=\"columns\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [showToolbar]=\"showToolbar\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n  <ng-content select=\"toolbar-item\" ngProjectAs=\"toolbar-item\"></ng-content>\r\n  <ng-content></ng-content>\r\n</bdb-full-table>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: BdbFullTableComponent, selector: "bdb-full-table", inputs: ["dataSource", "columns", "displayedColumns", "autoLoad", "selection", "contextActions", "rowColor", "showToolbar"], outputs: ["rowClick", "contextAction"] }, { kind: "ngmodule", type: MatButtonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaFullTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaFullTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-media-full-table', imports: [BdbFullTableComponent, MatButtonModule], template: "<bdb-full-table\r\n  [dataSource]=\"dataSource\"\r\n  [columns]=\"columns\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [showToolbar]=\"showToolbar\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n  <ng-content select=\"toolbar-item\" ngProjectAs=\"toolbar-item\"></ng-content>\r\n  <ng-content></ng-content>\r\n</bdb-full-table>\r\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { dataSource: [{
@@ -1757,10 +2268,10 @@ class MediaService extends BdbServiceRD {
             url: url,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1836,10 +2347,10 @@ class MediaDropDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: MediaDropDirective, isStandalone: true, selector: "[bdbMediaDrop]", outputs: { dropStart: "dropStart", dropComplete: "dropComplete", dropError: "dropError" }, host: { listeners: { "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)" }, properties: { "class": "this.hostClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MediaDropDirective, isStandalone: true, selector: "[bdbMediaDrop]", outputs: { dropStart: "dropStart", dropComplete: "dropComplete", dropError: "dropError" }, host: { listeners: { "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)" }, properties: { "class": "this.hostClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbMediaDrop]',
@@ -1868,6 +2379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 class BdbMediaUploadComponent {
     constructor() {
         this.class = 'bdb-media-upload';
+        this.nativeInputFile = viewChild('inputFile', ...(ngDevMode ? [{ debugName: "nativeInputFile" }] : []));
         this.mediaService = inject(MediaService);
         this.accept = 'image/bmp,image/jpg,image/jpeg,image/png,image/gif,image/webp,image/svg+xml,application/pdf,text/xml';
         this.uploadComplete = new EventEmitter();
@@ -1898,8 +2410,9 @@ class BdbMediaUploadComponent {
         }
     }
     selectFile() {
-        if (this.nativeInputFile) {
-            this.nativeInputFile.nativeElement.click();
+        const nativeInputFile = this.nativeInputFile();
+        if (nativeInputFile) {
+            nativeInputFile.nativeElement.click();
         }
     }
     onDropStart() {
@@ -1914,19 +2427,16 @@ class BdbMediaUploadComponent {
         this._pending = false;
         this.uploadComplete.emit($event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbMediaUploadComponent, isStandalone: true, selector: "bdb-media-upload", inputs: { accept: "accept" }, outputs: { uploadComplete: "uploadComplete", uploadError: "uploadError", uploadStart: "uploadStart" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "nativeInputFile", first: true, predicate: ["inputFile"], descendants: true }], ngImport: i0, template: "<div\r\n  class=\"drop-box\"\r\n  bdbMediaDrop\r\n  matRipple\r\n  (dropComplete)=\"onDropComplete($event)\"\r\n  (dropError)=\"onDropError($event)\"\r\n  (dropStart)=\"onDropStart()\"\r\n  (click)=\"selectFile()\">\r\n  <ng-content>\r\n    <ng-container *ngTemplateOutlet=\"uploadIcon\"></ng-container>\r\n  </ng-content>\r\n</div>\r\n<input type=\"file\" [accept]=\"accept\" (change)=\"onNativeInputFileSelect($event)\" #inputFile hidden />\r\n\r\n@if (pending) {\r\n  <div class=\"overlay\">\r\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n  </div>\r\n}\r\n\r\n<ng-template #uploadIcon>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\">\r\n    <path\r\n      d=\"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative}:host .overlay{position:absolute;inset:0;background-color:light-dark(rgba(255,255,255,.8),rgba(0,0,0,.8));z-index:1;display:flex;align-items:center;justify-content:start}.drop-box{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;background-color:var(--bdb-media-upload-container);border:1px dashed var(--bdb-media-upload-outline-color);cursor:pointer}.drop-box svg{flex:0 0 70%;object-fit:contain;max-width:90%;max-height:90%}.drop-box svg path{fill:var(--bdb-media-upload-fill)}.drop-box.hover svg path{fill:var(--bdb-sys-success-container)}.drop-box:hover{background-color:var(--bdb-media-upload-container-hover)}.upload-icon{height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: MediaDropDirective, selector: "[bdbMediaDrop]", outputs: ["dropStart", "dropComplete", "dropError"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbMediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbMediaUploadComponent, isStandalone: true, selector: "bdb-media-upload", inputs: { accept: "accept" }, outputs: { uploadComplete: "uploadComplete", uploadError: "uploadError", uploadStart: "uploadStart" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "nativeInputFile", first: true, predicate: ["inputFile"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"drop-box\"\r\n  bdbMediaDrop\r\n  matRipple\r\n  (dropComplete)=\"onDropComplete($event)\"\r\n  (dropError)=\"onDropError($event)\"\r\n  (dropStart)=\"onDropStart()\"\r\n  (click)=\"selectFile()\">\r\n  <ng-content>\r\n    <ng-container *ngTemplateOutlet=\"uploadIcon\"></ng-container>\r\n  </ng-content>\r\n</div>\r\n<input type=\"file\" [accept]=\"accept\" (change)=\"onNativeInputFileSelect($event)\" #inputFile hidden />\r\n\r\n@if (pending) {\r\n  <div class=\"overlay\">\r\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n  </div>\r\n}\r\n\r\n<ng-template #uploadIcon>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\">\r\n    <path\r\n      d=\"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative}:host .overlay{position:absolute;inset:0;background-color:light-dark(rgba(255,255,255,.8),rgba(0,0,0,.8));z-index:1;display:flex;align-items:center;justify-content:start}.drop-box{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;background-color:var(--bdb-media-upload-container);border:1px dashed var(--bdb-media-upload-outline-color);cursor:pointer}.drop-box svg{flex:0 0 70%;object-fit:contain;max-width:90%;max-height:90%}.drop-box svg path{fill:var(--bdb-media-upload-fill)}.drop-box.hover svg path{fill:var(--bdb-sys-success-container)}.drop-box:hover{background-color:var(--bdb-media-upload-container-hover)}.upload-icon{height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: MediaDropDirective, selector: "[bdbMediaDrop]", outputs: ["dropStart", "dropComplete", "dropError"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbMediaUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-media-upload', imports: [MatIconModule, DragDropModule, MediaDropDirective, NgTemplateOutlet, MatRippleModule, MatProgressBar], template: "<div\r\n  class=\"drop-box\"\r\n  bdbMediaDrop\r\n  matRipple\r\n  (dropComplete)=\"onDropComplete($event)\"\r\n  (dropError)=\"onDropError($event)\"\r\n  (dropStart)=\"onDropStart()\"\r\n  (click)=\"selectFile()\">\r\n  <ng-content>\r\n    <ng-container *ngTemplateOutlet=\"uploadIcon\"></ng-container>\r\n  </ng-content>\r\n</div>\r\n<input type=\"file\" [accept]=\"accept\" (change)=\"onNativeInputFileSelect($event)\" #inputFile hidden />\r\n\r\n@if (pending) {\r\n  <div class=\"overlay\">\r\n    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n  </div>\r\n}\r\n\r\n<ng-template #uploadIcon>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\">\r\n    <path\r\n      d=\"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;position:relative}:host .overlay{position:absolute;inset:0;background-color:light-dark(rgba(255,255,255,.8),rgba(0,0,0,.8));z-index:1;display:flex;align-items:center;justify-content:start}.drop-box{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;background-color:var(--bdb-media-upload-container);border:1px dashed var(--bdb-media-upload-outline-color);cursor:pointer}.drop-box svg{flex:0 0 70%;object-fit:contain;max-width:90%;max-height:90%}.drop-box svg path{fill:var(--bdb-media-upload-fill)}.drop-box.hover svg path{fill:var(--bdb-sys-success-container)}.drop-box:hover{background-color:var(--bdb-media-upload-container-hover)}.upload-icon{height:100%;width:100%}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
-            }], nativeInputFile: [{
-                type: ViewChild,
-                args: ['inputFile', { static: false }]
-            }], accept: [{
+            }], nativeInputFile: [{ type: i0.ViewChild, args: ['inputFile', { isSignal: true }] }], accept: [{
                 type: Input
             }], uploadComplete: [{
                 type: Output
@@ -1978,7 +2488,6 @@ class BdbMediaInputComponent {
         this.onChange = () => { };
         this.onTouched = () => { };
         // Replace the provider from above with this.
-        console.log(this.id);
         if (this.ngControl != null) {
             // const test = (this.ngControl.control as FormControl<Media | undefined>) != null;
             // Setting the value accessor directly (instead of using
@@ -2064,10 +2573,10 @@ class BdbMediaInputComponent {
         this.onChange(undefined);
         this.touched = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: BdbMediaInputComponent, isStandalone: true, selector: "bdb-media-input", inputs: { clearOnDragOver: "clearOnDragOver", required: "required", disabled: "disabled", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"] }, host: { properties: { "class": "this.class", "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: BdbMediaInputComponent }], ngImport: i0, template: "<div>\r\n  @if (value) {\r\n    <button mat-mini-fab class=\"error\" (click)=\"clear()\"><mat-icon>clear</mat-icon></button>\r\n    <bdb-media-display\r\n      [media]=\"value\"\r\n      [mode]=\"'details'\"\r\n      detailsOverlay=\"always\"\r\n      (dragover)=\"clearOnDragOver ? clear() : null\" />\r\n  } @else {\r\n    @if (error) {\r\n      <bdb-alert-error-response\r\n        [value]=\"error\"\r\n        [dismissable]=\"true\"\r\n        (dismiss)=\"error = undefined\"\r\n        (dragover)=\"error = undefined\" />\r\n    } @else {\r\n      <bdb-media-upload (uploadComplete)=\"onUploadComplete($event)\" (uploadError)=\"error = $event\">\r\n        <ng-content>\r\n          <ng-container *ngTemplateOutlet=\"uploadIcon\"></ng-container>\r\n        </ng-content>\r\n      </bdb-media-upload>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadIcon>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\">\r\n    <path\r\n      d=\"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;aspect-ratio:1/1;overflow:hidden}:host>div{flex:1;display:flex;align-items:stretch;justify-content:stretch;position:relative}:host>div bdb-media-upload{--bdb-media-upload-container: var(--bdb-media-input-container);--bdb-media-upload-container-hover: var(--bdb-media-input-container-hover);--bdb-media-upload-outline-color: var(--bdb-media-input-outline-color);--bdb-media-upload-fill: var(--bdb-media-input-fill);flex:1}:host>div bdb-media-display{--bdb-media-display-container: var(--bdb-media-input-container);--bdb-media-display-container-hover: var(--bdb-media-input-container-hover);--bdb-media-display-outline-color: var(--bdb-media-input-outline-color);--bdb-media-display-fill: var(--bdb-media-input-fill);flex:1;display:flex;align-items:center;justify-content:center}:host>div>button{position:absolute;visibility:hidden;top:0;right:0;margin:4px;z-index:2}:host>div:hover>button{visibility:visible}:host svg{flex:0 0 70%;object-fit:contain;max-width:90%;max-height:90%}:host svg path{fill:var(--bdb-media-upload-fill)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BdbMediaUploadComponent, selector: "bdb-media-upload", inputs: ["accept"], outputs: ["uploadComplete", "uploadError", "uploadStart"] }, { kind: "component", type: BdbMediaDisplayComponent, selector: "bdb-media-display", inputs: ["media", "mode", "overlayBehavior", "width", "height", "alt"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbMediaInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbMediaInputComponent, isStandalone: true, selector: "bdb-media-input", inputs: { clearOnDragOver: "clearOnDragOver", required: "required", disabled: "disabled", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"] }, host: { properties: { "class": "this.class", "id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: BdbMediaInputComponent }], ngImport: i0, template: "<div>\r\n  @if (value) {\r\n    <button mat-mini-fab class=\"error\" (click)=\"clear()\"><mat-icon>clear</mat-icon></button>\r\n    <bdb-media-display\r\n      [media]=\"value\"\r\n      [mode]=\"'details'\"\r\n      detailsOverlay=\"always\"\r\n      (dragover)=\"clearOnDragOver ? clear() : null\" />\r\n  } @else {\r\n    @if (error) {\r\n      <bdb-alert-error-response\r\n        [value]=\"error\"\r\n        [dismissable]=\"true\"\r\n        (dismiss)=\"error = undefined\"\r\n        (dragover)=\"error = undefined\" />\r\n    } @else {\r\n      <bdb-media-upload (uploadComplete)=\"onUploadComplete($event)\" (uploadError)=\"error = $event\">\r\n        <ng-content>\r\n          <ng-container *ngTemplateOutlet=\"uploadIcon\"></ng-container>\r\n        </ng-content>\r\n      </bdb-media-upload>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #uploadIcon>\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\">\r\n    <path\r\n      d=\"M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:row;align-items:stretch;justify-content:stretch;aspect-ratio:1/1;overflow:hidden}:host>div{flex:1;display:flex;align-items:stretch;justify-content:stretch;position:relative}:host>div bdb-media-upload{--bdb-media-upload-container: var(--bdb-media-input-container);--bdb-media-upload-container-hover: var(--bdb-media-input-container-hover);--bdb-media-upload-outline-color: var(--bdb-media-input-outline-color);--bdb-media-upload-fill: var(--bdb-media-input-fill);flex:1}:host>div bdb-media-display{--bdb-media-display-container: var(--bdb-media-input-container);--bdb-media-display-container-hover: var(--bdb-media-input-container-hover);--bdb-media-display-outline-color: var(--bdb-media-input-outline-color);--bdb-media-display-fill: var(--bdb-media-input-fill);flex:1;display:flex;align-items:center;justify-content:center}:host>div>button{position:absolute;visibility:hidden;top:0;right:0;margin:4px;z-index:2}:host>div:hover>button{visibility:visible}:host svg{flex:0 0 70%;object-fit:contain;max-width:90%;max-height:90%}:host svg path{fill:var(--bdb-media-upload-fill)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BdbMediaUploadComponent, selector: "bdb-media-upload", inputs: ["accept"], outputs: ["uploadComplete", "uploadError", "uploadStart"] }, { kind: "component", type: BdbMediaDisplayComponent, selector: "bdb-media-display", inputs: ["media", "mode", "overlayBehavior", "width", "height", "alt"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbMediaInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-media-input', imports: [
                         CommonModule,
@@ -2106,12 +2615,12 @@ class MediaTableComponent {
         this.cb = inject((BdbColumnBuilder));
         this.columns = this.cb.build(this.cb.enum(x => x.type, 'Type', { pipe: MediaTypePipe, width: 120 }), this.cb.string(x => x.fileName, 'Bestandsnaam'), this.cb.string(x => x.reference, 'Referentie', { width: 200 }), this.cb.number(x => x.fileSize, 'Bestandsgrootte', { pipe: FileSizePipe, width: 200 }), this.cb.number(x => x.height, 'Hoogte', { width: 200 }), this.cb.number(x => x.width, 'Breedte', { width: 200 }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: MediaTableComponent, isStandalone: true, selector: "bdb-media-table", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { contextAction: "contextAction", rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MediaTableComponent, isStandalone: true, selector: "bdb-media-table", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { contextAction: "contextAction", rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MediaTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-media-table', imports: [CommonModule, BdbTableComponent], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n</bdb-table>\r\n" }]
+            args: [{ selector: 'bdb-media-table', imports: [BdbTableComponent], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n</bdb-table>\r\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], displayedColumns: [{
@@ -2147,10 +2656,10 @@ class TaskLogOutcomePipe {
         }
         return TaskLogOutcomeMap.get(value) ?? '???';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogOutcomePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TaskLogOutcomePipe, isStandalone: true, name: "taskLogOutcome" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogOutcomePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TaskLogOutcomePipe, isStandalone: true, name: "taskLogOutcome" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogOutcomePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogOutcomePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogOutcome',
@@ -2179,10 +2688,10 @@ class TaskLogStatusPipe {
         }
         return TaskLogStatusMap.get(value) ?? '???';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TaskLogStatusPipe, isStandalone: true, name: "taskLogStatus" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TaskLogStatusPipe, isStandalone: true, name: "taskLogStatus" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogStatusPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogStatusPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogStatus',
@@ -2230,10 +2739,10 @@ class TaskLogParameterValuePipe {
                 }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterValuePipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterValuePipe, isStandalone: true, name: "taskLogParameterValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogParameterValuePipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TaskLogParameterValuePipe, isStandalone: true, name: "taskLogParameterValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogParameterValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogParameterValue',
@@ -2288,12 +2797,12 @@ class UserTableComponent {
         //       break;
         //   }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserTableComponent, deps: [{ token: i1$1.MatDialog }, { token: BdbColumnBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: UserTableComponent, isStandalone: true, selector: "bdb-user-table[dataSource]", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"onContextAction($event)\"\r\n  [displayedColumns]=\"displayedColumns\">\r\n  <ng-template bdbCellDef=\"roles\" let-row>\r\n    {{ row.roles }}\r\n  </ng-template>\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserTableComponent, deps: [{ token: i1$1.MatDialog }, { token: BdbColumnBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: UserTableComponent, isStandalone: true, selector: "bdb-user-table[dataSource]", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"onContextAction($event)\"\r\n  [displayedColumns]=\"displayedColumns\">\r\n  <ng-template bdbCellDef=\"roles\" let-row>\r\n    {{ row.roles }}\r\n  </ng-template>\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-user-table[dataSource]', imports: [CommonModule, BdbTableComponent, MatDialogModule, BdbCellDirective], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"onContextAction($event)\"\r\n  [displayedColumns]=\"displayedColumns\">\r\n  <ng-template bdbCellDef=\"roles\" let-row>\r\n    {{ row.roles }}\r\n  </ng-template>\r\n</bdb-table>\r\n" }]
+            args: [{ selector: 'bdb-user-table[dataSource]', imports: [BdbTableComponent, MatDialogModule, BdbCellDirective], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"onContextAction($event)\"\r\n  [displayedColumns]=\"displayedColumns\">\r\n  <ng-template bdbCellDef=\"roles\" let-row>\r\n    {{ row.roles }}\r\n  </ng-template>\r\n</bdb-table>\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
                 type: Input
             }], displayedColumns: [{
@@ -2313,10 +2822,10 @@ class BdbFlexChildDirective {
     ngOnInit() {
         this.renderer.setStyle(this.element.nativeElement, 'flex', this.bdbFlexChild);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFlexChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BdbFlexChildDirective, isStandalone: true, selector: "[bdbFlexChild]", inputs: { bdbFlexChild: "bdbFlexChild" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFlexChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BdbFlexChildDirective, isStandalone: true, selector: "[bdbFlexChild]", inputs: { bdbFlexChild: "bdbFlexChild" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFlexChildDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFlexChildDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbFlexChild]',
@@ -2440,10 +2949,10 @@ class BdbGridChildDirective {
         }
         return [targetList.head.value, targetList.tail.value];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbGridChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BdbGridChildDirective, isStandalone: true, selector: "[bdbGridChild], [bdbGridColumn], [bdbGridRow]", inputs: { bdbGridChild: "bdbGridChild", bdbGridRow: "bdbGridRow", bdbGridColumn: "bdbGridColumn" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BdbGridChildDirective, isStandalone: true, selector: "[bdbGridChild], [bdbGridColumn], [bdbGridRow]", inputs: { bdbGridChild: "bdbGridChild", bdbGridRow: "bdbGridRow", bdbGridColumn: "bdbGridColumn" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbGridChildDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridChildDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbGridChild], [bdbGridColumn], [bdbGridRow]',
@@ -2542,10 +3051,10 @@ class BdbGridDirective {
             this.renderer.setStyle(this.element.nativeElement, selector, result.input);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbGridDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: BdbGridDirective, isStandalone: true, selector: "[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]", inputs: { bdbGrid: "bdbGrid", bdbGridColumns: "bdbGridColumns", bdbGridRows: "bdbGridRows", bdbGridGap: "bdbGridGap" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: BdbGridDirective, isStandalone: true, selector: "[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]", inputs: { bdbGrid: "bdbGrid", bdbGridColumns: "bdbGridColumns", bdbGridRows: "bdbGridRows", bdbGridGap: "bdbGridGap" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbGridDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]',
@@ -2570,10 +3079,10 @@ class BdbCollapseRowComponent {
     get isCollapsed() {
         return this.collapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbCollapseRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: BdbCollapseRowComponent, isStandalone: true, selector: "bdb-collapse-row", inputs: { collapsed: "collapsed", canCollapse: "canCollapse" }, host: { properties: { "class": "this.class", "class.collapsed": "this.isCollapsed" } }, ngImport: i0, template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbCollapseRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BdbCollapseRowComponent, isStandalone: true, selector: "bdb-collapse-row", inputs: { collapsed: "collapsed", canCollapse: "canCollapse" }, host: { properties: { "class": "this.class", "class.collapsed": "this.isCollapsed" } }, ngImport: i0, template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbCollapseRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbCollapseRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-collapse-row', imports: [MatIconModule], template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"] }]
         }], propDecorators: { collapsed: [{
@@ -2593,12 +3102,12 @@ class BdbFieldComponent {
         this.class = 'bdb-field';
         this.label = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: BdbFieldComponent, isStandalone: true, selector: "bdb-field", inputs: { label: "label" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--bdb-field-container-color);border:1px solid var(--bdb-field-border-color);border-bottom-width:2px;color:var(--bdb-field-color);border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));min-height:52px;gap:2px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic;color:var(--bdb-field-label-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: BdbFieldComponent, isStandalone: true, selector: "bdb-field", inputs: { label: "label" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--bdb-field-container-color);border:1px solid var(--bdb-field-border-color);border-bottom-width:2px;color:var(--bdb-field-color);border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));min-height:52px;gap:2px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic;color:var(--bdb-field-label-color)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-field', imports: [CommonModule], template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--bdb-field-container-color);border:1px solid var(--bdb-field-border-color);border-bottom-width:2px;color:var(--bdb-field-color);border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));min-height:52px;gap:2px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic;color:var(--bdb-field-label-color)}\n"] }]
+            args: [{ selector: 'bdb-field', imports: [], template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--bdb-field-container-color);border:1px solid var(--bdb-field-border-color);border-bottom-width:2px;color:var(--bdb-field-color);border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));min-height:52px;gap:2px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic;color:var(--bdb-field-label-color)}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding
             }], label: [{
@@ -2612,10 +3121,10 @@ class PlainNumberPipe {
         }
         return '' + value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PlainNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: PlainNumberPipe, isStandalone: true, name: "bdbPlainNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlainNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: PlainNumberPipe, isStandalone: true, name: "bdbPlainNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PlainNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlainNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'bdbPlainNumber',
@@ -2623,6 +3132,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 }]
         }] });
 
+/// <summary>
+/// A data source that can be used with the BdbTableComponent, that supports persistance of the state (e.g. in queryParameters).
+/// </summary>
+class BdbDataSourceV2 {
+    get state() {
+        return {
+            pageSize: this.pageSize == this.defaultPageSize ? undefined : this.pageSize,
+            page: this.page == this.defaultPage ? undefined : this.page,
+            sortField: this.sortField == this.defaultSortField ? undefined : this.sortField,
+            sortDirection: this.sortDirection == this.defaultSortDirection ? undefined : this.sortDirection,
+            query: this.query,
+        };
+    }
+    set state(value) {
+        this.pageSize = value['pageSize'];
+        this.page = value['page'];
+        this.sortField = value['sortField'];
+        this.sortDirection = value['sortDirection'];
+        this.query = value['query'];
+    }
+    isCurrentState(state) {
+        return (this.pageSize === state.pageSize &&
+            this.page === state.page &&
+            this.sortField === state.sortField &&
+            this.sortDirection === state.sortDirection &&
+            this.query === state.query);
+    }
+    get data() {
+        return this.responseSubject.getValue()?.rows ?? [];
+    }
+    get identifier() {
+        return this._identifier;
+    }
+    set identifier(value) {
+        this._identifier = value;
+        this.setPersistence();
+    }
+    constructor() {
+        // abstract service: BdbServiceR<BdbEntity, TEntity>;
+        this.destroyRef = inject(DestroyRef);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.defaultPageSize = 25;
+        this.defaultPage = 0;
+        this.defaultSortField = 'id';
+        this.defaultSortDirection = 'desc';
+        this.requestSubject = new Subject();
+        this.request$ = this.requestSubject.asObservable();
+        this.responseSubject = new BehaviorSubject(undefined);
+        this.response$ = this.responseSubject.asObservable();
+        this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+        this.loading = this._loading.asReadonly();
+        this._error = signal(undefined, ...(ngDevMode ? [{ debugName: "_error" }] : []));
+        this.error = this._error.asReadonly();
+        this.request$
+            .pipe(tap$1(() => {
+            this._loading.set(true);
+            this._error.set(undefined);
+        }), switchMap((x) => this.loadMethod(x).pipe(catchError$1((err) => {
+            this._error.set(err);
+            return of({ page: 0, count: 0, rows: [], pageSize: 15 });
+        }), tap$1(response => {
+            this.responseSubject.next(response);
+        }), finalize(() => this._loading.set(false)))))
+            .subscribe();
+    }
+    disconnect() {
+        return;
+    }
+    // Connects the data source to the table.
+    connect() {
+        return this.responseSubject.asObservable().pipe(map(x => x?.rows ?? []));
+    }
+    load() {
+        this.requestSubject.next(this.createRequest());
+    }
+    // Can be overriden in a child class to create a custom request.
+    createRequest() {
+        const filters = this.createFilters();
+        return {
+            page: this.page ?? this.defaultPage,
+            pageSize: this.pageSize ?? this.defaultPageSize,
+            sortField: this.sortField ?? this.defaultSortField,
+            sortDirection: this.sortDirection ?? this.defaultSortDirection,
+            query: this.query,
+            filter: this.combineFilters(filters),
+        };
+    }
+    // if an identifier is set, this method sets up persistence of the datasource state in query params
+    setPersistence() {
+        // READ
+        if (this._persistenceRead) {
+            this._persistenceRead.unsubscribe();
+            this._persistenceRead = undefined;
+        }
+        if (this.identifier !== undefined) {
+            const identifier = this.identifier;
+            this._persistenceRead = merge(
+            // 0 is the initial load of a datasource state, not a popstate event
+            of(0), this.router.events.pipe(takeUntilDestroyed(this.destroyRef), filter$1(x => x instanceof NavigationStart && x.navigationTrigger === 'popstate'))).subscribe({
+                next: () => {
+                    const stateString = this.route.snapshot.queryParams[identifier];
+                    let state = {};
+                    try {
+                        state = JSON.parse(stateString ?? '{}', (k, v) => this.reviveDates(k, v));
+                    }
+                    catch (e) {
+                        console.log('Unable to parse state from query parameters');
+                        this.router.navigate([], {
+                            relativeTo: this.route,
+                            queryParams: {
+                                [identifier]: undefined,
+                            },
+                            queryParamsHandling: 'merge',
+                        });
+                    }
+                    if (this.isCurrentState(state)) {
+                        return;
+                    }
+                    this.state = state;
+                    this.load();
+                },
+            });
+            //WRITE
+            if (this._persistenceWrite) {
+                this._persistenceWrite.unsubscribe();
+                this._persistenceWrite = undefined;
+            }
+            this.request$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+                next: () => {
+                    let stateString = JSON.stringify(this.state);
+                    stateString = stateString === '{}' ? undefined : stateString;
+                    const qp = {};
+                    qp[this.identifier] = stateString;
+                    this.router.navigate([], {
+                        relativeTo: this.route,
+                        replaceUrl: false,
+                        queryParams: qp,
+                        queryParamsHandling: 'merge',
+                    });
+                },
+            });
+        }
+    }
+    // Can be overriden in a child class to create filters based on external elements (e.g. input fields).
+    createFilters() {
+        return undefined;
+    }
+    // Combines filters into a single filter.
+    combineFilters(filters, combine = 'And') {
+        if (!filters || filters.length === 0) {
+            return undefined;
+        }
+        if (filters.length === 1) {
+            return filters[0];
+        }
+        return {
+            type: 'Group',
+            combine: combine,
+            filters: filters,
+        };
+    }
+    //todo: https://angular.dev/guide/signals#signal-equality-functions?
+    arrayEquals(first, second) {
+        if (!first || !second) {
+            return false;
+        }
+        return (first.length === second.length && first.every(firstValue => second.some(secondValue => secondValue == firstValue)));
+    }
+    // JSON.stringify automatically converts Date objects to ISO strings
+    // JSON.parse does _not_ automaticaly convert so we need to convert them back to Date here
+    reviveDates(key, value) {
+        if (typeof value === 'string') {
+            if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)) {
+                return parseISO(value);
+            }
+        }
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbDataSourceV2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbDataSourceV2 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbDataSourceV2, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class BdbServiceCR extends BdbServiceR {
     create(createModel) {
         return this.httpClient.post(this.baseUrl, createModel);
@@ -2663,10 +3358,10 @@ class ExceptionLogService extends BdbServiceR {
     constructor() {
         super('exception-log');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExceptionLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExceptionLogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExceptionLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExceptionLogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExceptionLogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExceptionLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2677,10 +3372,10 @@ class RoleService extends BdbServiceR {
     constructor() {
         super('role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RoleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2694,10 +3389,10 @@ class TaskLogService extends BdbServiceCR {
     start(id) {
         return this.httpClient.post(`${this.baseUrl}/start`, { id });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2708,10 +3403,10 @@ class TaskLogParameterService extends BdbServiceR {
     constructor() {
         super('task-log-parameter');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogParameterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogParameterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogParameterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2722,10 +3417,10 @@ class TaskLogScheduleService extends BdbServiceCRUD {
     constructor() {
         super('task-log-schedule');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogScheduleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogScheduleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogScheduleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogScheduleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogScheduleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogScheduleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2736,10 +3431,10 @@ class UserService extends BdbServiceCRUD {
     constructor() {
         super('user');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2750,10 +3445,10 @@ class UserRoleService extends BdbServiceCRD {
     constructor() {
         super('user-role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserRoleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserRoleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserRoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UserRoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2773,10 +3468,10 @@ class TaskLogSchedulerService extends BdbService {
     stopScheduler() {
         return this.httpClient.get(`${this.baseUrl}/stop`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogSchedulerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogSchedulerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogSchedulerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogSchedulerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2812,16 +3507,120 @@ class TaskLogTypeService extends BdbService {
         }
         return of(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogTypeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogTypeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogTypeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TaskLogTypeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
+class BdbAppLayoutComponent {
+    constructor() {
+        this.modules = input([], ...(ngDevMode ? [{ debugName: "modules" }] : []));
+        this.appTitle = input('', ...(ngDevMode ? [{ debugName: "appTitle" }] : []));
+        this.version = input('', ...(ngDevMode ? [{ debugName: "version" }] : []));
+        this.opened = true;
+        this.sidenavMode = 'side';
+        this.isHandset = signal(false, ...(ngDevMode ? [{ debugName: "isHandset" }] : []));
+        this.authService = inject(AuthService);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.bdbOptions = inject(BDB_OPTIONS);
+        this.logoutRoutePath = this.bdbOptions.authOptions?.logoutPath ?? 'logout';
+        this.appToolbar = viewChild.required('appToolbar', { read: ElementRef });
+        this.appToolbarHeight = 64;
+        effect(() => {
+            if (this.isHandset()) {
+                this.sidenavMode = 'over';
+                this.opened = false;
+            }
+            else {
+                this.sidenavMode = 'side';
+                this.opened = true;
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.setAppToolbarHeight();
+        this.breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
+            this.isHandset.set(result.matches);
+            this.setAppToolbarHeight();
+        });
+        this.changeDetectorRef.detectChanges();
+    }
+    setAppToolbarHeight() {
+        this.appToolbarHeight = this.appToolbar().nativeElement.offsetHeight;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbAppLayoutComponent, isStandalone: true, selector: "bdb-app-layout", inputs: { modules: { classPropertyName: "modules", publicName: "modules", isSignal: true, isRequired: false, transformFunction: null }, appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: false, transformFunction: null }, version: { classPropertyName: "version", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "appToolbar", first: true, predicate: ["appToolbar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-toolbar class=\"primary\" #appToolbar>\r\n  <button matIconButton (click)=\"opened = !opened\" class=\"sidenav-toggle\"><mat-icon>menu</mat-icon></button>\r\n  @if (!isHandset()) {\r\n    <a routerLink=\"/\" style=\"text-decoration: none; color: inherit\">{{ appTitle() }}</a>\r\n    <div class=\"version\">{{ version() }}</div>\r\n  }\r\n  <div style=\"flex: 1 1 auto\"></div>\r\n  @for (module of modules(); track module) {\r\n    <a mat-flat-button [routerLink]=\"module.path\" [routerLinkActive]=\"'active'\">\r\n      <mat-icon>{{ module.icon }}</mat-icon>\r\n      @if (!isHandset()) {\r\n        {{ module.name }}\r\n      }\r\n    </a>\r\n  }\r\n\r\n  <button matIconButton [matMenuTriggerFor]=\"menu\"><mat-icon>account_circle</mat-icon></button>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <div mat-menu-item disabled>\r\n      {{ (authService.account$ | async)?.email }}\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    <a [routerLink]=\"['/', logoutRoutePath]\" mat-menu-item> <mat-icon>logout</mat-icon> Uitloggen </a>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n\r\n<mat-sidenav-container [style]=\"{ height: 'calc(100vh - ' + appToolbarHeight + 'px)' }\">\r\n  <mat-sidenav\r\n    #sidenav\r\n    [mode]=\"sidenavMode\"\r\n    [opened]=\"opened\"\r\n    [fixedInViewport]=\"true\"\r\n    [fixedTopGap]=\"appToolbarHeight\"\r\n    style=\"width: 128px\">\r\n    <div style=\"height: 100%; display: flex; flex-direction: column\">\r\n      <div style=\"flex: 1; padding-top: 16px\">\r\n        <router-outlet name=\"sidenav\"></router-outlet>\r\n      </div>\r\n      <mat-divider style=\"margin: 4px 8px\"></mat-divider>\r\n      <div class=\"powered-by\">\r\n        Powered by\r\n        <a href=\"https://www.devopmaat.nl\" style=\"flex: 0 0 100px; margin: 0; padding: 0; height: 22px\">\r\n          <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </mat-sidenav>\r\n\r\n  <mat-sidenav-content style=\"height: 100%; padding: 8px\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n\r\n<ng-template #logo>\r\n  <svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 1856.15 409.6\">\r\n    <defs>\r\n      <style>\r\n        .cls-1 {\r\n          fill: #ccef29;\r\n          stroke-width: 0px;\r\n        }\r\n      </style>\r\n    </defs>\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1668.43 35.77 1677.3 16.25 1673.72 14.62 1628.59 113.95 1607.4 63.84 1544.56 63.84 1479.16 203.78 1514.32 288.98 1559.76 188.98 1575.49 149.35 1576.55 152.04 1576.7 151.71 1583.07 168.68 1592.63 193.07 1566.72 250.09 1567.43 250.41 1567.4 250.46 1567.53 250.46 1570.29 251.72 1570.87 250.46 1614.18 250.46 1629.9 288.98 1702.57 288.98 1630.66 118.87 1641.05 96.02 1700.36 96.02 1700.36 259.37 1768.01 259.37 1768.01 96.02 1832.74 96.02 1832.74 35.77 1668.43 35.77\" />\r\n    <path\r\n      class=\"cls-1\"\r\n      d=\"M710.82,202.19c-9.43-9.96-15.2-23.91-15.2-39.71,0-30.92,21.98-54.24,51.13-54.24,2.24,0,4.42.18,6.57.44l26.63-58.6c-10.35-2.69-21.23-4.24-32.58-4.24-68.2,0-121.63,51.51-121.63,117.28v.62c0,42.69,22.72,79.24,57.32,99.55l27.76-61.08Z\" />\r\n    <path\r\n      class=\"cls-1\"\r\n      d=\"M1064.99,81.68l-28.98,63.77c-13.73-27.69-44.26-43.85-86.4-43.85h-97.35v1.98c-10.21-17.07-24.79-31.27-42.36-41.33l-27.41,60.32c10.13,9.88,16.33,24.12,16.33,40.53v.62c0,30.93-22.11,54.24-51.44,54.24-2.45,0-4.83-.23-7.18-.58l38.37-84.44-3.58-1.63-107,235.46,3.58,1.63,42-92.42c10.52,2.8,21.62,4.38,33.19,4.38,45.66,0,84.69-23.09,105.51-58.27v105.33h68.32v-62.25h25.92c13.69,0,26.15-1.7,37.3-4.84l-25.81,56.8,3.58,1.63,27.25-59.97c.29-.1.6-.18.89-.28l48.82-107.42c-.12-.29-.24-.58-.36-.87l30.41-66.92-3.58-1.63ZM945.25,209.92h-24.67v-49.65h24.36c14.1,0,30.9,4.28,30.9,25.29,0,15.02-11.72,24.35-30.58,24.35Z\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1265.53 260.24 1322.12 135.73 1322.12 134.06 1350.72 71.12 1347.15 69.49 1322.12 124.57 1322.12 36.64 1252.81 36.64 1203.53 116.6 1154.26 36.64 1084.95 190.72 1084.95 260.24 1151.37 260.24 1151.37 146.2 1200.18 220.79 1205.66 220.79 1254.78 145.61 1254.78 260.24 1260.46 260.24 1240.14 304.95 1243.72 306.58 1264.78 260.24 1265.53 260.24\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1363.96 287.03 1387.95 232.64 1370.29 232.64 1388.83 185.93 1398.11 209.61 1433.24 129.98 1420.74 100.41 1357.9 100.41 1262.73 325.56 1334.19 325.56 1349.6 287.03 1363.96 287.03\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1446.08 159.51 1445.64 159.31 1443.05 153.19 1407.05 232.41 1407.14 232.64 1406.95 232.64 1382.23 287.03 1383.82 287.03 1335.5 393.35 1339.08 394.97 1388.13 287.03 1427.52 287.03 1443.24 325.56 1515.91 325.56 1445.9 159.92 1446.08 159.51\" />\r\n    <path\r\n      class=\"cls-1\"\r\n      d=\"M286.68,240.49h34.46l-6.73,14.81,3.58,1.63L424.99,21.48l-3.58-1.63-37.31,82.1h-154.13c-17.36-40.76-59.5-65.32-116.92-65.32H25.9v223.6h1.81L93.55,115.36v-17.86h20.42c34.79,0,55.56,18.93,55.56,51.24s-20.77,50.62-55.56,50.62h-20.25l41.26-90.8-3.58-1.63L24.41,342.4l3.58,1.63,38.07-83.78h45.75c48.24,0,86.41-18.25,107.83-48.97v114.28h182.92v-58.71h-115.89v-26.35ZM286.68,160.66h70.74l-11.28,24.81h-59.47v-24.81Z\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"462.51 199.44 417.35 73.63 377.42 161.49 431.5 295.75 492.28 295.75 582.98 70.6 508.75 70.6 462.51 199.44\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host mat-sidenav-container{height:calc(100vh - 64px)}:host{--mat-sidenav-container-shape: 0;--mat-sidenav-container-elevation-shadow: var(--mat-sys-level2);--mat-sidenav-container-background-color: var(--mat-sys-surface-container-low);--mat-sidenav-content-background-color: var(--mat-sys-surface-container-highest);--mat-sidenav-container-divider-color: var(--mat-sys-outline-variant)}:host .mat-drawer-side{box-shadow:var(--mat-sys-level2)}mat-toolbar{--mat-icon-button-icon-color: var(--mat-sys-on-primary);box-shadow:var(--mat-sys-level2);position:sticky;z-index:2;display:flex;gap:8px}a.active{--mat-button-filled-container-color: var(--mat-sys-secondary)}.content-container{padding:8px;display:flex;flex-direction:column;gap:8px}.powered-by{font-size:10px;color:var(--mat-sys-on-surface-variant);font-style:italic;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:4px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i5$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i5$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbAppLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-app-layout', imports: [
+                        RouterModule,
+                        NgTemplateOutlet,
+                        MatToolbar,
+                        MatButtonModule,
+                        MatSidenavModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatListModule,
+                        MatDividerModule,
+                        AsyncPipe,
+                    ], template: "<mat-toolbar class=\"primary\" #appToolbar>\r\n  <button matIconButton (click)=\"opened = !opened\" class=\"sidenav-toggle\"><mat-icon>menu</mat-icon></button>\r\n  @if (!isHandset()) {\r\n    <a routerLink=\"/\" style=\"text-decoration: none; color: inherit\">{{ appTitle() }}</a>\r\n    <div class=\"version\">{{ version() }}</div>\r\n  }\r\n  <div style=\"flex: 1 1 auto\"></div>\r\n  @for (module of modules(); track module) {\r\n    <a mat-flat-button [routerLink]=\"module.path\" [routerLinkActive]=\"'active'\">\r\n      <mat-icon>{{ module.icon }}</mat-icon>\r\n      @if (!isHandset()) {\r\n        {{ module.name }}\r\n      }\r\n    </a>\r\n  }\r\n\r\n  <button matIconButton [matMenuTriggerFor]=\"menu\"><mat-icon>account_circle</mat-icon></button>\r\n  <mat-menu #menu=\"matMenu\">\r\n    <div mat-menu-item disabled>\r\n      {{ (authService.account$ | async)?.email }}\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    <a [routerLink]=\"['/', logoutRoutePath]\" mat-menu-item> <mat-icon>logout</mat-icon> Uitloggen </a>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n\r\n<mat-sidenav-container [style]=\"{ height: 'calc(100vh - ' + appToolbarHeight + 'px)' }\">\r\n  <mat-sidenav\r\n    #sidenav\r\n    [mode]=\"sidenavMode\"\r\n    [opened]=\"opened\"\r\n    [fixedInViewport]=\"true\"\r\n    [fixedTopGap]=\"appToolbarHeight\"\r\n    style=\"width: 128px\">\r\n    <div style=\"height: 100%; display: flex; flex-direction: column\">\r\n      <div style=\"flex: 1; padding-top: 16px\">\r\n        <router-outlet name=\"sidenav\"></router-outlet>\r\n      </div>\r\n      <mat-divider style=\"margin: 4px 8px\"></mat-divider>\r\n      <div class=\"powered-by\">\r\n        Powered by\r\n        <a href=\"https://www.devopmaat.nl\" style=\"flex: 0 0 100px; margin: 0; padding: 0; height: 22px\">\r\n          <ng-container *ngTemplateOutlet=\"logo\"></ng-container>\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </mat-sidenav>\r\n\r\n  <mat-sidenav-content style=\"height: 100%; padding: 8px\">\r\n    <router-outlet></router-outlet>\r\n  </mat-sidenav-content>\r\n</mat-sidenav-container>\r\n\r\n<ng-template #logo>\r\n  <svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 1856.15 409.6\">\r\n    <defs>\r\n      <style>\r\n        .cls-1 {\r\n          fill: #ccef29;\r\n          stroke-width: 0px;\r\n        }\r\n      </style>\r\n    </defs>\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1668.43 35.77 1677.3 16.25 1673.72 14.62 1628.59 113.95 1607.4 63.84 1544.56 63.84 1479.16 203.78 1514.32 288.98 1559.76 188.98 1575.49 149.35 1576.55 152.04 1576.7 151.71 1583.07 168.68 1592.63 193.07 1566.72 250.09 1567.43 250.41 1567.4 250.46 1567.53 250.46 1570.29 251.72 1570.87 250.46 1614.18 250.46 1629.9 288.98 1702.57 288.98 1630.66 118.87 1641.05 96.02 1700.36 96.02 1700.36 259.37 1768.01 259.37 1768.01 96.02 1832.74 96.02 1832.74 35.77 1668.43 35.77\" />\r\n    <path\r\n      class=\"cls-1\"\r\n      d=\"M710.82,202.19c-9.43-9.96-15.2-23.91-15.2-39.71,0-30.92,21.98-54.24,51.13-54.24,2.24,0,4.42.18,6.57.44l26.63-58.6c-10.35-2.69-21.23-4.24-32.58-4.24-68.2,0-121.63,51.51-121.63,117.28v.62c0,42.69,22.72,79.24,57.32,99.55l27.76-61.08Z\" />\r\n    <path\r\n      class=\"cls-1\"\r\n      d=\"M1064.99,81.68l-28.98,63.77c-13.73-27.69-44.26-43.85-86.4-43.85h-97.35v1.98c-10.21-17.07-24.79-31.27-42.36-41.33l-27.41,60.32c10.13,9.88,16.33,24.12,16.33,40.53v.62c0,30.93-22.11,54.24-51.44,54.24-2.45,0-4.83-.23-7.18-.58l38.37-84.44-3.58-1.63-107,235.46,3.58,1.63,42-92.42c10.52,2.8,21.62,4.38,33.19,4.38,45.66,0,84.69-23.09,105.51-58.27v105.33h68.32v-62.25h25.92c13.69,0,26.15-1.7,37.3-4.84l-25.81,56.8,3.58,1.63,27.25-59.97c.29-.1.6-.18.89-.28l48.82-107.42c-.12-.29-.24-.58-.36-.87l30.41-66.92-3.58-1.63ZM945.25,209.92h-24.67v-49.65h24.36c14.1,0,30.9,4.28,30.9,25.29,0,15.02-11.72,24.35-30.58,24.35Z\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1265.53 260.24 1322.12 135.73 1322.12 134.06 1350.72 71.12 1347.15 69.49 1322.12 124.57 1322.12 36.64 1252.81 36.64 1203.53 116.6 1154.26 36.64 1084.95 190.72 1084.95 260.24 1151.37 260.24 1151.37 146.2 1200.18 220.79 1205.66 220.79 1254.78 145.61 1254.78 260.24 1260.46 260.24 1240.14 304.95 1243.72 306.58 1264.78 260.24 1265.53 260.24\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1363.96 287.03 1387.95 232.64 1370.29 232.64 1388.83 185.93 1398.11 209.61 1433.24 129.98 1420.74 100.41 1357.9 100.41 1262.73 325.56 1334.19 325.56 1349.6 287.03 1363.96 287.03\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"1446.08 159.51 1445.64 159.31 1443.05 153.19 1407.05 232.41 1407.14 232.64 1406.95 232.64 1382.23 287.03 1383.82 287.03 1335.5 393.35 1339.08 394.97 1388.13 287.03 1427.52 287.03 1443.24 325.56 1515.91 325.56 1445.9 159.92 1446.08 159.51\" />\r\n    <path\r\n      class=\"cls-1\"\r\n      d=\"M286.68,240.49h34.46l-6.73,14.81,3.58,1.63L424.99,21.48l-3.58-1.63-37.31,82.1h-154.13c-17.36-40.76-59.5-65.32-116.92-65.32H25.9v223.6h1.81L93.55,115.36v-17.86h20.42c34.79,0,55.56,18.93,55.56,51.24s-20.77,50.62-55.56,50.62h-20.25l41.26-90.8-3.58-1.63L24.41,342.4l3.58,1.63,38.07-83.78h45.75c48.24,0,86.41-18.25,107.83-48.97v114.28h182.92v-58.71h-115.89v-26.35ZM286.68,160.66h70.74l-11.28,24.81h-59.47v-24.81Z\" />\r\n    <polygon\r\n      class=\"cls-1\"\r\n      points=\"462.51 199.44 417.35 73.63 377.42 161.49 431.5 295.75 492.28 295.75 582.98 70.6 508.75 70.6 462.51 199.44\" />\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host mat-sidenav-container{height:calc(100vh - 64px)}:host{--mat-sidenav-container-shape: 0;--mat-sidenav-container-elevation-shadow: var(--mat-sys-level2);--mat-sidenav-container-background-color: var(--mat-sys-surface-container-low);--mat-sidenav-content-background-color: var(--mat-sys-surface-container-highest);--mat-sidenav-container-divider-color: var(--mat-sys-outline-variant)}:host .mat-drawer-side{box-shadow:var(--mat-sys-level2)}mat-toolbar{--mat-icon-button-icon-color: var(--mat-sys-on-primary);box-shadow:var(--mat-sys-level2);position:sticky;z-index:2;display:flex;gap:8px}a.active{--mat-button-filled-container-color: var(--mat-sys-secondary)}.content-container{padding:8px;display:flex;flex-direction:column;gap:8px}.powered-by{font-size:10px;color:var(--mat-sys-on-surface-variant);font-style:italic;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modules: [{ type: i0.Input, args: [{ isSignal: true, alias: "modules", required: false }] }], appTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTitle", required: false }] }], version: [{ type: i0.Input, args: [{ isSignal: true, alias: "version", required: false }] }], appToolbar: [{ type: i0.ViewChild, args: ['appToolbar', { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+function BdbEntityResolver(service) {
+    return (route) => {
+        const id = +route.params['id'];
+        const router = inject(Router);
+        return inject(service)
+            .get(id)
+            .pipe(catchError$1(e => {
+            router.navigate(['/', 'niet-gevonden'], {
+                queryParams: { type: `${typeof service}`, id: id },
+            });
+            throw e;
+        }));
+    };
+}
+
+class BdbNavListComponent {
+    constructor() {
+        this.routes = input([], ...(ngDevMode ? [{ debugName: "routes" }] : []));
+        this.parentRoute = input(...(ngDevMode ? [undefined, { debugName: "parentRoute" }] : []));
+    }
+    getRouterLink(route) {
+        if (this.parentRoute) {
+            return ['/', this.parentRoute()?.path ?? '', route.path ?? ''];
+        }
+        else {
+            return [route.path ?? ''];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbNavListComponent, isStandalone: true, selector: "bdb-nav-list", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: false, transformFunction: null }, parentRoute: { classPropertyName: "parentRoute", publicName: "parentRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- <mat-nav-list>\r\n  @for (route of routes(); track route) {\r\n    <a mat-list-item [routerLink]=\"getRouterLink(route)\" routerLinkActive=\"secondary\">\r\n      @if (route.icon) {\r\n        <mat-icon matListItemIcon>{{ route.icon }}</mat-icon>\r\n      }\r\n      <span matListItemTitle> {{ route.name }} </span>\r\n    </a>\r\n  }\r\n</mat-nav-list> -->\r\n\r\n@for (route of routes(); track route) {\r\n  <a class=\"nav-list-item\" [routerLink]=\"getRouterLink(route)\" routerLinkActive=\"active\" matRipple>\r\n    <div class=\"icon-container\">\r\n      <mat-icon>{{ route.icon }}</mat-icon>\r\n    </div>\r\n    {{ route.name }}\r\n  </a>\r\n}\r\n", styles: [":host{--mat-mdc-focus-indicator-border-radius: 0px;--mdc-list-list-item-leading-avatar-shape: 0px;--mat-list-active-indicator-shape: 0px}.secondary{color:var(--mat-sys-on-secondary);--mdc-list-list-item-leading-icon-color: var(--mat-sys-on-secondary);--mat-list-list-item-container-color: var(--mat-sys-secondary-container);--mat-list-list-item-label-text-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-leading-icon-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-hover-leading-icon-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-disabled-leading-icon-color: var(--mat-sys-on-secondary-container)}:host{display:flex;flex-direction:column;justify-content:center}.nav-list-item{padding:8px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-size:12px;color:inherit}.nav-list-item .icon-container{padding:2px 16px;border-radius:999px;display:flex;align-items:center;justify-content:center}.nav-list-item.active .icon-container{background-color:var(--mat-sys-secondary)}.nav-list-item.active mat-icon{color:var(--mat-sys-on-secondary)}.nav-list-item:hover{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbNavListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-nav-list', imports: [MatListModule, MatIconModule, RouterModule, MatRippleModule], template: "<!-- <mat-nav-list>\r\n  @for (route of routes(); track route) {\r\n    <a mat-list-item [routerLink]=\"getRouterLink(route)\" routerLinkActive=\"secondary\">\r\n      @if (route.icon) {\r\n        <mat-icon matListItemIcon>{{ route.icon }}</mat-icon>\r\n      }\r\n      <span matListItemTitle> {{ route.name }} </span>\r\n    </a>\r\n  }\r\n</mat-nav-list> -->\r\n\r\n@for (route of routes(); track route) {\r\n  <a class=\"nav-list-item\" [routerLink]=\"getRouterLink(route)\" routerLinkActive=\"active\" matRipple>\r\n    <div class=\"icon-container\">\r\n      <mat-icon>{{ route.icon }}</mat-icon>\r\n    </div>\r\n    {{ route.name }}\r\n  </a>\r\n}\r\n", styles: [":host{--mat-mdc-focus-indicator-border-radius: 0px;--mdc-list-list-item-leading-avatar-shape: 0px;--mat-list-active-indicator-shape: 0px}.secondary{color:var(--mat-sys-on-secondary);--mdc-list-list-item-leading-icon-color: var(--mat-sys-on-secondary);--mat-list-list-item-container-color: var(--mat-sys-secondary-container);--mat-list-list-item-label-text-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-hover-label-text-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-focus-label-text-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-leading-icon-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-hover-leading-icon-color: var(--mat-sys-on-secondary-container);--mat-list-list-item-disabled-leading-icon-color: var(--mat-sys-on-secondary-container)}:host{display:flex;flex-direction:column;justify-content:center}.nav-list-item{padding:8px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-size:12px;color:inherit}.nav-list-item .icon-container{padding:2px 16px;border-radius:999px;display:flex;align-items:center;justify-content:center}.nav-list-item.active .icon-container{background-color:var(--mat-sys-secondary)}.nav-list-item.active mat-icon{color:var(--mat-sys-on-secondary)}.nav-list-item:hover{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}\n"] }]
+        }], propDecorators: { routes: [{ type: i0.Input, args: [{ isSignal: true, alias: "routes", required: false }] }], parentRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentRoute", required: false }] }] } });
+
+class BdbPageHeaderComponent {
+    constructor() {
+        this.pageTitle = input('', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: BdbPageHeaderComponent, isStandalone: true, selector: "bdb-page-header", inputs: { pageTitle: { classPropertyName: "pageTitle", publicName: "pageTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"page-title\">{{ pageTitle() }}</div>\r\n<div style=\"flex: 1\"></div>\r\n<ng-content></ng-content>\r\n\r\n<button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n  <mat-icon>more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button mat-menu-item>Item 1</button>\r\n  <button mat-menu-item>Item 2</button>\r\n</mat-menu>\r\n", styles: [":host{display:flex;gap:8px;align-items:center;font-size:16px;font-weight:500;letter-spacing:.1em}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-page-header', imports: [MatIconModule, MatMenuModule, MatButtonModule], template: "<div class=\"page-title\">{{ pageTitle() }}</div>\r\n<div style=\"flex: 1\"></div>\r\n<ng-content></ng-content>\r\n\r\n<button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n  <mat-icon>more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n  <button mat-menu-item>Item 1</button>\r\n  <button mat-menu-item>Item 2</button>\r\n</mat-menu>\r\n", styles: [":host{display:flex;gap:8px;align-items:center;font-size:16px;font-weight:500;letter-spacing:.1em}\n"] }]
+        }], propDecorators: { pageTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageTitle", required: false }] }] } });
+
 class AccessDeniedPageComponent {
     constructor(bdbOptions, authService) {
         this.authService = authService;
@@ -2839,19 +3638,18 @@ class AccessDeniedPageComponent {
         this._onDestroy.next();
         this._onDestroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AccessDeniedPageComponent, deps: [{ token: BDB_OPTIONS }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: AccessDeniedPageComponent, isStandalone: true, selector: "bdb-access-denied-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Toegang geweigerd</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n      U heeft onvoldoende rechten voor de gevraagde toepassing\r\n    </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    @if (isLoggedIn) {\r\n      <a [routerLink]=\"['/', logoutRoutePath]\" mat-button>Uitloggen</a>\r\n    } @else {\r\n      <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n    }\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AccessDeniedPageComponent, deps: [{ token: BDB_OPTIONS }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AccessDeniedPageComponent, isStandalone: true, selector: "bdb-access-denied-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Toegang geweigerd</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n      U heeft onvoldoende rechten voor de gevraagde toepassing\r\n    </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    @if (isLoggedIn) {\r\n      <a [routerLink]=\"['/', logoutRoutePath]\" mat-button>Uitloggen</a>\r\n    } @else {\r\n      <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n    }\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-access-denied-page', imports: [
-                        CommonModule,
                         MatCardModule,
                         BdbAlertComponent,
                         MatButtonModule,
                         RouterLink,
                         MatIconModule,
-                        BdbFlexDirective,
+                        BdbFlexDirective
                     ], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Toegang geweigerd</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n      U heeft onvoldoende rechten voor de gevraagde toepassing\r\n    </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    @if (isLoggedIn) {\r\n      <a [routerLink]=\"['/', logoutRoutePath]\" mat-button>Uitloggen</a>\r\n    } @else {\r\n      <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n    }\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2895,13 +3693,12 @@ class ForgotPasswordPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ForgotPasswordPageComponent, deps: [{ token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: ForgotPasswordPageComponent, isStandalone: true, selector: "bdb-forgot-password-page", ngImport: i0, template: "@if (!isComplete) {\r\n  <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\">\r\n    <mat-card>\r\n      <mat-card-header>\r\n        <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content class=\"forgot-password-page-card-content\">\r\n        <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n        <mat-form-field>\r\n          <mat-label>E-mailadres</mat-label>\r\n          <input matInput type=\"email\" formControlName=\"email\" />\r\n        </mat-form-field>\r\n      </mat-card-content>\r\n      <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n        <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n          <mat-icon>login</mat-icon>\r\n          <span>Log in</span>\r\n        </a>\r\n        <button mat-flat-button color=\"primary\">\r\n          <mat-icon>lock_reset</mat-icon>\r\n          <span>Herstel wachtwoord</span>\r\n        </button></mat-card-actions\r\n      >\r\n    </mat-card>\r\n  </form>\r\n} @else {\r\n  <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n}\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ForgotPasswordPageComponent, deps: [{ token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ForgotPasswordPageComponent, isStandalone: true, selector: "bdb-forgot-password-page", ngImport: i0, template: "@if (!isComplete) {\r\n  <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\">\r\n    <mat-card>\r\n      <mat-card-header>\r\n        <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content class=\"forgot-password-page-card-content\">\r\n        <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n        <mat-form-field>\r\n          <mat-label>E-mailadres</mat-label>\r\n          <input matInput type=\"email\" formControlName=\"email\" />\r\n        </mat-form-field>\r\n      </mat-card-content>\r\n      <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n        <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n          <mat-icon>login</mat-icon>\r\n          <span>Log in</span>\r\n        </a>\r\n        <button mat-flat-button color=\"primary\">\r\n          <mat-icon>lock_reset</mat-icon>\r\n          <span>Herstel wachtwoord</span>\r\n        </button></mat-card-actions\r\n      >\r\n    </mat-card>\r\n  </form>\r\n} @else {\r\n  <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n}\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-forgot-password-page', imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         MatCardModule,
                         MatFormFieldModule,
@@ -2910,7 +3707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         RouterLink,
                         BdbAlertErrorResponseComponent,
                         BdbAlertComponent,
-                        MatButtonModule,
+                        MatButtonModule
                     ], template: "@if (!isComplete) {\r\n  <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\">\r\n    <mat-card>\r\n      <mat-card-header>\r\n        <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n      </mat-card-header>\r\n      <mat-card-content class=\"forgot-password-page-card-content\">\r\n        <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n        <mat-form-field>\r\n          <mat-label>E-mailadres</mat-label>\r\n          <input matInput type=\"email\" formControlName=\"email\" />\r\n        </mat-form-field>\r\n      </mat-card-content>\r\n      <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n        <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n          <mat-icon>login</mat-icon>\r\n          <span>Log in</span>\r\n        </a>\r\n        <button mat-flat-button color=\"primary\">\r\n          <mat-icon>lock_reset</mat-icon>\r\n          <span>Herstel wachtwoord</span>\r\n        </button></mat-card-actions\r\n      >\r\n    </mat-card>\r\n  </form>\r\n} @else {\r\n  <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n}\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -2926,12 +3723,12 @@ class InvalidTokenPageComponent {
     constructor(bdbOptions) {
         this.loginRoutePath = bdbOptions.authOptions?.loginPath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InvalidTokenPageComponent, deps: [{ token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: InvalidTokenPageComponent, isStandalone: true, selector: "bdb-invalid-token-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Ongeldig token</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InvalidTokenPageComponent, deps: [{ token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: InvalidTokenPageComponent, isStandalone: true, selector: "bdb-invalid-token-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Ongeldig token</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InvalidTokenPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InvalidTokenPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-invalid-token-page', imports: [CommonModule, MatCardModule, BdbAlertComponent, MatButtonModule, RouterLink, BdbFlexDirective], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Ongeldig token</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
+            args: [{ selector: 'bdb-invalid-token-page', imports: [MatCardModule, BdbAlertComponent, MatButtonModule, RouterLink, BdbFlexDirective], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Ongeldig token</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [BDB_OPTIONS]
@@ -2987,13 +3784,12 @@ class LoginPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LoginPageComponent, deps: [{ token: i2$3.Router }, { token: AuthService }, { token: i2$3.ActivatedRoute }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: LoginPageComponent, isStandalone: true, selector: "bdb-login-page", ngImport: i0, template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Inloggen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content bdbFlex=\"col\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n      <mat-form-field>\r\n        <mat-label>Gebruikersnaam</mat-label>\r\n        <input matInput type=\"email\" formControlName=\"email\" />\r\n        <mat-error bdbFormError=\"email\"></mat-error>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Wachtwoord</mat-label>\r\n        <input matInput type=\"password\" formControlName=\"password\" />\r\n        <mat-error bdbFormError=\"password\"></mat-error>\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions bdbFlex=\"row 8px end center\">\r\n      <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n        <mat-icon>contact_support</mat-icon>\r\n        <span>Wachtwoord vergeten</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Inloggen</span>\r\n      </button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginPageComponent, deps: [{ token: i2$4.Router }, { token: AuthService }, { token: i2$4.ActivatedRoute }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LoginPageComponent, isStandalone: true, selector: "bdb-login-page", ngImport: i0, template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Inloggen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content bdbFlex=\"col\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n      <mat-form-field>\r\n        <mat-label>Gebruikersnaam</mat-label>\r\n        <input matInput type=\"email\" formControlName=\"email\" />\r\n        <mat-error bdbFormError=\"email\"></mat-error>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Wachtwoord</mat-label>\r\n        <input matInput type=\"password\" formControlName=\"password\" />\r\n        <mat-error bdbFormError=\"password\"></mat-error>\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions bdbFlex=\"row 8px end center\">\r\n      <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n        <mat-icon>contact_support</mat-icon>\r\n        <span>Wachtwoord vergeten</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Inloggen</span>\r\n      </button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LoginPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-login-page', imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
                         MatInputModule,
@@ -3003,9 +3799,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         MatCardModule,
                         BdbAlertErrorResponseComponent,
                         BdbFlexDirective,
-                        BdbFormErrorDirective,
+                        BdbFormErrorDirective
                     ], template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Inloggen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content bdbFlex=\"col\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n      <mat-form-field>\r\n        <mat-label>Gebruikersnaam</mat-label>\r\n        <input matInput type=\"email\" formControlName=\"email\" />\r\n        <mat-error bdbFormError=\"email\"></mat-error>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Wachtwoord</mat-label>\r\n        <input matInput type=\"password\" formControlName=\"password\" />\r\n        <mat-error bdbFormError=\"password\"></mat-error>\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions bdbFlex=\"row 8px end center\">\r\n      <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n        <mat-icon>contact_support</mat-icon>\r\n        <span>Wachtwoord vergeten</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Inloggen</span>\r\n      </button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.Router }, { type: AuthService }, { type: i2$3.ActivatedRoute }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2$4.Router }, { type: AuthService }, { type: i2$4.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BDB_OPTIONS]
                 }] }] });
@@ -3025,13 +3821,13 @@ class LogoutPageComponent {
         this.authService.logout();
         this.router.navigate(['/', this.bdbOptions.authOptions?.loginPath]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LogoutPageComponent, deps: [{ token: i2$3.Router }, { token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: LogoutPageComponent, isStandalone: true, selector: "bdb-logout-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Uitloggen</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n  <mat-card-actions class=\"logout-page-card-actions\">\r\n    <a mat-button routerLink=\"/\">\r\n      <mat-icon>arrow_back</mat-icon>\r\n      <span>Blijf ingelogd</span>\r\n    </a>\r\n    <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n      <mat-icon>logout</mat-icon>\r\n      <span>Log uit</span>\r\n    </button></mat-card-actions\r\n  >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LogoutPageComponent, deps: [{ token: i2$4.Router }, { token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LogoutPageComponent, isStandalone: true, selector: "bdb-logout-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Uitloggen</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n  <mat-card-actions class=\"logout-page-card-actions\">\r\n    <a mat-button routerLink=\"/\">\r\n      <mat-icon>arrow_back</mat-icon>\r\n      <span>Blijf ingelogd</span>\r\n    </a>\r\n    <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n      <mat-icon>logout</mat-icon>\r\n      <span>Log uit</span>\r\n    </button></mat-card-actions\r\n  >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LogoutPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LogoutPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-logout-page', imports: [MatCardModule, MatButtonModule, MatIconModule, RouterLink], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Uitloggen</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n  <mat-card-actions class=\"logout-page-card-actions\">\r\n    <a mat-button routerLink=\"/\">\r\n      <mat-icon>arrow_back</mat-icon>\r\n      <span>Blijf ingelogd</span>\r\n    </a>\r\n    <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n      <mat-icon>logout</mat-icon>\r\n      <span>Log uit</span>\r\n    </button></mat-card-actions\r\n  >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
-        }], ctorParameters: () => [{ type: i2$3.Router }, { type: AuthService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2$4.Router }, { type: AuthService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BDB_OPTIONS]
                 }] }] });
@@ -3104,10 +3900,10 @@ class ResetPasswordPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResetPasswordPageComponent, deps: [{ token: AuthService }, { token: i2$3.ActivatedRoute }, { token: i2$3.Router }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: ResetPasswordPageComponent, isStandalone: true, selector: "bdb-reset-password-page", ngImport: i0, template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"reset-password-page-card-content\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n      <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Nieuw wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Bevestig wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions class=\"reset-password-page-card-actions\">\r\n      <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Log in</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>sync_lock</mat-icon>\r\n        <span>Stel wachtwoord in</span>\r\n      </button></mat-card-actions\r\n    >\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetPasswordPageComponent, deps: [{ token: AuthService }, { token: i2$4.ActivatedRoute }, { token: i2$4.Router }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ResetPasswordPageComponent, isStandalone: true, selector: "bdb-reset-password-page", ngImport: i0, template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"reset-password-page-card-content\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n      <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Nieuw wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Bevestig wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions class=\"reset-password-page-card-actions\">\r\n      <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Log in</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>sync_lock</mat-icon>\r\n        <span>Stel wachtwoord in</span>\r\n      </button></mat-card-actions\r\n    >\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-reset-password-page', imports: [
                         ReactiveFormsModule,
@@ -3119,7 +3915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         RouterLink,
                         MatButtonModule,
                     ], template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"reset-password-page-card-content\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n      <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Nieuw wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n      </mat-form-field>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Bevestig wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions class=\"reset-password-page-card-actions\">\r\n      <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Log in</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>sync_lock</mat-icon>\r\n        <span>Stel wachtwoord in</span>\r\n      </button></mat-card-actions\r\n    >\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: i2$3.ActivatedRoute }, { type: i2$3.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: AuthService }, { type: i2$4.ActivatedRoute }, { type: i2$4.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BDB_OPTIONS]
                 }] }] });
@@ -3134,5 +3930,5 @@ var resetPasswordPage_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AccessDeniedPageComponent, AuthContainerComponent, AuthService, BDB_OPTIONS, BdbAlertComponent, BdbAlertErrorResponseComponent, BdbBooleanDisplayComponent, BdbCellDirective, BdbCollapseRowComponent, BdbColumnBuilder, BdbColumnType, BdbDataSource, BdbErrorResponseDialogComponent, BdbFieldComponent, BdbFlexChildDirective, BdbFlexDirective, BdbFormErrorDirective, BdbFullTableComponent, BdbGridChildDirective, BdbGridDirective, BdbMediaDisplayComponent, BdbMediaInputComponent, BdbMediaUploadComponent, BdbOptionsBuilder, BdbPaginatorComponent, BdbQueryInputComponent, BdbSearchComponent, BdbSearchWrapperBaseComponent, BdbService, BdbServiceCR, BdbServiceCRD, BdbServiceCRU, BdbServiceCRUD, BdbServiceR, BdbServiceRD, BdbServiceRU, BdbServiceRUD, BdbTableComponent, ExceptionLogService, ExceptionLogTableComponent, FileSizePipe, ForgotPasswordPageComponent, InvalidTokenPageComponent, LoginPageComponent, LogoutPageComponent, MediaDropDirective, MediaFullTableComponent, MediaService, MediaTableComponent, MediaType, MediaTypeIconPipe, MediaTypeMap, MediaTypePipe, PlainNumberPipe, ResetPasswordPageComponent, RoleService, TaskLogOutcome, TaskLogOutcomeMap, TaskLogOutcomePipe, TaskLogParameterService, TaskLogParameterType, TaskLogParameterValuePipe, TaskLogScheduleService, TaskLogSchedulerService, TaskLogService, TaskLogStatus, TaskLogStatusMap, TaskLogStatusPipe, TaskLogTypeService, UserRoleService, UserService, UserTableComponent, equalValueValidator, getAuthorizationHeaderFromToken, getTokenFromAuthorizationHeader, loggedOutGuard, provideBaDaBoom, resetPasswordResolver, roleGuard, tokenExpiredInterceptor, tokenInterceptor };
+export { AccessDeniedPageComponent, AuthContainerComponent, AuthService, BDB_OPTIONS, BdbAlertComponent, BdbAlertErrorResponseComponent, BdbAppLayoutComponent, BdbBooleanDisplayComponent, BdbCellDirective, BdbCollapseRowComponent, BdbColumnBuilder, BdbColumnType, BdbDataSource, BdbDataSourceV2, BdbEntityResolver, BdbErrorResponseDialogComponent, BdbFieldComponent, BdbFlexChildDirective, BdbFlexDirective, BdbFormDialogComponent, BdbFormErrorDirective, BdbFullTableComponent, BdbGridChildDirective, BdbGridComponent, BdbGridDirective, BdbMediaDisplayComponent, BdbMediaInputComponent, BdbMediaUploadComponent, BdbNavListComponent, BdbOptionsBuilder, BdbPageHeaderComponent, BdbPaginatorComponent, BdbPaginatorV2Component, BdbQueryInputComponent, BdbQueryInputV2Component, BdbSearchComponent, BdbSearchInputComponent, BdbSearchV2Component, BdbSearchWrapperBaseComponent, BdbService, BdbServiceCR, BdbServiceCRD, BdbServiceCRU, BdbServiceCRUD, BdbServiceR, BdbServiceRD, BdbServiceRU, BdbServiceRUD, BdbTableComponent, BdbTableV2Component, ExceptionLogService, ExceptionLogTableComponent, FileSizePipe, ForgotPasswordPageComponent, InvalidTokenPageComponent, LoginPageComponent, LogoutPageComponent, MediaDropDirective, MediaFullTableComponent, MediaService, MediaTableComponent, MediaType, MediaTypeIconPipe, MediaTypeMap, MediaTypePipe, PlainNumberPipe, ResetPasswordPageComponent, RoleService, SearchV2Base, TaskLogOutcome, TaskLogOutcomeMap, TaskLogOutcomePipe, TaskLogParameterService, TaskLogParameterType, TaskLogParameterValuePipe, TaskLogScheduleService, TaskLogSchedulerService, TaskLogService, TaskLogStatus, TaskLogStatusMap, TaskLogStatusPipe, TaskLogTypeService, UserRoleService, UserService, UserTableComponent, equalValueValidator, getAuthorizationHeaderFromToken, getTokenFromAuthorizationHeader, loggedOutGuard, provideBaDaBoom, resetPasswordResolver, roleGuard, tokenExpiredInterceptor, tokenInterceptor };
 //# sourceMappingURL=devopmaat-badaboom.mjs.map