@devopmaat/badaboom 1.3.4 → 1.3.5

package/fesm2022/devopmaat-badaboom.mjs

@@ -1,22 +1,24 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Component, makeEnvironmentProviders, Input, HostBinding, Pipe, Directive, ViewChild, Optional, Self, Injector, EventEmitter, ContentChildren, Output, HostListener, LOCALE_ID, Inject } 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 { HttpClient, HttpErrorResponse, provideHttpClient, withInterceptors } from '@angular/common/http';
-import { BehaviorSubject, catchError, throwError, filter, take, concatMap as concatMap$1, of, tap as tap$1, map, Subject, finalize, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs';
-import { tap, concatMap, shareReplay, map as map$1 } from 'rxjs/operators';
+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 { tap, catchError, filter, concatMap, shareReplay, map as map$1 } from 'rxjs/operators';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+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 i2$3 from '@angular/router';
-import { RouterOutlet, Router, provideRouter, RouterLink } from '@angular/router';
-import * as i1 from '@angular/material/paginator';
+import { Router, RouterOutlet, provideRouter, RouterLink } from '@angular/router';
+import * as i1$2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, ControlContainer, Validators, FormGroup } from '@angular/forms';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 import * as i6 from '@angular/material/autocomplete';
 import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import * as i8 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 from '@angular/material/input';
@@ -31,11 +33,9 @@ import * as i4$1 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$2 from '@angular/youtube-player';
+import * as i1$3 from '@angular/youtube-player';
 import { YouTubePlayerModule } from '@angular/youtube-player';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$3 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
 import * as i3$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 
@@ -107,6 +107,143 @@ class BdbOptionsBuilder {
 }
 const BDB_OPTIONS = new InjectionToken('BdbOptions');
 
+class BdbAlertComponent {
+    constructor() {
+        this.class = 'bdb-alert';
+        this.label = '';
+        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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }] } });
+
+const LoginFailed = 'LOGIN_FAILED';
+const LoginNotAllowed = 'LOGIN_NOT_ALLOWED';
+const LoginRequiredTwoFactor = 'LOGIN_REQUIRES_TWO_FACTOR';
+const LockedOut = 'LOCKED_OUT';
+class BdbAlertErrorResponseComponent {
+    constructor() {
+        this.loginFailed = false;
+        this.alertClass = 'error';
+        this.icon = 'error_outline';
+        this.label = 'Onbekende fout';
+        this.message = '';
+    }
+    validationFailures() {
+        if (this.value && this.value.error && this.value.error.errors) {
+            const ret = [];
+            const pd = this.value.error;
+            if (pd.errors) {
+                const errors = pd.errors;
+                Object.keys(errors).forEach((x) => ret.push(`${errors[x]}`));
+            }
+            return ret;
+        }
+        return null;
+    }
+    ngOnChanges() {
+        this.errorCode = undefined;
+        if (this.value) {
+            switch (this.value.status) {
+                case 0:
+                    this.label = 'Communicatie mislukt';
+                    this.message = 'Controleer uw internetverbinding';
+                    break;
+                case 400:
+                    this.alertClass = 'warn';
+                    this.icon = 'warning';
+                    this.label = 'Invoerfout';
+                    break;
+                case 401:
+                    if (this.value.error === LoginFailed) {
+                        this.label = 'Inloggen mislukt';
+                        this.message = 'Controleer gegevens en probeer opnieuw';
+                    }
+                    else if (this.value.error === LoginNotAllowed) {
+                        this.label = 'Inloggen mislukt';
+                        this.message = 'Login niet toegestaan';
+                    }
+                    else if (this.value.error === LockedOut) {
+                        this.alertClass = 'warn';
+                        this.icon = 'warning';
+                        this.label = 'Tijdelijk geblokkeerd';
+                        this.message = 'Te veel mislukte inlogpogingen';
+                    }
+                    else if (this.value.error === LoginRequiredTwoFactor) {
+                        this.label = 'Inloggen mislukt';
+                        this.message = 'Tweestapsverificatie vereist';
+                    }
+                    else {
+                        this.label = 'Onbevoegd';
+                        this.message = 'U bent niet bevoegd voor de gevraagde actie';
+                    }
+                    break;
+                case 403:
+                    this.label = 'Toegang geweigerd';
+                    this.message = 'Onvoldoende rechten voor de gevraagde actie';
+                    break;
+                case 404:
+                    this.label = 'Niet gevonden';
+                    this.message = 'De opgevraagde bron kon niet worden gevonden';
+                    break;
+                case 415:
+                    this.label = 'Mediatype niet ondersteund';
+                    this.message = this.value.error;
+                    break;
+                case 500: {
+                    this.label = this.value.error?.title ?? 'Fout bij afhandeling';
+                    const errorDetail = this.value.error?.exceptionLogCode;
+                    if (errorDetail && errorDetail.match(/[A-Z0-9]{6}/g)) {
+                        this.errorCode = `${errorDetail.slice(0, 2)}-${errorDetail.slice(2, 4)}-${errorDetail.slice(4)}`;
+                    }
+                    else {
+                        this.message = this.value.error?.detail;
+                    }
+                    break;
+                }
+                default:
+                    this.label = 'Onbekende fout';
+                    this.message = 'Status: ' + this.value.status;
+                    break;
+            }
+        }
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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" }]
+        }] });
+
 class BdbService {
     constructor(areaName) {
         const bdbOptions = inject(BDB_OPTIONS);
@@ -169,6 +306,9 @@ function getTokenFromAuthorizationHeader(header) {
 class AuthService {
     constructor(accountService) {
         this.accountService = accountService;
+        this.matDialog = inject(MatDialog);
+        this.router = inject(Router);
+        this.bdbOptions = inject(BDB_OPTIONS);
         const token = localStorage.getItem(tokenKey);
         this.token$ = new BehaviorSubject(token);
         const accountInfo = token === null ? null : this.getAccountInfoFromToken(token);
@@ -192,13 +332,28 @@ class AuthService {
         }
         const refreshToken = localStorage.getItem(refreshTokenKey);
         if (!refreshToken) {
-            throw new Error('Versen login token mislukt');
+            throw new Error('Verversen login token mislukt');
+        }
+        if (this.currentRefreshTokenRequest === undefined) {
+            this.currentRefreshTokenRequest = this.accountService
+                .exchangeRefreshToken({ token: currentToken, refreshToken })
+                .pipe(tap(() => (this.currentRefreshTokenRequest = undefined)), catchError((x) => {
+                this.logout();
+                this.matDialog
+                    .open(BdbErrorResponseDialogComponent, {
+                    data: { title: 'Authenticatie verversen mislukt. U wordt nu uitgelogd', error: x },
+                })
+                    .afterClosed()
+                    .subscribe({
+                    next: () => this.router.navigate(['/' + this.bdbOptions.authOptions?.loginPath]),
+                });
+                return of(undefined);
+            }), filter(x => x !== undefined), concatMap(x => {
+                this.processTokenResponse(x);
+                return this.token$;
+            }));
         }
-        this.token$.next(null);
-        return this.accountService.exchangeRefreshToken({ token: currentToken, refreshToken }).pipe(concatMap(x => {
-            this.processTokenResponse(x);
-            return this.token$;
-        }));
+        return this.currentRefreshTokenRequest;
     }
     resetPassword(value) {
         return this.accountService.resetPassword(value).pipe(tap({
@@ -261,13 +416,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
 const TokenExpired = 'token-expired';
 const tokenExpiredInterceptor = (req, next) => {
     const authService = inject(AuthService);
-    return next(req).pipe(catchError(error => {
+    return next(req).pipe(catchError$1(error => {
         if (!(error instanceof HttpErrorResponse) || error.status !== 401 || !error.headers.get(TokenExpired)) {
             return throwError(() => error);
         }
         const authorizationHeader = req.headers.get('Authorization');
         const expiredToken = getTokenFromAuthorizationHeader(authorizationHeader ?? '');
-        return authService.refreshToken(expiredToken).pipe(filter(x => x !== null), take(1), concatMap$1(x => next(req.clone({
+        return authService.refreshToken(expiredToken).pipe(filter$1(x => x !== null), take(1), concatMap$1(x => next(req.clone({
             setHeaders: {
                 Authorization: getAuthorizationHeaderFromToken(x ?? ''),
             },
@@ -337,7 +492,7 @@ const resetPasswordResolver = route => {
         if (!x) {
             throw new Error('Token is not valid');
         }
-    }), catchError(() => router.navigate(['/', invalidTokenPath])), map(() => model));
+    }), catchError$1(() => router.navigate(['/', invalidTokenPath])), map(() => model));
 };
 
 const tokenInterceptor = (req, next) => {
@@ -439,7 +594,7 @@ class BdbDataSource {
         this.loadingSubject.next(true);
         this.errorSubject.next(null);
         this.loadMethod(this.service, this.request)
-            .pipe(catchError((err) => {
+            .pipe(catchError$1((err) => {
             this.errorSubject.next(err);
             return of({ page: 0, count: 0, rows: [], pageSize: 15 });
         }), finalize(() => this.loadingSubject.next(false)))
@@ -475,7 +630,7 @@ class BdbPaginatorComponent {
         this.dataSource.load();
     }
     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.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbPaginatorComponent, decorators: [{
             type: Component,
@@ -659,7 +814,7 @@ class BdbSearchComponent {
         this.isDisabled = false;
         ngControl.valueAccessor = this;
         this.searchCtrl.valueChanges
-            .pipe(takeUntil(this._onDestroy), debounceTime(100), distinctUntilChanged(), filter(x => typeof x === 'string'))
+            .pipe(takeUntil(this._onDestroy), debounceTime(100), distinctUntilChanged(), filter$1(x => typeof x === 'string'))
             .subscribe({
             next: x => {
                 this.dataSource.request.query = x;
@@ -742,7 +897,7 @@ class BdbSearchComponent {
         this.onChange(null);
     }
     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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbSearchComponent, decorators: [{
             type: Component,
@@ -909,131 +1064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }] });
 
-class BdbAlertComponent {
-    constructor() {
-        this.class = 'bdb-alert';
-        this.label = '';
-        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$1.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: [{
-            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: [{
-                type: HostBinding,
-                args: ['class']
-            }], label: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], inline: [{
-                type: Input
-            }] } });
-
-const LoginFailed = 'LOGIN_FAILED';
-const LoginNotAllowed = 'LOGIN_NOT_ALLOWED';
-const LoginRequiredTwoFactor = 'LOGIN_REQUIRES_TWO_FACTOR';
-const LockedOut = 'LOCKED_OUT';
-class BdbAlertErrorResponseComponent {
-    constructor() {
-        this.loginFailed = false;
-        this.alertClass = 'error';
-        this.icon = 'error_outline';
-        this.label = 'Onbekende fout';
-        this.message = '';
-    }
-    validationFailures() {
-        if (this.value && this.value.error && this.value.error.errors) {
-            const ret = [];
-            const pd = this.value.error;
-            if (pd.errors) {
-                const errors = pd.errors;
-                Object.keys(errors).forEach((x) => ret.push(`${errors[x]}`));
-            }
-            return ret;
-        }
-        return null;
-    }
-    ngOnChanges() {
-        this.errorCode = undefined;
-        if (this.value) {
-            switch (this.value.status) {
-                case 0:
-                    this.label = 'Communicatie mislukt';
-                    this.message = 'Controleer uw internetverbinding';
-                    break;
-                case 400:
-                    this.alertClass = 'warn';
-                    this.icon = 'warning';
-                    this.label = 'Invoerfout';
-                    break;
-                case 401:
-                    if (this.value.error === LoginFailed) {
-                        this.label = 'Inloggen mislukt';
-                        this.message = 'Controleer gegevens en probeer opnieuw';
-                    }
-                    else if (this.value.error === LoginNotAllowed) {
-                        this.label = 'Inloggen mislukt';
-                        this.message = 'Login niet toegestaan';
-                    }
-                    else if (this.value.error === LockedOut) {
-                        this.alertClass = 'warn';
-                        this.icon = 'warning';
-                        this.label = 'Tijdelijk geblokkeerd';
-                        this.message = 'Te veel mislukte inlogpogingen';
-                    }
-                    else if (this.value.error === LoginRequiredTwoFactor) {
-                        this.label = 'Inloggen mislukt';
-                        this.message = 'Tweestapsverificatie vereist';
-                    }
-                    else {
-                        this.label = 'Onbevoegd';
-                        this.message = 'U bent niet bevoegd voor de gevraagde actie';
-                    }
-                    break;
-                case 403:
-                    this.label = 'Toegang geweigerd';
-                    this.message = 'Onvoldoende rechten voor de gevraagde actie';
-                    break;
-                case 404:
-                    this.label = 'Niet gevonden';
-                    this.message = 'De opgevraagde bron kon niet worden gevonden';
-                    break;
-                case 415:
-                    this.label = 'Mediatype niet ondersteund';
-                    this.message = this.value.error;
-                    break;
-                case 500: {
-                    this.label = this.value.error?.title ?? 'Fout bij afhandeling';
-                    const errorDetail = this.value.error?.exceptionLogCode;
-                    if (errorDetail && errorDetail.match(/[A-Z0-9]{6}/g)) {
-                        this.errorCode = `${errorDetail.slice(0, 2)}-${errorDetail.slice(2, 4)}-${errorDetail.slice(4)}`;
-                    }
-                    else {
-                        this.message = this.value.error?.detail;
-                    }
-                    break;
-                }
-                default:
-                    this.label = 'Onbekende fout';
-                    this.message = 'Status: ' + this.value.status;
-                    break;
-            }
-        }
-    }
-    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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }] } });
-
 class DynamicPipe {
     constructor(injector) {
         this.injector = injector;
@@ -1063,7 +1093,7 @@ class BdbBooleanDisplayComponent {
         this.class = 'bdb-boolean-display';
     }
     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$1.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"] }] }); }
+    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,
@@ -1205,7 +1235,7 @@ class BdbTableComponent {
         return ret;
     }
     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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbTableComponent, decorators: [{
             type: Component,
@@ -1378,7 +1408,7 @@ class BdbFullTableComponent {
         this.contextAction = new EventEmitter();
     }
     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$1.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"] }] }); }
+    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,
@@ -1520,11 +1550,11 @@ class MediaFullTableComponent {
         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  <button ngProjectAs=\"toolbar-item\" mat-button class=\"primary\">test</button>\r\n  <button ngProjectAs=\"toolbar-item\" mat-flat-button class=\"success\">test</button>\r\n  <button ngProjectAs=\"toolbar-item\" mat-flat-button class=\"tertiary\">test</button>\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 }, { 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.ɵ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  <button ngProjectAs=\"toolbar-item\" mat-button class=\"primary\">test</button>\r\n  <button ngProjectAs=\"toolbar-item\" mat-flat-button class=\"success\">test</button>\r\n  <button ngProjectAs=\"toolbar-item\" mat-flat-button class=\"tertiary\">test</button>\r\n  <ng-content></ng-content>\r\n</bdb-full-table>\r\n", styles: [":host{display:contents}\n"] }]
+            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: [{
@@ -1586,7 +1616,7 @@ class BdbYoutubePlayerComponent {
         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$2.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbYoutubePlayerComponent, decorators: [{
             type: Component,
@@ -1664,11 +1694,11 @@ 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\" bdbFlex=\"col 0px start center\" style=\"width: 100%; height: 100%\">\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    <a class=\"file-overlay\" bdbFlex=\"col 0px center center\" [href]=\"getSource(media, true)\" target=\"_blank\" download>\r\n      <div class=\"icon-backdrop bg-primary mat-elevation-z5\" bdbFlex=\"col 0px center center\">\r\n        <mat-icon class=\"i64\">save_alt</mat-icon>\r\n      </div>\r\n    </a>\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%}\n"], dependencies: [{ 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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: BdbMediaDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-media-display', imports: [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\" bdbFlex=\"col 0px start center\" style=\"width: 100%; height: 100%\">\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    <a class=\"file-overlay\" bdbFlex=\"col 0px center center\" [href]=\"getSource(media, true)\" target=\"_blank\" download>\r\n      <div class=\"icon-backdrop bg-primary mat-elevation-z5\" bdbFlex=\"col 0px center center\">\r\n        <mat-icon class=\"i64\">save_alt</mat-icon>\r\n      </div>\r\n    </a>\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%}\n"] }]
+            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"] }]
         }], propDecorators: { media: [{
                 type: Input
             }], mode: [{
@@ -2014,13 +2044,13 @@ class UserTableComponent {
         //       break;
         //   }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: UserTableComponent, deps: [{ token: i1$3.MatDialog }, { token: BdbColumnBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", 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$3.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
                 type: Input
             }], displayedColumns: [{
                 type: Input
@@ -2566,7 +2596,7 @@ class AccessDeniedPageComponent {
         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$1.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
             type: Component,
@@ -2622,7 +2652,7 @@ 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$1.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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
             type: Component,
@@ -2860,5 +2890,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, 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, 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 };
 //# sourceMappingURL=devopmaat-badaboom.mjs.map