@devopmaat/badaboom 1.1.1

package/fesm2022/devopmaat-badaboom.mjs

@@ -0,0 +1,2443 @@
+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 { HttpClient, HttpErrorResponse, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { BehaviorSubject, catchError, throwError, filter, take, concatMap as concatMap$1, of, tap as tap$1, map, Subject, finalize, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs';
+import { tap, concatMap, shareReplay, map as map$1 } from 'rxjs/operators';
+import * as i2$1 from '@angular/router';
+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 * as i3 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, ControlContainer, Validators, FormGroup } from '@angular/forms';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i8 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i7 from '@angular/material/core';
+import * as i5$1 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import * as i2 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i3$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$1 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i1$2 from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
+import * as i3$3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+
+class BdbAuthOptionsBuilder {
+    constructor(configure) {
+        this._addPresentation = false;
+        configure(this);
+    }
+    set loginPath(path) {
+        this._loginPath = path;
+    }
+    set logoutPath(path) {
+        this._logoutPath = path;
+    }
+    set accessDeniedPath(path) {
+        this._accessDeniedPath = path;
+    }
+    set forgotPasswordPath(path) {
+        this._forgotPasswordPath = path;
+    }
+    set resetPasswordPath(path) {
+        this._resetPasswordPath = path;
+    }
+    set invalidTokenPath(path) {
+        this._invalidTokenPath = path;
+    }
+    addPresentation() {
+        this._addPresentation = true;
+    }
+    build() {
+        return {
+            loginPath: this._loginPath ?? 'inloggen',
+            logoutPath: this._logoutPath ?? 'uitloggen',
+            accessDeniedPath: this._accessDeniedPath ?? 'toegang-geweigerd',
+            forgotPasswordPath: this._forgotPasswordPath ?? 'wachtwoord-vergeten',
+            resetPasswordPath: this._resetPasswordPath ?? 'herstel-wachtwoord',
+            invalidTokenPath: this._invalidTokenPath ?? 'ongeldig-token',
+            addPresentation: this._addPresentation,
+        };
+    }
+}
+
+class BdbOptionsBuilder {
+    constructor(configure) {
+        configure(this);
+    }
+    set backendUrl(url) {
+        this._backendUrl = url;
+    }
+    addAuth(configure) {
+        this._auth = configure;
+    }
+    build() {
+        if (!this._backendUrl) {
+            throw 'backendUrl mag niet leeg zijn';
+        }
+        const options = { backendUrl: this._backendUrl };
+        if (this._auth) {
+            options.authOptions = new BdbAuthOptionsBuilder(this._auth).build();
+        }
+        return options;
+    }
+}
+const BDB_OPTIONS = new InjectionToken('BdbOptions');
+
+class BdbService {
+    constructor(areaName) {
+        const bdbOptions = inject(BDB_OPTIONS);
+        this.baseUrl = `${bdbOptions.backendUrl}/${areaName}`;
+        this.httpClient = inject(HttpClient);
+    }
+}
+
+class AccountService extends BdbService {
+    constructor() {
+        super('account');
+    }
+    login(value) {
+        return this.httpClient.post(`${this.baseUrl}/login`, value);
+    }
+    exchangeRefreshToken(value) {
+        return this.httpClient.post(`${this.baseUrl}/exchange-refresh-token`, value);
+    }
+    forgotPassword(value) {
+        return this.httpClient.post(`${this.baseUrl}/forgot-password`, value);
+    }
+    resetPassword(value) {
+        return this.httpClient.post(`${this.baseUrl}/reset-password`, value);
+    }
+    validateResetPasswordToken(value) {
+        return this.httpClient.post(`${this.baseUrl}/validate-reset-password-token`, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AccountService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AccountService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const tokenKey = 'access_token';
+const refreshTokenKey = 'refresh_token';
+const emailAddressClaimName = 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress';
+const roleClaimName = 'http://schemas.microsoft.com/ws/2008/06/identity/claims/role';
+const nameClaimName = 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name';
+const nameIdentifierClaimName = 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier';
+const defaultClaims = [
+    'AspNet.Identity.SecurityStamp',
+    'aud',
+    'exp',
+    'iss',
+    roleClaimName,
+    nameClaimName,
+    nameIdentifierClaimName,
+    emailAddressClaimName,
+];
+function getAuthorizationHeaderFromToken(token) {
+    return `Bearer ${token}`;
+}
+function getTokenFromAuthorizationHeader(header) {
+    return header.replace(/^(Bearer )/g, '');
+}
+class AuthService {
+    constructor(accountService) {
+        this.accountService = accountService;
+        const token = localStorage.getItem(tokenKey);
+        this.token$ = new BehaviorSubject(token);
+        const accountInfo = token === null ? null : this.getAccountInfoFromToken(token);
+        this.account$ = new BehaviorSubject(accountInfo);
+    }
+    login(value) {
+        return this.accountService.login(value).pipe(tap({
+            next: tokenResponse => this.processTokenResponse(tokenResponse),
+        }));
+    }
+    logout() {
+        this.token$.next(null);
+        this.account$.next(null);
+        localStorage.removeItem(tokenKey);
+        localStorage.removeItem(refreshTokenKey);
+    }
+    refreshToken(expiredToken) {
+        const currentToken = this.token$.getValue();
+        if (expiredToken !== currentToken) {
+            return this.token$.asObservable();
+        }
+        const refreshToken = localStorage.getItem(refreshTokenKey);
+        if (!refreshToken) {
+            throw new Error('Versen login token mislukt');
+        }
+        this.token$.next(null);
+        return this.accountService.exchangeRefreshToken({ token: currentToken, refreshToken }).pipe(concatMap(x => {
+            this.processTokenResponse(x);
+            return this.token$;
+        }));
+    }
+    resetPassword(value) {
+        return this.accountService.resetPassword(value).pipe(tap({
+            next: tokenResponse => this.processTokenResponse(tokenResponse),
+        }));
+    }
+    forgotPassword(value) {
+        return this.accountService.forgotPassword(value);
+    }
+    validateResetPasswordToken(value) {
+        return this.accountService.validateResetPasswordToken(value);
+    }
+    /* helper methods */
+    processTokenResponse(x) {
+        if (!x || !x.token || !x.refreshToken) {
+            this.logout();
+            return;
+        }
+        this.token$.next(x.token);
+        this.account$.next(this.getAccountInfoFromToken(x.token));
+        localStorage.setItem(tokenKey, x.token);
+        localStorage.setItem(refreshTokenKey, x.refreshToken);
+    }
+    getAccountInfoFromToken(token) {
+        const decodedJWT = JSON.parse(window.atob(token.split('.')[1]));
+        let roles = [];
+        const decodedRoles = decodedJWT[roleClaimName];
+        if (decodedRoles) {
+            if (Array.isArray(decodedRoles)) {
+                roles = decodedRoles;
+            }
+            else {
+                roles = [decodedRoles];
+            }
+        }
+        const claims = new Map();
+        for (const [key, value] of Object.entries(decodedJWT)) {
+            if (defaultClaims.indexOf(key) >= 0) {
+                continue;
+            }
+            claims.set(key, value);
+        }
+        return {
+            email: decodedJWT[nameClaimName],
+            id: decodedJWT['http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier'],
+            roles: roles,
+            claims: claims,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AuthService, deps: [{ token: AccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: AccountService }] });
+
+const TokenExpired = 'token-expired';
+const tokenExpiredInterceptor = (req, next) => {
+    const authService = inject(AuthService);
+    return next(req).pipe(catchError(error => {
+        if (!(error instanceof HttpErrorResponse) || error.status !== 401 || !error.headers.get(TokenExpired)) {
+            return throwError(() => error);
+        }
+        const authorizationHeader = req.headers.get('Authorization');
+        const expiredToken = getTokenFromAuthorizationHeader(authorizationHeader ?? '');
+        return authService.refreshToken(expiredToken).pipe(filter(x => x !== null), take(1), concatMap$1(x => next(req.clone({
+            setHeaders: {
+                Authorization: getAuthorizationHeaderFromToken(x ?? ''),
+            },
+        }))));
+    }));
+};
+
+class AuthContainerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AuthContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AuthContainerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [RouterOutlet], template: "<router-outlet></router-outlet>\r\n", styles: [":host{width:100%;height:100%;display:flex;justify-content:center;align-items:center}\n"] }]
+        }] });
+
+const loggedOutGuard = (_, state) => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const bdbOptions = inject(BDB_OPTIONS);
+    const isLoggedIn = !!authService.account$.getValue();
+    return isLoggedIn
+        ? router.createUrlTree([`/${bdbOptions.authOptions?.logoutPath}`], {
+            queryParams: { returnUrl: state.url },
+        })
+        : true;
+};
+
+function roleGuard(...roles) {
+    return (_, state) => {
+        const authService = inject(AuthService);
+        const router = inject(Router);
+        const bdbOptions = inject(BDB_OPTIONS);
+        const account = authService.account$.getValue();
+        if (!account) {
+            return router.createUrlTree([`/${bdbOptions.authOptions?.loginPath}`], {
+                queryParams: { returnUrl: state.url },
+            });
+        }
+        if (!roles.length) {
+            return true;
+        }
+        const userRoles = account.roles;
+        if (userRoles.some(x => roles.includes(x))) {
+            return true;
+        }
+        return router.createUrlTree([`/${bdbOptions.authOptions?.accessDeniedPath}`], {
+            queryParams: { returnUrl: state.url },
+        });
+    };
+}
+
+const resetPasswordResolver = route => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    const bdbOptions = inject(BDB_OPTIONS);
+    const invalidTokenPath = bdbOptions.authOptions?.invalidTokenPath;
+    const model = {
+        token: route.queryParams['token'],
+        email: route.queryParams['email'],
+    };
+    return of(model).pipe(tap$1(x => {
+        if (!x.token || !x.email) {
+            throw new Error('Could not obtain token');
+        }
+    }), concatMap$1(x => authService.validateResetPasswordToken(x)), tap$1(x => {
+        if (!x) {
+            throw new Error('Token is not valid');
+        }
+    }), catchError(() => router.navigate(['/', invalidTokenPath])), map(() => model));
+};
+
+const tokenInterceptor = (req, next) => {
+    const authService = inject(AuthService);
+    return authService.token$.pipe(take(1), concatMap$1(x => {
+        const request = x === null
+            ? req
+            : req.clone({
+                setHeaders: {
+                    Authorization: getAuthorizationHeaderFromToken(x ?? ''),
+                },
+            });
+        return next(request);
+    }));
+};
+
+/**
+ * Configures BaDaBoom by providing necessary tokens.
+ * Takes root routes and provides the router with these routes, appending routes if specified
+ * @param {BdbOptionsConfigure} optionsConfigure
+ * @param {Routes} routes
+ * @return {EnvironmentProviders}
+ */
+function provideBaDaBoom(optionsConfigure, routes) {
+    const options = new BdbOptionsBuilder(optionsConfigure).build();
+    let authRoutes = [];
+    if (options.authOptions?.addPresentation) {
+        const authOptions = options.authOptions;
+        authRoutes = [
+            {
+                path: '',
+                component: AuthContainerComponent,
+                children: [
+                    {
+                        path: authOptions.loginPath,
+                        canActivate: [loggedOutGuard],
+                        loadComponent: () => Promise.resolve().then(function () { return loginPage_component; }).then(x => x.LoginPageComponent),
+                    },
+                    {
+                        path: authOptions.logoutPath,
+                        canActivate: [roleGuard()],
+                        loadComponent: () => Promise.resolve().then(function () { return logoutPage_component; }).then(x => x.LogoutPageComponent),
+                    },
+                    {
+                        path: authOptions.forgotPasswordPath,
+                        canActivate: [loggedOutGuard],
+                        loadComponent: () => Promise.resolve().then(function () { return forgotPasswordPage_component; }).then(x => x.ForgotPasswordPageComponent),
+                    },
+                    {
+                        path: authOptions.resetPasswordPath,
+                        canActivate: [loggedOutGuard],
+                        resolve: [resetPasswordResolver],
+                        loadComponent: () => Promise.resolve().then(function () { return resetPasswordPage_component; }).then(x => x.ResetPasswordPageComponent),
+                    },
+                    {
+                        path: authOptions.accessDeniedPath,
+                        loadComponent: () => Promise.resolve().then(function () { return accessDeniedPage_component; }).then(x => x.AccessDeniedPageComponent),
+                    },
+                    {
+                        path: authOptions.invalidTokenPath,
+                        loadComponent: () => Promise.resolve().then(function () { return invalidTokenPage_component; }).then(x => x.InvalidTokenPageComponent),
+                    },
+                ],
+            },
+        ];
+    }
+    return makeEnvironmentProviders([
+        { provide: BDB_OPTIONS, useValue: options },
+        provideHttpClient(withInterceptors([tokenInterceptor, tokenExpiredInterceptor])),
+        provideRouter([...routes, ...authRoutes]),
+    ]);
+}
+
+class BdbDataSource {
+    get data() {
+        return this.dataSubject.value;
+    }
+    constructor(service, initialRequest = {}) {
+        this.service = service;
+        this.dataSubject = new BehaviorSubject([]);
+        this.responseSubject = new Subject();
+        this.loadingSubject = new BehaviorSubject(false);
+        this.errorSubject = new BehaviorSubject(null);
+        this.loading$ = this.loadingSubject.asObservable();
+        this.error$ = this.errorSubject.asObservable();
+        this.response$ = this.responseSubject.asObservable();
+        this.request = initialRequest;
+    }
+    disconnect() {
+        return;
+    }
+    connect() {
+        return this.dataSubject.asObservable();
+    }
+    loadMethod(service, request) {
+        return service.read(request);
+    }
+    load() {
+        this.loadingSubject.next(true);
+        this.errorSubject.next(null);
+        this.loadMethod(this.service, this.request)
+            .pipe(catchError((err) => {
+            this.errorSubject.next(err);
+            return of({ page: 0, count: 0, rows: [], pageSize: 15 });
+        }), finalize(() => this.loadingSubject.next(false)))
+            .subscribe({
+            next: (response) => {
+                this.dataSubject.next(response.rows);
+                this.responseSubject.next(response);
+            },
+        });
+    }
+}
+
+class BdbPaginatorComponent {
+    constructor() {
+        this._onDestroy = new Subject();
+    }
+    ngOnInit() {
+        this.dataSource.response$.pipe(takeUntil(this._onDestroy)).subscribe({
+            next: x => {
+                this.pageSize = x.pageSize;
+                this.page = x.page;
+                this.length = x.count;
+            },
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    changePage(event) {
+        this.dataSource.request.page = event.pageIndex;
+        this.dataSource.request.pageSize = event.pageSize;
+        this.dataSource.load();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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: "18.1.1", ngImport: i0, type: BdbPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-paginator', standalone: true, imports: [MatPaginatorModule], template: "<mat-paginator\r\n  [pageSize]=\"pageSize\"\r\n  [pageIndex]=\"page\"\r\n  [length]=\"length\"\r\n  (page)=\"changePage($event)\"\r\n  [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n  [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n" }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }] } });
+
+class BdbQueryInputComponent {
+    constructor() {
+        this.class = 'khi-query-input';
+        this._onDestroy = new Subject();
+        this.queryFormControl = new FormControl(undefined, { nonNullable: true });
+    }
+    ngOnInit() {
+        this.queryFormControl.valueChanges
+            .pipe(debounceTime(100), distinctUntilChanged(), takeUntil(this._onDestroy))
+            .subscribe({
+            next: x => {
+                if (this.dataSource) {
+                    this.dataSource.request.query = x;
+                    this.dataSource.request.page = 0;
+                    this.dataSource.load();
+                }
+            },
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbQueryInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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<mat-icon *ngIf=\"!queryFormControl.value\">search</mat-icon>\r\n<mat-icon *ngIf=\"queryFormControl.value\" (click)=\"queryFormControl.patchValue(undefined)\">clear</mat-icon>\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center}input{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: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbQueryInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-query-input[dataSource]', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatIconModule], template: "<input spellcheck=\"false\" autocomplete=\"false\" [formControl]=\"queryFormControl\" />\r\n<mat-icon *ngIf=\"!queryFormControl.value\">search</mat-icon>\r\n<mat-icon *ngIf=\"queryFormControl.value\" (click)=\"queryFormControl.patchValue(undefined)\">clear</mat-icon>\r\n", styles: [":host{display:inline-flex;border-radius:4px;min-height:36px;max-width:100%;flex-direction:row;align-items:center}input{border:none;outline:none;padding:4px;font-size:1rem;min-width:40px;min-height:auto}.mat-icon{flex:24px 0 0}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], dataSource: [{
+                type: Input
+            }] } });
+
+class BdbSearchWrapperBaseComponent {
+    constructor() {
+        this.controlContainer = inject(ControlContainer);
+    }
+    ngOnInit() {
+        if (this.control) {
+            this.formControl = this.control;
+            return;
+        }
+        if (!this.controlName) {
+            throw 'No FormControl or FormControlName provided';
+        }
+        const ctrl = this.controlContainer.control?.get(this.controlName);
+        if (!ctrl) {
+            throw `FormControl '${this.controlName}' not found`;
+        }
+        this.formControl = ctrl;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbSearchWrapperBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: BdbSearchWrapperBaseComponent, isStandalone: true, selector: "ng-component", inputs: { controlName: "controlName", control: "control" }, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbSearchWrapperBaseComponent, decorators: [{
+            type: Component,
+            args: [{ template: '', standalone: true }]
+        }], propDecorators: { controlName: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+// Opzettelijk geen bdb prefix, aangezien dit een pure util is
+// Daartoe in eerste instantie ook niet beschikbaar gesteld in public api
+// Als hier wel reden toe is: heroverwegen bdb prefix toe te voegen
+class FunctionPipe {
+    transform(value, fn) {
+        return fn(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "function" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: FunctionPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'function',
+                    standalone: true,
+                }]
+        }] });
+
+const errorMessageMap = new Map([
+    ['required', 'Verplicht'],
+    ['email', 'Ongeldig e-mail'],
+    ['phone', 'Ongeldig tel.nr'],
+    ['requiredTrue', 'Verplicht'],
+    ['pattern', 'Ongeldig'],
+]);
+function getErrorMessage(validationErrorKey, validationErrorValue) {
+    switch (validationErrorKey) {
+        case 'minlength':
+            return `Minimum lengte: ${validationErrorValue['requiredLength']}`;
+        case 'maxlength':
+            return `Maximum lengte: ${validationErrorValue['requiredLength']}`;
+        case 'max':
+            return `Max: ${validationErrorValue['max']}`;
+        case 'min':
+            return `Min: ${validationErrorValue['min']}`;
+        case 'custom':
+            return `${validationErrorValue}`;
+        default:
+            return errorMessageMap.get(validationErrorKey) ?? validationErrorKey;
+    }
+}
+class BdbFormErrorDirective {
+    constructor(element, renderer, controlContainer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.controlContainer = controlContainer;
+    }
+    ngOnInit() {
+        if (!this.bdbFormError) {
+            throw new Error('No (name for) formcontrol provided');
+        }
+        if (typeof this.bdbFormError === 'string') {
+            const ctrl = this.controlContainer.control?.get(this.bdbFormError);
+            if (!ctrl) {
+                throw new Error(`No formcontrol found for name '${this.bdbFormError}'`);
+            }
+            this.control = ctrl;
+        }
+        else {
+            this.control = this.bdbFormError;
+        }
+        this.setError();
+        this.control.statusChanges.subscribe({
+            next: () => this.setError(),
+        });
+    }
+    setError() {
+        const validationErrors = this.control.errors;
+        if (!validationErrors) {
+            return;
+        }
+        const validationErrorKey = Object.keys(validationErrors)[0];
+        const validationErrorValue = validationErrors[validationErrorKey];
+        const errorMessage = getErrorMessage(validationErrorKey, validationErrorValue);
+        this.renderer.setProperty(this.element.nativeElement, 'innerText', errorMessage);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", type: BdbFormErrorDirective, isStandalone: true, selector: "[bdbFormError]", inputs: { bdbFormError: "bdbFormError" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbFormErrorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbFormError]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.ControlContainer }], propDecorators: { bdbFormError: [{
+                type: Input
+            }] } });
+
+class BdbSearchComponent {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.label = '';
+        this.hint = '';
+        this.placeholder = '';
+        this._onDestroy = new Subject();
+        this.viewChange = new BehaviorSubject({
+            start: 0,
+            end: Number.MAX_VALUE,
+        });
+        this.searchCtrl = new FormControl('', {
+            nonNullable: true,
+            validators: [() => this.ngControl.errors],
+        });
+        this.inputTabIndex = 0;
+        this.hasValue = false;
+        this.isDisabled = false;
+        ngControl.valueAccessor = this;
+        this.searchCtrl.valueChanges
+            .pipe(takeUntil(this._onDestroy), debounceTime(100), distinctUntilChanged(), filter(x => typeof x === 'string'))
+            .subscribe({
+            next: x => {
+                this.dataSource.request.query = x;
+                this.dataSource.load();
+            },
+        });
+    }
+    ngOnInit() {
+        this.searchOptions = this.dataSource.connect();
+        this.ngControl.valueChanges?.pipe(takeUntil(this._onDestroy)).subscribe({
+            next: () => this.searchCtrl.updateValueAndValidity(),
+        });
+    }
+    ngAfterViewInit() {
+        this.autoCompleteTrigger?.panelClosingActions.pipe(takeUntil(this._onDestroy)).subscribe({
+            next: x => {
+                if (x === null) {
+                    this.searchCtrl.setValue('');
+                    this.searchInput?.nativeElement.blur();
+                }
+            },
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.hasValue = false;
+            this.inputTabIndex = 0;
+            this.searchCtrl.setValue('');
+            return;
+        }
+        this.searchCtrl.setValue(obj);
+        this.inputTabIndex = -1;
+        this.hasValue = true;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        isDisabled ? this.searchCtrl.disable() : this.searchCtrl.enable();
+        this.isDisabled = isDisabled;
+    }
+    onFocus() {
+        if (this.hasValue) {
+            this.searchInput?.nativeElement.blur();
+            this.autoCompleteTrigger?.closePanel();
+            this.clearButton?.focus();
+        }
+    }
+    onBlur() {
+        if (!this.onTouch) {
+            throw 'No onTouch callback registered';
+        }
+        this.onTouch();
+    }
+    selectOption(event) {
+        if (!this.onChange) {
+            throw 'No onChange callback registered';
+        }
+        this.inputTabIndex = -1;
+        this.hasValue = true;
+        this.searchInput?.nativeElement.blur();
+        const value = event.option.value;
+        this.onChange(value);
+    }
+    clear() {
+        if (!this.onChange) {
+            throw 'No onChange callback registered';
+        }
+        this.hasValue = false;
+        this.inputTabIndex = 0;
+        this.searchCtrl.setValue('');
+        this.searchInput?.nativeElement.focus();
+        this.onChange(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", 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: i3$1.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"], 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: "18.1.1", ngImport: i0, type: BdbSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-search', standalone: true, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        BdbFormErrorDirective,
+                        FunctionPipe,
+                        MatButtonModule,
+                    ], template: "<div class=\"search-container\">\r\n  <div class=\"search-disabled-cover\" *ngIf=\"hasValue\">\r\n    <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" color=\"danger\">\r\n      <mat-icon>clear</mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-form-field class=\"search-form-field\">\r\n    <mat-label>{{ label }}</mat-label>\r\n    <input\r\n      type=\"text\"\r\n      matInput\r\n      [formControl]=\"searchCtrl\"\r\n      [matAutocomplete]=\"autoComplete\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"onBlur()\"\r\n      #searchInput\r\n      [tabIndex]=\"inputTabIndex\"\r\n      [placeholder]=\"placeholder\" />\r\n    <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n      <mat-option *ngFor=\"let option of searchOptions | async\" [value]=\"option\">\r\n        {{ option | function: displayFn }}\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n\r\n    <mat-icon *ngIf=\"!hasValue\" matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n    <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n    <mat-hint>{{ hint }}</mat-hint>\r\n  </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i3.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { dataSource: [{
+                type: Input
+            }], displayFn: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], clearButton: [{
+                type: ViewChild,
+                args: ['clearButton']
+            }], autoCompleteTrigger: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
+            }] } });
+
+class BdbCellDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this.bdbCellDef = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: BdbCellDirective, isStandalone: true, selector: "ng-template[bdbCellDef]", inputs: { bdbCellDef: "bdbCellDef" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[bdbCellDef]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { bdbCellDef: [{
+                type: Input
+            }] } });
+
+var BdbColumnType;
+(function (BdbColumnType) {
+    BdbColumnType["String"] = "String";
+    BdbColumnType["Number"] = "Number";
+    BdbColumnType["Percentage"] = "Percentage";
+    BdbColumnType["Currency"] = "Currency";
+    BdbColumnType["Date"] = "Date";
+    BdbColumnType["Boolean"] = "Boolean";
+    BdbColumnType["Enum"] = "Enum";
+    BdbColumnType["Custom"] = "Custom";
+})(BdbColumnType || (BdbColumnType = {}));
+
+class BdbColumnBuilder {
+    build(...columns) {
+        return columns;
+    }
+    string(field, title, options = {}) {
+        const ret = this._buildCommonOptions(BdbColumnType.String, field, title, options);
+        ret.pipe = options.pipe;
+        return ret;
+    }
+    number(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Number, field, title, options);
+        ret.format = options.format;
+        return ret;
+    }
+    percentage(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Percentage, field, title, options);
+        ret.digitsInfo = options.digitsInfo;
+        ret.locale = options.locale;
+        return ret;
+    }
+    currency(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Currency, field, title, options);
+        ret.currencyCode = options.currencyCode;
+        ret.display = options.display;
+        ret.digitsInfo = options.digitsInfo;
+        ret.locale = options.locale;
+        return ret;
+    }
+    date(field, title, options = {}) {
+        options.textAlign = options.textAlign ?? 'end';
+        const ret = this._buildCommonOptions(BdbColumnType.Date, field, title, options);
+        ret.format = options.format ?? 'short';
+        if (ret.width === undefined) {
+            switch (ret.format) {
+                case 'short':
+                    ret.width = 144;
+                    break;
+                case 'shortDate':
+                    ret.width = 96;
+                    break;
+            }
+        }
+        return ret;
+    }
+    boolean(field, title, options = {}) {
+        const ret = this._buildCommonOptions(BdbColumnType.Boolean, field, title, options);
+        ret.icon = options.icon ?? true;
+        return ret;
+    }
+    enum(field, title, options = {}) {
+        const ret = this._buildCommonOptions(BdbColumnType.Enum, field, title, options);
+        ret.pipe = options.pipe;
+        return ret;
+    }
+    custom(id, title, options = {}) {
+        return {
+            type: BdbColumnType.Custom,
+            id: id,
+            title: title,
+            field: () => undefined,
+            sortDisabled: options.sortDisabled ?? true,
+            width: options.width,
+            textAlign: options.textAlign,
+        };
+    }
+    _buildCommonOptions(type, field, title, options = undefined) {
+        const fxString = field.toString();
+        const id = options?.id ?? fxString.substring(fxString.lastIndexOf('.') + 1).trim();
+        return {
+            type: type,
+            id: id,
+            title: title,
+            field: field,
+            sortDisabled: options?.sortDisabled,
+            width: options?.width,
+            textAlign: options?.textAlign,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbColumnBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbColumnBuilder, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", 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);
+        this.class = 'bdb-alert';
+        this.label = '';
+        this.icon = 'task_alt';
+        this.inline = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbAlertComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-alert', standalone: true, 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}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], color: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }] } });
+
+const LoginFailed = 'LOGIN_FAILED';
+const LoginNotAllowed = 'LOGIN_NOT_ALLOWED';
+const LoginRequiredTwoFactor = 'LOGIN_REQUIRES_TWO_FACTOR';
+const LockedOut = 'LOCKED_OUT';
+class BdbAlertErrorResponseComponent {
+    constructor() {
+        this.loginFailed = false;
+        this.color = 'danger';
+        this.icon = 'error_outline';
+        this.label = 'Onbekende fout';
+        this.message = '';
+    }
+    validationFailures() {
+        if (this.value && this.value.error && this.value.error.errors) {
+            const ret = [];
+            const pd = this.value.error;
+            if (pd.errors) {
+                const errors = pd.errors;
+                Object.keys(errors).forEach((x) => ret.push(`${errors[x]}`));
+            }
+            return ret;
+        }
+        return null;
+    }
+    ngOnChanges() {
+        this.errorCode = undefined;
+        this.color = 'danger';
+        if (this.value) {
+            switch (this.value.status) {
+                case 0:
+                    this.label = 'Communicatie mislukt';
+                    this.message = 'Controleer uw internetverbinding';
+                    break;
+                case 400:
+                    this.color = 'warn';
+                    this.icon = 'warning';
+                    this.label = 'Invoerfout';
+                    break;
+                case 401:
+                    if (this.value.error === LoginFailed) {
+                        this.label = 'Inloggen mislukt';
+                        this.message = 'Controleer gegevens en probeer opnieuw';
+                    }
+                    else if (this.value.error === LoginNotAllowed) {
+                        this.label = 'Inloggen mislukt';
+                        this.message = 'Login niet toegestaan';
+                    }
+                    else if (this.value.error === LockedOut) {
+                        this.color = 'warn';
+                        this.icon = 'warning';
+                        this.label = 'Tijdelijk geblokkeerd';
+                        this.message = 'Te veel mislukte inlogpogingen';
+                    }
+                    else if (this.value.error === LoginRequiredTwoFactor) {
+                        this.label = 'Inloggen mislukt';
+                        this.message = 'Tweestapsverificatie vereist';
+                    }
+                    else {
+                        this.label = 'Onbevoegd';
+                        this.message = 'U bent niet bevoegd voor de gevraagde actie';
+                    }
+                    break;
+                case 403:
+                    this.label = 'Toegang geweigerd';
+                    this.message = 'Onvoldoende rechten voor de gevraagde actie';
+                    break;
+                case 404:
+                    this.label = 'Niet gevonden';
+                    this.message = 'De opgevraagde bron kon niet worden gevonden';
+                    break;
+                case 415:
+                    this.label = 'Mediatype niet ondersteund';
+                    this.message = this.value.error;
+                    break;
+                case 500: {
+                    this.label = this.value.error?.title ?? 'Fout bij afhandeling';
+                    const errorDetail = this.value.error?.exceptionLogCode;
+                    if (errorDetail && errorDetail.match(/[A-Z0-9]{6}/g)) {
+                        this.errorCode = `${errorDetail.slice(0, 2)}-${errorDetail.slice(2, 4)}-${errorDetail.slice(4)}`;
+                    }
+                    else {
+                        this.message = this.value.error?.detail;
+                    }
+                    break;
+                }
+                default:
+                    this.label = 'Onbekende fout';
+                    this.message = 'Status: ' + this.value.status;
+                    break;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbAlertErrorResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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\">\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbAlertErrorResponseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-alert-error-response', standalone: true, imports: [CommonModule, BdbAlertComponent], template: "<bdb-alert [color]=\"color\" [icon]=\"icon\" [label]=\"label\" *ngIf=\"value\">\r\n  <ng-container [ngSwitch]=\"value.status\">\r\n    <ng-container *ngSwitchCase=\"400\">\r\n      <div *ngFor=\"let message of validationFailures()\">{{ message }}</div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"500\">\r\n      <div *ngIf=\"errorCode; else displayMessage\">\r\n        Foutcode voor technische ondersteuning: <strong>{{ errorCode }}</strong>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngTemplateOutlet=\"displayMessage\"></ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</bdb-alert>\r\n\r\n<ng-template #displayMessage>\r\n  {{ message }}\r\n</ng-template>\r\n", styles: [".alert{padding:8px;border-radius:4px;border:1px solid}.alert.warn{background-color:#fbe9e7;border-color:#d84315}.alert.danger{background-color:#ffebee;border-color:#c62828}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
+class DynamicPipe {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    transform(value, requiredPipe, pipeArgs) {
+        const injector = Injector.create({
+            name: 'DynamicPipe',
+            parent: this.injector,
+            providers: [{ provide: requiredPipe }],
+        });
+        const pipe = injector.get(requiredPipe);
+        return pipe.transform(value, pipeArgs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DynamicPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: DynamicPipe, isStandalone: true, name: "dynamicPipe" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DynamicPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dynamicPipe',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+class BdbBooleanDisplayComponent {
+    constructor() {
+        this.class = 'bdb-boolean-display';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbBooleanDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbBooleanDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-boolean-display', standalone: true, 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"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], value: [{
+                type: Input
+            }] } });
+
+class BdbTableComponent {
+    constructor() {
+        this._onDestroy = new Subject();
+        this.columns = [];
+        this.displayedColumns = [];
+        this.contextActions = [];
+        this.selectOnRowClick = true;
+        this.selectedRowClass = 'selected';
+        this.isClickable = true;
+        this.rowClick = new EventEmitter();
+        this.contextAction = new EventEmitter();
+        this.columnType = BdbColumnType;
+        this.contextMenuPosition = { x: '0px', y: '0px' };
+        this.trackById = (_, item) => {
+            return item.id;
+        };
+    }
+    ngOnInit() {
+        this.load();
+    }
+    ngOnChanges() {
+        if (this.columns && !this.displayedColumns.length) {
+            this.displayedColumns = this.columns.map(x => x.id);
+        }
+        if (this.selection?.isMultipleSelection() && !(this.displayedColumns[0] === 'selection')) {
+            this.displayedColumns.unshift('selection');
+        }
+    }
+    ngAfterContentInit() {
+        this.setColumnTemplates();
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    load() {
+        this.error = undefined;
+        this.dataSource.load();
+    }
+    setColumnTemplates() {
+        const templates = this.cellTemplates;
+        if (templates == undefined || !this.cellTemplates?.length) {
+            return;
+        }
+        if (this.columns && this.columns.length) {
+            this.columns.forEach(x => {
+                const tpl = templates.filter(y => y.bdbCellDef === x.id)[0];
+                if (tpl) {
+                    x.template = tpl.templateRef;
+                }
+            });
+        }
+    }
+    onRowClick(row) {
+        if (this.selection && this.selectOnRowClick) {
+            this.selection.toggle(row);
+        }
+        this.rowClick.emit(row);
+    }
+    // SORT
+    sortData(event) {
+        const column = this.columns.find(x => x.id === event.active);
+        if (column) {
+            const fxString = column.field.toString();
+            this.dataSource.request.sortField = fxString.substring(fxString.lastIndexOf('.') + 1).trim();
+            this.dataSource.request.sortDirection = event.direction;
+            this.dataSource.load();
+        }
+    }
+    // CONTEXT MENU
+    onContextMenu(event, row) {
+        event.preventDefault();
+        if (this.contextActions && this.contextActions.length) {
+            this.contextMenuPosition.x = event.clientX + 'px';
+            this.contextMenuPosition.y = event.clientY + 'px';
+            this.contextMenu.menuData = { row: row };
+            if (this.contextMenu.menu) {
+                this.contextMenu.menu.focusFirstItem('mouse');
+            }
+            this.contextMenu.openMenu();
+        }
+    }
+    onContextMenuAction(action, row) {
+        this.contextAction.emit({ action: action, row: row });
+    }
+    isAllSelected() {
+        if (!this.selection) {
+            return false;
+        }
+        return this.dataSource.data.every(x => this.selection?.isSelected(x));
+    }
+    anySelected() {
+        if (!this.selection) {
+            return false;
+        }
+        return this.dataSource.data.some(x => this.selection?.isSelected(x));
+    }
+    toggleAllRows() {
+        if (!(this.selection && this.dataSource)) {
+            return;
+        }
+        if (this.isAllSelected()) {
+            this.selection.deselect(...this.dataSource.data);
+        }
+        else {
+            this.selection.select(...this.dataSource.data);
+        }
+    }
+    rowClass(row) {
+        if (!(this.selection || this.rowColor)) {
+            return undefined;
+        }
+        const ret = {};
+        if (this.selection) {
+            ret[this.selectedRowClass] = this.selection.isSelected(row);
+        }
+        if (this.rowColor) {
+            const palette = this.rowColor(row);
+            if (palette) {
+                ret['bdb-' + palette] = true;
+            }
+            else if (!this.selection) {
+                return undefined;
+            }
+        }
+        return ret;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "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: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-table[dataSource]', standalone: true, imports: [
+                        CommonModule,
+                        MatTableModule,
+                        MatCheckboxModule,
+                        MatSortModule,
+                        BdbAlertErrorResponseComponent,
+                        DynamicPipe,
+                        BdbBooleanDisplayComponent,
+                        MatMenuModule,
+                        MatIconModule,
+                    ], template: "<div class=\"bdb-table-container\">\r\n  <table\r\n    mat-table\r\n    class=\"bdb-table\"\r\n    [class.is-clickable]=\"isClickable\"\r\n    [dataSource]=\"dataSource\"\r\n    matSort\r\n    (matSortChange)=\"sortData($event)\"\r\n    *ngIf=\"dataSource\"\r\n    [trackBy]=\"trackById\">\r\n    <ng-container matColumnDef=\"selection\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        <mat-checkbox\r\n          (change)=\"$event ? toggleAllRows() : null\"\r\n          [checked]=\"selection.hasValue() && isAllSelected()\"\r\n          [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n          color=\"primary\"\r\n          *ngIf=\"selection\">\r\n        </mat-checkbox>\r\n      </th>\r\n      <td mat-cell *matCellDef=\"let row\">\r\n        <mat-checkbox\r\n          (click)=\"$event.stopPropagation()\"\r\n          (change)=\"$event ? selection.toggle(row) : null\"\r\n          [checked]=\"selection.isSelected(row)\"\r\n          color=\"accent\"\r\n          *ngIf=\"selection\">\r\n        </mat-checkbox>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <ng-container [matColumnDef]=\"column.id\" *ngFor=\"let column of columns\">\r\n      <ng-container>\r\n        <th\r\n          mat-header-cell\r\n          *matHeaderCellDef\r\n          mat-sort-header=\"{{ column.id }}\"\r\n          [disabled]=\"column.sortDisabled\"\r\n          [width]=\"column.width\"\r\n          [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n          [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n          {{ column.title }}\r\n        </th>\r\n      </ng-container>\r\n\r\n      <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            column.template ? column.template : cellTemplate;\r\n            context: { $implicit: row, column: column }\r\n          \"></ng-container>\r\n      </td>\r\n    </ng-container>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n    <tr\r\n      mat-row\r\n      *matRowDef=\"let row; columns: displayedColumns\"\r\n      (click)=\"onRowClick(row)\"\r\n      [ngClass]=\"rowClass(row)\"\r\n      (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n    <tr class=\"mat-row\" *matNoDataRow>\r\n      <td class=\"mat-cell\" [colSpan]=\"displayedColumns.length\">\r\n        <bdb-alert-error-response\r\n          [value]=\"dataSource.error$ | async\"\r\n          *ngIf=\"dataSource && (dataSource.error$ | async); else noData\"></bdb-alert-error-response>\r\n      </td>\r\n    </tr>\r\n  </table>\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n      context: { $implicit: row, column: column }\r\n    \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n  {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n  <ng-container [ngSwitch]=\"column.type\">\r\n    <ng-container *ngSwitchCase=\"columnType.String\">{{ column.field(row) }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Number\">{{ column.field(row) | number: column.format }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Percentage\">{{\r\n      column.field(row) | percent: column.digitsInfo : column.locale\r\n    }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Currency\">{{\r\n      column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale\r\n    }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Date\"> {{ column.field(row) | date: column.format }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Boolean\">\r\n      <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Enum\">{{ column.field(row) }}</ng-container>\r\n    <ng-container *ngSwitchCase=\"columnType.Custom\">*?*</ng-container>\r\n    <ng-container *ngSwitchDefault>{{ column.field(row) | json }}</ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n  <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n  style=\"visibility: hidden; position: fixed\"\r\n  [style.left]=\"contextMenuPosition.x\"\r\n  [style.top]=\"contextMenuPosition.y\"\r\n  [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    <ng-container *ngFor=\"let action of contextActions\">\r\n      <button\r\n        mat-menu-item\r\n        (click)=\"onContextMenuAction(action, row)\"\r\n        *ngIf=\"action.condition === undefined || action.condition(row)\">\r\n        <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n      </button>\r\n    </ng-container>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table.is-clickable tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"] }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], contextActions: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], selectOnRowClick: [{
+                type: Input
+            }], selectedRowClass: [{
+                type: Input
+            }], isClickable: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], contextAction: [{
+                type: Output
+            }], contextMenu: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }], cellTemplates: [{
+                type: ContentChildren,
+                args: [BdbCellDirective, { descendants: true }]
+            }], rowColor: [{
+                type: Input
+            }] } });
+
+class ExceptionLogTableComponent {
+    constructor(cb, router, activatedRoute) {
+        this.cb = cb;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.displayedColumns = [];
+        this.rowClick = new EventEmitter();
+        this.columns = this.cb.build(this.cb.string(x => x.message, 'Message'));
+        this.contextActions = [
+            {
+                icon: 'search',
+                color: 'primary',
+                label: 'Details',
+                identifier: 'details',
+            },
+        ];
+    }
+    onRowClick(row) {
+        this.rowClick.emit(row);
+    }
+    onContextAction(event) {
+        switch (event.action.identifier) {
+            case 'details':
+                this.router.navigate([event.row.id], { relativeTo: this.activatedRoute });
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ExceptionLogTableComponent, deps: [{ token: BdbColumnBuilder }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ExceptionLogTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-exception-log-table[dataSource]', standalone: true, 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$1.Router }, { type: i2$1.ActivatedRoute }], propDecorators: { dataSource: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], contextActions: [{
+                type: Input
+            }] } });
+
+var TaskLogStatus;
+(function (TaskLogStatus) {
+    TaskLogStatus["New"] = "New";
+    TaskLogStatus["Running"] = "Running";
+    TaskLogStatus["Waiting"] = "Waiting";
+    TaskLogStatus["Completed"] = "Completed";
+})(TaskLogStatus || (TaskLogStatus = {}));
+
+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 '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogStatusPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: TaskLogStatusPipe, isStandalone: true, name: "taskLogStatus" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogStatusPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'taskLogStatus',
+                    standalone: true,
+                }]
+        }] });
+
+var TaskLogOutcome;
+(function (TaskLogOutcome) {
+    TaskLogOutcome["Noop"] = "Noop";
+    TaskLogOutcome["Success"] = "Success";
+    TaskLogOutcome["Info"] = "Info";
+    TaskLogOutcome["Warning"] = "Warning";
+    TaskLogOutcome["Error"] = "Error";
+})(TaskLogOutcome || (TaskLogOutcome = {}));
+
+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 '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogOutcomePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: TaskLogOutcomePipe, isStandalone: true, name: "taskLogOutcome" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogOutcomePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'taskLogOutcome',
+                    standalone: true,
+                }]
+        }] });
+
+var TaskLogParameterType;
+(function (TaskLogParameterType) {
+    TaskLogParameterType["String"] = "String";
+    TaskLogParameterType["Int"] = "Int";
+    TaskLogParameterType["Decimal"] = "Decimal";
+    TaskLogParameterType["Bool"] = "Bool";
+})(TaskLogParameterType || (TaskLogParameterType = {}));
+
+class TaskLogParameterValuePipe {
+    constructor(locale) {
+        this.locale = locale;
+    }
+    transform(value) {
+        switch (value.type) {
+            case TaskLogParameterType.String:
+                return value.stringValue ?? '';
+            case TaskLogParameterType.Int:
+                return !value.intValue
+                    ? ''
+                    : value.intValue.toLocaleString(this.locale, {
+                        minimumIntegerDigits: 1,
+                    });
+            case TaskLogParameterType.Decimal:
+                return !value.decimalValue
+                    ? ''
+                    : value.decimalValue.toLocaleString(this.locale, {
+                        minimumIntegerDigits: 1,
+                        maximumFractionDigits: 6,
+                    });
+            case TaskLogParameterType.Bool:
+                switch (value.boolValue) {
+                    case true:
+                        return 'Ja';
+                    case false:
+                        return 'Nee';
+                    default:
+                        return '';
+                }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogParameterValuePipe, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: TaskLogParameterValuePipe, isStandalone: true, name: "taskLogParameterValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogParameterValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'taskLogParameterValue',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }] });
+
+class UserTableComponent {
+    constructor(matDialog, cb) {
+        this.matDialog = matDialog;
+        this.cb = cb;
+        this.displayedColumns = [];
+        this.rowClick = new EventEmitter();
+        this.columns = this.cb.build(this.cb.number(x => x.id, 'ID', { width: 75 }), this.cb.string(x => x.email, 'E-mail', { width: 250 }), this.cb.custom('roles', 'Rollen'));
+        this.contextActions = [
+            {
+                icon: 'search',
+                color: 'primary',
+                label: 'Details',
+                identifier: 'details',
+            },
+            { icon: 'edit', color: 'primary', label: 'Wijzigen', identifier: 'edit' },
+            {
+                icon: 'delete',
+                color: 'warn',
+                label: 'Verwijderen',
+                identifier: 'delete',
+            },
+        ];
+    }
+    onRowClick(user) {
+        this.rowClick.emit(user);
+    }
+    onContextAction(event) {
+        //   switch (event.action.identifier) {
+        //     case 'delete':
+        //       this.matDialog
+        //         .open(UserDeleteDialogComponent, { data: event.row })
+        //         .afterClosed()
+        //         .pipe(filter(x => !!x))
+        //         .subscribe(() => this.dataSource.load());
+        //       break;
+        //     case 'edit':
+        //       this.matDialog
+        //         .open(UserUpdateDialogComponent, { data: event.row })
+        //         .afterClosed()
+        //         .pipe(filter(x => !!x))
+        //         .subscribe(() => this.dataSource.load());
+        //       break;
+        //   }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: UserTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-user-table[dataSource]', standalone: true, 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: [{
+                type: Input
+            }], displayedColumns: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], contextActions: [{
+                type: Input
+            }] } });
+
+class LayoutError extends Error {
+    constructor(message) {
+        super(message);
+    }
+}
+
+const DEFAULT_FLEX_DIRECTION = 'row';
+const DEFAULT_FLEX_GAP = '';
+const DEFAULT_FLEX_SPACING = {
+    justify: 'start',
+    align: 'stretch',
+};
+class BdbFlexDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.bdbFlex = '';
+        this.bdbFlexDirection = '';
+        this.bdbFlexGap = '';
+        this.bdbFlexSpacing = '';
+    }
+    ngOnInit() {
+        this.renderer.setStyle(this.element.nativeElement, 'display', 'flex');
+        const bdbFlexInputs = this.bdbFlex.split(' ').filter(x => !!x);
+        this.setDirection(bdbFlexInputs[0]);
+        this.setGap(bdbFlexInputs[1]);
+        this.setSpacing({
+            justify: bdbFlexInputs[2],
+            align: bdbFlexInputs[3],
+        });
+    }
+    setDirection(bdbFlexInput) {
+        const direction = this.validateDirection(this.getDirection(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'flex-direction', direction);
+    }
+    getDirection(bdbFlexInput) {
+        const trimmedBdbFlexDirection = this.bdbFlexDirection.trim();
+        if (trimmedBdbFlexDirection) {
+            return trimmedBdbFlexDirection;
+        }
+        if (bdbFlexInput) {
+            return bdbFlexInput;
+        }
+        return DEFAULT_FLEX_DIRECTION;
+    }
+    validateDirection(direction) {
+        switch (direction) {
+            case 'row':
+                return 'row';
+            case 'col':
+                return 'column';
+            default:
+                throw new LayoutError(`'${direction}' is not a valid value for flex direction`);
+        }
+    }
+    setGap(bdbFlexInput) {
+        const gap = this.validateGap(this.getGap(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'gap', gap);
+    }
+    getGap(bdbFlexInput) {
+        const trimmedBdbFlexGap = this.bdbFlexGap.trim();
+        if (trimmedBdbFlexGap) {
+            return trimmedBdbFlexGap;
+        }
+        if (bdbFlexInput) {
+            return bdbFlexInput;
+        }
+        return DEFAULT_FLEX_GAP;
+    }
+    validateGap(gap) {
+        return gap;
+    }
+    setSpacing(bdbFlexInput) {
+        const spacing = this.validateSpacing(this.getSpacing(bdbFlexInput));
+        this.renderer.setStyle(this.element.nativeElement, 'align-items', spacing.align);
+        this.renderer.setStyle(this.element.nativeElement, 'justify-content', spacing.justify);
+    }
+    getSpacing(bdbFlexInput) {
+        const splitBdbFlexSpacing = this.bdbFlexSpacing.split(' ').filter(x => !!x);
+        if (splitBdbFlexSpacing.length === 2) {
+            return {
+                align: splitBdbFlexSpacing[0],
+                justify: splitBdbFlexSpacing[1],
+            };
+        }
+        if (bdbFlexInput.align && bdbFlexInput.justify) {
+            return {
+                align: bdbFlexInput.align,
+                justify: bdbFlexInput.justify,
+            };
+        }
+        return DEFAULT_FLEX_SPACING;
+    }
+    validateSpacing(spacing) {
+        return spacing;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", 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: "18.1.1", ngImport: i0, type: BdbFlexDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbFlex: [{
+                type: Input
+            }], bdbFlexDirection: [{
+                type: Input
+            }], bdbFlexGap: [{
+                type: Input
+            }], bdbFlexSpacing: [{
+                type: Input
+            }] } });
+
+class BdbFlexChildDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.bdbFlexChild = '';
+    }
+    ngOnInit() {
+        this.renderer.setStyle(this.element.nativeElement, 'flex', this.bdbFlexChild);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", type: BdbFlexChildDirective, isStandalone: true, selector: "[bdbFlexChild]", inputs: { bdbFlexChild: "bdbFlexChild" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbFlexChildDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbFlexChild]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbFlexChild: [{
+                type: Input
+            }] } });
+
+class LinkedList {
+    constructor(data = []) {
+        this.length = 0;
+        data.forEach(x => this.push(x));
+    }
+    [Symbol.iterator]() {
+        let node = this.head;
+        return {
+            next() {
+                if (!node) {
+                    return { done: true, value: undefined };
+                }
+                const value = node.value;
+                node = node.next;
+                return { done: false, value: value };
+            },
+        };
+    }
+    push(value) {
+        const newNode = new Node(value);
+        if (!this.tail) {
+            this.head = newNode;
+        }
+        else {
+            this.tail.next = newNode;
+            newNode.previous = this.tail;
+        }
+        this.tail = newNode;
+        this.length++;
+    }
+    pop() {
+        if (!this.tail) {
+            return undefined;
+        }
+        const value = this.tail.value;
+        if (!this.tail.previous) {
+            this.head = undefined;
+            this.tail = undefined;
+        }
+        else {
+            this.tail = this.tail.previous;
+            this.tail.next = undefined;
+        }
+        this.length--;
+        return value;
+    }
+}
+class Node {
+    constructor(value) {
+        this.value = value;
+    }
+}
+
+class BdbGridDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.bdbGrid = '';
+        this.bdbGridColumns = '';
+        this.bdbGridRows = '';
+        this.bdbGridGap = '';
+    }
+    ngOnInit() {
+        this.renderer.setStyle(this.element.nativeElement, 'display', 'grid');
+        const inputs = this.parseBdbGridInput();
+        const gap = !this.bdbGridGap ? inputs.gap : this.bdbGridGap;
+        if (gap) {
+            this.renderer.setStyle(this.element.nativeElement, 'gap', gap);
+        }
+        this.setAxis('columns', inputs.columns);
+        this.setAxis('rows', inputs.rows);
+    }
+    parseBdbGridInput() {
+        const result = {};
+        const input = this.bdbGrid.split(' ').filter(x => !!x);
+        const linkedList = new LinkedList(input);
+        let node = linkedList.head;
+        if (!node) {
+            return result;
+        }
+        if (node.value !== 'template' && node.value !== 'auto') {
+            result.gap = node.value;
+            node = node.next;
+        }
+        if (!node) {
+            return result;
+        }
+        const columns = {
+            type: node.value === 'auto' ? 'auto' : 'template',
+            input: '',
+        };
+        node = node.next;
+        const columnsInput = [];
+        while (node) {
+            if (node.value === 'auto' || node.value === 'template') {
+                break;
+            }
+            columnsInput.push(node.value);
+            node = node.next;
+        }
+        columns.input = columnsInput.join(' ');
+        result.columns = columns;
+        if (!node) {
+            return result;
+        }
+        const rows = {
+            type: node.value === 'auto' ? 'auto' : 'template',
+            input: '',
+        };
+        node = node.next;
+        const rowsInput = [];
+        while (node) {
+            rowsInput.push(node.value);
+            node = node.next;
+        }
+        rows.input = rowsInput.join(' ');
+        result.rows = rows;
+        return result;
+    }
+    setAxis(axis, gridInput) {
+        let result = gridInput;
+        const axisInput = axis === 'columns' ? this.bdbGridColumns : this.bdbGridRows;
+        if (axisInput) {
+            let input = axisInput.split(' ').filter(x => !!x);
+            const type = input[0] === 'auto' ? 'auto' : 'template';
+            if (input[0] === 'auto' || input[0] === 'template') {
+                input = input.slice(1);
+            }
+            result = {
+                type: type,
+                input: input.join(' '),
+            };
+        }
+        if (result) {
+            const selector = result.type === 'auto' ? `grid-auto-${axis}` : `grid-template-${axis}`;
+            this.renderer.setStyle(this.element.nativeElement, selector, result.input);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", 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: "18.1.1", ngImport: i0, type: BdbGridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbGrid], [bdbGridColumns], [bdbGridRows], [bdbGridGap]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbGrid: [{
+                type: Input
+            }], bdbGridColumns: [{
+                type: Input
+            }], bdbGridRows: [{
+                type: Input
+            }], bdbGridGap: [{
+                type: Input
+            }] } });
+
+class BdbGridChildDirective {
+    constructor(element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
+        this.bdbGridChild = '';
+        this.bdbGridRow = '';
+        this.bdbGridColumn = '';
+    }
+    ngOnInit() {
+        const axes = this.splitAxes();
+        let column = axes[0];
+        let row = axes[1];
+        if (this.bdbGridColumn) {
+            column = this.bdbGridColumn;
+        }
+        if (this.bdbGridRow) {
+            row = this.bdbGridRow;
+        }
+        if (column) {
+            this.renderer.setStyle(this.element.nativeElement, 'grid-column', column);
+        }
+        if (row) {
+            this.renderer.setStyle(this.element.nativeElement, 'grid-row', row);
+        }
+    }
+    splitAxes() {
+        const input = this.bdbGridChild.split(' ').filter(x => !!x);
+        if (!input.length) {
+            return [];
+        }
+        let sourceList = new LinkedList(input);
+        let targetList = new LinkedList();
+        let node = sourceList.head;
+        while (node) {
+            if (node.value === 'span' && node.next) {
+                targetList.push(`span ${node.next.value}`);
+                node = node.next;
+            }
+            else {
+                targetList.push(node.value);
+            }
+            node = node.next;
+        }
+        sourceList = targetList;
+        targetList = new LinkedList();
+        node = sourceList.head;
+        while (node) {
+            if (node.next && node.next.value === '/' && node.next.next) {
+                targetList.push(`${node.value} / ${node.next.next.value}`);
+                node = node.next.next;
+            }
+            else {
+                targetList.push(node.value);
+            }
+            node = node.next;
+        }
+        if (targetList.length !== 2 || !targetList.head || !targetList.tail) {
+            return [];
+        }
+        return [targetList.head.value, targetList.tail.value];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", type: BdbGridChildDirective, isStandalone: true, selector: "[bdbGridChild], [bdbGridColumn], [bdbGridRow]", inputs: { bdbGridChild: "bdbGridChild", bdbGridRow: "bdbGridRow", bdbGridColumn: "bdbGridColumn" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbGridChildDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bdbGridChild], [bdbGridColumn], [bdbGridRow]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { bdbGridChild: [{
+                type: Input
+            }], bdbGridRow: [{
+                type: Input
+            }], bdbGridColumn: [{
+                type: Input
+            }] } });
+
+class BdbFieldComponent {
+    constructor() {
+        this.label = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: BdbFieldComponent, isStandalone: true, selector: "bdb-field", inputs: { label: "label" }, ngImport: i0, template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;background-color:#00000005;box-sizing:border-box;min-height:56px;display:flex;flex-direction:column;gap:4px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;color:#00000061}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: BdbFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-field', standalone: true, imports: [CommonModule], template: "<div class=\"field-label\">{{ label }}</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{padding:8px;background-color:#00000005;box-sizing:border-box;min-height:56px;display:flex;flex-direction:column;gap:4px}.field-label{flex:0 0 12px;font-size:12px;line-height:12px;color:#00000061}\n"] }]
+        }], propDecorators: { label: [{
+                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 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);
+    }
+}
+
+class BdbServiceCRD extends BdbServiceCR {
+    delete(id) {
+        return this.httpClient.delete(`${this.baseUrl}/${id}`);
+    }
+}
+
+class BdbServiceCRU extends BdbServiceCR {
+    update(updateModel) {
+        return this.httpClient.put(this.baseUrl, updateModel);
+    }
+}
+
+class BdbServiceRUD extends BdbServiceRU {
+    delete(id) {
+        return this.httpClient.delete(`${this.baseUrl}/${id}`);
+    }
+}
+
+class BdbServiceCRUD extends BdbServiceCRU {
+    delete(id) {
+        return this.httpClient.delete(`${this.baseUrl}/${id}`);
+    }
+}
+
+class ExceptionLogService extends BdbServiceR {
+    constructor() {
+        super('exception-log');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ExceptionLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ExceptionLogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", 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: "18.1.1", ngImport: i0, type: MediaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MediaService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MediaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class RoleService extends BdbServiceR {
+    constructor() {
+        super('role');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: RoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: RoleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: RoleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class TaskLogService extends BdbServiceCR {
+    constructor() {
+        super('task-log');
+    }
+    start(id) {
+        return this.httpClient.post(`${this.baseUrl}/start`, { id });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class TaskLogParameterService extends BdbServiceR {
+    constructor() {
+        super('task-log-parameter');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogParameterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogParameterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogParameterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class TaskLogScheduleService extends BdbServiceCRUD {
+    constructor() {
+        super('task-log-schedule');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogScheduleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogScheduleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogScheduleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class UserService extends BdbServiceCRUD {
+    constructor() {
+        super('user');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: UserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class UserRoleService extends BdbServiceCRD {
+    constructor() {
+        super('user-role');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: UserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: UserRoleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", 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');
+    }
+    isRunning() {
+        return this.httpClient.get(`${this.baseUrl}/is-running`);
+    }
+    startScheduler() {
+        return this.httpClient.get(`${this.baseUrl}/start`);
+    }
+    stopScheduler() {
+        return this.httpClient.get(`${this.baseUrl}/stop`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogSchedulerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogSchedulerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class TaskLogTypeService extends BdbService {
+    constructor() {
+        super('task-log-type');
+        this.TaskLogTypes = new BehaviorSubject([]);
+        this.getAllObservable = null;
+        this.load();
+    }
+    load() {
+        this.getAll().subscribe({
+            next: x => this.TaskLogTypes.next(x),
+        });
+    }
+    getAll() {
+        if (this.getAllObservable) {
+            return this.getAllObservable;
+        }
+        this.getAllObservable = this.httpClient.get(this.baseUrl).pipe(shareReplay(1), tap(() => (this.getAllObservable = null)));
+        return this.getAllObservable;
+    }
+    get(identifier) {
+        if (this.getAllObservable) {
+            return this.getAllObservable.pipe(map$1(x => x.filter(y => y.identifier === identifier)[0]));
+        }
+        const types = this.TaskLogTypes.getValue();
+        if (types && types.length) {
+            return of(types.filter(x => x.identifier === identifier)[0]);
+        }
+        return of(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogTypeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TaskLogTypeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class AccessDeniedPageComponent {
+    constructor(bdbOptions, authService) {
+        this.authService = authService;
+        this._onDestroy = new Subject();
+        this.isLoggedIn = true;
+        this.loginRoutePath = bdbOptions.authOptions?.loginPath;
+        this.logoutRoutePath = bdbOptions.authOptions?.logoutPath;
+    }
+    ngOnInit() {
+        this.authService.account$.pipe(takeUntil(this._onDestroy)).subscribe({
+            next: x => (this.isLoggedIn = x !== null),
+        });
+    }
+    ngOnDestroy() {
+        this._onDestroy.next();
+        this._onDestroy.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AccessDeniedPageComponent, deps: [{ token: BDB_OPTIONS }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-access-denied-page', standalone: true, imports: [
+                        CommonModule,
+                        MatCardModule,
+                        BdbAlertComponent,
+                        MatButtonModule,
+                        RouterLink,
+                        MatIconModule,
+                        BdbFlexDirective,
+                    ], template: "<mat-card>\r\n  <mat-card-header>\r\n    <mat-card-title>Toegang geweigerd</mat-card-title>\r\n  </mat-card-header>\r\n  <mat-card-content class=\"access-denied-card-content\">\r\n    <bdb-alert color=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n      U heeft onvoldoende rechten voor de gevraagde toepassing\r\n    </bdb-alert>\r\n  </mat-card-content>\r\n  <mat-card-actions bdbFlex=\"row 0 end center\">\r\n    <a [routerLink]=\"['/', loginRoutePath]\" mat-button *ngIf=\"!isLoggedIn\">Inloggen</a>\r\n    <a [routerLink]=\"['/', logoutRoutePath]\" mat-button *ngIf=\"isLoggedIn\">Uitloggen</a>\r\n  </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BDB_OPTIONS]
+                }] }, { type: AuthService }] });
+
+var accessDeniedPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AccessDeniedPageComponent: AccessDeniedPageComponent
+});
+
+class ForgotPasswordPageComponent {
+    constructor(authService, bdbOptions) {
+        this.authService = authService;
+        this.emailCtrl = new FormControl('', { validators: [Validators.required, Validators.email], nonNullable: true });
+        this.isComplete = false;
+        this.isPending = false;
+        this.forgotPasswordForm = new FormGroup({
+            email: this.emailCtrl,
+        });
+        this.loginRoutePath = bdbOptions.authOptions?.loginPath;
+    }
+    forgotPassword() {
+        if (this.isPending || !this.forgotPasswordForm.valid) {
+            return;
+        }
+        this.isPending = true;
+        this.error = undefined;
+        const formValue = this.forgotPasswordForm.getRawValue();
+        this.forgotPasswordForm.disable();
+        this.authService.forgotPassword(formValue).subscribe({
+            next: () => {
+                this.isComplete = true;
+                this.isPending = false;
+                this.forgotPasswordForm.enable();
+            },
+            error: e => {
+                this.error = e;
+                this.isPending = false;
+                this.forgotPasswordForm.enable();
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ForgotPasswordPageComponent, deps: [{ token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-forgot-password-page', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatCardModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        RouterLink,
+                        BdbAlertErrorResponseComponent,
+                        BdbAlertComponent,
+                        MatButtonModule,
+                    ], template: "<form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\" *ngIf=\"!isComplete; else isCompleteTemplate\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"forgot-password-page-card-content\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n      <mat-form-field>\r\n        <mat-label>E-mailadres</mat-label>\r\n        <input matInput type=\"email\" formControlName=\"email\" />\r\n        <!-- <mat-error *ngIf=\"emailCtrl.errors\">{{ emailCtrl | bdbErrorMessage }}</mat-error> -->\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n      <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Log in</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>lock_reset</mat-icon>\r\n        <span>Herstel wachtwoord</span>\r\n      </button></mat-card-actions\r\n    >\r\n  </mat-card>\r\n</form>\r\n\r\n<ng-template #isCompleteTemplate>\r\n  <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n</ng-template>\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BDB_OPTIONS]
+                }] }] });
+
+var forgotPasswordPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ForgotPasswordPageComponent: ForgotPasswordPageComponent
+});
+
+class InvalidTokenPageComponent {
+    constructor(bdbOptions) {
+        this.loginRoutePath = bdbOptions.authOptions?.loginPath;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InvalidTokenPageComponent, deps: [{ token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InvalidTokenPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-invalid-token-page', standalone: true, 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: [{
+                    type: Inject,
+                    args: [BDB_OPTIONS]
+                }] }] });
+
+var invalidTokenPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    InvalidTokenPageComponent: InvalidTokenPageComponent
+});
+
+class LoginPageComponent {
+    constructor(router, authService, route, bdbOptions) {
+        this.router = router;
+        this.authService = authService;
+        this.route = route;
+        this.emailCtrl = new FormControl('', {
+            validators: [Validators.required, Validators.email],
+            nonNullable: true,
+        });
+        this.passwordCtrl = new FormControl('', { validators: [Validators.required], nonNullable: true });
+        this.postLoginUrl = '/';
+        this.isPending = false;
+        this.loginForm = new FormGroup({
+            email: this.emailCtrl,
+            password: this.passwordCtrl,
+        });
+        this.forgotPasswordRoutePath = bdbOptions.authOptions?.forgotPasswordPath;
+    }
+    ngOnInit() {
+        this.route.queryParams.subscribe({
+            next: x => (this.postLoginUrl = x['returnUrl'] ?? '/'),
+        });
+    }
+    login() {
+        this.loginForm.markAllAsTouched();
+        if (this.isPending || !this.loginForm.valid) {
+            return;
+        }
+        this.isPending = true;
+        this.error = undefined;
+        const formValue = this.loginForm.getRawValue();
+        this.loginForm.disable();
+        this.authService.login(formValue).subscribe({
+            next: () => {
+                this.isPending = false;
+                this.loginForm.enable();
+                this.router.navigate([this.postLoginUrl]);
+            },
+            error: e => {
+                this.error = e;
+                this.isPending = false;
+                this.loginForm.enable();
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: LoginPageComponent, deps: [{ token: i2$1.Router }, { token: AuthService }, { token: i2$1.ActivatedRoute }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.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: "18.1.1", ngImport: i0, type: LoginPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-login-page', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        RouterLink,
+                        MatCardModule,
+                        BdbAlertErrorResponseComponent,
+                        BdbFlexDirective,
+                        BdbFormErrorDirective,
+                    ], template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Inloggen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content bdbFlex=\"col\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n      <mat-form-field>\r\n        <mat-label>Gebruikersnaam</mat-label>\r\n        <input matInput type=\"email\" formControlName=\"email\" />\r\n        <mat-error bdbFormError=\"email\"></mat-error>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>Wachtwoord</mat-label>\r\n        <input matInput type=\"password\" formControlName=\"password\" />\r\n        <mat-error bdbFormError=\"password\"></mat-error>\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions bdbFlex=\"row 8px end center\">\r\n      <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n        <mat-icon>contact_support</mat-icon>\r\n        <span>Wachtwoord vergeten</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Inloggen</span>\r\n      </button>\r\n    </mat-card-actions>\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.Router }, { type: AuthService }, { type: i2$1.ActivatedRoute }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BDB_OPTIONS]
+                }] }] });
+
+var loginPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LoginPageComponent: LoginPageComponent
+});
+
+class LogoutPageComponent {
+    constructor(router, authService, bdbOptions) {
+        this.router = router;
+        this.authService = authService;
+        this.bdbOptions = bdbOptions;
+    }
+    logout() {
+        this.authService.logout();
+        this.router.navigate(['/', this.bdbOptions.authOptions?.loginPath]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: LogoutPageComponent, deps: [{ token: i2$1.Router }, { token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.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: i3$1.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: "18.1.1", ngImport: i0, type: LogoutPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-logout-page', standalone: true, 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$1.Router }, { type: AuthService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BDB_OPTIONS]
+                }] }] });
+
+var logoutPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LogoutPageComponent: LogoutPageComponent
+});
+
+function equalValueValidator(otherControl) {
+    return (thisControl) => {
+        const otherValue = otherControl.value;
+        const thisValue = thisControl.value;
+        return otherValue === thisValue ? null : { custom: 'Komt niet overeen' };
+    };
+}
+class ResetPasswordPageComponent {
+    constructor(authService, activatedRoute, router, bdbOptions) {
+        this.authService = authService;
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.isPending = false;
+        this.passwordCtrl = new FormControl('', {
+            validators: [
+                Validators.required,
+                Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*()])[A-Za-z0-9!@#$%^&*()]{6,}$'),
+            ],
+            nonNullable: true,
+        });
+        this.confirmPasswordCtrl = new FormControl('', {
+            validators: [Validators.required, equalValueValidator(this.passwordCtrl)],
+            nonNullable: true,
+        });
+        this.resetPasswordForm = new FormGroup({
+            email: new FormControl('', { validators: [Validators.required, Validators.email], nonNullable: true }),
+            token: new FormControl('', { validators: [Validators.required], nonNullable: true }),
+            password: this.passwordCtrl,
+            confirmPassword: this.confirmPasswordCtrl,
+        });
+        this.loginRoutePath = bdbOptions.authOptions?.loginPath;
+    }
+    ngOnInit() {
+        this.activatedRoute.data.subscribe({
+            next: x => {
+                this.resetPasswordToken = x['resetPasswordToken'];
+                if (this.resetPasswordToken) {
+                    this.resetPasswordForm.patchValue(this.resetPasswordToken);
+                }
+            },
+        });
+    }
+    resetPassword() {
+        if (this.isPending || !this.resetPasswordForm.valid) {
+            return;
+        }
+        this.isPending = true;
+        this.error = undefined;
+        const formValue = this.resetPasswordForm.getRawValue();
+        this.resetPasswordForm.disable();
+        this.authService.resetPassword(formValue).subscribe({
+            next: () => {
+                this.isPending = false;
+                this.resetPasswordForm.enable();
+                this.router.navigate(['/']);
+            },
+            error: e => {
+                this.error = e;
+                this.isPending = false;
+                this.resetPasswordForm.enable();
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ResetPasswordPageComponent, deps: [{ token: AuthService }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$3.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"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.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: "18.1.1", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bdb-reset-password-page', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatCardModule,
+                        BdbAlertErrorResponseComponent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        RouterLink,
+                        MatButtonModule,
+                    ], template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n  <mat-card>\r\n    <mat-card-header>\r\n      <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n    </mat-card-header>\r\n    <mat-card-content class=\"reset-password-page-card-content\">\r\n      <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n      <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Nieuw wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n        <!-- <mat-error *ngIf=\"passwordCtrl.errors\">{{ passwordCtrl | bdbErrorMessage }}</mat-error> -->\r\n      </mat-form-field>\r\n\r\n      <mat-form-field>\r\n        <mat-label>Bevestig wachtwoord</mat-label>\r\n        <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n        <!-- <mat-error *ngIf=\"confirmPasswordCtrl.errors\">{{ confirmPasswordCtrl | bdbErrorMessage }}</mat-error> -->\r\n      </mat-form-field>\r\n    </mat-card-content>\r\n    <mat-card-actions class=\"reset-password-page-card-actions\">\r\n      <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n        <mat-icon>login</mat-icon>\r\n        <span>Log in</span>\r\n      </a>\r\n      <button mat-flat-button color=\"primary\">\r\n        <mat-icon>sync_lock</mat-icon>\r\n        <span>Stel wachtwoord in</span>\r\n      </button></mat-card-actions\r\n    >\r\n  </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BDB_OPTIONS]
+                }] }] });
+
+var resetPasswordPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ResetPasswordPageComponent: ResetPasswordPageComponent,
+    equalValueValidator: equalValueValidator
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccessDeniedPageComponent, AuthContainerComponent, AuthService, BDB_OPTIONS, BdbAlertComponent, BdbAlertErrorResponseComponent, BdbBooleanDisplayComponent, BdbCellDirective, BdbColumnBuilder, BdbColumnType, BdbDataSource, BdbFieldComponent, BdbFlexChildDirective, BdbFlexDirective, BdbFormErrorDirective, 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, 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 };
+//# sourceMappingURL=devopmaat-badaboom.mjs.map