@devopmaat/badaboom 1.3.8 → 1.3.10

package/fesm2022/devopmaat-badaboom.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Input, HostBinding, Component, inject, Injectable, makeEnvironmentProviders, Pipe, Directive, ViewChild, Optional, Self, Injector, EventEmitter, ContentChildren, Output, HostListener, LOCALE_ID, Inject } 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 { 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, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs';
+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 i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i2$3 from '@angular/router';
@@ -9,34 +9,38 @@ import { Router, RouterOutlet, provideRouter, RouterLink } from '@angular/router
 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 { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i8 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1$2 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i3 from '@angular/forms';
+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 * as i6 from '@angular/material/autocomplete';
-import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/menu';
+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$1 from '@angular/material/checkbox';
+import * as i3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$1 from '@angular/material/sort';
+import * as i4 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
-import * as i2$2 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i1$3 from '@angular/youtube-player';
+import * as i6 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 { MatInputModule } from '@angular/material/input';
+import * as i1$4 from '@angular/youtube-player';
 import { YouTubePlayerModule } from '@angular/youtube-player';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i3$2 from '@angular/material/card';
+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 { MatCardModule } from '@angular/material/card';
 
 class BdbAuthOptionsBuilder {
@@ -114,10 +118,10 @@ class BdbAlertComponent {
         this.icon = 'task_alt';
         this.inline = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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: [{
@@ -137,6 +141,8 @@ const LoginRequiredTwoFactor = 'LOGIN_REQUIRES_TWO_FACTOR';
 const LockedOut = 'LOCKED_OUT';
 class BdbAlertErrorResponseComponent {
     constructor() {
+        this.dismissable = false;
+        this.dismiss = new EventEmitter();
         this.loginFailed = false;
         this.alertClass = 'error';
         this.icon = 'error_outline';
@@ -222,24 +228,28 @@ class BdbAlertErrorResponseComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbAlertErrorResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: BdbAlertErrorResponseComponent, isStandalone: true, selector: "bdb-alert-error-response", inputs: { value: "value" }, usesOnChanges: true, ngImport: i0, template: "<bdb-alert [icon]=\"icon\" [label]=\"label\" *ngIf=\"value\" [class]=\"alertClass\">\r\n  <ng-container [ngSwitch]=\"value.status\">\r\n    <ng-container *ngSwitchCase=\"400\">\r\n      <div *ngFor=\"let message of validationFailures()\">{{ message }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"500\">\r\n      <div *ngIf=\"errorCode; else displayMessage\">\r\n        Foutcode voor technische ondersteuning: <strong>{{ errorCode }}</strong>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</bdb-alert>\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbAlertErrorResponseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbAlertErrorResponseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-alert-error-response', imports: [CommonModule, BdbAlertComponent], template: "<bdb-alert [icon]=\"icon\" [label]=\"label\" *ngIf=\"value\" [class]=\"alertClass\">\r\n  <ng-container [ngSwitch]=\"value.status\">\r\n    <ng-container *ngSwitchCase=\"400\">\r\n      <div *ngFor=\"let message of validationFailures()\">{{ message }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"500\">\r\n      <div *ngIf=\"errorCode; else displayMessage\">\r\n        Foutcode voor technische ondersteuning: <strong>{{ errorCode }}</strong>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</bdb-alert>\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}\n"] }]
+            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: [{
                 type: Input
+            }], dismissable: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
             }] } });
 
 class BdbErrorResponseDialogComponent {
     constructor() {
         this.data = inject(MAT_DIALOG_DATA);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbErrorResponseDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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"] }, { 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: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbErrorResponseDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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" }]
         }] });
@@ -271,10 +281,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: "19.2.11", ngImport: i0, type: AccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AccountService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -403,10 +413,10 @@ class AuthService {
             claims: claims,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AuthService, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -431,10 +441,10 @@ const tokenExpiredInterceptor = (req, next) => {
 };
 
 class AuthContainerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AuthContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AuthContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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"] }]
         }] });
@@ -607,35 +617,118 @@ class BdbDataSource {
     }
 }
 
-class BdbPaginatorComponent {
-    constructor() {
-        this._onDestroy = new Subject();
+class LayoutError extends Error {
+    constructor(message) {
+        super(message);
+    }
+}
+
+const DEFAULT_FLEX_DIRECTION = 'row';
+const DEFAULT_FLEX_GAP = '';
+const DEFAULT_FLEX_SPACING = {
+    justify: 'start',
+    align: 'stretch',
+};
+class BdbFlexDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.bdbFlex = '';
+        this.bdbFlexDirection = '';
+        this.bdbFlexGap = '';
+        this.bdbFlexSpacing = '';
     }
     ngOnInit() {
-        this.dataSource.response$.pipe(takeUntil(this._onDestroy)).subscribe({
-            next: x => {
-                this.pageSize = x.pageSize;
-                this.page = x.page;
-                this.length = x.count;
-            },
+        this.renderer.setStyle(this.element.nativeElement, 'display', 'flex');
+        const bdbFlexInputs = this.bdbFlex.split(' ').filter(x => !!x);
+        this.setDirection(bdbFlexInputs[0]);
+        this.setGap(bdbFlexInputs[1]);
+        this.setSpacing({
+            justify: bdbFlexInputs[2],
+            align: bdbFlexInputs[3],
         });
     }
-    ngOnDestroy() {
-        this._onDestroy.next();
-        this._onDestroy.complete();
+    setDirection(bdbFlexInput) {
+        const direction = this.validateDirection(this.getDirection(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'flex-direction', direction);
     }
-    changePage(event) {
-        this.dataSource.request.page = event.pageIndex;
-        this.dataSource.request.pageSize = event.pageSize;
-        this.dataSource.load();
+    getDirection(bdbFlexInput) {
+        const trimmedBdbFlexDirection = this.bdbFlexDirection.trim();
+        if (trimmedBdbFlexDirection) {
+            return trimmedBdbFlexDirection;
+        }
+        if (bdbFlexInput) {
+            return bdbFlexInput;
+        }
+        return DEFAULT_FLEX_DIRECTION;
+    }
+    validateDirection(direction) {
+        switch (direction) {
+            case 'row':
+                return 'row';
+            case 'col':
+                return 'column';
+            default:
+                throw new LayoutError(`'${direction}' is not a valid value for flex direction`);
+        }
+    }
+    setGap(bdbFlexInput) {
+        const gap = this.validateGap(this.getGap(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'gap', gap);
+    }
+    getGap(bdbFlexInput) {
+        const trimmedBdbFlexGap = this.bdbFlexGap.trim();
+        if (trimmedBdbFlexGap) {
+            return trimmedBdbFlexGap;
+        }
+        if (bdbFlexInput) {
+            return bdbFlexInput;
+        }
+        return DEFAULT_FLEX_GAP;
+    }
+    validateGap(gap) {
+        return gap;
+    }
+    setSpacing(bdbFlexInput) {
+        const spacing = this.validateSpacing(this.getSpacing(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'align-items', spacing.align);
+        this.renderer.setStyle(this.element.nativeElement, 'justify-content', spacing.justify);
+    }
+    getSpacing(bdbFlexInput) {
+        const splitBdbFlexSpacing = this.bdbFlexSpacing.split(' ').filter(x => !!x);
+        if (splitBdbFlexSpacing.length === 2) {
+            return {
+                align: splitBdbFlexSpacing[0],
+                justify: splitBdbFlexSpacing[1],
+            };
+        }
+        if (bdbFlexInput.align && bdbFlexInput.justify) {
+            return {
+                align: bdbFlexInput.align,
+                justify: bdbFlexInput.justify,
+            };
+        }
+        return DEFAULT_FLEX_SPACING;
+    }
+    validateSpacing(spacing) {
+        return spacing;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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$2.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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFlexDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbFlex: [{
+                type: Input
+            }], bdbFlexDirection: [{
+                type: Input
+            }], bdbFlexGap: [{
+                type: Input
+            }], bdbFlexSpacing: [{
                 type: Input
             }] } });
 
@@ -662,10 +755,10 @@ class BdbQueryInputComponent {
         this._onDestroy.next();
         this._onDestroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbQueryInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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"] }] }); }
+    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: "19.2.11", ngImport: i0, type: BdbQueryInputComponent, decorators: [{
+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: [{
@@ -675,776 +768,693 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 type: Input
             }] } });
 
-class BdbSearchWrapperBaseComponent {
+class BdbPaginatorComponent {
     constructor() {
-        this.controlContainer = inject(ControlContainer);
+        this._onDestroy = new Subject();
     }
     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;
+        this.dataSource.response$.pipe(takeUntil(this._onDestroy)).subscribe({
+            next: x => {
+                this.pageSize = x.pageSize;
+                this.page = x.page;
+                this.length = x.count;
+            },
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbSearchWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: BdbSearchWrapperBaseComponent, isStandalone: true, selector: "ng-component", inputs: { controlName: "controlName", control: "control" }, ngImport: i0, template: '', isInline: true }); }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    changePage(event) {
+        this.dataSource.request.page = event.pageIndex;
+        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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbSearchWrapperBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbPaginatorComponent, decorators: [{
             type: Component,
-            args: [{ template: '', standalone: true }]
-        }], propDecorators: { controlName: [{
-                type: Input
-            }], control: [{
+            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
             }] } });
 
-// 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 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: "19.2.11", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "function" }); }
+    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: "19.2.11", ngImport: i0, type: FunctionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DynamicPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'function',
+                    name: 'dynamicPipe',
                     standalone: true,
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.Injector }] });
 
-const errorMessageMap = new Map([
-    ['required', 'Verplicht'],
-    ['email', 'Ongeldig e-mail'],
-    ['phone', 'Ongeldig tel.nr'],
-    ['requiredTrue', 'Verplicht'],
-    ['pattern', 'Ongeldig'],
-]);
-function getErrorMessage(validationErrorKey, validationErrorValue) {
-    switch (validationErrorKey) {
-        case 'minlength':
-            return `Minimum lengte: ${validationErrorValue['requiredLength']}`;
-        case 'maxlength':
-            return `Maximum lengte: ${validationErrorValue['requiredLength']}`;
-        case 'max':
-            return `Max: ${validationErrorValue['max']}`;
-        case 'min':
-            return `Min: ${validationErrorValue['min']}`;
-        case 'custom':
-            return `${validationErrorValue}`;
-        default:
-            return errorMessageMap.get(validationErrorKey) ?? validationErrorKey;
+class BdbBooleanDisplayComponent {
+    constructor() {
+        this.class = 'bdb-boolean-display';
     }
+    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"] }] }); }
 }
-class BdbFormErrorDirective {
-    constructor(element, renderer, controlContainer) {
-        this.element = element;
-        this.renderer = renderer;
-        this.controlContainer = controlContainer;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbBooleanDisplayComponent, 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"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], value: [{
+                type: Input
+            }] } });
+
+class BdbCellDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this.bdbCellDef = '';
     }
-    ngOnInit() {
-        if (!this.bdbFormError) {
-            throw new Error('No (name for) formcontrol provided');
-        }
-        if (typeof this.bdbFormError === 'string') {
-            const ctrl = this.controlContainer.control?.get(this.bdbFormError);
-            if (!ctrl) {
-                throw new Error(`No formcontrol found for name '${this.bdbFormError}'`);
-            }
-            this.control = ctrl;
-        }
-        else {
-            this.control = this.bdbFormError;
-        }
-        this.setError();
-        this.control.statusChanges.subscribe({
-            next: () => this.setError(),
-        });
-    }
-    setError() {
-        const validationErrors = this.control.errors;
-        if (!validationErrors) {
-            return;
-        }
-        const validationErrorKey = Object.keys(validationErrors)[0];
-        const validationErrorValue = validationErrors[validationErrorKey];
-        const errorMessage = getErrorMessage(validationErrorKey, validationErrorValue);
-        this.renderer.setProperty(this.element.nativeElement, 'innerText', errorMessage);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbFormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.ControlContainer }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: BdbFormErrorDirective, isStandalone: true, selector: "[bdbFormError]", inputs: { bdbFormError: "bdbFormError" }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbFormErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbCellDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bdbFormError]',
+                    selector: 'ng-template[bdbCellDef]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.ControlContainer }], propDecorators: { bdbFormError: [{
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { bdbCellDef: [{
                 type: Input
             }] } });
 
-class BdbSearchComponent {
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        this.label = '';
-        this.hint = '';
-        this.placeholder = '';
+var BdbColumnType;
+(function (BdbColumnType) {
+    BdbColumnType["String"] = "String";
+    BdbColumnType["Number"] = "Number";
+    BdbColumnType["Percentage"] = "Percentage";
+    BdbColumnType["Currency"] = "Currency";
+    BdbColumnType["Date"] = "Date";
+    BdbColumnType["Boolean"] = "Boolean";
+    BdbColumnType["Enum"] = "Enum";
+    BdbColumnType["Custom"] = "Custom";
+})(BdbColumnType || (BdbColumnType = {}));
+
+class BdbTableComponent {
+    constructor() {
         this._onDestroy = new Subject();
-        this.viewChange = new BehaviorSubject({
-            start: 0,
-            end: Number.MAX_VALUE,
-        });
-        this.searchCtrl = new FormControl('', {
-            nonNullable: true,
-            validators: [() => this.ngControl.errors],
-        });
-        this.inputTabIndex = 0;
-        this.hasValue = false;
-        this.isDisabled = false;
-        ngControl.valueAccessor = this;
-        this.searchCtrl.valueChanges
-            .pipe(takeUntil(this._onDestroy), debounceTime(100), distinctUntilChanged(), filter$1(x => typeof x === 'string'))
-            .subscribe({
-            next: x => {
-                this.dataSource.request.query = x;
-                this.dataSource.load();
-            },
-        });
+        this.columns = [];
+        this.autoLoad = undefined;
+        this.displayedColumns = [];
+        this.contextActions = [];
+        this.selectOnRowClick = true;
+        this.selectedRowClass = 'selected';
+        this.isClickable = true;
+        this.rowClick = new EventEmitter();
+        this.contextAction = new EventEmitter();
+        this.columnType = BdbColumnType;
+        this.contextMenuPosition = { x: '0px', y: '0px' };
+        this.trackById = (_, item) => {
+            return item.id;
+        };
     }
     ngOnInit() {
-        this.searchOptions = this.dataSource.connect();
-        this.ngControl.valueChanges?.pipe(takeUntil(this._onDestroy)).subscribe({
-            next: () => this.searchCtrl.updateValueAndValidity(),
-        });
+        if (this.autoLoad !== false) {
+            this.load();
+        }
     }
-    ngAfterViewInit() {
-        this.autoCompleteTrigger?.panelClosingActions.pipe(takeUntil(this._onDestroy)).subscribe({
-            next: x => {
-                if (x === null) {
-                    this.searchCtrl.setValue('');
-                    this.searchInput?.nativeElement.blur();
-                }
-            },
-        });
+    ngOnChanges() {
+        if (this.columns && !this.displayedColumns.length) {
+            this.displayedColumns = this.columns.map(x => x.id);
+        }
+        if (this.selection?.isMultipleSelection() && !(this.displayedColumns[0] === 'selection')) {
+            this.displayedColumns.unshift('selection');
+        }
+    }
+    ngAfterContentInit() {
+        this.setColumnTemplates();
     }
     ngOnDestroy() {
         this._onDestroy.next();
         this._onDestroy.complete();
     }
-    writeValue(obj) {
-        if (!obj) {
-            this.hasValue = false;
-            this.inputTabIndex = 0;
-            this.searchCtrl.setValue('');
+    load() {
+        this.error = undefined;
+        this.dataSource.load();
+    }
+    setColumnTemplates() {
+        const templates = this.cellTemplates;
+        if (templates == undefined || !this.cellTemplates?.length) {
             return;
         }
-        this.searchCtrl.setValue(obj);
-        this.inputTabIndex = -1;
-        this.hasValue = true;
+        if (this.columns && this.columns.length) {
+            this.columns.forEach(x => {
+                const tpl = templates.filter(y => y.bdbCellDef === x.id)[0];
+                if (tpl) {
+                    x.template = tpl.templateRef;
+                }
+            });
+        }
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    onRowClick(row) {
+        if (this.selection && this.selectOnRowClick) {
+            this.selection.toggle(row);
+        }
+        this.rowClick.emit(row);
     }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
+    // SORT
+    sortData(event) {
+        const column = this.columns.find(x => x.id === event.active);
+        if (column) {
+            this.dataSource.request.sortField = column.id;
+            this.dataSource.request.sortDirection = event.direction;
+            this.dataSource.load();
+        }
     }
-    setDisabledState(isDisabled) {
-        isDisabled ? this.searchCtrl.disable() : this.searchCtrl.enable();
-        this.isDisabled = isDisabled;
+    // CONTEXT MENU
+    onContextMenu(event, row) {
+        event.preventDefault();
+        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.openMenu();
+        }
     }
-    onFocus() {
-        if (this.hasValue) {
-            this.searchInput?.nativeElement.blur();
-            this.autoCompleteTrigger?.closePanel();
-            this.clearButton?.focus();
+    onContextMenuAction(action, row) {
+        this.contextAction.emit({ action: action, row: row });
+    }
+    isAllSelected() {
+        if (!this.selection) {
+            return false;
         }
+        return this.dataSource.data.every(x => this.selection?.isSelected(x));
     }
-    onBlur() {
-        if (!this.onTouch) {
-            throw 'No onTouch callback registered';
+    anySelected() {
+        if (!this.selection) {
+            return false;
         }
-        this.onTouch();
+        return this.dataSource.data.some(x => this.selection?.isSelected(x));
     }
-    selectOption(event) {
-        if (!this.onChange) {
-            throw 'No onChange callback registered';
+    toggleAllRows() {
+        if (!(this.selection && this.dataSource)) {
+            return;
+        }
+        if (this.isAllSelected()) {
+            this.selection.deselect(...this.dataSource.data);
+        }
+        else {
+            this.selection.select(...this.dataSource.data);
         }
-        this.inputTabIndex = -1;
-        this.hasValue = true;
-        this.searchInput?.nativeElement.blur();
-        const value = event.option.value;
-        this.onChange(value);
     }
-    clear() {
-        if (!this.onChange) {
-            throw 'No onChange callback registered';
+    rowClass(row) {
+        if (!(this.selection || this.rowColor)) {
+            return undefined;
         }
-        this.hasValue = false;
-        this.inputTabIndex = 0;
-        this.searchCtrl.setValue('');
-        this.searchInput?.nativeElement.focus();
-        this.onChange(null);
+        const ret = {};
+        if (this.selection) {
+            ret[this.selectedRowClass] = this.selection.isSelected(row);
+        }
+        if (this.rowColor) {
+            const palette = this.rowColor(row);
+            if (palette) {
+                ret['bdb-' + palette] = true;
+            }
+            else if (!this.selection) {
+                return undefined;
+            }
+        }
+        return ret;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbSearchComponent, deps: [{ token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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  <div class=\"search-disabled-cover\" *ngIf=\"hasValue\">\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  <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      <mat-option *ngFor=\"let option of searchOptions | async\" [value]=\"option\">\r\n        {{ option | function: displayFn }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n\r\n    <mat-icon *ngIf=\"!hasValue\" matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: "pipe", type: FunctionPipe, name: "function" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-search', imports: [
+            args: [{ selector: 'bdb-table[dataSource]', imports: [
                         CommonModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatSortModule,
+                        BdbAlertErrorResponseComponent,
+                        DynamicPipe,
+                        BdbBooleanDisplayComponent,
+                        MatMenuModule,
                         MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                        BdbFormErrorDirective,
-                        FunctionPipe,
-                        MatButtonModule,
-                    ], template: "<div class=\"search-container\">\r\n  <div class=\"search-disabled-cover\" *ngIf=\"hasValue\">\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  <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      <mat-option *ngFor=\"let option of searchOptions | async\" [value]=\"option\">\r\n        {{ option | function: displayFn }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n\r\n    <mat-icon *ngIf=\"!hasValue\" matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\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: i3.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { dataSource: [{
+                    ], 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"] }]
+        }], propDecorators: { columns: [{
                 type: Input
-            }], displayFn: [{
+            }], dataSource: [{
                 type: Input
-            }], label: [{
+            }], autoLoad: [{
                 type: Input
-            }], hint: [{
+            }], displayedColumns: [{
                 type: Input
-            }], placeholder: [{
+            }], contextActions: [{
                 type: Input
-            }], searchInput: [{
+            }], selection: [{
+                type: Input
+            }], selectOnRowClick: [{
+                type: Input
+            }], selectedRowClass: [{
+                type: Input
+            }], isClickable: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], contextAction: [{
+                type: Output
+            }], contextMenu: [{
                 type: ViewChild,
-                args: ['searchInput']
-            }], clearButton: [{
-                type: ViewChild,
-                args: ['clearButton']
-            }], autoCompleteTrigger: [{
-                type: ViewChild,
-                args: [MatAutocompleteTrigger]
+                args: [MatMenuTrigger]
+            }], cellTemplates: [{
+                type: ContentChildren,
+                args: [BdbCellDirective, { descendants: true }]
+            }], rowColor: [{
+                type: Input
             }] } });
 
-class BdbCellDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-        this.bdbCellDef = '';
+class BdbFullTableComponent {
+    constructor() {
+        this.columns = [];
+        this.displayedColumns = [];
+        this.autoLoad = undefined;
+        this.contextActions = [];
+        this.showToolbar = true;
+        this.rowClick = new EventEmitter();
+        this.contextAction = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: BdbCellDirective, isStandalone: true, selector: "ng-template[bdbCellDef]", inputs: { bdbCellDef: "bdbCellDef" }, ngImport: i0 }); }
+    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: "19.2.11", ngImport: i0, type: BdbCellDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[bdbCellDef]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { 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 }]
             }] } });
 
-var BdbColumnType;
-(function (BdbColumnType) {
-    BdbColumnType["String"] = "String";
-    BdbColumnType["Number"] = "Number";
-    BdbColumnType["Percentage"] = "Percentage";
-    BdbColumnType["Currency"] = "Currency";
-    BdbColumnType["Date"] = "Date";
-    BdbColumnType["Boolean"] = "Boolean";
-    BdbColumnType["Enum"] = "Enum";
-    BdbColumnType["Custom"] = "Custom";
-})(BdbColumnType || (BdbColumnType = {}));
-
-class BdbColumnBuilder {
-    build(...columns) {
-        return columns;
-    }
-    string(field, title, options = {}) {
-        const ret = this._buildCommonOptions(BdbColumnType.String, field, title, options);
-        ret.pipe = options.pipe;
-        return ret;
-    }
-    number(field, title, options = {}) {
-        options.textAlign = options.textAlign ?? 'end';
-        const ret = this._buildCommonOptions(BdbColumnType.Number, field, title, options);
-        ret.pipe = options.pipe;
-        ret.format = options.format;
-        return ret;
-    }
-    percentage(field, title, options = {}) {
-        options.textAlign = options.textAlign ?? 'end';
-        const ret = this._buildCommonOptions(BdbColumnType.Percentage, field, title, options);
-        ret.digitsInfo = options.digitsInfo;
-        ret.locale = options.locale;
-        return ret;
-    }
-    currency(field, title, options = {}) {
-        options.textAlign = options.textAlign ?? 'end';
-        const ret = this._buildCommonOptions(BdbColumnType.Currency, field, title, options);
-        ret.currencyCode = options.currencyCode;
-        ret.display = options.display;
-        ret.digitsInfo = options.digitsInfo;
-        ret.locale = options.locale;
-        return ret;
+class BdbSearchWrapperBaseComponent {
+    constructor() {
+        this.controlContainer = inject(ControlContainer);
     }
-    date(field, title, options = {}) {
-        options.textAlign = options.textAlign ?? 'end';
-        const ret = this._buildCommonOptions(BdbColumnType.Date, field, title, options);
-        ret.format = options.format ?? 'short';
-        if (ret.width === undefined) {
-            switch (ret.format) {
-                case 'short':
-                    ret.width = 144;
-                    break;
-                case 'shortDate':
-                    ret.width = 96;
-                    break;
-            }
+    ngOnInit() {
+        if (this.control) {
+            this.formControl = this.control;
+            return;
         }
-        return ret;
-    }
-    boolean(field, title, options = {}) {
-        const ret = this._buildCommonOptions(BdbColumnType.Boolean, field, title, options);
-        ret.icon = options.icon ?? true;
-        return ret;
-    }
-    enum(field, title, options = {}) {
-        const ret = this._buildCommonOptions(BdbColumnType.Enum, field, title, options);
-        ret.pipe = options.pipe;
-        return ret;
-    }
-    custom(id, title, options = {}) {
-        return {
-            type: BdbColumnType.Custom,
-            id: id,
-            title: title,
-            field: () => undefined,
-            sortDisabled: options.sortDisabled ?? true,
-            width: options.width,
-            textAlign: options.textAlign,
-        };
-    }
-    _buildCommonOptions(type, field, title, options = undefined) {
-        const id = options?.id ??
-            field
-                .toString()
-                .split('.')
-                .slice(1)
-                .map(x => x.replace(/(\?|!)$/, ''))
-                .join('.');
-        return {
-            type: type,
-            id: id,
-            title: title,
-            field: field,
-            sortDisabled: options?.sortDisabled,
-            width: options?.width,
-            textAlign: options?.textAlign,
-        };
+        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: "19.2.11", ngImport: i0, type: BdbColumnBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbColumnBuilder, providedIn: 'root' }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbColumnBuilder, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbSearchWrapperBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '', standalone: true }]
+        }], propDecorators: { controlName: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
 
-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);
+// 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: "19.2.11", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DynamicPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FunctionPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'dynamicPipe',
+                    name: 'function',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }] });
 
-class BdbBooleanDisplayComponent {
-    constructor() {
-        this.class = 'bdb-boolean-display';
+const errorMessageMap = new Map([
+    ['required', 'Verplicht'],
+    ['email', 'Ongeldig e-mail'],
+    ['phone', 'Ongeldig tel.nr'],
+    ['requiredTrue', 'Verplicht'],
+    ['pattern', 'Ongeldig'],
+]);
+function getErrorMessage(validationErrorKey, validationErrorValue) {
+    switch (validationErrorKey) {
+        case 'minlength':
+            return `Minimum lengte: ${validationErrorValue['requiredLength']}`;
+        case 'maxlength':
+            return `Maximum lengte: ${validationErrorValue['requiredLength']}`;
+        case 'max':
+            return `Max: ${validationErrorValue['max']}`;
+        case 'min':
+            return `Min: ${validationErrorValue['min']}`;
+        case 'custom':
+            return `${validationErrorValue}`;
+        default:
+            return errorMessageMap.get(validationErrorKey) ?? validationErrorKey;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbBooleanDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: BdbBooleanDisplayComponent, isStandalone: true, selector: "bdb-boolean-display", inputs: { value: "value" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<mat-icon *ngIf=\"value === false\" class=\"false\">clear</mat-icon>\r\n<mat-icon *ngIf=\"value === true\" class=\"true\">check</mat-icon>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "19.2.11", ngImport: i0, type: BdbBooleanDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bdb-boolean-display', imports: [CommonModule, MatIconModule], template: "<mat-icon *ngIf=\"value === false\" class=\"false\">clear</mat-icon>\r\n<mat-icon *ngIf=\"value === true\" class=\"true\">check</mat-icon>\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
-            }] } });
-
-class BdbTableComponent {
-    constructor() {
-        this._onDestroy = new Subject();
-        this.columns = [];
-        this.autoLoad = undefined;
-        this.displayedColumns = [];
-        this.contextActions = [];
-        this.selectOnRowClick = true;
-        this.selectedRowClass = 'selected';
-        this.isClickable = true;
-        this.rowClick = new EventEmitter();
-        this.contextAction = new EventEmitter();
-        this.columnType = BdbColumnType;
-        this.contextMenuPosition = { x: '0px', y: '0px' };
-        this.trackById = (_, item) => {
-            return item.id;
-        };
+class BdbFormErrorDirective {
+    constructor(element, renderer, controlContainer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.controlContainer = controlContainer;
     }
     ngOnInit() {
-        if (this.autoLoad !== false) {
-            this.load();
+        if (!this.bdbFormError) {
+            throw new Error('No (name for) formcontrol provided');
         }
-    }
-    ngOnChanges() {
-        if (this.columns && !this.displayedColumns.length) {
-            this.displayedColumns = this.columns.map(x => x.id);
+        if (typeof this.bdbFormError === 'string') {
+            const ctrl = this.controlContainer.control?.get(this.bdbFormError);
+            if (!ctrl) {
+                throw new Error(`No formcontrol found for name '${this.bdbFormError}'`);
+            }
+            this.control = ctrl;
         }
-        if (this.selection?.isMultipleSelection() && !(this.displayedColumns[0] === 'selection')) {
-            this.displayedColumns.unshift('selection');
+        else {
+            this.control = this.bdbFormError;
         }
+        this.setError();
+        this.control.statusChanges.subscribe({
+            next: () => this.setError(),
+        });
     }
-    ngAfterContentInit() {
-        this.setColumnTemplates();
+    setError() {
+        const validationErrors = this.control.errors;
+        if (!validationErrors) {
+            return;
+        }
+        const validationErrorKey = Object.keys(validationErrors)[0];
+        const validationErrorValue = validationErrors[validationErrorKey];
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFormErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbFormError]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$2.ControlContainer }], propDecorators: { bdbFormError: [{
+                type: Input
+            }] } });
+
+class BdbSearchComponent {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.label = '';
+        this.hint = '';
+        this.placeholder = '';
+        this._onDestroy = new Subject();
+        this.viewChange = new BehaviorSubject({
+            start: 0,
+            end: Number.MAX_VALUE,
+        });
+        this.searchCtrl = new FormControl('', {
+            nonNullable: true,
+            validators: [() => this.ngControl.errors],
+        });
+        this.inputTabIndex = 0;
+        this.hasValue = false;
+        this.isDisabled = false;
+        ngControl.valueAccessor = this;
+        this.searchCtrl.valueChanges
+            .pipe(takeUntil(this._onDestroy), debounceTime(100), distinctUntilChanged(), filter$1(x => typeof x === 'string'))
+            .subscribe({
+            next: x => {
+                this.dataSource.request.query = x;
+                this.dataSource.load();
+            },
+        });
+    }
+    ngOnInit() {
+        this.searchOptions = this.dataSource.connect();
+        this.ngControl.valueChanges?.pipe(takeUntil(this._onDestroy)).subscribe({
+            next: () => this.searchCtrl.updateValueAndValidity(),
+        });
+    }
+    ngAfterViewInit() {
+        this.autoCompleteTrigger?.panelClosingActions.pipe(takeUntil(this._onDestroy)).subscribe({
+            next: x => {
+                if (x === null) {
+                    this.searchCtrl.setValue('');
+                    this.searchInput?.nativeElement.blur();
+                }
+            },
+        });
     }
     ngOnDestroy() {
         this._onDestroy.next();
         this._onDestroy.complete();
     }
-    load() {
-        this.error = undefined;
-        this.dataSource.load();
-    }
-    setColumnTemplates() {
-        const templates = this.cellTemplates;
-        if (templates == undefined || !this.cellTemplates?.length) {
+    writeValue(obj) {
+        if (!obj) {
+            this.hasValue = false;
+            this.inputTabIndex = 0;
+            this.searchCtrl.setValue('');
             return;
         }
-        if (this.columns && this.columns.length) {
-            this.columns.forEach(x => {
-                const tpl = templates.filter(y => y.bdbCellDef === x.id)[0];
-                if (tpl) {
-                    x.template = tpl.templateRef;
-                }
-            });
-        }
-    }
-    onRowClick(row) {
-        if (this.selection && this.selectOnRowClick) {
-            this.selection.toggle(row);
-        }
-        this.rowClick.emit(row);
+        this.searchCtrl.setValue(obj);
+        this.inputTabIndex = -1;
+        this.hasValue = true;
     }
-    // SORT
-    sortData(event) {
-        const column = this.columns.find(x => x.id === event.active);
-        if (column) {
-            this.dataSource.request.sortField = column.id;
-            this.dataSource.request.sortDirection = event.direction;
-            this.dataSource.load();
-        }
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    // CONTEXT MENU
-    onContextMenu(event, row) {
-        event.preventDefault();
-        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.openMenu();
-        }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
     }
-    onContextMenuAction(action, row) {
-        this.contextAction.emit({ action: action, row: row });
+    setDisabledState(isDisabled) {
+        isDisabled ? this.searchCtrl.disable() : this.searchCtrl.enable();
+        this.isDisabled = isDisabled;
     }
-    isAllSelected() {
-        if (!this.selection) {
-            return false;
+    onFocus() {
+        if (this.hasValue) {
+            this.searchInput?.nativeElement.blur();
+            this.autoCompleteTrigger?.closePanel();
+            this.clearButton?.focus();
         }
-        return this.dataSource.data.every(x => this.selection?.isSelected(x));
     }
-    anySelected() {
-        if (!this.selection) {
-            return false;
+    onBlur() {
+        if (!this.onTouch) {
+            throw 'No onTouch callback registered';
         }
-        return this.dataSource.data.some(x => this.selection?.isSelected(x));
+        this.onTouch();
     }
-    toggleAllRows() {
-        if (!(this.selection && this.dataSource)) {
-            return;
-        }
-        if (this.isAllSelected()) {
-            this.selection.deselect(...this.dataSource.data);
-        }
-        else {
-            this.selection.select(...this.dataSource.data);
+    selectOption(event) {
+        if (!this.onChange) {
+            throw 'No onChange callback registered';
         }
+        this.inputTabIndex = -1;
+        this.hasValue = true;
+        this.searchInput?.nativeElement.blur();
+        const value = event.option.value;
+        this.onChange(value);
     }
-    rowClass(row) {
-        if (!(this.selection || this.rowColor)) {
-            return undefined;
-        }
-        const ret = {};
-        if (this.selection) {
-            ret[this.selectedRowClass] = this.selection.isSelected(row);
-        }
-        if (this.rowColor) {
-            const palette = this.rowColor(row);
-            if (palette) {
-                ret['bdb-' + palette] = true;
-            }
-            else if (!this.selection) {
-                return undefined;
-            }
+    clear() {
+        if (!this.onChange) {
+            throw 'No onChange callback registered';
         }
-        return ret;
+        this.hasValue = false;
+        this.inputTabIndex = 0;
+        this.searchCtrl.setValue('');
+        this.searchInput?.nativeElement.focus();
+        this.onChange(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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  <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    *ngIf=\"dataSource\"\r\n    [trackBy]=\"trackById\">\r\n    <ng-container matColumnDef=\"selection\">\r\n      <th mat-header-cell *matHeaderCellDef>\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          *ngIf=\"selection\">\r\n        </mat-checkbox>\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\">\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          *ngIf=\"selection\">\r\n        </mat-checkbox>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container [matColumnDef]=\"column.id\" *ngFor=\"let column of columns\">\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    <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        <bdb-alert-error-response\r\n          [value]=\"dataSource.error$ | async\"\r\n          *ngIf=\"dataSource && (dataSource.error$ | async); else noData\"></bdb-alert-error-response>\r\n      </td>\r\n    </tr>\r\n  </table>\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  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"columnType.String\">{{ column.field(row) }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Number\">{{ column.field(row) | number: column.format }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Percentage\">{{\r\n      column.field(row) | percent: column.digitsInfo : column.locale\r\n    }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Currency\">{{\r\n      column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale\r\n    }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Date\"> {{ column.field(row) | date: column.format }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Boolean\">\r\n      <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Enum\">{{ column.field(row) }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Custom\">*?*</ng-container>\r\n    <ng-container *ngSwitchDefault>{{ column.field(row) | json }}</ng-container>\r\n  </ng-container>\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    <ng-container *ngFor=\"let action of contextActions\">\r\n      <button\r\n        mat-menu-item\r\n        (click)=\"onContextMenuAction(action, row)\"\r\n        *ngIf=\"action.condition === undefined || action.condition(row)\">\r\n        <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n      </button>\r\n    </ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "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$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.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"] }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5$1.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"] }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-table[dataSource]', imports: [
+            args: [{ selector: 'bdb-search', imports: [
                         CommonModule,
-                        MatTableModule,
-                        MatCheckboxModule,
-                        MatSortModule,
-                        BdbAlertErrorResponseComponent,
-                        DynamicPipe,
-                        BdbBooleanDisplayComponent,
-                        MatMenuModule,
                         MatIconModule,
-                    ], template: "<div class=\"bdb-table-container\">\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    *ngIf=\"dataSource\"\r\n    [trackBy]=\"trackById\">\r\n    <ng-container matColumnDef=\"selection\">\r\n      <th mat-header-cell *matHeaderCellDef>\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          *ngIf=\"selection\">\r\n        </mat-checkbox>\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\">\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          *ngIf=\"selection\">\r\n        </mat-checkbox>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container [matColumnDef]=\"column.id\" *ngFor=\"let column of columns\">\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    <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        <bdb-alert-error-response\r\n          [value]=\"dataSource.error$ | async\"\r\n          *ngIf=\"dataSource && (dataSource.error$ | async); else noData\"></bdb-alert-error-response>\r\n      </td>\r\n    </tr>\r\n  </table>\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  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"columnType.String\">{{ column.field(row) }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Number\">{{ column.field(row) | number: column.format }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Percentage\">{{\r\n      column.field(row) | percent: column.digitsInfo : column.locale\r\n    }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Currency\">{{\r\n      column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale\r\n    }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Date\"> {{ column.field(row) | date: column.format }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Boolean\">\r\n      <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Enum\">{{ column.field(row) }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Custom\">*?*</ng-container>\r\n    <ng-container *ngSwitchDefault>{{ column.field(row) | json }}</ng-container>\r\n  </ng-container>\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    <ng-container *ngFor=\"let action of contextActions\">\r\n      <button\r\n        mat-menu-item\r\n        (click)=\"onContextMenuAction(action, row)\"\r\n        *ngIf=\"action.condition === undefined || action.condition(row)\">\r\n        <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n      </button>\r\n    </ng-container>\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"] }]
-        }], propDecorators: { columns: [{
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], autoLoad: [{
-                type: Input
-            }], displayedColumns: [{
-                type: Input
-            }], contextActions: [{
+                        MatFormFieldModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        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"] }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { dataSource: [{
                 type: Input
-            }], selection: [{
+            }], displayFn: [{
                 type: Input
-            }], selectOnRowClick: [{
+            }], label: [{
                 type: Input
-            }], selectedRowClass: [{
+            }], hint: [{
                 type: Input
-            }], isClickable: [{
+            }], placeholder: [{
                 type: Input
-            }], rowClick: [{
-                type: Output
-            }], contextAction: [{
-                type: Output
-            }], contextMenu: [{
+            }], searchInput: [{
                 type: ViewChild,
-                args: [MatMenuTrigger]
-            }], cellTemplates: [{
-                type: ContentChildren,
-                args: [BdbCellDirective, { descendants: true }]
-            }], rowColor: [{
-                type: Input
+                args: ['searchInput']
+            }], clearButton: [{
+                type: ViewChild,
+                args: ['clearButton']
+            }], autoCompleteTrigger: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
             }] } });
 
-class LayoutError extends Error {
-    constructor(message) {
-        super(message);
-    }
-}
-
-const DEFAULT_FLEX_DIRECTION = 'row';
-const DEFAULT_FLEX_GAP = '';
-const DEFAULT_FLEX_SPACING = {
-    justify: 'start',
-    align: 'stretch',
-};
-class BdbFlexDirective {
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
-        this.bdbFlex = '';
-        this.bdbFlexDirection = '';
-        this.bdbFlexGap = '';
-        this.bdbFlexSpacing = '';
-    }
-    ngOnInit() {
-        this.renderer.setStyle(this.element.nativeElement, 'display', 'flex');
-        const bdbFlexInputs = this.bdbFlex.split(' ').filter(x => !!x);
-        this.setDirection(bdbFlexInputs[0]);
-        this.setGap(bdbFlexInputs[1]);
-        this.setSpacing({
-            justify: bdbFlexInputs[2],
-            align: bdbFlexInputs[3],
-        });
+class BdbColumnBuilder {
+    build(...columns) {
+        return columns;
     }
-    setDirection(bdbFlexInput) {
-        const direction = this.validateDirection(this.getDirection(bdbFlexInput));
-        this.renderer.setStyle(this.element.nativeElement, 'flex-direction', direction);
+    string(field, title, options = {}) {
+        const ret = this._buildCommonOptions(BdbColumnType.String, field, title, options);
+        ret.pipe = options.pipe;
+        return ret;
     }
-    getDirection(bdbFlexInput) {
-        const trimmedBdbFlexDirection = this.bdbFlexDirection.trim();
-        if (trimmedBdbFlexDirection) {
-            return trimmedBdbFlexDirection;
-        }
-        if (bdbFlexInput) {
-            return bdbFlexInput;
-        }
-        return DEFAULT_FLEX_DIRECTION;
+    number(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Number, field, title, options);
+        ret.pipe = options.pipe;
+        ret.format = options.format;
+        return ret;
     }
-    validateDirection(direction) {
-        switch (direction) {
-            case 'row':
-                return 'row';
-            case 'col':
-                return 'column';
-            default:
-                throw new LayoutError(`'${direction}' is not a valid value for flex direction`);
-        }
+    percentage(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Percentage, field, title, options);
+        ret.digitsInfo = options.digitsInfo;
+        ret.locale = options.locale;
+        return ret;
     }
-    setGap(bdbFlexInput) {
-        const gap = this.validateGap(this.getGap(bdbFlexInput));
-        this.renderer.setStyle(this.element.nativeElement, 'gap', gap);
+    currency(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Currency, field, title, options);
+        ret.currencyCode = options.currencyCode;
+        ret.display = options.display;
+        ret.digitsInfo = options.digitsInfo;
+        ret.locale = options.locale;
+        return ret;
     }
-    getGap(bdbFlexInput) {
-        const trimmedBdbFlexGap = this.bdbFlexGap.trim();
-        if (trimmedBdbFlexGap) {
-            return trimmedBdbFlexGap;
-        }
-        if (bdbFlexInput) {
-            return bdbFlexInput;
+    date(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Date, field, title, options);
+        ret.format = options.format ?? 'short';
+        if (ret.width === undefined) {
+            switch (ret.format) {
+                case 'short':
+                    ret.width = 144;
+                    break;
+                case 'shortDate':
+                    ret.width = 96;
+                    break;
+            }
         }
-        return DEFAULT_FLEX_GAP;
-    }
-    validateGap(gap) {
-        return gap;
-    }
-    setSpacing(bdbFlexInput) {
-        const spacing = this.validateSpacing(this.getSpacing(bdbFlexInput));
-        this.renderer.setStyle(this.element.nativeElement, 'align-items', spacing.align);
-        this.renderer.setStyle(this.element.nativeElement, 'justify-content', spacing.justify);
+        return ret;
     }
-    getSpacing(bdbFlexInput) {
-        const splitBdbFlexSpacing = this.bdbFlexSpacing.split(' ').filter(x => !!x);
-        if (splitBdbFlexSpacing.length === 2) {
-            return {
-                align: splitBdbFlexSpacing[0],
-                justify: splitBdbFlexSpacing[1],
-            };
-        }
-        if (bdbFlexInput.align && bdbFlexInput.justify) {
-            return {
-                align: bdbFlexInput.align,
-                justify: bdbFlexInput.justify,
-            };
-        }
-        return DEFAULT_FLEX_SPACING;
+    boolean(field, title, options = {}) {
+        const ret = this._buildCommonOptions(BdbColumnType.Boolean, field, title, options);
+        ret.icon = options.icon ?? true;
+        return ret;
     }
-    validateSpacing(spacing) {
-        return spacing;
+    enum(field, title, options = {}) {
+        const ret = this._buildCommonOptions(BdbColumnType.Enum, field, title, options);
+        ret.pipe = options.pipe;
+        return ret;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", 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: "19.2.11", ngImport: i0, type: BdbFlexDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbFlex: [{
-                type: Input
-            }], bdbFlexDirection: [{
-                type: Input
-            }], bdbFlexGap: [{
-                type: Input
-            }], bdbFlexSpacing: [{
-                type: Input
-            }] } });
-
-class BdbFullTableComponent {
-    constructor() {
-        this.columns = [];
-        this.displayedColumns = [];
-        this.autoLoad = undefined;
-        this.contextActions = [];
-        this.showToolbar = true;
-        this.rowClick = new EventEmitter();
-        this.contextAction = new EventEmitter();
+    custom(id, title, options = {}) {
+        return {
+            type: BdbColumnType.Custom,
+            id: id,
+            title: title,
+            field: () => undefined,
+            sortDisabled: options.sortDisabled ?? true,
+            width: options.width,
+            textAlign: options.textAlign,
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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: "19.2.11", 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 }]
-            }] } });
+    _buildCommonOptions(type, field, title, options = undefined) {
+        const id = options?.id ??
+            field
+                .toString()
+                .split('.')
+                .slice(1)
+                .map(x => x.replace(/(\?|!)$/, ''))
+                .join('.');
+        return {
+            type: type,
+            id: id,
+            title: title,
+            field: field,
+            sortDisabled: options?.sortDisabled,
+            width: options?.width,
+            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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbColumnBuilder, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 class ExceptionLogTableComponent {
     constructor(cb, router, activatedRoute) {
@@ -1473,10 +1483,10 @@ class ExceptionLogTableComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ExceptionLogTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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: [{
@@ -1489,35 +1499,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 type: Input
             }] } });
 
-var MediaType;
-(function (MediaType) {
-    MediaType["Image"] = "Image";
-    MediaType["Video"] = "Video";
-    MediaType["File"] = "File";
-})(MediaType || (MediaType = {}));
-const MediaTypeMap = new Map([
-    [MediaType.Image, 'Afbeelding'],
-    [MediaType.Video, 'Video'],
-    [MediaType.File, 'Bestand'],
-]);
-
-class MediaTypePipe {
-    transform(value) {
-        if (value === undefined) {
-            return undefined;
-        }
-        return MediaTypeMap.get(value) ?? '???';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: MediaTypePipe, isStandalone: true, name: "mediaType" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaTypePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'mediaType',
-                }]
-        }] });
-
 class FileSizePipe {
     transform(bytes) {
         if (bytes === undefined) {
@@ -1529,75 +1510,16 @@ 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: "19.2.11", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: FileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fileSize',
                 }]
         }] });
 
-class MediaFullTableComponent {
-    constructor() {
-        this.displayedColumns = [];
-        this.showToolbar = true;
-        this.contextActions = [];
-        this.contextAction = new EventEmitter();
-        this.rowClick = new EventEmitter();
-        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: "19.2.11", ngImport: i0, type: MediaFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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: "19.2.11", 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: [{
-                type: Input
-            }], displayedColumns: [{
-                type: Input
-            }], selection: [{
-                type: Input
-            }], showToolbar: [{
-                type: Input
-            }], contextActions: [{
-                type: Input
-            }], contextAction: [{
-                type: Output
-            }], rowClick: [{
-                type: Output
-            }] } });
-
-class MediaTableComponent {
-    constructor() {
-        this.displayedColumns = [];
-        this.contextActions = [];
-        this.contextAction = new EventEmitter();
-        this.rowClick = new EventEmitter();
-        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: "19.2.11", ngImport: i0, type: MediaTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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" }]
-        }], propDecorators: { dataSource: [{
-                type: Input
-            }], displayedColumns: [{
-                type: Input
-            }], contextActions: [{
-                type: Input
-            }], contextAction: [{
-                type: Output
-            }], rowClick: [{
-                type: Output
-            }] } });
-
 class BdbYoutubePlayerComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
@@ -1615,10 +1537,10 @@ class BdbYoutubePlayerComponent {
         this.videoHeight = this.videoWidth * 0.6;
         this.changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbYoutubePlayerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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$3.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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbYoutubePlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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: [{
@@ -1628,10 +1550,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 type: Input
             }] } });
 
+var MediaType;
+(function (MediaType) {
+    MediaType["Image"] = "Image";
+    MediaType["Video"] = "Video";
+    MediaType["File"] = "File";
+})(MediaType || (MediaType = {}));
+const MediaTypeMap = new Map([
+    [MediaType.Image, 'Afbeelding'],
+    [MediaType.Video, 'Video'],
+    [MediaType.File, 'Bestand'],
+]);
+
+class MediaTypeIconPipe {
+    transform(value) {
+        switch (value) {
+            case MediaType.Image:
+                return 'image';
+            case MediaType.Video:
+                return 'video_file';
+            case MediaType.File:
+                return 'docs';
+            default:
+                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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTypeIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mediaTypeIcon',
+                }]
+        }] });
+
 class BdbMediaDisplayComponent {
     constructor() {
         this.mode = 'preview';
+        this.overlayBehavior = 'always';
         this.bdbOptions = inject(BDB_OPTIONS);
+        this.class = 'bdb-media-display';
         this.mediaType = MediaType;
         this.hasError = false;
     }
@@ -1677,9 +1636,6 @@ class BdbMediaDisplayComponent {
                 return `https://img.youtube.com/vi/${media.reference}/maxresdefault.jpg`;
         }
     }
-    errorHandler() {
-        this.hasError = true;
-    }
     getDownloadUrl() {
         if (!this.media) {
             return undefined;
@@ -1693,22 +1649,83 @@ class BdbMediaDisplayComponent {
         }
         return parts.pop()?.toLocaleLowerCase();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbMediaDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: BdbMediaDisplayComponent, isStandalone: true, selector: "bdb-media-display", inputs: { media: "media", mode: "mode", width: "width", height: "height", alt: "alt" }, usesOnChanges: true, ngImport: i0, template: "@if (media && !hasError) {\r\n  @switch (media.type) {\r\n    @case (mediaType.File) {\r\n      <ng-container *ngTemplateOutlet=\"mode === 'preview' ? filePreview : fileLive\"></ng-container>\r\n    }\r\n    @case (mediaType.Video) {\r\n      <ng-container *ngTemplateOutlet=\"mode === 'preview' ? videoPreview : videoPlayer\"></ng-container>\r\n    }\r\n    @default {\r\n      <img [src]=\"src\" (error)=\"errorHandler()\" [alt]=\"alt\" />\r\n    }\r\n  }\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"noMedia\"></ng-container>\r\n}\r\n\r\n<ng-template #fileNameDisplay>\r\n  <div bdbFlex=\"col 8px center center\" style=\"width: 100%; height: 100%\">\r\n    <div>Geen preview beschikbaar</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoPreview>\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=\"fileNameDisplay\"></ng-container>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoPlayer>\r\n  <bdb-youtube-player [videoId]=\"media?.reference\"></bdb-youtube-player>\r\n</ng-template>\r\n\r\n<ng-template #filePreview>\r\n  @if (src) {\r\n    <img [src]=\"src\" [alt]=\"alt\" />\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"fileNameDisplay\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #fileLive>\r\n  <div class=\"file-live\">\r\n    @if (src) {\r\n      <img [src]=\"src\" [alt]=\"alt\" />\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"fileNameDisplay\"></ng-container>\r\n    }\r\n\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  </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:contents}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}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatFabAnchor, selector: "a[mat-fab]", 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"] }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbMediaDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-media-display', imports: [MatButtonModule, MatIconModule, NgTemplateOutlet, BdbYoutubePlayerComponent], template: "@if (media && !hasError) {\r\n  @switch (media.type) {\r\n    @case (mediaType.File) {\r\n      <ng-container *ngTemplateOutlet=\"mode === 'preview' ? filePreview : fileLive\"></ng-container>\r\n    }\r\n    @case (mediaType.Video) {\r\n      <ng-container *ngTemplateOutlet=\"mode === 'preview' ? videoPreview : videoPlayer\"></ng-container>\r\n    }\r\n    @default {\r\n      <img [src]=\"src\" (error)=\"errorHandler()\" [alt]=\"alt\" />\r\n    }\r\n  }\r\n} @else {\r\n  <ng-container *ngTemplateOutlet=\"noMedia\"></ng-container>\r\n}\r\n\r\n<ng-template #fileNameDisplay>\r\n  <div bdbFlex=\"col 8px center center\" style=\"width: 100%; height: 100%\">\r\n    <div>Geen preview beschikbaar</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoPreview>\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=\"fileNameDisplay\"></ng-container>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #videoPlayer>\r\n  <bdb-youtube-player [videoId]=\"media?.reference\"></bdb-youtube-player>\r\n</ng-template>\r\n\r\n<ng-template #filePreview>\r\n  @if (src) {\r\n    <img [src]=\"src\" [alt]=\"alt\" />\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"fileNameDisplay\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #fileLive>\r\n  <div class=\"file-live\">\r\n    @if (src) {\r\n      <img [src]=\"src\" [alt]=\"alt\" />\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"fileNameDisplay\"></ng-container>\r\n    }\r\n\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  </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:contents}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}\n"] }]
+            args: [{ selector: 'bdb-media-display', imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        NgTemplateOutlet,
+                        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"] }]
         }], propDecorators: { media: [{
                 type: Input
             }], mode: [{
                 type: Input
+            }], overlayBehavior: [{
+                type: Input
             }], width: [{
                 type: Input
             }], height: [{
                 type: Input
             }], alt: [{
                 type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MediaTypePipe {
+    transform(value) {
+        if (value === undefined) {
+            return undefined;
+        }
+        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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mediaType',
+                }]
+        }] });
+
+class MediaFullTableComponent {
+    constructor() {
+        this.displayedColumns = [];
+        this.showToolbar = true;
+        this.contextActions = [];
+        this.contextAction = new EventEmitter();
+        this.rowClick = new EventEmitter();
+        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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], contextActions: [{
+                type: Input
+            }], contextAction: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
             }] } });
 
 class BdbServiceR extends BdbService {
@@ -1740,10 +1757,10 @@ class MediaService extends BdbServiceRD {
             url: url,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1753,14 +1770,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
 var DropClass;
 (function (DropClass) {
     DropClass["Default"] = "drop-box";
-    DropClass["Over"] = "drop-hover";
+    DropClass["Over"] = "drop-box hover";
 })(DropClass || (DropClass = {}));
 class MediaDropDirective {
-    constructor(service) {
-        this.service = service;
+    constructor() {
         this.dropStart = new EventEmitter();
         this.dropComplete = new EventEmitter();
         this.dropError = new EventEmitter();
+        this.service = inject(MediaService);
         this.hostClass = DropClass.Default;
     }
     dragOver(event) {
@@ -1788,21 +1805,8 @@ class MediaDropDirective {
         event.stopPropagation();
         if (event.dataTransfer) {
             this.hostClass = DropClass.Default;
-            if (event.dataTransfer.types.includes('text/uri-list')) {
+            if (event.dataTransfer.types.includes('Files')) {
                 this.dropStart.emit(event);
-                let url = event.dataTransfer.getData('URL');
-                if (!url) {
-                    url = event.dataTransfer.getData('Text');
-                }
-                this.service.fromUrl(url).subscribe({
-                    next: (x) => this.dropComplete.emit(x),
-                    error: (x) => {
-                        console.log('Fout bij het importeren:', x);
-                        this.dropError.emit(x);
-                    },
-                });
-            }
-            else if (event.dataTransfer.types.includes('Files')) {
                 for (let i = 0; i < event.dataTransfer.files.length; ++i) {
                     const file = event.dataTransfer.files.item(i);
                     if (file != null) {
@@ -1817,18 +1821,31 @@ class MediaDropDirective {
                     }
                 }
             }
+            else if (event.dataTransfer.types.includes('text/uri-list')) {
+                this.dropStart.emit(event);
+                let url = event.dataTransfer.getData('URL');
+                if (!url) {
+                    url = event.dataTransfer.getData('Text');
+                }
+                this.service.fromUrl(url).subscribe({
+                    next: (x) => this.dropComplete.emit(x),
+                    error: (x) => {
+                        this.dropError.emit(x);
+                    },
+                });
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaDropDirective, deps: [{ token: MediaService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MediaDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbMediaDrop]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: MediaService }], propDecorators: { dropStart: [{
+        }], ctorParameters: () => [], propDecorators: { dropStart: [{
                 type: Output
             }], dropComplete: [{
                 type: Output
@@ -1848,70 +1865,265 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['drop', ['$event']]
             }] } });
 
-class BdbMediaUploadComponent {
+class BdbMediaUploadComponent {
+    constructor() {
+        this.class = 'bdb-media-upload';
+        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();
+        this.uploadError = new EventEmitter();
+        this.uploadStart = new EventEmitter();
+        this._pending = false;
+    }
+    get pending() {
+        return this._pending;
+    }
+    onNativeInputFileSelect(event) {
+        var input = event.target;
+        const file = input?.files?.item(0);
+        if (file) {
+            this._pending = true;
+            this.mediaService.upload(file).subscribe({
+                next: (x) => {
+                    this._pending = false;
+                    this.uploadComplete.emit(x);
+                },
+                error: (err) => {
+                    if (err) {
+                        this._pending = false;
+                        this.uploadError.emit(err);
+                    }
+                },
+            });
+        }
+    }
+    selectFile() {
+        if (this.nativeInputFile) {
+            this.nativeInputFile.nativeElement.click();
+        }
+    }
+    onDropStart() {
+        this._pending = true;
+        this.uploadStart.emit();
+    }
+    onDropError($event) {
+        this._pending = false;
+        this.uploadError.emit($event);
+    }
+    onDropComplete($event) {
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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: [{
+                type: Input
+            }], uploadComplete: [{
+                type: Output
+            }], uploadError: [{
+                type: Output
+            }], uploadStart: [{
+                type: Output
+            }] } });
+
+class BdbMediaInputComponent {
+    set value(value) {
+        this._value = value;
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value;
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    //MatFormFieldControl id
+    static { this.nextId = 0; }
+    //MatFormFieldControl placeholder
+    // @Input()
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(plh) {
+        this._placeholder = plh;
+        this.stateChanges.next();
+    }
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.class = 'bdb-media-input';
+        this.clearOnDragOver = false;
+        this.mediaType = MediaType;
+        //MatFormFieldControl stateChanges
+        this.stateChanges = new Subject();
+        this._value = undefined;
+        this.touched = false;
+        this.id = `bdb-media-input-${BdbMediaInputComponent.nextId++}`;
+        this._placeholder = '';
+        this.focused = false;
+        //MatFormFieldControl shouldLabelFloat
+        this.shouldLabelFloat = true;
+        this._disabled = false;
+        this.controlType = 'bdb-media-input';
+        this.isDisabled = false;
+        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
+            // the providers) to avoid running into a circular import.
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngAfterViewInit() {
+        const test = this.ngControl.control != null;
+    }
+    onFocusIn(event) {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+    }
+    onFocusOut(event) {
+        if (true) {
+            // this.touched = true;
+            this.focused = false;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    //MatFormFieldControl empty
+    get empty() {
+        return !this.value;
+    }
+    //MatFormFieldControl required
+    get required() {
+        return this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    // set required(req: boolean) {
+    //   this._required = coerceBooleanProperty(req);
+    //   this.stateChanges.next();
+    // }
+    // private _required = false;
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        // this._disabled ? this.parts.disable() : this.parts.enable();
+        this.stateChanges.next();
+    }
+    get errorState() {
+        // return true;
+        const control = this.ngControl?.control;
+        if (!control) {
+            return false;
+        }
+        return control.invalid && this.touched;
+    }
+    // disableAutomaticLabeling?: boolean | undefined;
+    setDescribedByIds(ids) {
+        //const controlElement = this._elementRef.nativeElement.querySelector('.example-tel-input-container')!;
+        //controlElement.setAttribute('aria-describedby', ids.join(' '));
+    }
+    onContainerClick(event) {
+        if (event.target.tagName.toLowerCase() != 'input') {
+            //this._elementRef.nativeElement.querySelector('input').focus();
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    onUploadComplete($event) {
+        this.touched = true;
+        this.value = $event;
+        this.onChange($event);
+    }
+    clear() {
+        this.value = undefined;
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbMediaInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-media-input', imports: [
+                        CommonModule,
+                        BdbMediaUploadComponent,
+                        BdbMediaDisplayComponent,
+                        MatIconModule,
+                        MatButtonModule,
+                        BdbAlertErrorResponseComponent,
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: BdbMediaInputComponent }], 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"] }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], clearOnDragOver: [{
+                type: Input
+            }], id: [{
+                type: HostBinding
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], userAriaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }] } });
+
+class MediaTableComponent {
     constructor() {
-        this.size = 256;
-        this.icon = 'arrow_upload_ready';
-        this.mediaUploaded = new EventEmitter();
-        this.dropError = new EventEmitter();
-    }
-    onDropComplete($event) {
-        this.mediaUploaded.emit($event);
-    }
-    onDropError($event) {
-        this.dropError.emit($event);
-    }
-    onDropStart() {
-        this.dropError.emit(undefined);
+        this.displayedColumns = [];
+        this.contextActions = [];
+        this.contextAction = new EventEmitter();
+        this.rowClick = new EventEmitter();
+        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: "19.2.11", ngImport: i0, type: BdbMediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: BdbMediaUploadComponent, isStandalone: true, selector: "bdb-media-upload", inputs: { size: "size", icon: "icon" }, outputs: { mediaUploaded: "mediaUploaded", dropError: "dropError" }, ngImport: i0, template: "<div\r\n  class=\"drop-box\"\r\n  bdbMediaDrop\r\n  (dropComplete)=\"onDropComplete($event)\"\r\n  (dropError)=\"onDropError($event)\"\r\n  (dropStart)=\"onDropStart()\">\r\n  <mat-icon\r\n    [style]=\"\r\n      'font-size: ' + size + 'px; height: 100%; width: 100%; min-width: ' + size + 'px; min-height: ' + size + 'px'\r\n    \"\r\n    >{{ icon }}</mat-icon\r\n  >\r\n</div>\r\n", styles: [".drop-box{display:table;color:#a9a9a9;padding:2px}.drop-hover{display:table;color:#adff2f;border:2px dashed}\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: DragDropModule }, { kind: "directive", type: MediaDropDirective, selector: "[bdbMediaDrop]", outputs: ["dropStart", "dropComplete", "dropError"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbMediaUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MediaTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-media-upload', imports: [MatIconModule, DragDropModule, MediaDropDirective], template: "<div\r\n  class=\"drop-box\"\r\n  bdbMediaDrop\r\n  (dropComplete)=\"onDropComplete($event)\"\r\n  (dropError)=\"onDropError($event)\"\r\n  (dropStart)=\"onDropStart()\">\r\n  <mat-icon\r\n    [style]=\"\r\n      'font-size: ' + size + 'px; height: 100%; width: 100%; min-width: ' + size + 'px; min-height: ' + size + 'px'\r\n    \"\r\n    >{{ icon }}</mat-icon\r\n  >\r\n</div>\r\n", styles: [".drop-box{display:table;color:#a9a9a9;padding:2px}.drop-hover{display:table;color:#adff2f;border:2px dashed}\n"] }]
-        }], propDecorators: { size: [{
+            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" }]
+        }], propDecorators: { dataSource: [{
                 type: Input
-            }], icon: [{
+            }], displayedColumns: [{
+                type: Input
+            }], contextActions: [{
                 type: Input
-            }], mediaUploaded: [{
+            }], contextAction: [{
                 type: Output
-            }], dropError: [{
+            }], rowClick: [{
                 type: Output
             }] } });
 
-var TaskLogStatus;
-(function (TaskLogStatus) {
-    TaskLogStatus["New"] = "New";
-    TaskLogStatus["Running"] = "Running";
-    TaskLogStatus["Waiting"] = "Waiting";
-    TaskLogStatus["Completed"] = "Completed";
-})(TaskLogStatus || (TaskLogStatus = {}));
-const TaskLogStatusMap = new Map([
-    [TaskLogStatus.New, 'Nieuw'],
-    [TaskLogStatus.Running, 'Lopend'],
-    [TaskLogStatus.Waiting, 'Wachten'],
-    [TaskLogStatus.Completed, 'Afgerond'],
-]);
-
-class TaskLogStatusPipe {
-    transform(value) {
-        if (!value) {
-            return undefined;
-        }
-        return TaskLogStatusMap.get(value) ?? '???';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: TaskLogStatusPipe, isStandalone: true, name: "taskLogStatus" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogStatusPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'taskLogStatus',
-                    standalone: true,
-                }]
-        }] });
-
 var TaskLogOutcome;
 (function (TaskLogOutcome) {
     TaskLogOutcome["Noop"] = "Noop";
@@ -1935,10 +2147,10 @@ class TaskLogOutcomePipe {
         }
         return TaskLogOutcomeMap.get(value) ?? '???';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogOutcomePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: TaskLogOutcomePipe, isStandalone: true, name: "taskLogOutcome" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogOutcomePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogOutcomePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogOutcome',
@@ -1946,6 +2158,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }] });
 
+var TaskLogStatus;
+(function (TaskLogStatus) {
+    TaskLogStatus["New"] = "New";
+    TaskLogStatus["Running"] = "Running";
+    TaskLogStatus["Waiting"] = "Waiting";
+    TaskLogStatus["Completed"] = "Completed";
+})(TaskLogStatus || (TaskLogStatus = {}));
+const TaskLogStatusMap = new Map([
+    [TaskLogStatus.New, 'Nieuw'],
+    [TaskLogStatus.Running, 'Lopend'],
+    [TaskLogStatus.Waiting, 'Wachten'],
+    [TaskLogStatus.Completed, 'Afgerond'],
+]);
+
+class TaskLogStatusPipe {
+    transform(value) {
+        if (!value) {
+            return undefined;
+        }
+        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" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogStatusPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'taskLogStatus',
+                    standalone: true,
+                }]
+        }] });
+
 var TaskLogParameterType;
 (function (TaskLogParameterType) {
     TaskLogParameterType["String"] = "String";
@@ -1986,10 +2230,10 @@ class TaskLogParameterValuePipe {
                 }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogParameterValuePipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: TaskLogParameterValuePipe, isStandalone: true, name: "taskLogParameterValue" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogParameterValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogParameterValue',
@@ -2044,10 +2288,10 @@ class UserTableComponent {
         //       break;
         //   }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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" }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
@@ -2069,10 +2313,10 @@ class BdbFlexChildDirective {
     ngOnInit() {
         this.renderer.setStyle(this.element.nativeElement, 'flex', this.bdbFlexChild);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", type: BdbFlexChildDirective, isStandalone: true, selector: "[bdbFlexChild]", inputs: { bdbFlexChild: "bdbFlexChild" }, ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbFlexChildDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbFlexChildDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbFlexChild]',
@@ -2135,6 +2379,84 @@ class Node {
     }
 }
 
+class BdbGridChildDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.bdbGridChild = '';
+        this.bdbGridRow = '';
+        this.bdbGridColumn = '';
+    }
+    ngOnInit() {
+        const axes = this.splitAxes();
+        let column = axes[0];
+        let row = axes[1];
+        if (this.bdbGridColumn) {
+            column = this.bdbGridColumn;
+        }
+        if (this.bdbGridRow) {
+            row = this.bdbGridRow;
+        }
+        if (column) {
+            this.renderer.setStyle(this.element.nativeElement, 'grid-column', column);
+        }
+        if (row) {
+            this.renderer.setStyle(this.element.nativeElement, 'grid-row', row);
+        }
+    }
+    splitAxes() {
+        const input = this.bdbGridChild.split(' ').filter(x => !!x);
+        if (!input.length) {
+            return [];
+        }
+        let sourceList = new LinkedList(input);
+        let targetList = new LinkedList();
+        let node = sourceList.head;
+        while (node) {
+            if (node.value === 'span' && node.next) {
+                targetList.push(`span ${node.next.value}`);
+                node = node.next;
+            }
+            else {
+                targetList.push(node.value);
+            }
+            node = node.next;
+        }
+        sourceList = targetList;
+        targetList = new LinkedList();
+        node = sourceList.head;
+        while (node) {
+            if (node.next && node.next.value === '/' && node.next.next) {
+                targetList.push(`${node.value} / ${node.next.next.value}`);
+                node = node.next.next;
+            }
+            else {
+                targetList.push(node.value);
+            }
+            node = node.next;
+        }
+        if (targetList.length !== 2 || !targetList.head || !targetList.tail) {
+            return [];
+        }
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbGridChildDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbGridChild], [bdbGridColumn], [bdbGridRow]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbGridChild: [{
+                type: Input
+            }], bdbGridRow: [{
+                type: Input
+            }], bdbGridColumn: [{
+                type: Input
+            }] } });
+
 class BdbGridDirective {
     constructor(element, renderer) {
         this.element = element;
@@ -2220,10 +2542,10 @@ class BdbGridDirective {
             this.renderer.setStyle(this.element.nativeElement, selector, result.input);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", 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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbGridDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: BdbGridDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]',
@@ -2239,84 +2561,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 type: Input
             }] } });
 
-class BdbGridChildDirective {
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
-        this.bdbGridChild = '';
-        this.bdbGridRow = '';
-        this.bdbGridColumn = '';
-    }
-    ngOnInit() {
-        const axes = this.splitAxes();
-        let column = axes[0];
-        let row = axes[1];
-        if (this.bdbGridColumn) {
-            column = this.bdbGridColumn;
-        }
-        if (this.bdbGridRow) {
-            row = this.bdbGridRow;
-        }
-        if (column) {
-            this.renderer.setStyle(this.element.nativeElement, 'grid-column', column);
-        }
-        if (row) {
-            this.renderer.setStyle(this.element.nativeElement, 'grid-row', row);
-        }
-    }
-    splitAxes() {
-        const input = this.bdbGridChild.split(' ').filter(x => !!x);
-        if (!input.length) {
-            return [];
-        }
-        let sourceList = new LinkedList(input);
-        let targetList = new LinkedList();
-        let node = sourceList.head;
-        while (node) {
-            if (node.value === 'span' && node.next) {
-                targetList.push(`span ${node.next.value}`);
-                node = node.next;
-            }
-            else {
-                targetList.push(node.value);
-            }
-            node = node.next;
-        }
-        sourceList = targetList;
-        targetList = new LinkedList();
-        node = sourceList.head;
-        while (node) {
-            if (node.next && node.next.value === '/' && node.next.next) {
-                targetList.push(`${node.value} / ${node.next.next.value}`);
-                node = node.next.next;
-            }
-            else {
-                targetList.push(node.value);
-            }
-            node = node.next;
-        }
-        if (targetList.length !== 2 || !targetList.head || !targetList.tail) {
-            return [];
-        }
-        return [targetList.head.value, targetList.tail.value];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", type: BdbGridChildDirective, isStandalone: true, selector: "[bdbGridChild], [bdbGridColumn], [bdbGridRow]", inputs: { bdbGridChild: "bdbGridChild", bdbGridRow: "bdbGridRow", bdbGridColumn: "bdbGridColumn" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbGridChildDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[bdbGridChild], [bdbGridColumn], [bdbGridRow]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbGridChild: [{
-                type: Input
-            }], bdbGridRow: [{
-                type: Input
-            }], bdbGridColumn: [{
-                type: Input
-            }] } });
-
 class BdbCollapseRowComponent {
     constructor() {
         this.collapsed = false;
@@ -2326,10 +2570,10 @@ class BdbCollapseRowComponent {
     get isCollapsed() {
         return this.collapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbCollapseRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbCollapseRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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: [{
@@ -2349,10 +2593,10 @@ class BdbFieldComponent {
         this.class = 'bdb-field';
         this.label = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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: "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 }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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"] }]
         }], propDecorators: { class: [{
@@ -2368,10 +2612,10 @@ class PlainNumberPipe {
         }
         return '' + value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PlainNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: PlainNumberPipe, isStandalone: true, name: "bdbPlainNumber" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PlainNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PlainNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'bdbPlainNumber',
@@ -2385,12 +2629,6 @@ class BdbServiceCR extends BdbServiceR {
     }
 }
 
-class BdbServiceRU extends BdbServiceR {
-    update(updateModel) {
-        return this.httpClient.put(this.baseUrl, updateModel);
-    }
-}
-
 class BdbServiceCRD extends BdbServiceCR {
     delete(id) {
         return this.httpClient.delete(`${this.baseUrl}/${id}`);
@@ -2403,13 +2641,19 @@ class BdbServiceCRU extends BdbServiceCR {
     }
 }
 
-class BdbServiceRUD extends BdbServiceRU {
+class BdbServiceCRUD extends BdbServiceCRU {
     delete(id) {
         return this.httpClient.delete(`${this.baseUrl}/${id}`);
     }
 }
 
-class BdbServiceCRUD extends BdbServiceCRU {
+class BdbServiceRU extends BdbServiceR {
+    update(updateModel) {
+        return this.httpClient.put(this.baseUrl, updateModel);
+    }
+}
+
+class BdbServiceRUD extends BdbServiceRU {
     delete(id) {
         return this.httpClient.delete(`${this.baseUrl}/${id}`);
     }
@@ -2419,10 +2663,10 @@ class ExceptionLogService extends BdbServiceR {
     constructor() {
         super('exception-log');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ExceptionLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ExceptionLogService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ExceptionLogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ExceptionLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2433,10 +2677,10 @@ class RoleService extends BdbServiceR {
     constructor() {
         super('role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: RoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: RoleService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: RoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: RoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2450,10 +2694,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: "19.2.11", ngImport: i0, type: TaskLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2464,10 +2708,10 @@ class TaskLogParameterService extends BdbServiceR {
     constructor() {
         super('task-log-parameter');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogParameterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogParameterService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogParameterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogParameterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2478,10 +2722,10 @@ class TaskLogScheduleService extends BdbServiceCRUD {
     constructor() {
         super('task-log-schedule');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogScheduleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogScheduleService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogScheduleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogScheduleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2492,10 +2736,10 @@ class UserService extends BdbServiceCRUD {
     constructor() {
         super('user');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2506,10 +2750,10 @@ class UserRoleService extends BdbServiceCRD {
     constructor() {
         super('user-role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserRoleService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserRoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: UserRoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2529,10 +2773,10 @@ class TaskLogSchedulerService extends BdbService {
     stopScheduler() {
         return this.httpClient.get(`${this.baseUrl}/stop`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogSchedulerService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogSchedulerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogSchedulerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2568,10 +2812,10 @@ class TaskLogTypeService extends BdbService {
         }
         return of(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogTypeService, providedIn: 'root' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TaskLogTypeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TaskLogTypeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2595,10 +2839,10 @@ class AccessDeniedPageComponent {
         this._onDestroy.next();
         this._onDestroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AccessDeniedPageComponent, deps: [{ token: BDB_OPTIONS }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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    <a [routerLink]=\"['/', loginRoutePath]\" mat-button *ngIf=\"!isLoggedIn\">Inloggen</a>\r\n    <a [routerLink]=\"['/', logoutRoutePath]\" mat-button *ngIf=\"isLoggedIn\">Uitloggen</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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-access-denied-page', imports: [
                         CommonModule,
@@ -2608,7 +2852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         RouterLink,
                         MatIconModule,
                         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    <a [routerLink]=\"['/', loginRoutePath]\" mat-button *ngIf=\"!isLoggedIn\">Inloggen</a>\r\n    <a [routerLink]=\"['/', logoutRoutePath]\" mat-button *ngIf=\"isLoggedIn\">Uitloggen</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"] }]
+                    ], 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,
                     args: [BDB_OPTIONS]
@@ -2651,10 +2895,10 @@ class ForgotPasswordPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ForgotPasswordPageComponent, deps: [{ token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ForgotPasswordPageComponent, isStandalone: true, selector: "bdb-forgot-password-page", ngImport: i0, template: "<form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\" *ngIf=\"!isComplete; else isCompleteTemplate\">\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-error *ngIf=\"emailCtrl.errors\">{{ emailCtrl | bdbErrorMessage }}</mat-error> -->\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\r\n<ng-template #isCompleteTemplate>\r\n  <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n</ng-template>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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"] }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-forgot-password-page', imports: [
                         CommonModule,
@@ -2667,7 +2911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         BdbAlertErrorResponseComponent,
                         BdbAlertComponent,
                         MatButtonModule,
-                    ], template: "<form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\" *ngIf=\"!isComplete; else isCompleteTemplate\">\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-error *ngIf=\"emailCtrl.errors\">{{ emailCtrl | bdbErrorMessage }}</mat-error> -->\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\r\n<ng-template #isCompleteTemplate>\r\n  <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n</ng-template>\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"] }]
+                    ], 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,
                     args: [BDB_OPTIONS]
@@ -2682,10 +2926,10 @@ class InvalidTokenPageComponent {
     constructor(bdbOptions) {
         this.loginRoutePath = bdbOptions.authOptions?.loginPath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InvalidTokenPageComponent, deps: [{ token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", 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$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: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InvalidTokenPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2743,10 +2987,10 @@ class LoginPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", 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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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"] }, { 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LoginPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: LoginPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-login-page', imports: [
                         CommonModule,
@@ -2781,10 +3025,10 @@ class LogoutPageComponent {
         this.authService.logout();
         this.router.navigate(['/', this.bdbOptions.authOptions?.loginPath]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", 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: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LogoutPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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: [{
@@ -2860,10 +3104,10 @@ class ResetPasswordPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", 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-error *ngIf=\"passwordCtrl.errors\">{{ passwordCtrl | bdbErrorMessage }}</mat-error> -->\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-error *ngIf=\"confirmPasswordCtrl.errors\">{{ confirmPasswordCtrl | bdbErrorMessage }}</mat-error> -->\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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-reset-password-page', imports: [
                         ReactiveFormsModule,
@@ -2874,7 +3118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         MatIconModule,
                         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-error *ngIf=\"passwordCtrl.errors\">{{ passwordCtrl | bdbErrorMessage }}</mat-error> -->\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-error *ngIf=\"confirmPasswordCtrl.errors\">{{ confirmPasswordCtrl | bdbErrorMessage }}</mat-error> -->\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"] }]
+                    ], 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: [{
                     type: Inject,
                     args: [BDB_OPTIONS]
@@ -2890,5 +3134,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, 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, 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, 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 };
 //# sourceMappingURL=devopmaat-badaboom.mjs.map