@devopmaat/badaboom 1.4.0 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { InjectionToken, Input, HostBinding, Component, EventEmitter, Output, inject, Injectable, makeEnvironmentProviders, input, signal, Directive, Injector, Pipe, viewChild, contentChildren, effect, computed, output, Optional, Self, HostListener, LOCALE_ID, Inject, DestroyRef, ChangeDetectorRef, ElementRef } from '@angular/core';
3
3
  import { HttpClient, HttpErrorResponse, provideHttpClient, withInterceptors } from '@angular/common/http';
4
4
  import * as i2$4 from '@angular/router';
5
- import { Router, RouterOutlet, provideRouter, ActivatedRoute, NavigationStart, RouterModule, RouterLink } from '@angular/router';
5
+ import { Router, RouterOutlet, provideRouter, ActivatedRoute, NavigationStart, NavigationEnd, RouterModule, RouterLink } from '@angular/router';
6
6
  import { BehaviorSubject, of, catchError as catchError$1, throwError, filter as filter$1, take, concatMap as concatMap$1, tap as tap$1, map, Subject, finalize, takeUntil, debounceTime, distinctUntilChanged, switchMap, merge } from 'rxjs';
7
7
  import * as i1$1 from '@angular/material/dialog';
8
8
  import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
@@ -26,7 +26,7 @@ import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
26
26
  import * as i4 from '@angular/material/sort';
27
27
  import { MatSortModule } from '@angular/material/sort';
28
28
  import * as i2$1 from '@angular/material/table';
29
- import { MatTableModule } from '@angular/material/table';
29
+ import { MatTableModule, MatTableDataSource } from '@angular/material/table';
30
30
  import * as i5$1 from '@angular/material/sidenav';
31
31
  import { MatSidenavModule } from '@angular/material/sidenav';
32
32
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -562,7 +562,7 @@ function provideBaDaBoom(optionsConfigure, routes) {
562
562
  {
563
563
  path: authOptions.resetPasswordPath,
564
564
  canActivate: [loggedOutGuard],
565
- resolve: [resetPasswordResolver],
565
+ resolve: { resetPasswordToken: resetPasswordResolver },
566
566
  loadComponent: () => Promise.resolve().then(function () { return resetPasswordPage_component; }).then(x => x.ResetPasswordPageComponent),
567
567
  },
568
568
  {
@@ -1046,7 +1046,7 @@ class BdbTableComponent {
1046
1046
  return ret;
1047
1047
  }
1048
1048
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1049
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbTableComponent, isStandalone: true, selector: "bdb-table[dataSource]", inputs: { columns: "columns", dataSource: "dataSource", autoLoad: "autoLoad", displayedColumns: "displayedColumns", contextActions: "contextActions", selection: "selection", selectOnRowClick: "selectOnRowClick", selectedRowClass: "selectedRowClass", isClickable: "isClickable", rowColor: "rowColor" }, outputs: { rowClick: "rowClick", contextAction: "contextAction" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bdb-table-container\">\r\n @if (dataSource) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [class.is-clickable]=\"isClickable\"\r\n [dataSource]=\"dataSource\"\r\n matSort\r\n (matSortChange)=\"sortData($event)\"\r\n [trackBy]=\"trackById\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n color=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n color=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns; track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"displayedColumns.length\">\r\n @if (dataSource && (dataSource.error$ | async)) {\r\n <bdb-alert-error-response [value]=\"dataSource.error$ | async\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions; track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"onContextMenuAction(action, row)\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table.is-clickable tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
1049
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbTableComponent, isStandalone: true, selector: "bdb-table[dataSource]", inputs: { columns: "columns", dataSource: "dataSource", autoLoad: "autoLoad", displayedColumns: "displayedColumns", contextActions: "contextActions", selection: "selection", selectOnRowClick: "selectOnRowClick", selectedRowClass: "selectedRowClass", isClickable: "isClickable", rowColor: "rowColor" }, outputs: { rowClick: "rowClick", contextAction: "contextAction" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"bdb-table-container\">\r\n @if (dataSource) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [class.is-clickable]=\"isClickable\"\r\n [dataSource]=\"dataSource\"\r\n matSort\r\n (matSortChange)=\"sortData($event)\"\r\n [trackBy]=\"trackById\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n class=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n class=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns; track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"displayedColumns.length\">\r\n @if (dataSource && (dataSource.error$ | async)) {\r\n <bdb-alert-error-response [value]=\"dataSource.error$ | async\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions; track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"onContextMenuAction(action, row)\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table.is-clickable tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
1050
1050
  }
1051
1051
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableComponent, decorators: [{
1052
1052
  type: Component,
@@ -1060,7 +1060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1060
1060
  BdbBooleanDisplayComponent,
1061
1061
  MatMenuModule,
1062
1062
  MatIconModule,
1063
- ], template: "<div class=\"bdb-table-container\">\r\n @if (dataSource) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [class.is-clickable]=\"isClickable\"\r\n [dataSource]=\"dataSource\"\r\n matSort\r\n (matSortChange)=\"sortData($event)\"\r\n [trackBy]=\"trackById\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n color=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n color=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns; track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"displayedColumns.length\">\r\n @if (dataSource && (dataSource.error$ | async)) {\r\n <bdb-alert-error-response [value]=\"dataSource.error$ | async\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions; track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"onContextMenuAction(action, row)\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table.is-clickable tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"] }]
1063
+ ], template: "<div class=\"bdb-table-container\">\r\n @if (dataSource) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [class.is-clickable]=\"isClickable\"\r\n [dataSource]=\"dataSource\"\r\n matSort\r\n (matSortChange)=\"sortData($event)\"\r\n [trackBy]=\"trackById\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n class=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"\r\n class=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns; track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayedColumns\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"displayedColumns.length\">\r\n @if (dataSource && (dataSource.error$ | async)) {\r\n <bdb-alert-error-response [value]=\"dataSource.error$ | async\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions; track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"onContextMenuAction(action, row)\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table.is-clickable tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"] }]
1064
1064
  }], propDecorators: { columns: [{
1065
1065
  type: Input
1066
1066
  }], dataSource: [{
@@ -1304,25 +1304,25 @@ class BdbTableV2Component {
1304
1304
  if (!selection) {
1305
1305
  return false;
1306
1306
  }
1307
- return this.dataSource()?.every((x) => selection.isSelected(x)) ?? false;
1307
+ return this.dataSource()?.data.every((x) => selection.isSelected(x)) ?? false;
1308
1308
  }
1309
1309
  anySelected() {
1310
1310
  const selection = this.selection();
1311
1311
  if (!selection) {
1312
1312
  return false;
1313
1313
  }
1314
- return this.dataSource()?.some((x) => selection.isSelected(x)) ?? false;
1314
+ return this.dataSource()?.data.some((x) => selection.isSelected(x)) ?? false;
1315
1315
  }
1316
1316
  toggleAllRows() {
1317
1317
  const selection = this.selection();
1318
- if (!(selection && this.dataSource)) {
1318
+ if (!(selection && this.dataSource())) {
1319
1319
  return;
1320
1320
  }
1321
1321
  if (this.isAllSelected()) {
1322
- selection.deselect(...this.dataSource());
1322
+ selection.deselect(...this.dataSource().data);
1323
1323
  }
1324
1324
  else {
1325
- selection.select(...this.dataSource());
1325
+ selection.select(...this.dataSource().data);
1326
1326
  }
1327
1327
  }
1328
1328
  rowClass(row) {
@@ -1347,7 +1347,7 @@ class BdbTableV2Component {
1347
1347
  return ret;
1348
1348
  }
1349
1349
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1350
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbTableV2Component, isStandalone: true, selector: "bdb-table-v2", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectOnRowClick: { classPropertyName: "selectOnRowClick", publicName: "selectOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, contextActions: { classPropertyName: "contextActions", publicName: "contextActions", isSignal: true, isRequired: false, transformFunction: null }, rowColor: { classPropertyName: "rowColor", publicName: "rowColor", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, matSortDisabled: { classPropertyName: "matSortDisabled", publicName: "matSortDisabled", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextAction: "contextAction", rowClick: "rowClick", sortChange: "sortChange" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bdb-table-container\">\r\n @if (dataSource()) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [dataSource]=\"dataSource()\"\r\n matSort\r\n [matSortDisabled]=\"matSortDisabled()\"\r\n disableClear=\"true\"\r\n (matSortChange)=\"sortChange.emit($event)\"\r\n [trackBy]=\"trackBy()\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection()) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection()?.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n color=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection()) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection()?.toggle(row) : null\"\r\n [checked]=\"selection()?.isSelected(row)\"\r\n color=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"activeColumns(); sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: activeColumns()\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"activeColumns().length\">\r\n @if (error()) {\r\n <bdb-alert-error-response [value]=\"error()\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions(); track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"contextAction.emit({ action, row })\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
1350
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbTableV2Component, isStandalone: true, selector: "bdb-table-v2", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, selectOnRowClick: { classPropertyName: "selectOnRowClick", publicName: "selectOnRowClick", isSignal: true, isRequired: false, transformFunction: null }, contextActions: { classPropertyName: "contextActions", publicName: "contextActions", isSignal: true, isRequired: false, transformFunction: null }, rowColor: { classPropertyName: "rowColor", publicName: "rowColor", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, matSortDisabled: { classPropertyName: "matSortDisabled", publicName: "matSortDisabled", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextAction: "contextAction", rowClick: "rowClick", sortChange: "sortChange" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"bdb-table-container\">\r\n @if (dataSource()) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [dataSource]=\"dataSource()\"\r\n matSort\r\n [matSortDisabled]=\"matSortDisabled()\"\r\n disableClear=\"true\"\r\n (matSortChange)=\"sortChange.emit($event)\"\r\n [trackBy]=\"trackBy()\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection()) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection()?.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n class=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection()) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection()?.toggle(row) : null\"\r\n [checked]=\"selection()?.isSelected(row)\"\r\n class=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"activeColumns(); sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: activeColumns()\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"activeColumns().length\">\r\n @if (error()) {\r\n <bdb-alert-error-response [value]=\"error()\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions(); track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"contextAction.emit({ action, row })\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i2$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbBooleanDisplayComponent, selector: "bdb-boolean-display", inputs: ["value"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
1351
1351
  }
1352
1352
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbTableV2Component, decorators: [{
1353
1353
  type: Component,
@@ -1361,7 +1361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1361
1361
  BdbBooleanDisplayComponent,
1362
1362
  MatMenuModule,
1363
1363
  MatIconModule,
1364
- ], template: "<div class=\"bdb-table-container\">\r\n @if (dataSource()) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [dataSource]=\"dataSource()\"\r\n matSort\r\n [matSortDisabled]=\"matSortDisabled()\"\r\n disableClear=\"true\"\r\n (matSortChange)=\"sortChange.emit($event)\"\r\n [trackBy]=\"trackBy()\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection()) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection()?.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n color=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection()) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection()?.toggle(row) : null\"\r\n [checked]=\"selection()?.isSelected(row)\"\r\n color=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"activeColumns(); sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: activeColumns()\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"activeColumns().length\">\r\n @if (error()) {\r\n <bdb-alert-error-response [value]=\"error()\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions(); track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"contextAction.emit({ action, row })\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"] }]
1364
+ ], template: "<div class=\"bdb-table-container\">\r\n @if (dataSource()) {\r\n <table\r\n mat-table\r\n class=\"bdb-table\"\r\n [dataSource]=\"dataSource()\"\r\n matSort\r\n [matSortDisabled]=\"matSortDisabled()\"\r\n disableClear=\"true\"\r\n (matSortChange)=\"sortChange.emit($event)\"\r\n [trackBy]=\"trackBy()\">\r\n <ng-container matColumnDef=\"selection\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n @if (selection()) {\r\n <mat-checkbox\r\n (change)=\"$event ? toggleAllRows() : null\"\r\n [checked]=\"selection()?.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"anySelected() && !isAllSelected()\"\r\n class=\"primary\">\r\n </mat-checkbox>\r\n }\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (selection()) {\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection()?.toggle(row) : null\"\r\n [checked]=\"selection()?.isSelected(row)\"\r\n class=\"accent\">\r\n </mat-checkbox>\r\n }\r\n </td>\r\n </ng-container>\r\n\r\n @for (column of columns(); track column) {\r\n <ng-container [matColumnDef]=\"column.id\">\r\n <ng-container>\r\n <th\r\n mat-header-cell\r\n *matHeaderCellDef\r\n mat-sort-header=\"{{ column.id }}\"\r\n [disabled]=\"column.sortDisabled\"\r\n [width]=\"column.width\"\r\n [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\"\r\n [arrowPosition]=\"column.textAlign && column.textAlign === 'end' ? 'before' : 'after'\">\r\n {{ column.title }}\r\n </th>\r\n </ng-container>\r\n\r\n <td mat-cell *matCellDef=\"let row\" [ngClass]=\"{ 'text-end': column.textAlign && column.textAlign === 'end' }\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.template ? column.template : cellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"activeColumns(); sticky: true\"></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: activeColumns()\"\r\n (click)=\"onRowClick(row)\"\r\n [ngClass]=\"rowClass(row)\"\r\n (contextmenu)=\"onContextMenu($event, row)\"></tr>\r\n\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n <td class=\"mat-cell\" [colSpan]=\"activeColumns().length\">\r\n @if (error()) {\r\n <bdb-alert-error-response [value]=\"error()\"> </bdb-alert-error-response>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"noData\"></ng-container>\r\n }\r\n </td>\r\n </tr>\r\n </table>\r\n }\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<ng-template #cellTemplate let-row let-column=\"column\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n column.pipe ? pipedCellTemplate : defaultCellTemplate;\r\n context: { $implicit: row, column: column }\r\n \"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #pipedCellTemplate let-column=\"column\" let-row>\r\n {{ column.field(row) | dynamicPipe: column.pipe : null }}\r\n</ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-row let-column=\"column\">\r\n @switch (column.type) {\r\n @case (columnType.String) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Number) {\r\n {{ column.field(row) | number: column.format }}\r\n }\r\n @case (columnType.Percentage) {\r\n {{ column.field(row) | percent: column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Currency) {\r\n {{ column.field(row) | currency: column.currencyCode : column.display : column.digitsInfo : column.locale }}\r\n }\r\n @case (columnType.Date) {\r\n {{ column.field(row) | date: column.format }}\r\n }\r\n @case (columnType.Boolean) {\r\n <bdb-boolean-display [value]=\"column.field(row)\"></bdb-boolean-display>\r\n }\r\n @case (columnType.Enum) {\r\n {{ column.field(row) }}\r\n }\r\n @case (columnType.Custom) {\r\n *?*\r\n }\r\n @default {\r\n {{ column.field(row) | json }}\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #noData>\r\n <div class=\"no-data\"><em>Geen gegevens gevonden</em></div>\r\n</ng-template>\r\n\r\n<div\r\n style=\"visibility: hidden; position: fixed\"\r\n [style.left]=\"contextMenuPosition.x\"\r\n [style.top]=\"contextMenuPosition.y\"\r\n [matMenuTriggerFor]=\"contextMenu\"></div>\r\n<mat-menu #contextMenu=\"matMenu\" #contextMenu2=\"matMenu\">\r\n <ng-template matMenuContent let-row=\"row\">\r\n @for (action of contextActions(); track action) {\r\n @if (action.condition === undefined || action.condition(row)) {\r\n <button mat-menu-item (click)=\"contextAction.emit({ action, row })\">\r\n <mat-icon [color]=\"action.color\">{{ action.icon }}</mat-icon> {{ action.label }}\r\n </button>\r\n }\r\n }\r\n </ng-template>\r\n</mat-menu>\r\n", styles: [".bdb-table{width:100%}.bdb-table tr:hover{cursor:pointer}.bdb-table-container{height:100%;overflow:auto}.bdb-table-container::-webkit-scrollbar{width:4px}.bdb-table-container::-webkit-scrollbar-thumb{background-color:#0003}.bdb-table-container::-webkit-scrollbar-track{background-color:#0000001a}.text-end{text-align:end}.no-data{color:#00000080;padding:8px}.mat-mdc-header-row .mat-mdc-header-cell{padding-left:8px;padding-right:8px}.mat-mdc-header-row .mat-mdc-header-cell:first-of-type{padding-left:24px}.mat-mdc-header-row .mat-mdc-header-cell:last-of-type{padding-right:24px}.mat-mdc-row .mat-mdc-cell{padding-left:8px;padding-right:8px}.mat-mdc-row .mat-mdc-cell:first-of-type{padding-left:24px}.mat-mdc-row .mat-mdc-cell:last-of-type{padding-right:24px}.mat-column-selection{width:48px}\n"] }]
1365
1365
  }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], selectOnRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnRowClick", required: false }] }], contextActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextActions", required: false }] }], contextAction: [{ type: i0.Output, args: ["contextAction"] }], rowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowColor", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], matSortDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "matSortDisabled", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }] } });
1366
1366
 
1367
1367
  class BdbGridComponent {
@@ -1372,7 +1372,7 @@ class BdbGridComponent {
1372
1372
  this.contextActions = input([], ...(ngDevMode ? [{ debugName: "contextActions" }] : []));
1373
1373
  this.contextAction = output();
1374
1374
  this.rowColor = input(...(ngDevMode ? [undefined, { debugName: "rowColor" }] : []));
1375
- this.rowClick = new EventEmitter();
1375
+ this.rowClick = output();
1376
1376
  this.filterDrawerOpened = output();
1377
1377
  this.cellTemplates = contentChildren(BdbCellDirective, { ...(ngDevMode ? { debugName: "cellTemplates" } : {}), descendants: true });
1378
1378
  }
@@ -1389,7 +1389,7 @@ class BdbGridComponent {
1389
1389
  }
1390
1390
  }
1391
1391
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1392
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbGridComponent, isStandalone: true, selector: "bdb-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, contextActions: { classPropertyName: "contextActions", publicName: "contextActions", isSignal: true, isRequired: false, transformFunction: null }, rowColor: { classPropertyName: "rowColor", publicName: "rowColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextAction: "contextAction", rowClick: "rowClick", filterDrawerOpened: "filterDrawerOpened" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-toolbar>\r\n <button mat-icon-button (click)=\"filterDrawerOpen = !filterDrawerOpen; filterDrawerOpened.emit(filterDrawerOpen)\">\r\n @if (filterDrawerOpen) {\r\n <mat-icon>filter_alt</mat-icon>\r\n } @else {\r\n <mat-icon>filter_arrow_right</mat-icon>\r\n }\r\n </button>\r\n <div style=\"flex: 1; display: flex; align-items: center; gap: 8px\">\r\n <ng-content select=\"toolbar-item\"></ng-content>\r\n </div>\r\n <bdb-paginator-v2 [dataSource]=\"dataSource()\"></bdb-paginator-v2>\r\n <bdb-query-input-v2 [dataSource]=\"dataSource()\"></bdb-query-input-v2>\r\n</mat-toolbar>\r\n\r\n<mat-drawer-container class=\"filter-drawer\">\r\n <mat-drawer mode=\"side\" [opened]=\"filterDrawerOpen\">\r\n <ng-content select=\"filter-drawer\"></ng-content>\r\n </mat-drawer>\r\n <mat-drawer-content>\r\n <bdb-table-v2\r\n [columns]=\"columns\"\r\n [dataSource]=\"dataSource().data\"\r\n [error]=\"dataSource().error()\"\r\n [displayedColumns]=\"displayedColumns\"\r\n [selection]=\"selection\"\r\n [rowColor]=\"rowColor()\"\r\n [contextActions]=\"contextActions()\"\r\n (contextAction)=\"contextAction.emit($event)\"\r\n (rowClick)=\"rowClick.emit($event)\"\r\n (sortChange)=\"sortChange($event)\">\r\n @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n </ng-template>\r\n }\r\n </bdb-table-v2>\r\n </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:start;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}.filter-drawer{flex-grow:1;--mat-sidenav-content-background-color: var(--mat-sys-surface)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: BdbTableV2Component, selector: "bdb-table-v2", inputs: ["dataSource", "columns", "displayedColumns", "selection", "selectOnRowClick", "contextActions", "rowColor", "error", "matSortDisabled", "trackBy"], outputs: ["contextAction", "rowClick", "sortChange"] }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }, { kind: "component", type: BdbQueryInputV2Component, selector: "bdb-query-input-v2[dataSource]", inputs: ["dataSource"] }, { kind: "component", type: BdbPaginatorV2Component, selector: "bdb-paginator-v2", inputs: ["dataSource"] }] }); }
1392
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbGridComponent, isStandalone: true, selector: "bdb-grid", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, contextActions: { classPropertyName: "contextActions", publicName: "contextActions", isSignal: true, isRequired: false, transformFunction: null }, rowColor: { classPropertyName: "rowColor", publicName: "rowColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextAction: "contextAction", rowClick: "rowClick", filterDrawerOpened: "filterDrawerOpened" }, queries: [{ propertyName: "cellTemplates", predicate: BdbCellDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-toolbar>\r\n <button mat-icon-button (click)=\"filterDrawerOpen = !filterDrawerOpen; filterDrawerOpened.emit(filterDrawerOpen)\">\r\n @if (filterDrawerOpen) {\r\n <mat-icon>filter_alt</mat-icon>\r\n } @else {\r\n <mat-icon>filter_arrow_right</mat-icon>\r\n }\r\n </button>\r\n <div style=\"flex: 1; display: flex; align-items: center; gap: 8px\">\r\n <ng-content select=\"toolbar-item\"></ng-content>\r\n </div>\r\n <bdb-paginator-v2 [dataSource]=\"dataSource()\"></bdb-paginator-v2>\r\n <bdb-query-input-v2 [dataSource]=\"dataSource()\"></bdb-query-input-v2>\r\n</mat-toolbar>\r\n\r\n<mat-drawer-container class=\"filter-drawer\">\r\n <mat-drawer mode=\"side\" [opened]=\"filterDrawerOpen\">\r\n <ng-content select=\"filter-drawer\"></ng-content>\r\n </mat-drawer>\r\n <mat-drawer-content>\r\n <bdb-table-v2\r\n [columns]=\"columns\"\r\n [dataSource]=\"dataSource()\"\r\n [error]=\"dataSource().error()\"\r\n [displayedColumns]=\"displayedColumns\"\r\n [selection]=\"selection\"\r\n [rowColor]=\"rowColor()\"\r\n [contextActions]=\"contextActions()\"\r\n (contextAction)=\"contextAction.emit($event)\"\r\n (rowClick)=\"rowClick.emit($event)\"\r\n (sortChange)=\"sortChange($event)\">\r\n @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n </ng-template>\r\n }\r\n </bdb-table-v2>\r\n </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:start;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}.filter-drawer{flex-grow:1;--mat-sidenav-content-background-color: var(--mat-sys-surface)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i5$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i5$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: BdbTableV2Component, selector: "bdb-table-v2", inputs: ["dataSource", "columns", "displayedColumns", "selection", "selectOnRowClick", "contextActions", "rowColor", "error", "matSortDisabled", "trackBy"], outputs: ["contextAction", "rowClick", "sortChange"] }, { kind: "directive", type: BdbCellDirective, selector: "ng-template[bdbCellDef]", inputs: ["bdbCellDef"] }, { kind: "component", type: BdbQueryInputV2Component, selector: "bdb-query-input-v2[dataSource]", inputs: ["dataSource"] }, { kind: "component", type: BdbPaginatorV2Component, selector: "bdb-paginator-v2", inputs: ["dataSource"] }] }); }
1393
1393
  }
1394
1394
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridComponent, decorators: [{
1395
1395
  type: Component,
@@ -1404,16 +1404,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1404
1404
  BdbCellDirective,
1405
1405
  BdbQueryInputV2Component,
1406
1406
  BdbPaginatorV2Component,
1407
- ], template: "<mat-toolbar>\r\n <button mat-icon-button (click)=\"filterDrawerOpen = !filterDrawerOpen; filterDrawerOpened.emit(filterDrawerOpen)\">\r\n @if (filterDrawerOpen) {\r\n <mat-icon>filter_alt</mat-icon>\r\n } @else {\r\n <mat-icon>filter_arrow_right</mat-icon>\r\n }\r\n </button>\r\n <div style=\"flex: 1; display: flex; align-items: center; gap: 8px\">\r\n <ng-content select=\"toolbar-item\"></ng-content>\r\n </div>\r\n <bdb-paginator-v2 [dataSource]=\"dataSource()\"></bdb-paginator-v2>\r\n <bdb-query-input-v2 [dataSource]=\"dataSource()\"></bdb-query-input-v2>\r\n</mat-toolbar>\r\n\r\n<mat-drawer-container class=\"filter-drawer\">\r\n <mat-drawer mode=\"side\" [opened]=\"filterDrawerOpen\">\r\n <ng-content select=\"filter-drawer\"></ng-content>\r\n </mat-drawer>\r\n <mat-drawer-content>\r\n <bdb-table-v2\r\n [columns]=\"columns\"\r\n [dataSource]=\"dataSource().data\"\r\n [error]=\"dataSource().error()\"\r\n [displayedColumns]=\"displayedColumns\"\r\n [selection]=\"selection\"\r\n [rowColor]=\"rowColor()\"\r\n [contextActions]=\"contextActions()\"\r\n (contextAction)=\"contextAction.emit($event)\"\r\n (rowClick)=\"rowClick.emit($event)\"\r\n (sortChange)=\"sortChange($event)\">\r\n @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n </ng-template>\r\n }\r\n </bdb-table-v2>\r\n </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:start;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}.filter-drawer{flex-grow:1;--mat-sidenav-content-background-color: var(--mat-sys-surface)}\n"] }]
1407
+ ], template: "<mat-toolbar>\r\n <button mat-icon-button (click)=\"filterDrawerOpen = !filterDrawerOpen; filterDrawerOpened.emit(filterDrawerOpen)\">\r\n @if (filterDrawerOpen) {\r\n <mat-icon>filter_alt</mat-icon>\r\n } @else {\r\n <mat-icon>filter_arrow_right</mat-icon>\r\n }\r\n </button>\r\n <div style=\"flex: 1; display: flex; align-items: center; gap: 8px\">\r\n <ng-content select=\"toolbar-item\"></ng-content>\r\n </div>\r\n <bdb-paginator-v2 [dataSource]=\"dataSource()\"></bdb-paginator-v2>\r\n <bdb-query-input-v2 [dataSource]=\"dataSource()\"></bdb-query-input-v2>\r\n</mat-toolbar>\r\n\r\n<mat-drawer-container class=\"filter-drawer\">\r\n <mat-drawer mode=\"side\" [opened]=\"filterDrawerOpen\">\r\n <ng-content select=\"filter-drawer\"></ng-content>\r\n </mat-drawer>\r\n <mat-drawer-content>\r\n <bdb-table-v2\r\n [columns]=\"columns\"\r\n [dataSource]=\"dataSource()\"\r\n [error]=\"dataSource().error()\"\r\n [displayedColumns]=\"displayedColumns\"\r\n [selection]=\"selection\"\r\n [rowColor]=\"rowColor()\"\r\n [contextActions]=\"contextActions()\"\r\n (contextAction)=\"contextAction.emit($event)\"\r\n (rowClick)=\"rowClick.emit($event)\"\r\n (sortChange)=\"sortChange($event)\">\r\n @for (cellTemplate of cellTemplates(); track cellTemplate.bdbCellDef) {\r\n <ng-template bdbCellDef=\"{{ cellTemplate.bdbCellDef }}\" let-element>\r\n <ng-container *ngTemplateOutlet=\"cellTemplate.templateRef; context: { $implicit: element }\"></ng-container>\r\n </ng-template>\r\n }\r\n </bdb-table-v2>\r\n </mat-drawer-content>\r\n</mat-drawer-container>\r\n", styles: [":host{display:flex;flex-direction:column;justify-content:stretch;flex:0 1 100%}:host mat-toolbar{flex:0 0 auto;display:flex;flex-direction:row;gap:8px;justify-content:start;align-items:center}:host bdb-table{display:contents;flex:0 1 100%}:host bdb-query-input{--mdc-filled-text-field-container-color: var(--mat-sys-surface-container-lowest)}:host bdb-paginator{flex:0 0 auto}.filter-drawer{flex-grow:1;--mat-sidenav-content-background-color: var(--mat-sys-surface)}\n"] }]
1408
1408
  }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{
1409
1409
  type: Input
1410
1410
  }], displayedColumns: [{
1411
1411
  type: Input
1412
1412
  }], selection: [{
1413
1413
  type: Input
1414
- }], contextActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextActions", required: false }] }], contextAction: [{ type: i0.Output, args: ["contextAction"] }], rowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowColor", required: false }] }], rowClick: [{
1415
- type: Output
1416
- }], filterDrawerOpened: [{ type: i0.Output, args: ["filterDrawerOpened"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }] } });
1414
+ }], contextActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextActions", required: false }] }], contextAction: [{ type: i0.Output, args: ["contextAction"] }], rowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowColor", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], filterDrawerOpened: [{ type: i0.Output, args: ["filterDrawerOpened"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }] } });
1417
1415
 
1418
1416
  class BdbSearchInputComponent {
1419
1417
  // MatFormFieldControl required properties
@@ -1840,7 +1838,7 @@ class BdbSearchComponent {
1840
1838
  this.onChange(null);
1841
1839
  }
1842
1840
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
1843
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbSearchComponent, isStandalone: true, selector: "bdb-search", inputs: { dataSource: "dataSource", displayFn: "displayFn", label: "label", hint: "hint", placeholder: "placeholder" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }, { propertyName: "autoCompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search-container\">\r\n @if (hasValue) {\r\n <div class=\"search-disabled-cover\">\r\n <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" color=\"danger\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <mat-form-field class=\"search-form-field\">\r\n <mat-label>{{ label }}</mat-label>\r\n <input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n #searchInput\r\n [tabIndex]=\"inputTabIndex\"\r\n [placeholder]=\"placeholder\" />\r\n <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n @for (option of searchOptions | async; track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ option | function: displayFn }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n\r\n @if (!hasValue) {\r\n <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n }\r\n <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n <mat-hint>{{ hint }}</mat-hint>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "function" }] }); }
1841
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbSearchComponent, isStandalone: true, selector: "bdb-search", inputs: { dataSource: "dataSource", displayFn: "displayFn", label: "label", hint: "hint", placeholder: "placeholder" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true, isSignal: true }, { propertyName: "autoCompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search-container\">\r\n @if (hasValue) {\r\n <div class=\"search-disabled-cover\">\r\n <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" class=\"danger\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <mat-form-field class=\"search-form-field\">\r\n <mat-label>{{ label }}</mat-label>\r\n <input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n #searchInput\r\n [tabIndex]=\"inputTabIndex\"\r\n [placeholder]=\"placeholder\" />\r\n <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n @for (option of searchOptions | async; track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ option | function: displayFn }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n\r\n @if (!hasValue) {\r\n <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n }\r\n <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n <mat-hint>{{ hint }}</mat-hint>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "function" }] }); }
1844
1842
  }
1845
1843
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchComponent, decorators: [{
1846
1844
  type: Component,
@@ -1854,7 +1852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1854
1852
  BdbFormErrorDirective,
1855
1853
  FunctionPipe,
1856
1854
  MatButtonModule,
1857
- ], template: "<div class=\"search-container\">\r\n @if (hasValue) {\r\n <div class=\"search-disabled-cover\">\r\n <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" color=\"danger\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <mat-form-field class=\"search-form-field\">\r\n <mat-label>{{ label }}</mat-label>\r\n <input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n #searchInput\r\n [tabIndex]=\"inputTabIndex\"\r\n [placeholder]=\"placeholder\" />\r\n <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n @for (option of searchOptions | async; track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ option | function: displayFn }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n\r\n @if (!hasValue) {\r\n <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n }\r\n <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n <mat-hint>{{ hint }}</mat-hint>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"] }]
1855
+ ], template: "<div class=\"search-container\">\r\n @if (hasValue) {\r\n <div class=\"search-disabled-cover\">\r\n <button #clearButton mat-icon-button type=\"button\" [disabled]=\"isDisabled\" (click)=\"clear()\" class=\"danger\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <mat-form-field class=\"search-form-field\">\r\n <mat-label>{{ label }}</mat-label>\r\n <input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n #searchInput\r\n [tabIndex]=\"inputTabIndex\"\r\n [placeholder]=\"placeholder\" />\r\n <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn\">\r\n @for (option of searchOptions | async; track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ option | function: displayFn }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n\r\n @if (!hasValue) {\r\n <mat-icon matSuffix [ngClass]=\"{ 'search-icon-disabled': isDisabled }\">search</mat-icon>\r\n }\r\n <mat-error [bdbFormError]=\"searchCtrl\"> </mat-error>\r\n <mat-hint>{{ hint }}</mat-hint>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".search-container{position:relative}.search-disabled-cover{position:absolute;width:100%;height:100%;z-index:10;display:flex;justify-content:flex-end;align-items:flex-start;padding:4px}.search-form-field{width:100%}\n"] }]
1858
1856
  }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1859
1857
  type: Optional
1860
1858
  }, {
@@ -3133,9 +3131,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
3133
3131
  }] });
3134
3132
 
3135
3133
  /// <summary>
3136
- /// A data source that can be used with the BdbTableComponent, that supports persistance of the state (e.g. in queryParameters).
3134
+ /// A data source that can be used with the BdbTableComponent, that supports persistence of the state (e.g. in queryParameters).
3137
3135
  /// </summary>
3138
- class BdbDataSourceV2 {
3136
+ class BdbDataSourceV2 extends MatTableDataSource {
3139
3137
  get state() {
3140
3138
  return {
3141
3139
  pageSize: this.pageSize == this.defaultPageSize ? undefined : this.pageSize,
@@ -3159,9 +3157,6 @@ class BdbDataSourceV2 {
3159
3157
  this.sortDirection === state.sortDirection &&
3160
3158
  this.query === state.query);
3161
3159
  }
3162
- get data() {
3163
- return this.responseSubject.getValue()?.rows ?? [];
3164
- }
3165
3160
  get identifier() {
3166
3161
  return this._identifier;
3167
3162
  }
@@ -3170,10 +3165,11 @@ class BdbDataSourceV2 {
3170
3165
  this.setPersistence();
3171
3166
  }
3172
3167
  constructor() {
3173
- // abstract service: BdbServiceR<BdbEntity, TEntity>;
3168
+ super();
3174
3169
  this.destroyRef = inject(DestroyRef);
3175
3170
  this.router = inject(Router);
3176
3171
  this.route = inject(ActivatedRoute);
3172
+ this.persistence = { replaceUrl: true };
3177
3173
  this.defaultPageSize = 25;
3178
3174
  this.defaultPage = 0;
3179
3175
  this.defaultSortField = 'id';
@@ -3182,6 +3178,7 @@ class BdbDataSourceV2 {
3182
3178
  this.request$ = this.requestSubject.asObservable();
3183
3179
  this.responseSubject = new BehaviorSubject(undefined);
3184
3180
  this.response$ = this.responseSubject.asObservable();
3181
+ this.dataSubject = new BehaviorSubject([]);
3185
3182
  this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
3186
3183
  this.loading = this._loading.asReadonly();
3187
3184
  this._error = signal(undefined, ...(ngDevMode ? [{ debugName: "_error" }] : []));
@@ -3190,23 +3187,21 @@ class BdbDataSourceV2 {
3190
3187
  .pipe(tap$1(() => {
3191
3188
  this._loading.set(true);
3192
3189
  this._error.set(undefined);
3193
- }), switchMap((x) => this.loadMethod(x).pipe(catchError$1((err) => {
3190
+ }), switchMap((x) => this.loadMethod(x[0]).pipe(catchError$1((err) => {
3194
3191
  this._error.set(err);
3195
3192
  return of({ page: 0, count: 0, rows: [], pageSize: 15 });
3196
3193
  }), tap$1(response => {
3197
3194
  this.responseSubject.next(response);
3195
+ this.dataSubject.next(response.rows);
3198
3196
  }), finalize(() => this._loading.set(false)))))
3199
3197
  .subscribe();
3200
3198
  }
3201
- disconnect() {
3202
- return;
3203
- }
3204
3199
  // Connects the data source to the table.
3205
3200
  connect() {
3206
- return this.responseSubject.asObservable().pipe(map(x => x?.rows ?? []));
3201
+ return this.dataSubject;
3207
3202
  }
3208
- load() {
3209
- this.requestSubject.next(this.createRequest());
3203
+ load(loadOptions = {}) {
3204
+ this.requestSubject.next([this.createRequest(), loadOptions]);
3210
3205
  }
3211
3206
  // Can be overriden in a child class to create a custom request.
3212
3207
  createRequest() {
@@ -3231,7 +3226,7 @@ class BdbDataSourceV2 {
3231
3226
  const identifier = this.identifier;
3232
3227
  this._persistenceRead = merge(
3233
3228
  // 0 is the initial load of a datasource state, not a popstate event
3234
- of(0), this.router.events.pipe(takeUntilDestroyed(this.destroyRef), filter$1(x => x instanceof NavigationStart && x.navigationTrigger === 'popstate'))).subscribe({
3229
+ of(0), this.router.events.pipe(takeUntilDestroyed(this.destroyRef), filter$1(x => x instanceof NavigationStart && x.navigationTrigger === 'popstate'), concatMap$1(navigationStart => this.router.events.pipe(filter$1(event => event instanceof NavigationEnd && event.id === navigationStart.id), take(1))))).subscribe({
3235
3230
  next: () => {
3236
3231
  const stateString = this.route.snapshot.queryParams[identifier];
3237
3232
  let state = {};
@@ -3252,7 +3247,7 @@ class BdbDataSourceV2 {
3252
3247
  return;
3253
3248
  }
3254
3249
  this.state = state;
3255
- this.load();
3250
+ this.load({ fromPopState: true });
3256
3251
  },
3257
3252
  });
3258
3253
  //WRITE
@@ -3260,15 +3255,17 @@ class BdbDataSourceV2 {
3260
3255
  this._persistenceWrite.unsubscribe();
3261
3256
  this._persistenceWrite = undefined;
3262
3257
  }
3263
- this.request$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
3264
- next: () => {
3258
+ this.request$
3259
+ .pipe(takeUntilDestroyed(this.destroyRef), filter$1(([_, loadOptions]) => !loadOptions.fromPopState))
3260
+ .subscribe({
3261
+ next: ([_, loadOptions]) => {
3265
3262
  let stateString = JSON.stringify(this.state);
3266
3263
  stateString = stateString === '{}' ? undefined : stateString;
3267
3264
  const qp = {};
3268
3265
  qp[this.identifier] = stateString;
3269
3266
  this.router.navigate([], {
3270
3267
  relativeTo: this.route,
3271
- replaceUrl: false,
3268
+ replaceUrl: loadOptions.replaceUrl ?? this.persistence.replaceUrl,
3272
3269
  queryParams: qp,
3273
3270
  queryParamsHandling: 'merge',
3274
3271
  });
@@ -3639,7 +3636,7 @@ class AccessDeniedPageComponent {
3639
3636
  this._onDestroy.complete();
3640
3637
  }
3641
3638
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AccessDeniedPageComponent, deps: [{ token: BDB_OPTIONS }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
3642
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AccessDeniedPageComponent, isStandalone: true, selector: "bdb-access-denied-page", ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Toegang geweigerd</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"access-denied-card-content\">\r\n <bdb-alert color=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n U heeft onvoldoende rechten voor de gevraagde toepassing\r\n </bdb-alert>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 0 end center\">\r\n @if (isLoggedIn) {\r\n <a [routerLink]=\"['/', logoutRoutePath]\" mat-button>Uitloggen</a>\r\n } @else {\r\n <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n }\r\n </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
3639
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: AccessDeniedPageComponent, isStandalone: true, selector: "bdb-access-denied-page", ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Toegang geweigerd</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"access-denied-card-content\">\r\n <bdb-alert class=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n U heeft onvoldoende rechten voor de gevraagde toepassing\r\n </bdb-alert>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 0 end center\">\r\n @if (isLoggedIn) {\r\n <a [routerLink]=\"['/', logoutRoutePath]\" mat-button>Uitloggen</a>\r\n } @else {\r\n <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n }\r\n </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
3643
3640
  }
3644
3641
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AccessDeniedPageComponent, decorators: [{
3645
3642
  type: Component,
@@ -3650,7 +3647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
3650
3647
  RouterLink,
3651
3648
  MatIconModule,
3652
3649
  BdbFlexDirective
3653
- ], template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Toegang geweigerd</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"access-denied-card-content\">\r\n <bdb-alert color=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n U heeft onvoldoende rechten voor de gevraagde toepassing\r\n </bdb-alert>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 0 end center\">\r\n @if (isLoggedIn) {\r\n <a [routerLink]=\"['/', logoutRoutePath]\" mat-button>Uitloggen</a>\r\n } @else {\r\n <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n }\r\n </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
3650
+ ], 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 class=\"danger\" label=\"Geen toegang\" icon=\"block\">\r\n U heeft onvoldoende rechten voor de gevraagde toepassing\r\n </bdb-alert>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 0 end center\">\r\n @if (isLoggedIn) {\r\n <a [routerLink]=\"['/', logoutRoutePath]\" mat-button>Uitloggen</a>\r\n } @else {\r\n <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n }\r\n </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
3654
3651
  }], ctorParameters: () => [{ type: undefined, decorators: [{
3655
3652
  type: Inject,
3656
3653
  args: [BDB_OPTIONS]
@@ -3694,7 +3691,7 @@ class ForgotPasswordPageComponent {
3694
3691
  });
3695
3692
  }
3696
3693
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ForgotPasswordPageComponent, deps: [{ token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
3697
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ForgotPasswordPageComponent, isStandalone: true, selector: "bdb-forgot-password-page", ngImport: i0, template: "@if (!isComplete) {\r\n <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"forgot-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <mat-form-field>\r\n <mat-label>E-mailadres</mat-label>\r\n <input matInput type=\"email\" formControlName=\"email\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button color=\"primary\">\r\n <mat-icon>lock_reset</mat-icon>\r\n <span>Herstel wachtwoord</span>\r\n </button></mat-card-actions\r\n >\r\n </mat-card>\r\n </form>\r\n} @else {\r\n <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n}\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
3694
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ForgotPasswordPageComponent, isStandalone: true, selector: "bdb-forgot-password-page", ngImport: i0, template: "@if (!isComplete) {\r\n <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"forgot-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <mat-form-field>\r\n <mat-label>E-mailadres</mat-label>\r\n <input matInput type=\"email\" formControlName=\"email\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button class=\"primary\">\r\n <mat-icon>lock_reset</mat-icon>\r\n <span>Herstel wachtwoord</span>\r\n </button></mat-card-actions\r\n >\r\n </mat-card>\r\n </form>\r\n} @else {\r\n <bdb-alert class=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n}\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
3698
3695
  }
3699
3696
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ForgotPasswordPageComponent, decorators: [{
3700
3697
  type: Component,
@@ -3708,7 +3705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
3708
3705
  BdbAlertErrorResponseComponent,
3709
3706
  BdbAlertComponent,
3710
3707
  MatButtonModule
3711
- ], template: "@if (!isComplete) {\r\n <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"forgot-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <mat-form-field>\r\n <mat-label>E-mailadres</mat-label>\r\n <input matInput type=\"email\" formControlName=\"email\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button color=\"primary\">\r\n <mat-icon>lock_reset</mat-icon>\r\n <span>Herstel wachtwoord</span>\r\n </button></mat-card-actions\r\n >\r\n </mat-card>\r\n </form>\r\n} @else {\r\n <bdb-alert color=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n}\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
3708
+ ], template: "@if (!isComplete) {\r\n <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"forgotPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord vergeten</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"forgot-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <mat-form-field>\r\n <mat-label>E-mailadres</mat-label>\r\n <input matInput type=\"email\" formControlName=\"email\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"forgot-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button class=\"primary\">\r\n <mat-icon>lock_reset</mat-icon>\r\n <span>Herstel wachtwoord</span>\r\n </button></mat-card-actions\r\n >\r\n </mat-card>\r\n </form>\r\n} @else {\r\n <bdb-alert class=\"success\" label=\"Wachtwoord herstel gestart\"> Controleer uw e-mail voor instructies </bdb-alert>\r\n}\r\n", styles: [":host{width:360px}.forgot-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.forgot-password-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
3712
3709
  }], ctorParameters: () => [{ type: AuthService }, { type: undefined, decorators: [{
3713
3710
  type: Inject,
3714
3711
  args: [BDB_OPTIONS]
@@ -3724,11 +3721,11 @@ class InvalidTokenPageComponent {
3724
3721
  this.loginRoutePath = bdbOptions.authOptions?.loginPath;
3725
3722
  }
3726
3723
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InvalidTokenPageComponent, deps: [{ token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
3727
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: InvalidTokenPageComponent, isStandalone: true, selector: "bdb-invalid-token-page", ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Ongeldig token</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"access-denied-card-content\">\r\n <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 0 end center\">\r\n <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
3724
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: InvalidTokenPageComponent, isStandalone: true, selector: "bdb-invalid-token-page", ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Ongeldig token</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"access-denied-card-content\">\r\n <bdb-alert class=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 0 end center\">\r\n <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertComponent, selector: "bdb-alert", inputs: ["label", "icon", "inline"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }] }); }
3728
3725
  }
3729
3726
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InvalidTokenPageComponent, decorators: [{
3730
3727
  type: Component,
3731
- args: [{ selector: 'bdb-invalid-token-page', imports: [MatCardModule, BdbAlertComponent, MatButtonModule, RouterLink, BdbFlexDirective], template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Ongeldig token</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"access-denied-card-content\">\r\n <bdb-alert color=\"warn\" label=\"Verlopen\" icon=\"block\"> Uw wachtwoord herstel link is niet (meer) geldig </bdb-alert>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 0 end center\">\r\n <a [routerLink]=\"['/', loginRoutePath]\" mat-button>Inloggen</a>\r\n </mat-card-actions>\r\n</mat-card>\r\n", styles: [":host{min-width:360px}.access-denied-card-content{padding:8px 16px}\n"] }]
3728
+ args: [{ selector: 'bdb-invalid-token-page', imports: [MatCardModule, BdbAlertComponent, MatButtonModule, RouterLink, BdbFlexDirective], template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Ongeldig token</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"access-denied-card-content\">\r\n <bdb-alert class=\"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"] }]
3732
3729
  }], ctorParameters: () => [{ type: undefined, decorators: [{
3733
3730
  type: Inject,
3734
3731
  args: [BDB_OPTIONS]
@@ -3785,7 +3782,7 @@ class LoginPageComponent {
3785
3782
  });
3786
3783
  }
3787
3784
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginPageComponent, deps: [{ token: i2$4.Router }, { token: AuthService }, { token: i2$4.ActivatedRoute }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
3788
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LoginPageComponent, isStandalone: true, selector: "bdb-login-page", ngImport: i0, template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Inloggen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content bdbFlex=\"col\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n <mat-form-field>\r\n <mat-label>Gebruikersnaam</mat-label>\r\n <input matInput type=\"email\" formControlName=\"email\" />\r\n <mat-error bdbFormError=\"email\"></mat-error>\r\n </mat-form-field>\r\n <mat-form-field>\r\n <mat-label>Wachtwoord</mat-label>\r\n <input matInput type=\"password\" formControlName=\"password\" />\r\n <mat-error bdbFormError=\"password\"></mat-error>\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 8px end center\">\r\n <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n <mat-icon>contact_support</mat-icon>\r\n <span>Wachtwoord vergeten</span>\r\n </a>\r\n <button mat-flat-button color=\"primary\">\r\n <mat-icon>login</mat-icon>\r\n <span>Inloggen</span>\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }] }); }
3785
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LoginPageComponent, isStandalone: true, selector: "bdb-login-page", ngImport: i0, template: "<form [formGroup]=\"loginForm\" (ngSubmit)=\"login()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Inloggen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content bdbFlex=\"col\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-form-error-response\"></bdb-alert-error-response>\r\n <mat-form-field>\r\n <mat-label>Gebruikersnaam</mat-label>\r\n <input matInput type=\"email\" formControlName=\"email\" />\r\n <mat-error bdbFormError=\"email\"></mat-error>\r\n </mat-form-field>\r\n <mat-form-field>\r\n <mat-label>Wachtwoord</mat-label>\r\n <input matInput type=\"password\" formControlName=\"password\" />\r\n <mat-error bdbFormError=\"password\"></mat-error>\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions bdbFlex=\"row 8px end center\">\r\n <a mat-button [routerLink]=\"['/', forgotPasswordRoutePath]\">\r\n <mat-icon>contact_support</mat-icon>\r\n <span>Wachtwoord vergeten</span>\r\n </a>\r\n <button mat-flat-button class=\"primary\">\r\n <mat-icon>login</mat-icon>\r\n <span>Inloggen</span>\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.login-form-error-response{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: BdbFlexDirective, selector: "[bdbFlex], [bdbFlexDirection], [bdbFlexGap], [bdbFlexSpacing]", inputs: ["bdbFlex", "bdbFlexDirection", "bdbFlexGap", "bdbFlexSpacing"] }, { kind: "directive", type: BdbFormErrorDirective, selector: "[bdbFormError]", inputs: ["bdbFormError"] }] }); }
3789
3786
  }
3790
3787
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LoginPageComponent, decorators: [{
3791
3788
  type: Component,
@@ -3800,7 +3797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
3800
3797
  BdbAlertErrorResponseComponent,
3801
3798
  BdbFlexDirective,
3802
3799
  BdbFormErrorDirective
3803
- ], 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"] }]
3800
+ ], 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 class=\"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"] }]
3804
3801
  }], ctorParameters: () => [{ type: i2$4.Router }, { type: AuthService }, { type: i2$4.ActivatedRoute }, { type: undefined, decorators: [{
3805
3802
  type: Inject,
3806
3803
  args: [BDB_OPTIONS]
@@ -3822,11 +3819,11 @@ class LogoutPageComponent {
3822
3819
  this.router.navigate(['/', this.bdbOptions.authOptions?.loginPath]);
3823
3820
  }
3824
3821
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LogoutPageComponent, deps: [{ token: i2$4.Router }, { token: AuthService }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
3825
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LogoutPageComponent, isStandalone: true, selector: "bdb-logout-page", ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Uitloggen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n <mat-card-actions class=\"logout-page-card-actions\">\r\n <a mat-button routerLink=\"/\">\r\n <mat-icon>arrow_back</mat-icon>\r\n <span>Blijf ingelogd</span>\r\n </a>\r\n <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n <mat-icon>logout</mat-icon>\r\n <span>Log uit</span>\r\n </button></mat-card-actions\r\n >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
3822
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: LogoutPageComponent, isStandalone: true, selector: "bdb-logout-page", ngImport: i0, template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Uitloggen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n <mat-card-actions class=\"logout-page-card-actions\">\r\n <a mat-button routerLink=\"/\">\r\n <mat-icon>arrow_back</mat-icon>\r\n <span>Blijf ingelogd</span>\r\n </a>\r\n <button (click)=\"logout()\" mat-flat-button class=\"primary\">\r\n <mat-icon>logout</mat-icon>\r\n <span>Log uit</span>\r\n </button></mat-card-actions\r\n >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
3826
3823
  }
3827
3824
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LogoutPageComponent, decorators: [{
3828
3825
  type: Component,
3829
- args: [{ selector: 'bdb-logout-page', imports: [MatCardModule, MatButtonModule, MatIconModule, RouterLink], template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Uitloggen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n <mat-card-actions class=\"logout-page-card-actions\">\r\n <a mat-button routerLink=\"/\">\r\n <mat-icon>arrow_back</mat-icon>\r\n <span>Blijf ingelogd</span>\r\n </a>\r\n <button (click)=\"logout()\" mat-flat-button color=\"primary\">\r\n <mat-icon>logout</mat-icon>\r\n <span>Log uit</span>\r\n </button></mat-card-actions\r\n >\r\n</mat-card>\r\n", styles: [":host{width:360px}.logout-page-card-content{display:flex;flex-direction:column;padding:16px}.logout-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
3826
+ args: [{ selector: 'bdb-logout-page', imports: [MatCardModule, MatButtonModule, MatIconModule, RouterLink], template: "<mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Uitloggen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"logout-page-card-content\"> Weet u zeker dat u wilt uitloggen? </mat-card-content>\r\n <mat-card-actions class=\"logout-page-card-actions\">\r\n <a mat-button routerLink=\"/\">\r\n <mat-icon>arrow_back</mat-icon>\r\n <span>Blijf ingelogd</span>\r\n </a>\r\n <button (click)=\"logout()\" mat-flat-button class=\"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"] }]
3830
3827
  }], ctorParameters: () => [{ type: i2$4.Router }, { type: AuthService }, { type: undefined, decorators: [{
3831
3828
  type: Inject,
3832
3829
  args: [BDB_OPTIONS]
@@ -3901,7 +3898,7 @@ class ResetPasswordPageComponent {
3901
3898
  });
3902
3899
  }
3903
3900
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetPasswordPageComponent, deps: [{ token: AuthService }, { token: i2$4.ActivatedRoute }, { token: i2$4.Router }, { token: BDB_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
3904
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ResetPasswordPageComponent, isStandalone: true, selector: "bdb-reset-password-page", ngImport: i0, template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"reset-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n <mat-form-field>\r\n <mat-label>Nieuw wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field>\r\n <mat-label>Bevestig wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"reset-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button color=\"primary\">\r\n <mat-icon>sync_lock</mat-icon>\r\n <span>Stel wachtwoord in</span>\r\n </button></mat-card-actions\r\n >\r\n </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
3901
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: ResetPasswordPageComponent, isStandalone: true, selector: "bdb-reset-password-page", ngImport: i0, template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"reset-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n <mat-form-field>\r\n <mat-label>Nieuw wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field>\r\n <mat-label>Bevestig wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"reset-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button class=\"primary\">\r\n <mat-icon>sync_lock</mat-icon>\r\n <span>Stel wachtwoord in</span>\r\n </button></mat-card-actions\r\n >\r\n </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: BdbAlertErrorResponseComponent, selector: "bdb-alert-error-response", inputs: ["value", "dismissable"], outputs: ["dismiss"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
3905
3902
  }
3906
3903
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
3907
3904
  type: Component,
@@ -3914,7 +3911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
3914
3911
  MatIconModule,
3915
3912
  RouterLink,
3916
3913
  MatButtonModule,
3917
- ], template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"reset-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n <mat-form-field>\r\n <mat-label>Nieuw wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field>\r\n <mat-label>Bevestig wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"reset-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button color=\"primary\">\r\n <mat-icon>sync_lock</mat-icon>\r\n <span>Stel wachtwoord in</span>\r\n </button></mat-card-actions\r\n >\r\n </mat-card>\r\n</form>\r\n", styles: [":host{width:360px}.reset-password-page-card-content{display:flex;flex-direction:column;margin-top:16px}.reset-password-page-card-actions{gap:8px;justify-content:flex-end}\n"] }]
3914
+ ], template: "<form [formGroup]=\"resetPasswordForm\" (ngSubmit)=\"resetPassword()\">\r\n <mat-card>\r\n <mat-card-header>\r\n <mat-card-title>Wachtwoord herstellen</mat-card-title>\r\n </mat-card-header>\r\n <mat-card-content class=\"reset-password-page-card-content\">\r\n <bdb-alert-error-response [value]=\"error\" class=\"login-page-error-response\"></bdb-alert-error-response>\r\n <p>{{ resetPasswordToken?.email }}</p>\r\n\r\n <mat-form-field>\r\n <mat-label>Nieuw wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"passwordCtrl\" />\r\n </mat-form-field>\r\n\r\n <mat-form-field>\r\n <mat-label>Bevestig wachtwoord</mat-label>\r\n <input matInput type=\"password\" [formControl]=\"confirmPasswordCtrl\" />\r\n </mat-form-field>\r\n </mat-card-content>\r\n <mat-card-actions class=\"reset-password-page-card-actions\">\r\n <a mat-button [routerLink]=\"['/', loginRoutePath]\" [disabled]=\"isPending\">\r\n <mat-icon>login</mat-icon>\r\n <span>Log in</span>\r\n </a>\r\n <button mat-flat-button class=\"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"] }]
3918
3915
  }], ctorParameters: () => [{ type: AuthService }, { type: i2$4.ActivatedRoute }, { type: i2$4.Router }, { type: undefined, decorators: [{
3919
3916
  type: Inject,
3920
3917
  args: [BDB_OPTIONS]