@devopmaat/badaboom 1.4.2 → 1.4.4

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.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
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';
2
+ import { InjectionToken, Input, HostBinding, Component, EventEmitter, Output, inject, Injectable, makeEnvironmentProviders, input, signal, Directive, Injector, Pipe, viewChild, contentChildren, DestroyRef, effect, computed, output, Optional, Self, HostListener, LOCALE_ID, Inject, 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
5
  import { Router, RouterOutlet, provideRouter, ActivatedRoute, NavigationStart, NavigationEnd, RouterModule, RouterLink } from '@angular/router';
@@ -1137,47 +1137,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1137
1137
  class BdbPaginatorV2Component {
1138
1138
  constructor() {
1139
1139
  this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
1140
- this._onDestroy = new Subject();
1141
- this._disabled = false;
1142
- }
1143
- set disabled(disabled) {
1144
- this._disabled = disabled;
1145
- }
1146
- get disabled() {
1147
- return this._disabled;
1140
+ this.destroyRef = inject(DestroyRef);
1141
+ this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
1142
+ this.pageSize = signal(undefined, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
1143
+ this.page = signal(undefined, ...(ngDevMode ? [{ debugName: "page" }] : []));
1144
+ this.length = signal(undefined, ...(ngDevMode ? [{ debugName: "length" }] : []));
1148
1145
  }
1149
1146
  ngOnInit() {
1150
1147
  this.dataSource()
1151
- .response$.pipe(takeUntil(this._onDestroy))
1148
+ .response$.pipe(takeUntilDestroyed(this.destroyRef))
1152
1149
  .subscribe({
1153
1150
  next: (x) => {
1154
1151
  if (x === undefined) {
1155
- this.disabled = true;
1152
+ this.disabled.set(true);
1156
1153
  }
1157
1154
  else {
1158
- this.disabled = false;
1159
- this.pageSize = x.pageSize;
1160
- this.page = x.page;
1161
- this.length = x.count;
1155
+ this.disabled.set(false);
1156
+ this.pageSize.set(x.pageSize);
1157
+ this.page.set(x.page);
1158
+ this.length.set(x.count);
1162
1159
  }
1163
1160
  },
1164
1161
  });
1165
1162
  }
1166
- ngOnDestroy() {
1167
- this._onDestroy.next();
1168
- this._onDestroy.complete();
1169
- }
1170
1163
  changePage(event) {
1171
1164
  this.dataSource().page = event.pageIndex;
1172
1165
  this.dataSource().pageSize = event.pageSize;
1173
1166
  this.dataSource().load();
1174
1167
  }
1175
1168
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPaginatorV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1176
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: BdbPaginatorV2Component, isStandalone: true, selector: "bdb-paginator-v2", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-paginator\r\n [pageSize]=\"pageSize\"\r\n [pageIndex]=\"page\"\r\n [length]=\"length\"\r\n [disabled]=\"disabled\"\r\n (page)=\"changePage($event)\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [":host{--mat-paginator-container-background-color: transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
1169
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: BdbPaginatorV2Component, isStandalone: true, selector: "bdb-paginator-v2", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-paginator\r\n [pageSize]=\"pageSize()\"\r\n [pageIndex]=\"page()\"\r\n [length]=\"length()\"\r\n [disabled]=\"disabled()\"\r\n (page)=\"changePage($event)\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [":host{--mat-paginator-container-background-color: transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
1177
1170
  }
1178
1171
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbPaginatorV2Component, decorators: [{
1179
1172
  type: Component,
1180
- args: [{ selector: 'bdb-paginator-v2', imports: [MatPaginatorModule], template: "<mat-paginator\r\n [pageSize]=\"pageSize\"\r\n [pageIndex]=\"page\"\r\n [length]=\"length\"\r\n [disabled]=\"disabled\"\r\n (page)=\"changePage($event)\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [":host{--mat-paginator-container-background-color: transparent}\n"] }]
1173
+ args: [{ selector: 'bdb-paginator-v2', imports: [MatPaginatorModule], template: "<mat-paginator\r\n [pageSize]=\"pageSize()\"\r\n [pageIndex]=\"page()\"\r\n [length]=\"length()\"\r\n [disabled]=\"disabled()\"\r\n (page)=\"changePage($event)\"\r\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\r\n [hidePageSize]=\"true\">\r\n</mat-paginator>\r\n", styles: [":host{--mat-paginator-container-background-color: transparent}\n"] }]
1181
1174
  }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }] } });
1182
1175
 
1183
1176
  class BdbQueryInputV2Component {
@@ -1367,12 +1360,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1367
1360
  class BdbGridComponent {
1368
1361
  constructor() {
1369
1362
  this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
1370
- this.columns = [];
1371
- this.displayedColumns = [];
1363
+ this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
1364
+ this.displayedColumns = input([], ...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
1365
+ this.selection = input(undefined, ...(ngDevMode ? [{ debugName: "selection" }] : []));
1372
1366
  this.contextActions = input([], ...(ngDevMode ? [{ debugName: "contextActions" }] : []));
1373
1367
  this.contextAction = output();
1374
1368
  this.rowColor = input(...(ngDevMode ? [undefined, { debugName: "rowColor" }] : []));
1375
1369
  this.rowClick = output();
1370
+ this.filterDrawerOpen = false;
1376
1371
  this.filterDrawerOpened = output();
1377
1372
  this.cellTemplates = contentChildren(BdbCellDirective, { ...(ngDevMode ? { debugName: "cellTemplates" } : {}), descendants: true });
1378
1373
  }
@@ -1381,7 +1376,7 @@ class BdbGridComponent {
1381
1376
  }
1382
1377
  sortChange(event) {
1383
1378
  const dataSource = this.dataSource();
1384
- const column = this.columns.find(x => x.id === event.active);
1379
+ const column = this.columns().find(x => x.id === event.active);
1385
1380
  if (column && dataSource) {
1386
1381
  dataSource.sortField = column.id;
1387
1382
  dataSource.sortDirection = event.direction === '' ? 'asc' : event.direction;
@@ -1389,7 +1384,7 @@ class BdbGridComponent {
1389
1384
  }
1390
1385
  }
1391
1386
  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()\"\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"] }] }); }
1387
+ 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: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", 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 } }, 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
1388
  }
1394
1389
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbGridComponent, decorators: [{
1395
1390
  type: Component,
@@ -1404,14 +1399,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
1404
1399
  BdbCellDirective,
1405
1400
  BdbQueryInputV2Component,
1406
1401
  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()\"\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
- }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{
1409
- type: Input
1410
- }], displayedColumns: [{
1411
- type: Input
1412
- }], selection: [{
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: [{ type: i0.Output, args: ["rowClick"] }], filterDrawerOpened: [{ type: i0.Output, args: ["filterDrawerOpened"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }] } });
1402
+ ], 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"] }]
1403
+ }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", 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 }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], filterDrawerOpened: [{ type: i0.Output, args: ["filterDrawerOpened"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BdbCellDirective), { ...{ descendants: true }, isSignal: true }] }] } });
1415
1404
 
1416
1405
  class BdbSearchInputComponent {
1417
1406
  // MatFormFieldControl required properties
@@ -1453,6 +1442,7 @@ class BdbSearchInputComponent {
1453
1442
  this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
1454
1443
  this.displayFn = input.required(...(ngDevMode ? [{ debugName: "displayFn" }] : []));
1455
1444
  this.placeholder = '';
1445
+ this.destroyRef = inject(DestroyRef);
1456
1446
  // autofilled?: boolean | undefined;
1457
1447
  // userAriaDescribedBy?: string | undefined;
1458
1448
  // disableAutomaticLabeling?: boolean | undefined;
@@ -1461,6 +1451,7 @@ class BdbSearchInputComponent {
1461
1451
  this.id = `bdb-search-input-${BdbSearchInputComponent.nextId++}`;
1462
1452
  this.stateChanges = new Subject();
1463
1453
  this.focused = false;
1454
+ this.options = signal([], ...(ngDevMode ? [{ debugName: "options" }] : []));
1464
1455
  this.controlType = 'bdb-search-input';
1465
1456
  this.describedBy = '';
1466
1457
  // ControlValueAccessor
@@ -1483,6 +1474,14 @@ class BdbSearchInputComponent {
1483
1474
  this.dataSource().load();
1484
1475
  },
1485
1476
  });
1477
+ effect(() => {
1478
+ this.dataSource()
1479
+ .connect()
1480
+ .pipe(takeUntilDestroyed(this.destroyRef))
1481
+ .subscribe(data => {
1482
+ this.options.set(data);
1483
+ });
1484
+ });
1486
1485
  }
1487
1486
  writeValue(obj) {
1488
1487
  this._value = obj;
@@ -1532,11 +1531,11 @@ class BdbSearchInputComponent {
1532
1531
  this.stateChanges.complete();
1533
1532
  }
1534
1533
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
1535
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbSearchInputComponent, isStandalone: true, selector: "bdb-search-input", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: BdbSearchInputComponent }], ngImport: i0, template: "<input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onBlur()\" />\r\n<mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn()\">\r\n @for (option of dataSource().data; track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ displayFn()(option) }}\r\n </mat-option>\r\n }\r\n</mat-autocomplete>\r\n", styles: [":host{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px}:host .mdc-list-item__start,:host .mdc-list-item__end{--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:48px}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:64px}\n"], dependencies: [{ 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: MatFormFieldModule }, { 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: "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"] }] }); }
1534
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: BdbSearchInputComponent, isStandalone: true, selector: "bdb-search-input", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: BdbSearchInputComponent }], ngImport: i0, template: "<input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onBlur()\" />\r\n<mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn()\">\r\n @for (option of options(); track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ displayFn()(option) }}\r\n </mat-option>\r\n }\r\n</mat-autocomplete>\r\n", styles: [":host{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px}:host .mdc-list-item__start,:host .mdc-list-item__end{--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:48px}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:64px}\n"], dependencies: [{ 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: MatFormFieldModule }, { 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: "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"] }] }); }
1536
1535
  }
1537
1536
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BdbSearchInputComponent, decorators: [{
1538
1537
  type: Component,
1539
- args: [{ selector: 'bdb-search-input', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule], providers: [{ provide: MatFormFieldControl, useExisting: BdbSearchInputComponent }], template: "<input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onBlur()\" />\r\n<mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn()\">\r\n @for (option of dataSource().data; track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ displayFn()(option) }}\r\n </mat-option>\r\n }\r\n</mat-autocomplete>\r\n", styles: [":host{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px}:host .mdc-list-item__start,:host .mdc-list-item__end{--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:48px}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:64px}\n"] }]
1538
+ args: [{ selector: 'bdb-search-input', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule], providers: [{ provide: MatFormFieldControl, useExisting: BdbSearchInputComponent }], template: "<input\r\n type=\"text\"\r\n matInput\r\n [formControl]=\"searchCtrl\"\r\n [matAutocomplete]=\"autoComplete\"\r\n [placeholder]=\"placeholder\"\r\n (blur)=\"onBlur()\" />\r\n<mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"selectOption($event)\" [displayWith]=\"displayFn()\">\r\n @for (option of options(); track option.id) {\r\n <mat-option [value]=\"option\">\r\n {{ displayFn()(option) }}\r\n </mat-option>\r\n }\r\n</mat-autocomplete>\r\n", styles: [":host{--mat-list-list-item-leading-icon-start-space: 16px;--mat-list-list-item-leading-icon-end-space: 32px;--mat-list-list-item-one-line-container-height: 40px;--mat-list-list-item-two-line-container-height: 56px;--mat-list-list-item-three-line-container-height: 80px}:host .mdc-list-item__start,:host .mdc-list-item__end{--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:48px}:host .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,:host .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:64px}\n"] }]
1540
1539
  }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
1541
1540
  type: Optional
1542
1541
  }, {
@@ -3193,6 +3192,7 @@ class BdbDataSourceV2 extends MatTableDataSource {
3193
3192
  }), tap$1(response => {
3194
3193
  this.responseSubject.next(response);
3195
3194
  this.dataSubject.next(response.rows);
3195
+ this.data = response.rows;
3196
3196
  }), finalize(() => this._loading.set(false)))))
3197
3197
  .subscribe();
3198
3198
  }