@devopmaat/badaboom 1.3.0 → 1.3.3

package/fesm2022/devopmaat-badaboom.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Component, makeEnvironmentProviders, Input, HostBinding, Pipe, Directive, Optional, Self, ViewChild, Injector, EventEmitter, Output, ContentChildren, LOCALE_ID, Inject } from '@angular/core';
+import { InjectionToken, inject, Injectable, Component, makeEnvironmentProviders, Input, HostBinding, Pipe, Directive, Optional, Self, ViewChild, Injector, EventEmitter, Output, ContentChildren, 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';
@@ -8,7 +8,7 @@ import { RouterOutlet, Router, provideRouter, RouterLink } from '@angular/router
 import * as i1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$1 from '@angular/common';
-import { CommonModule } 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';
@@ -32,7 +32,10 @@ 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/material/dialog';
+import * as i1$2 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';
@@ -83,6 +86,9 @@ class BdbOptionsBuilder {
     set backendUrl(url) {
         this._backendUrl = url;
     }
+    set mediaUrl(url) {
+        this._mediaUrl = url;
+    }
     addAuth(configure) {
         this._auth = configure;
     }
@@ -90,7 +96,10 @@ class BdbOptionsBuilder {
         if (!this._backendUrl) {
             throw 'backendUrl mag niet leeg zijn';
         }
-        const options = { backendUrl: this._backendUrl };
+        if (!this._mediaUrl) {
+            throw 'mediaUrl mag niet leeg zijn';
+        }
+        const options = { backendUrl: this._backendUrl, mediaUrl: this._mediaUrl };
         if (this._auth) {
             options.authOptions = new BdbAuthOptionsBuilder(this._auth).build();
         }
@@ -126,10 +135,10 @@ class AccountService extends BdbService {
     validateResetPasswordToken(value) {
         return this.httpClient.post(`${this.baseUrl}/validate-reset-password-token`, value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AccountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AccountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -240,10 +249,10 @@ class AuthService {
             claims: claims,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthService, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AuthService, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -268,10 +277,10 @@ const tokenExpiredInterceptor = (req, next) => {
 };
 
 class AuthContainerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: AuthContainerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<router-outlet></router-outlet>\r\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AuthContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: AuthContainerComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<router-outlet></router-outlet>\r\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AuthContainerComponent, decorators: [{
             type: Component,
             args: [{ imports: [RouterOutlet], template: "<router-outlet></router-outlet>\r\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"] }]
         }] });
@@ -466,10 +475,10 @@ class BdbPaginatorComponent {
         this.dataSource.request.pageSize = event.pageSize;
         this.dataSource.load();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-paginator', imports: [MatPaginatorModule], template: "<mat-paginator\r\n  [pageSize]=\"pageSize\"\r\n  [pageIndex]=\"page\"\r\n  [length]=\"length\"\r\n  (page)=\"changePage($event)\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n  [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n" }]
         }], propDecorators: { dataSource: [{
@@ -499,12 +508,12 @@ class BdbQueryInputComponent {
         this._onDestroy.next();
         this._onDestroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbQueryInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BdbQueryInputComponent, isStandalone: true, selector: "bdb-query-input[dataSource]", inputs: { dataSource: "dataSource" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:var(--mdc-filled-text-field-container-shape);min-height:36px;max-width:100%;flex-direction:row;align-items:center}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbQueryInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: BdbQueryInputComponent, isStandalone: true, selector: "bdb-query-input[dataSource]", inputs: { dataSource: "dataSource" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbQueryInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbQueryInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-query-input[dataSource]', imports: [CommonModule, ReactiveFormsModule, MatIconModule], template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:var(--mdc-filled-text-field-container-shape);min-height:36px;max-width:100%;flex-direction:row;align-items:center}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"] }]
+            args: [{ selector: 'bdb-query-input[dataSource]', imports: [CommonModule, ReactiveFormsModule, MatIconModule], template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n@if (queryFormControl.value) {\r\n  <mat-icon (click)=\"queryFormControl.patchValue(undefined)\" class=\"warn\">clear</mat-icon>\r\n} @else {\r\n  <mat-icon class=\"info\">search</mat-icon>\r\n}\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center;color:var(--mat-sys-on-surface);background-color:var(--mat-sys-surface);border:1px solid var(--mat-sys-outline-variant)}:host:focus-within{border-color:var(--mat-sys-outline)}input{background:inherit;border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -530,10 +539,10 @@ class BdbSearchWrapperBaseComponent {
         }
         this.formControl = ctrl;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbSearchWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: BdbSearchWrapperBaseComponent, isStandalone: true, selector: "ng-component", inputs: { controlName: "controlName", control: "control" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbSearchWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: BdbSearchWrapperBaseComponent, isStandalone: true, selector: "ng-component", inputs: { controlName: "controlName", control: "control" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbSearchWrapperBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbSearchWrapperBaseComponent, decorators: [{
             type: Component,
             args: [{ template: '', standalone: true }]
         }], propDecorators: { controlName: [{
@@ -549,10 +558,10 @@ class FunctionPipe {
     transform(value, fn) {
         return fn(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "function" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "function" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: FunctionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FunctionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'function',
@@ -618,10 +627,10 @@ class BdbFormErrorDirective {
         const errorMessage = getErrorMessage(validationErrorKey, validationErrorValue);
         this.renderer.setProperty(this.element.nativeElement, 'innerText', errorMessage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.ControlContainer }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BdbFormErrorDirective, isStandalone: true, selector: "[bdbFormError]", inputs: { bdbFormError: "bdbFormError" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.ControlContainer }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: BdbFormErrorDirective, isStandalone: true, selector: "[bdbFormError]", inputs: { bdbFormError: "bdbFormError" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFormErrorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFormErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbFormError]',
@@ -733,10 +742,10 @@ class BdbSearchComponent {
         this.searchInput?.nativeElement.focus();
         this.onChange(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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.0.6", 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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }, { kind: "pipe", type: FunctionPipe, name: "function" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", 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: i7.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.0.6", ngImport: i0, type: BdbSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-search', imports: [
                         CommonModule,
@@ -779,10 +788,10 @@ class BdbCellDirective {
         this.templateRef = templateRef;
         this.bdbCellDef = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BdbCellDirective, isStandalone: true, selector: "ng-template[bdbCellDef]", inputs: { bdbCellDef: "bdbCellDef" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: BdbCellDirective, isStandalone: true, selector: "ng-template[bdbCellDef]", inputs: { bdbCellDef: "bdbCellDef" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[bdbCellDef]',
@@ -891,67 +900,32 @@ class BdbColumnBuilder {
             textAlign: options?.textAlign,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbColumnBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbColumnBuilder, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbColumnBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbColumnBuilder, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbColumnBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbColumnBuilder, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-function mixinColor(base, defaultColor) {
-    return class extends base {
-        get color() {
-            return this._color;
-        }
-        set color(value) {
-            const colorPalette = value || this.defaultColor;
-            if (colorPalette !== this._color) {
-                if (this._color) {
-                    this._elementRef.nativeElement.classList.remove(`bdb-${this._color}`);
-                }
-                if (colorPalette) {
-                    this._elementRef.nativeElement.classList.add(`bdb-${colorPalette}`);
-                }
-                this._color = colorPalette;
-            }
-        }
-        constructor(...args) {
-            super(...args);
-            this.defaultColor = defaultColor;
-            // Set the default color that can be specified from the mixin.
-            this.color = defaultColor;
-        }
-    };
-}
-
-// Boilerplate for applying mixins to BdbAlert.
-const _BdbAlertBase = mixinColor(class {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-    }
-});
-class BdbAlertComponent extends _BdbAlertBase {
-    constructor(elementRef) {
-        super(elementRef);
+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.0.6", ngImport: i0, type: BdbAlertComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: BdbAlertComponent, isStandalone: true, selector: "bdb-alert", inputs: { color: "color", label: "label", icon: "icon", inline: "inline" }, host: { properties: { "class": "this.class" } }, usesInheritance: true, 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.0.6", ngImport: i0, type: BdbAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
+        }], ctorParameters: () => [], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
-            }], color: [{
-                type: Input
             }], label: [{
                 type: Input
             }], icon: [{
@@ -968,7 +942,6 @@ class BdbAlertErrorResponseComponent {
     constructor() {
         this.loginFailed = false;
         this.alertClass = 'error';
-        this.color = 'danger';
         this.icon = 'error_outline';
         this.label = 'Onbekende fout';
         this.message = '';
@@ -987,7 +960,6 @@ class BdbAlertErrorResponseComponent {
     }
     ngOnChanges() {
         this.errorCode = undefined;
-        this.color = 'danger';
         if (this.value) {
             switch (this.value.status) {
                 case 0:
@@ -995,7 +967,7 @@ class BdbAlertErrorResponseComponent {
                     this.message = 'Controleer uw internetverbinding';
                     break;
                 case 400:
-                    this.color = this.alertClass = 'warn';
+                    this.alertClass = 'warn';
                     this.icon = 'warning';
                     this.label = 'Invoerfout';
                     break;
@@ -1009,7 +981,7 @@ class BdbAlertErrorResponseComponent {
                         this.message = 'Login niet toegestaan';
                     }
                     else if (this.value.error === LockedOut) {
-                        this.color = this.alertClass = 'warn';
+                        this.alertClass = 'warn';
                         this.icon = 'warning';
                         this.label = 'Tijdelijk geblokkeerd';
                         this.message = 'Te veel mislukte inlogpogingen';
@@ -1053,12 +1025,12 @@ class BdbAlertErrorResponseComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbAlertErrorResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: BdbAlertErrorResponseComponent, isStandalone: true, selector: "bdb-alert-error-response", inputs: { value: "value" }, usesOnChanges: true, ngImport: i0, template: "<bdb-alert [color]=\"color\" [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: ["color", "label", "icon", "inline"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbAlertErrorResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.0.6", ngImport: i0, type: BdbAlertErrorResponseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbAlertErrorResponseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-alert-error-response', imports: [CommonModule, BdbAlertComponent], template: "<bdb-alert [color]=\"color\" [icon]=\"icon\" [label]=\"label\" *ngIf=\"value\" [class]=\"alertClass\">\r\n  <ng-container [ngSwitch]=\"value.status\">\r\n    <ng-container *ngSwitchCase=\"400\">\r\n      <div *ngFor=\"let message of validationFailures()\">{{ message }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"500\">\r\n      <div *ngIf=\"errorCode; else displayMessage\">\r\n        Foutcode voor technische ondersteuning: <strong>{{ errorCode }}</strong>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</bdb-alert>\r\n\r\n<ng-template #displayMessage>\r\n  {{ message }}\r\n</ng-template>\r\n", styles: [".alert{padding:8px;border-radius:4px;border:1px solid}.alert.warn{background-color:#fbe9e7;border-color:#d84315}.alert.danger{background-color:#ffebee;border-color:#c62828}\n"] }]
+            args: [{ selector: 'bdb-alert-error-response', imports: [CommonModule, BdbAlertComponent], 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
             }] } });
@@ -1076,10 +1048,10 @@ class DynamicPipe {
         const pipe = injector.get(requiredPipe);
         return pipe.transform(value, pipeArgs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: DynamicPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DynamicPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dynamicPipe',
@@ -1091,12 +1063,12 @@ class BdbBooleanDisplayComponent {
     constructor() {
         this.class = 'bdb-boolean-display';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbBooleanDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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,.true{display:block}\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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbBooleanDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbBooleanDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbBooleanDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-boolean-display', imports: [CommonModule, MatIconModule], template: "<mat-icon *ngIf=\"value === false\" class=\"false\">clear</mat-icon>\r\n<mat-icon *ngIf=\"value === true\" class=\"true\">check</mat-icon>\r\n", styles: [".false,.true{display:block}\n"] }]
+            args: [{ selector: 'bdb-boolean-display', imports: [CommonModule, MatIconModule], template: "<mat-icon *ngIf=\"value === false\" class=\"false\">clear</mat-icon>\r\n<mat-icon *ngIf=\"value === true\" class=\"true\">check</mat-icon>\r\n", styles: [".false{display:block;color:var(--mat-sys-error)}.true{display:block;color:var(--bdb-sys-success)}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -1108,6 +1080,7 @@ class BdbTableComponent {
     constructor() {
         this._onDestroy = new Subject();
         this.columns = [];
+        this.autoLoad = undefined;
         this.displayedColumns = [];
         this.contextActions = [];
         this.selectOnRowClick = true;
@@ -1122,7 +1095,9 @@ class BdbTableComponent {
         };
     }
     ngOnInit() {
-        this.load();
+        if (this.autoLoad !== false) {
+            this.load();
+        }
     }
     ngOnChanges() {
         if (this.columns && !this.displayedColumns.length) {
@@ -1230,10 +1205,10 @@ class BdbTableComponent {
         }
         return ret;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: BdbTableComponent, isStandalone: true, selector: "bdb-table[dataSource]", inputs: { columns: "columns", dataSource: "dataSource", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-table[dataSource]', imports: [
                         CommonModule,
@@ -1250,6 +1225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 type: Input
             }], dataSource: [{
                 type: Input
+            }], autoLoad: [{
+                type: Input
             }], displayedColumns: [{
                 type: Input
             }], contextActions: [{
@@ -1372,10 +1349,10 @@ class BdbFlexDirective {
     validateSpacing(spacing) {
         return spacing;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BdbFlexDirective, isStandalone: true, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: { bdbFlex: "bdbFlex", bdbFlexDirection: "bdbFlexDirection", bdbFlexGap: "bdbFlexGap", bdbFlexSpacing: "bdbFlexSpacing" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFlexDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: BdbFlexDirective, isStandalone: true, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: { bdbFlex: "bdbFlex", bdbFlexDirection: "bdbFlexDirection", bdbFlexGap: "bdbFlexGap", bdbFlexSpacing: "bdbFlexSpacing" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFlexDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFlexDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]',
@@ -1395,15 +1372,16 @@ class BdbFullTableComponent {
     constructor() {
         this.columns = [];
         this.displayedColumns = [];
+        this.autoLoad = undefined;
         this.contextActions = [];
         this.showToolbar = true;
         this.rowClick = new EventEmitter();
         this.contextAction = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: BdbFullTableComponent, isStandalone: true, selector: "bdb-full-table", inputs: { dataSource: "dataSource", columns: "columns", displayedColumns: "displayedColumns", 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 bdbFlex=\"row 8px space-between center\" style=\"flex: 0 0 auto\">\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  [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\" style=\"flex: 0 0 auto\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--sys-surface-container-lowest)}\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", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFullTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFullTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-full-table', imports: [
                         CommonModule,
@@ -1413,13 +1391,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         BdbPaginatorComponent,
                         BdbTableComponent,
                         BdbCellDirective,
-                    ], template: "@if (showToolbar) {\r\n  <mat-toolbar bdbFlex=\"row 8px space-between center\" style=\"flex: 0 0 auto\">\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  [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\" style=\"flex: 0 0 auto\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--sys-surface-container-lowest)}\n"] }]
+                    ], template: "@if (showToolbar) {\r\n  <mat-toolbar>\r\n    <div bdbFlex=\"row 8px start center\">\r\n      <ng-content select=\"toolbar-item\"></ng-content>\r\n    </div>\r\n    <bdb-query-input [dataSource]=\"dataSource\"></bdb-query-input>\r\n  </mat-toolbar>\r\n}\r\n<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [autoLoad]=\"autoLoad\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [selection]=\"selection\"\r\n  [rowColor]=\"rowColor\"\r\n  [contextActions]=\"contextActions\"\r\n  (contextAction)=\"contextAction.emit($event)\"\r\n  (rowClick)=\"rowClick.emit($event)\">\r\n  @for (cellTemplate of cellTemplates; track cellTemplate.bdbCellDef) {\r\n    <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n      <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n    </ng-template>\r\n  }\r\n</bdb-table>\r\n<bdb-paginator [dataSource]=\"dataSource\"></bdb-paginator>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}\n"] }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], columns: [{
                 type: Input
             }], displayedColumns: [{
                 type: Input
+            }], autoLoad: [{
+                type: Input
             }], selection: [{
                 type: Input
             }], contextActions: [{
@@ -1464,10 +1444,10 @@ class ExceptionLogTableComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExceptionLogTableComponent, deps: [{ token: BdbColumnBuilder }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: ExceptionLogTableComponent, isStandalone: true, selector: "bdb-exception-log-table[dataSource]", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  (contextAction)=\"onContextAction($event)\">\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ExceptionLogTableComponent, deps: [{ token: BdbColumnBuilder }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ExceptionLogTableComponent, isStandalone: true, selector: "bdb-exception-log-table[dataSource]", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  (contextAction)=\"onContextAction($event)\">\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExceptionLogTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ExceptionLogTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-exception-log-table[dataSource]', imports: [CommonModule, BdbTableComponent], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"onRowClick($event)\"\r\n  (contextAction)=\"onContextAction($event)\">\r\n</bdb-table>\r\n" }]
         }], ctorParameters: () => [{ type: BdbColumnBuilder }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }], propDecorators: { dataSource: [{
@@ -1480,6 +1460,397 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 type: Input
             }] } });
 
+var MediaType;
+(function (MediaType) {
+    MediaType["Image"] = "Image";
+    MediaType["Video"] = "Video";
+    MediaType["File"] = "File";
+})(MediaType || (MediaType = {}));
+const MediaTypeMap = new Map([
+    [MediaType.Image, 'Afbeelding'],
+    [MediaType.Video, 'Video'],
+    [MediaType.File, 'Bestand'],
+]);
+
+class MediaTypePipe {
+    transform(value) {
+        if (value === undefined) {
+            return undefined;
+        }
+        return MediaTypeMap.get(value) ?? '???';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: MediaTypePipe, isStandalone: true, name: "mediaType" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mediaType',
+                }]
+        }] });
+
+class FileSizePipe {
+    transform(bytes) {
+        if (bytes === undefined) {
+            return undefined;
+        }
+        if (isNaN(bytes) || bytes === 0)
+            return '0 Bytes';
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(1))} ${sizes[i]}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fileSize',
+                }]
+        }] });
+
+class MediaFullTableComponent {
+    constructor() {
+        this.displayedColumns = [];
+        this.showToolbar = true;
+        this.contextActions = [];
+        this.contextAction = new EventEmitter();
+        this.rowClick = new EventEmitter();
+        this.cb = inject((BdbColumnBuilder));
+        this.columns = this.cb.build(this.cb.enum(x => x.type, 'Type', { pipe: MediaTypePipe, width: 120 }), this.cb.string(x => x.fileName, 'Bestandsnaam'), this.cb.string(x => x.reference, 'Referentie', { width: 200 }), this.cb.number(x => x.fileSize, 'Bestandsgrootte', { pipe: FileSizePipe, width: 200 }), this.cb.number(x => x.height, 'Hoogte', { width: 200 }), this.cb.number(x => x.width, 'Breedte', { width: 200 }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaFullTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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"] }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], contextActions: [{
+                type: Input
+            }], contextAction: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }] } });
+
+class MediaTableComponent {
+    constructor() {
+        this.displayedColumns = [];
+        this.contextActions = [];
+        this.contextAction = new EventEmitter();
+        this.rowClick = new EventEmitter();
+        this.cb = inject((BdbColumnBuilder));
+        this.columns = this.cb.build(this.cb.enum(x => x.type, 'Type', { pipe: MediaTypePipe, width: 120 }), this.cb.string(x => x.fileName, 'Bestandsnaam'), this.cb.string(x => x.reference, 'Referentie', { width: 200 }), this.cb.number(x => x.fileSize, 'Bestandsgrootte', { pipe: FileSizePipe, width: 200 }), this.cb.number(x => x.height, 'Hoogte', { width: 200 }), this.cb.number(x => x.width, 'Breedte', { width: 200 }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: MediaTableComponent, isStandalone: true, selector: "bdb-media-table", inputs: { dataSource: "dataSource", displayedColumns: "displayedColumns", contextActions: "contextActions" }, outputs: { contextAction: "contextAction", rowClick: "rowClick" }, ngImport: i0, template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n</bdb-table>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BdbTableComponent, selector: "bdb-table[dataSource]", inputs: ["columns", "dataSource", "autoLoad", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-media-table', imports: [CommonModule, BdbTableComponent], template: "<bdb-table\r\n  [columns]=\"columns\"\r\n  [dataSource]=\"dataSource\"\r\n  [displayedColumns]=\"displayedColumns\"\r\n  [contextActions]=\"contextActions\"\r\n  (rowClick)=\"rowClick.emit($event)\"\r\n  (contextAction)=\"contextAction.emit($event)\">\r\n</bdb-table>\r\n" }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], contextActions: [{
+                type: Input
+            }], contextAction: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }] } });
+
+class BdbYoutubePlayerComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.videoHeight = 100;
+        this.videoWidth = 100;
+    }
+    ngAfterViewInit() {
+        this.onResize();
+        window.addEventListener('resize', this.onResize.bind(this));
+    }
+    onResize() {
+        // you can remove this line if you want to have wider video player than 1200px
+        this.videoWidth = Math.min(this.youTubePlayer.nativeElement.clientWidth, 1200);
+        // so you keep the ratio
+        this.videoHeight = this.videoWidth * 0.6;
+        this.changeDetectorRef.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbYoutubePlayerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbYoutubePlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-youtube-player', imports: [YouTubePlayerModule], template: "<div #youTubePlayer class=\"bdb-youtube-player\">\r\n  <youtube-player [width]=\"videoWidth\" [height]=\"videoHeight\" [videoId]=\"videoId\"></youtube-player>\r\n</div>\r\n", styles: [".bdb-youtube-player-container{display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1/1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { youTubePlayer: [{
+                type: ViewChild,
+                args: ['youTubePlayer']
+            }], videoId: [{
+                type: Input
+            }] } });
+
+class BdbMediaDisplayComponent {
+    constructor() {
+        this.mode = 'preview';
+        this.bdbOptions = inject(BDB_OPTIONS);
+        this.mediaType = MediaType;
+        this.hasError = false;
+    }
+    ngOnChanges() {
+        this.src = this.getSource(this.media);
+        this.hasError = false;
+        this.noMediaUrl =
+            this.bdbOptions.backendUrl + '/na.png' + `?width=${this.width ?? '256'}&height=${this.height ?? '256'}`;
+    }
+    getSource(media, download = false) {
+        if (!media) {
+            return undefined;
+        }
+        const params = new URLSearchParams();
+        if (this.width) {
+            params.append('width', `${this.width}`);
+        }
+        if (this.height) {
+            params.append('height', `${this.height}`);
+        }
+        switch (media.type) {
+            case MediaType.File:
+                if (media.fileName && this.getFileExtension(media.fileName) === 'pdf') {
+                    if (download) {
+                        return `${this.bdbOptions.mediaUrl}/${media.fileName}`;
+                    }
+                    const previewFileName = media.preview?.fileName;
+                    if (!previewFileName) {
+                        return undefined;
+                    }
+                    if (this.mode === 'live') {
+                        params.set('width', '512');
+                        params.delete('height');
+                    }
+                    return `${this.bdbOptions.mediaUrl}/${previewFileName}?${params.toString()}`;
+                }
+                else {
+                    return undefined;
+                }
+            case MediaType.Image:
+                return `${this.bdbOptions.mediaUrl}/${media.fileName}?${params.toString()}`;
+            case MediaType.Video:
+                return `https://img.youtube.com/vi/${media.reference}/maxresdefault.jpg`;
+        }
+    }
+    errorHandler() {
+        this.hasError = true;
+    }
+    getDownloadUrl() {
+        if (!this.media) {
+            return undefined;
+        }
+        return `${this.bdbOptions.mediaUrl}/${this.media.fileName}`;
+    }
+    getFileExtension(fileName) {
+        const parts = fileName.split('.');
+        if (parts.length === 1 || parts.some(x => x === '')) {
+            return undefined;
+        }
+        return parts.pop()?.toLocaleLowerCase();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbMediaDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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"] }]
+        }], propDecorators: { media: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }] } });
+
+class BdbServiceR extends BdbService {
+    read(request) {
+        return this.httpClient.post(`${this.baseUrl}/read`, request);
+    }
+    get(id) {
+        return this.httpClient.get(`${this.baseUrl}/${id}`);
+    }
+}
+
+class BdbServiceRD extends BdbServiceR {
+    delete(id) {
+        return this.httpClient.delete(`${this.baseUrl}/${id}`);
+    }
+}
+
+class MediaService extends BdbServiceRD {
+    constructor() {
+        super('media');
+    }
+    upload(file) {
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+        return this.httpClient.post(`${this.baseUrl}/upload`, formData);
+    }
+    fromUrl(url) {
+        return this.httpClient.post(`${this.baseUrl}/from-url`, {
+            url: url,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+var DropClass;
+(function (DropClass) {
+    DropClass["Default"] = "drop-box";
+    DropClass["Over"] = "drop-hover";
+})(DropClass || (DropClass = {}));
+class MediaDropDirective {
+    constructor(service) {
+        this.service = service;
+        this.dropStart = new EventEmitter();
+        this.dropComplete = new EventEmitter();
+        this.dropError = new EventEmitter();
+        this.hostClass = DropClass.Default;
+    }
+    dragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            if (event.dataTransfer.types.includes('Files') || event.dataTransfer.types.includes('text/uri-list')) {
+                // this is at least a file / URL
+                this.hostClass = DropClass.Over;
+                event.dataTransfer.dropEffect = 'copy';
+            }
+            else {
+                // reject
+                event.dataTransfer.dropEffect = 'none';
+            }
+        }
+    }
+    dragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.hostClass = DropClass.Default;
+    }
+    drop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            this.hostClass = DropClass.Default;
+            if (event.dataTransfer.types.includes('text/uri-list')) {
+                this.dropStart.emit(event);
+                let url = event.dataTransfer.getData('URL');
+                if (!url) {
+                    url = event.dataTransfer.getData('Text');
+                }
+                this.service.fromUrl(url).subscribe({
+                    next: (x) => this.dropComplete.emit(x),
+                    error: (x) => {
+                        console.log('Fout bij het importeren:', x);
+                        this.dropError.emit(x);
+                    },
+                });
+            }
+            else if (event.dataTransfer.types.includes('Files')) {
+                for (let i = 0; i < event.dataTransfer.files.length; ++i) {
+                    const file = event.dataTransfer.files.item(i);
+                    if (file != null) {
+                        this.service.upload(file).subscribe({
+                            next: (x) => {
+                                this.dropComplete.emit(x);
+                            },
+                            error: (x) => {
+                                this.dropError.emit(x);
+                            },
+                        });
+                    }
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaDropDirective, deps: [{ token: MediaService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: MediaDropDirective, isStandalone: true, selector: "[bdbMediaDrop]", outputs: { dropStart: "dropStart", dropComplete: "dropComplete", dropError: "dropError" }, host: { listeners: { "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)" }, properties: { "class": "this.hostClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: MediaDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbMediaDrop]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: MediaService }], propDecorators: { dropStart: [{
+                type: Output
+            }], dropComplete: [{
+                type: Output
+            }], dropError: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], dragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], dragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], drop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class BdbMediaUploadComponent {
+    constructor() {
+        this.size = 256;
+        this.icon = 'arrow_upload_ready';
+        this.mediaUploaded = new EventEmitter();
+        this.dropError = new EventEmitter();
+    }
+    onDropComplete($event) {
+        this.mediaUploaded.emit($event);
+    }
+    onDropError($event) {
+        this.dropError.emit($event);
+    }
+    onDropStart() {
+        this.dropError.emit(undefined);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbMediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: BdbMediaUploadComponent, isStandalone: true, selector: "bdb-media-upload", inputs: { size: "size", icon: "icon" }, outputs: { mediaUploaded: "mediaUploaded", dropError: "dropError" }, ngImport: i0, template: "<div\r\n  class=\"drop-box\"\r\n  bdbMediaDrop\r\n  (dropComplete)=\"onDropComplete($event)\"\r\n  (dropError)=\"onDropError($event)\"\r\n  (dropStart)=\"onDropStart()\">\r\n  <mat-icon\r\n    [style]=\"\r\n      'font-size: ' + size + 'px; height: 100%; width: 100%; min-width: ' + size + 'px; min-height: ' + size + 'px'\r\n    \"\r\n    >{{ icon }}</mat-icon\r\n  >\r\n</div>\r\n", styles: [".drop-box{display:table;color:#a9a9a9;padding:2px}.drop-hover{display:table;color:#adff2f;border:2px dashed}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: MediaDropDirective, selector: "[bdbMediaDrop]", outputs: ["dropStart", "dropComplete", "dropError"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbMediaUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-media-upload', imports: [MatIconModule, DragDropModule, MediaDropDirective], template: "<div\r\n  class=\"drop-box\"\r\n  bdbMediaDrop\r\n  (dropComplete)=\"onDropComplete($event)\"\r\n  (dropError)=\"onDropError($event)\"\r\n  (dropStart)=\"onDropStart()\">\r\n  <mat-icon\r\n    [style]=\"\r\n      'font-size: ' + size + 'px; height: 100%; width: 100%; min-width: ' + size + 'px; min-height: ' + size + 'px'\r\n    \"\r\n    >{{ icon }}</mat-icon\r\n  >\r\n</div>\r\n", styles: [".drop-box{display:table;color:#a9a9a9;padding:2px}.drop-hover{display:table;color:#adff2f;border:2px dashed}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], mediaUploaded: [{
+                type: Output
+            }], dropError: [{
+                type: Output
+            }] } });
+
 var TaskLogStatus;
 (function (TaskLogStatus) {
     TaskLogStatus["New"] = "New";
@@ -1487,26 +1858,24 @@ var TaskLogStatus;
     TaskLogStatus["Waiting"] = "Waiting";
     TaskLogStatus["Completed"] = "Completed";
 })(TaskLogStatus || (TaskLogStatus = {}));
+const TaskLogStatusMap = new Map([
+    [TaskLogStatus.New, 'Nieuw'],
+    [TaskLogStatus.Running, 'Lopend'],
+    [TaskLogStatus.Waiting, 'Wachten'],
+    [TaskLogStatus.Completed, 'Afgerond'],
+]);
 
 class TaskLogStatusPipe {
     transform(value) {
-        switch (value) {
-            case TaskLogStatus.New:
-                return 'Nieuw';
-            case TaskLogStatus.Running:
-                return 'Lopend';
-            case TaskLogStatus.Waiting:
-                return 'Wachtend';
-            case TaskLogStatus.Completed:
-                return 'Afgerond';
-            default:
-                return '';
+        if (!value) {
+            return undefined;
         }
+        return TaskLogStatusMap.get(value) ?? '???';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: TaskLogStatusPipe, isStandalone: true, name: "taskLogStatus" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: TaskLogStatusPipe, isStandalone: true, name: "taskLogStatus" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogStatusPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogStatusPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogStatus',
@@ -1522,28 +1891,25 @@ var TaskLogOutcome;
     TaskLogOutcome["Warning"] = "Warning";
     TaskLogOutcome["Error"] = "Error";
 })(TaskLogOutcome || (TaskLogOutcome = {}));
+const TaskLogOutcomeMap = new Map([
+    [TaskLogOutcome.Noop, 'Noop'],
+    [TaskLogOutcome.Success, 'Succes'],
+    [TaskLogOutcome.Info, 'Info'],
+    [TaskLogOutcome.Warning, 'Waarschuwing'],
+    [TaskLogOutcome.Error, 'Foutmelding'],
+]);
 
 class TaskLogOutcomePipe {
     transform(value) {
-        switch (value) {
-            case TaskLogOutcome.Noop:
-                return 'Noop';
-            case TaskLogOutcome.Info:
-                return 'Informatie';
-            case TaskLogOutcome.Warning:
-                return 'Waarschuwing';
-            case TaskLogOutcome.Error:
-                return 'Foutmelding';
-            case TaskLogOutcome.Success:
-                return 'Succes';
-            default:
-                return '';
+        if (!value) {
+            return undefined;
         }
+        return TaskLogOutcomeMap.get(value) ?? '???';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogOutcomePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: TaskLogOutcomePipe, isStandalone: true, name: "taskLogOutcome" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogOutcomePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: TaskLogOutcomePipe, isStandalone: true, name: "taskLogOutcome" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogOutcomePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogOutcomePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogOutcome',
@@ -1591,10 +1957,10 @@ class TaskLogParameterValuePipe {
                 }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogParameterValuePipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: TaskLogParameterValuePipe, isStandalone: true, name: "taskLogParameterValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogParameterValuePipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: TaskLogParameterValuePipe, isStandalone: true, name: "taskLogParameterValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogParameterValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogParameterValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'taskLogParameterValue',
@@ -1649,13 +2015,13 @@ class UserTableComponent {
         //       break;
         //   }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserTableComponent, deps: [{ token: i1$2.MatDialog }, { token: BdbColumnBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", 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", "displayedColumns", "contextActions", "selection", "selectOnRowClick", "selectedRowClass", "isClickable", "rowColor"], outputs: ["rowClick", "contextAction"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserTableComponent, deps: [{ token: i1$3.MatDialog }, { token: BdbColumnBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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.0.6", ngImport: i0, type: UserTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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$2.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
+        }], ctorParameters: () => [{ type: i1$3.MatDialog }, { type: BdbColumnBuilder }], propDecorators: { dataSource: [{
                 type: Input
             }], displayedColumns: [{
                 type: Input
@@ -1674,10 +2040,10 @@ class BdbFlexChildDirective {
     ngOnInit() {
         this.renderer.setStyle(this.element.nativeElement, 'flex', this.bdbFlexChild);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFlexChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BdbFlexChildDirective, isStandalone: true, selector: "[bdbFlexChild]", inputs: { bdbFlexChild: "bdbFlexChild" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFlexChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: BdbFlexChildDirective, isStandalone: true, selector: "[bdbFlexChild]", inputs: { bdbFlexChild: "bdbFlexChild" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFlexChildDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFlexChildDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbFlexChild]',
@@ -1825,10 +2191,10 @@ class BdbGridDirective {
             this.renderer.setStyle(this.element.nativeElement, selector, result.input);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbGridDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BdbGridDirective, isStandalone: true, selector: "[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]", inputs: { bdbGrid: "bdbGrid", bdbGridColumns: "bdbGridColumns", bdbGridRows: "bdbGridRows", bdbGridGap: "bdbGridGap" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbGridDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: BdbGridDirective, isStandalone: true, selector: "[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]", inputs: { bdbGrid: "bdbGrid", bdbGridColumns: "bdbGridColumns", bdbGridRows: "bdbGridRows", bdbGridGap: "bdbGridGap" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbGridDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbGridDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]',
@@ -1905,10 +2271,10 @@ class BdbGridChildDirective {
         }
         return [targetList.head.value, targetList.tail.value];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbGridChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: BdbGridChildDirective, isStandalone: true, selector: "[bdbGridChild], [bdbGridColumn], [bdbGridRow]", inputs: { bdbGridChild: "bdbGridChild", bdbGridRow: "bdbGridRow", bdbGridColumn: "bdbGridColumn" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbGridChildDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: BdbGridChildDirective, isStandalone: true, selector: "[bdbGridChild], [bdbGridColumn], [bdbGridRow]", inputs: { bdbGridChild: "bdbGridChild", bdbGridRow: "bdbGridRow", bdbGridColumn: "bdbGridColumn" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbGridChildDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbGridChildDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bdbGridChild], [bdbGridColumn], [bdbGridRow]',
@@ -1931,10 +2297,10 @@ class BdbCollapseRowComponent {
     get isCollapsed() {
         return this.collapsed;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbCollapseRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: BdbCollapseRowComponent, isStandalone: true, selector: "bdb-collapse-row", inputs: { collapsed: "collapsed", canCollapse: "canCollapse" }, host: { properties: { "class": "this.class", "class.collapsed": "this.isCollapsed" } }, ngImport: i0, template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbCollapseRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: BdbCollapseRowComponent, isStandalone: true, selector: "bdb-collapse-row", inputs: { collapsed: "collapsed", canCollapse: "canCollapse" }, host: { properties: { "class": "this.class", "class.collapsed": "this.isCollapsed" } }, ngImport: i0, template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbCollapseRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbCollapseRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-collapse-row', imports: [MatIconModule], template: "<div class=\"left\">\r\n  <ng-content select=\"left\"></ng-content>\r\n</div>\r\n<div class=\"gap\">\r\n  <div class=\"indicator\" (click)=\"collapsed = canCollapse && !collapsed\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"middle\">\r\n      <mat-icon>{{ collapsed ? 'left_panel_open' : 'left_panel_close' }}</mat-icon>\r\n    </div>\r\n    <div class=\"bottom\"></div>\r\n  </div>\r\n</div>\r\n<div class=\"right\">\r\n  <ng-content select=\"right\"></ng-content>\r\n</div>\r\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:start;align-items:stretch}:host>.gap{flex:0 0 16px;position:relative}:host>.gap .indicator{z-index:101;position:absolute;inset:0 -8px;display:none;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer}:host>.gap .indicator .top,:host>.gap .indicator .bottom{flex:1;margin:0 12px}:host>.gap .indicator .top{border-radius:4px 4px 0 0}:host>.gap .indicator .bottom{border-radius:0 0 4px 4px}:host>.gap .indicator .middle{flex:0 0 24px;border-radius:4px;padding:4px;display:flex;align-items:center;justify-content:center}:host>.gap:hover .indicator{display:flex}:host>.left,:host>.right{flex:0 0 calc(50% - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:stretch;align-content:stretch}:host.collapsed>.left{flex:0 0 8px;visibility:hidden}:host.collapsed>.right{flex-grow:1}:host.collapsed>.gap .indicator{display:flex}:host .left{transition:flex .2s ease-in-out}\n"] }]
         }], propDecorators: { collapsed: [{
@@ -1954,12 +2320,12 @@ class BdbFieldComponent {
         this.class = 'bdb-field';
         this.label = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: BdbFieldComponent, isStandalone: true, selector: "bdb-field", inputs: { label: "label" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: BdbFieldComponent, isStandalone: true, selector: "bdb-field", inputs: { label: "label" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--bdb-field-container-color);border:1px solid var(--bdb-field-border-color);border-bottom-width:2px;color:var(--bdb-field-color);border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));min-height:52px;gap:2px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic;color:var(--bdb-field-label-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: BdbFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BdbFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bdb-field', imports: [CommonModule], template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic}\n"] }]
+            args: [{ selector: 'bdb-field', imports: [CommonModule], template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--bdb-field-container-color);border:1px solid var(--bdb-field-border-color);border-bottom-width:2px;color:var(--bdb-field-color);border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));min-height:52px;gap:2px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;font-variant:italic;color:var(--bdb-field-label-color)}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding
             }], label: [{
@@ -1973,10 +2339,10 @@ class PlainNumberPipe {
         }
         return '' + value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PlainNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: PlainNumberPipe, isStandalone: true, name: "bdbPlainNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PlainNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: PlainNumberPipe, isStandalone: true, name: "bdbPlainNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PlainNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: PlainNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'bdbPlainNumber',
@@ -1984,27 +2350,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }] });
 
-class BdbServiceR extends BdbService {
-    read(request) {
-        return this.httpClient.post(`${this.baseUrl}/read`, request);
-    }
-    get(id) {
-        return this.httpClient.get(`${this.baseUrl}/${id}`);
-    }
-}
-
 class BdbServiceCR extends BdbServiceR {
     create(createModel) {
         return this.httpClient.post(this.baseUrl, createModel);
     }
 }
 
-class BdbServiceRD extends BdbServiceR {
-    delete(id) {
-        return this.httpClient.delete(`${this.baseUrl}/${id}`);
-    }
-}
-
 class BdbServiceRU extends BdbServiceR {
     update(updateModel) {
         return this.httpClient.put(this.baseUrl, updateModel);
@@ -2039,34 +2390,10 @@ class ExceptionLogService extends BdbServiceR {
     constructor() {
         super('exception-log');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExceptionLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExceptionLogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ExceptionLogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class MediaService extends BdbServiceRD {
-    constructor() {
-        super('media');
-    }
-    upload(file) {
-        const formData = new FormData();
-        formData.append('file', file, file.name);
-        return this.httpClient.post(`${this.baseUrl}/upload`, formData);
-    }
-    fromUrl(url) {
-        return this.httpClient.post(`${this.baseUrl}/from-url`, {
-            url: url,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MediaService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ExceptionLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ExceptionLogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: MediaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ExceptionLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2077,10 +2404,10 @@ class RoleService extends BdbServiceR {
     constructor() {
         super('role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RoleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RoleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: RoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2094,10 +2421,10 @@ class TaskLogService extends BdbServiceCR {
     start(id) {
         return this.httpClient.post(`${this.baseUrl}/start`, { id });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2108,10 +2435,10 @@ class TaskLogParameterService extends BdbServiceR {
     constructor() {
         super('task-log-parameter');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogParameterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogParameterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogParameterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogParameterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogParameterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogParameterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2122,10 +2449,10 @@ class TaskLogScheduleService extends BdbServiceCRUD {
     constructor() {
         super('task-log-schedule');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogScheduleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogScheduleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogScheduleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogScheduleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogScheduleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogScheduleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2136,10 +2463,10 @@ class UserService extends BdbServiceCRUD {
     constructor() {
         super('user');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2150,23 +2477,16 @@ class UserRoleService extends BdbServiceCRD {
     constructor() {
         super('user-role');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserRoleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserRoleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserRoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserRoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
-var MediaType;
-(function (MediaType) {
-    MediaType["Image"] = "Image";
-    MediaType["Video"] = "Video";
-    MediaType["File"] = "File";
-})(MediaType || (MediaType = {}));
-
 class TaskLogSchedulerService extends BdbService {
     constructor() {
         super('task-log-scheduler');
@@ -2180,10 +2500,10 @@ class TaskLogSchedulerService extends BdbService {
     stopScheduler() {
         return this.httpClient.get(`${this.baseUrl}/stop`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogSchedulerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogSchedulerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogSchedulerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogSchedulerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2219,10 +2539,10 @@ class TaskLogTypeService extends BdbService {
         }
         return of(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogTypeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogTypeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TaskLogTypeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TaskLogTypeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2246,10 +2566,10 @@ class AccessDeniedPageComponent {
         this._onDestroy.next();
         this._onDestroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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.0.6", 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: ["color", "label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-access-denied-page', imports: [
                         CommonModule,
@@ -2302,10 +2622,10 @@ class ForgotPasswordPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", 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.0.6", 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: ["color", "label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-forgot-password-page', imports: [
                         CommonModule,
@@ -2333,10 +2653,10 @@ class InvalidTokenPageComponent {
     constructor(bdbOptions) {
         this.loginRoutePath = bdbOptions.authOptions?.loginPath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InvalidTokenPageComponent, deps: [{ token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: InvalidTokenPageComponent, isStandalone: true, selector: "bdb-invalid-token-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Ongeldig token</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["color", "label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InvalidTokenPageComponent, deps: [{ token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: InvalidTokenPageComponent, isStandalone: true, selector: "bdb-invalid-token-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Ongeldig token</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: InvalidTokenPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InvalidTokenPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-invalid-token-page', imports: [CommonModule, MatCardModule, BdbAlertComponent, MatButtonModule, RouterLink, BdbFlexDirective], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Ongeldig token</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2394,10 +2714,10 @@ class LoginPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LoginPageComponent, deps: [{ token: i2$3.Router }, { token: AuthService }, { token: i2$3.ActivatedRoute }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: LoginPageComponent, isStandalone: true, selector: "bdb-login-page", ngImport: i0, template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Inloggen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content bdbFlex=\"col\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n      <mat-form-field>\r\n        <mat-label>Gebruikersnaam</mat-label>\r\n        <input matInput type=\"email\" formControlName=\"email\" />\r\n        <mat-error bdbFormError=\"email\"></mat-error>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Wachtwoord</mat-label>\r\n        <input matInput type=\"password\" formControlName=\"password\" />\r\n        <mat-error bdbFormError=\"password\"></mat-error>\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions bdbFlex=\"row 8px end center\">\r\n      <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n        <mat-icon>contact_support</mat-icon>\r\n        <span>Wachtwoord vergeten</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Inloggen</span>\r\n      </button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LoginPageComponent, deps: [{ token: i2$3.Router }, { token: AuthService }, { token: i2$3.ActivatedRoute }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: LoginPageComponent, isStandalone: true, selector: "bdb-login-page", ngImport: i0, template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Inloggen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content bdbFlex=\"col\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n      <mat-form-field>\r\n        <mat-label>Gebruikersnaam</mat-label>\r\n        <input matInput type=\"email\" formControlName=\"email\" />\r\n        <mat-error bdbFormError=\"email\"></mat-error>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Wachtwoord</mat-label>\r\n        <input matInput type=\"password\" formControlName=\"password\" />\r\n        <mat-error bdbFormError=\"password\"></mat-error>\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions bdbFlex=\"row 8px end center\">\r\n      <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n        <mat-icon>contact_support</mat-icon>\r\n        <span>Wachtwoord vergeten</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Inloggen</span>\r\n      </button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LoginPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LoginPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-login-page', imports: [
                         CommonModule,
@@ -2432,10 +2752,10 @@ class LogoutPageComponent {
         this.authService.logout();
         this.router.navigate(['/', this.bdbOptions.authOptions?.loginPath]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LogoutPageComponent, deps: [{ token: i2$3.Router }, { token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: LogoutPageComponent, isStandalone: true, selector: "bdb-logout-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Uitloggen</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n  <mat-card-actions class=\"logout-page-card-actions\">\r\n    <a mat-button routerLink=\"/\">\r\n      <mat-icon>arrow_back</mat-icon>\r\n      <span>Blijf ingelogd</span>\r\n    </a>\r\n    <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n      <mat-icon>logout</mat-icon>\r\n      <span>Log uit</span>\r\n    </button></mat-card-actions\r\n  >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LogoutPageComponent, deps: [{ token: i2$3.Router }, { token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: LogoutPageComponent, isStandalone: true, selector: "bdb-logout-page", ngImport: i0, template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Uitloggen</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n  <mat-card-actions class=\"logout-page-card-actions\">\r\n    <a mat-button routerLink=\"/\">\r\n      <mat-icon>arrow_back</mat-icon>\r\n      <span>Blijf ingelogd</span>\r\n    </a>\r\n    <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n      <mat-icon>logout</mat-icon>\r\n      <span>Log uit</span>\r\n    </button></mat-card-actions\r\n  >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: LogoutPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LogoutPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-logout-page', imports: [MatCardModule, MatButtonModule, MatIconModule, RouterLink], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Uitloggen</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n  <mat-card-actions class=\"logout-page-card-actions\">\r\n    <a mat-button routerLink=\"/\">\r\n      <mat-icon>arrow_back</mat-icon>\r\n      <span>Blijf ingelogd</span>\r\n    </a>\r\n    <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n      <mat-icon>logout</mat-icon>\r\n      <span>Log uit</span>\r\n    </button></mat-card-actions\r\n  >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [{ type: i2$3.Router }, { type: AuthService }, { type: undefined, decorators: [{
@@ -2511,10 +2831,10 @@ class ResetPasswordPageComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ResetPasswordPageComponent, deps: [{ token: AuthService }, { token: i2$3.ActivatedRoute }, { token: i2$3.Router }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.6", type: ResetPasswordPageComponent, isStandalone: true, selector: "bdb-reset-password-page", ngImport: i0, template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"reset-password-page-card-content\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n      <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Nieuw wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n        <!-- <mat-error *ngIf=\"passwordCtrl.errors\">{{ passwordCtrl | bdbErrorMessage }}</mat-error> -->\r\n      </mat-form-field>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Bevestig wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n        <!-- <mat-error *ngIf=\"confirmPasswordCtrl.errors\">{{ confirmPasswordCtrl | bdbErrorMessage }}</mat-error> -->\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions class=\"reset-password-page-card-actions\">\r\n      <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Log in</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>sync_lock</mat-icon>\r\n        <span>Stel wachtwoord in</span>\r\n      </button></mat-card-actions\r\n    >\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ResetPasswordPageComponent, deps: [{ token: AuthService }, { token: i2$3.ActivatedRoute }, { token: i2$3.Router }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: ResetPasswordPageComponent, isStandalone: true, selector: "bdb-reset-password-page", ngImport: i0, template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"reset-password-page-card-content\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n      <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Nieuw wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n        <!-- <mat-error *ngIf=\"passwordCtrl.errors\">{{ passwordCtrl | bdbErrorMessage }}</mat-error> -->\r\n      </mat-form-field>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Bevestig wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n        <!-- <mat-error *ngIf=\"confirmPasswordCtrl.errors\">{{ confirmPasswordCtrl | bdbErrorMessage }}</mat-error> -->\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions class=\"reset-password-page-card-actions\">\r\n      <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Log in</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>sync_lock</mat-icon>\r\n        <span>Stel wachtwoord in</span>\r\n      </button></mat-card-actions\r\n    >\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bdb-reset-password-page', imports: [
                         ReactiveFormsModule,
@@ -2541,5 +2861,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, BdbOptionsBuilder, BdbPaginatorComponent, BdbQueryInputComponent, BdbSearchComponent, BdbSearchWrapperBaseComponent, BdbService, BdbServiceCR, BdbServiceCRD, BdbServiceCRU, BdbServiceCRUD, BdbServiceR, BdbServiceRD, BdbServiceRU, BdbServiceRUD, BdbTableComponent, ExceptionLogService, ExceptionLogTableComponent, ForgotPasswordPageComponent, InvalidTokenPageComponent, LoginPageComponent, LogoutPageComponent, MediaService, MediaType, PlainNumberPipe, ResetPasswordPageComponent, RoleService, TaskLogOutcome, TaskLogOutcomePipe, TaskLogParameterService, TaskLogParameterType, TaskLogParameterValuePipe, TaskLogScheduleService, TaskLogSchedulerService, TaskLogService, TaskLogStatus, 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, 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