@one-paragon/angular-utilities 1.2.9 → 1.2.10

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,15 +1,16 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, Injectable, assertInInjectionContext, DestroyRef, Pipe, Renderer2, ElementRef, booleanAttribute, InjectionToken, makeEnvironmentProviders, computed, HostListener, Component, ChangeDetectionStrategy, EventEmitter, isSignal, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, signal, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, forwardRef, ContentChild, APP_INITIALIZER } from '@angular/core';
3
- import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, last, distinctUntilChanged, first as first$1, distinctUntilKeyChanged, delay as delay$1, observeOn, scan as scan$1, timestamp as timestamp$1, withLatestFrom, mergeAll as mergeAll$1 } from 'rxjs/operators';
2
+ import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, isSignal, computed, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, forwardRef, contentChildren, ContentChild, APP_INITIALIZER } from '@angular/core';
3
+ import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, last, distinctUntilChanged, first as first$1, distinctUntilKeyChanged, delay as delay$1, observeOn, scan as scan$1, timestamp as timestamp$1, withLatestFrom, mergeAll as mergeAll$1 } from 'rxjs/operators';
4
4
  import * as i1 from 'rxjs';
5
- import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap as concatMap$1, merge as merge$1, delay, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, timestamp, mergeAll, from } from 'rxjs';
5
+ import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, timestamp, mergeAll } from 'rxjs';
6
6
  import { ComponentStore } from '@ngrx/component-store';
7
+ import { toObservable, toSignal } from '@angular/core/rxjs-interop';
7
8
  import * as i1$8 from '@angular/common';
8
9
  import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgClass, DecimalPipe, CommonModule } from '@angular/common';
9
10
  import * as i3$2 from '@angular/material/sort';
10
11
  import { MatSort, MatSortModule } from '@angular/material/sort';
11
12
  import { v4 } from 'uuid';
12
- import { merge, get, sumBy, difference, orderBy, intersection, groupBy, set, cloneDeep } from 'lodash';
13
+ import { merge as merge$1, get, sumBy, difference, orderBy, intersection, groupBy, set, cloneDeep } from 'lodash';
13
14
  import { CdkColumnDef } from '@angular/cdk/table';
14
15
  import { MatSlideToggle } from '@angular/material/slide-toggle';
15
16
  import * as i10 from '@angular/material/radio';
@@ -23,7 +24,6 @@ import * as i9 from '@angular/material/core';
23
24
  import { MatOption, MatNativeDateModule } from '@angular/material/core';
24
25
  import * as i5 from '@angular/cdk/drag-drop';
25
26
  import { moveItemInArray, DragDropModule, CDK_DROP_LIST, CdkDropList, transferArrayItem } from '@angular/cdk/drag-drop';
26
- import { toObservable, toSignal } from '@angular/core/rxjs-interop';
27
27
  import * as i1$4 from '@angular/router';
28
28
  import { RouterModule } from '@angular/router';
29
29
  import * as i1$1 from '@angular/material/input';
@@ -362,14 +362,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
362
362
  }]
363
363
  }] });
364
364
 
365
+ const onceWhen = (predicate) => (src) => {
366
+ return src.pipe(filter$1(predicate), first());
367
+ };
368
+ const mapArray = (mapFunc) => (source) => source.pipe(map$1(src => src.map(mapFunc)));
369
+ const filterArray = (filterFunc) => (source) => source.pipe(map$1(src => src.filter(filterFunc)));
370
+ const onWait = startWithIfEmpty;
371
+ function startWithIfEmpty(val, wait = 0) {
372
+ return (source) => {
373
+ return new Observable(subscriber => {
374
+ let emitted = false;
375
+ setTimeout(() => {
376
+ if (!emitted) {
377
+ subscriber.next(val);
378
+ }
379
+ }, wait);
380
+ const sub = source.subscribe({
381
+ next(x) { emitted = true; subscriber.next(x); },
382
+ error(err) { emitted = true; subscriber.error(err); },
383
+ complete() { emitted = true; subscriber.complete(); }
384
+ });
385
+ return () => sub.unsubscribe();
386
+ });
387
+ };
388
+ }
389
+ const combineArrays = (sources) => {
390
+ return combineLatest(sources.map(src => src.pipe(startWithIfEmpty([])))).pipe(map$1(res => res.flat()));
391
+ };
392
+ function switchOff(switchSource, defaultState = true) {
393
+ return (source) => {
394
+ return new Observable(subsciber => {
395
+ let isOn = defaultState;
396
+ const subscription = new Subscription();
397
+ subscription.add(switchSource.subscribe(on => isOn = on));
398
+ subscription.add(source.subscribe({
399
+ next(value) {
400
+ if (isOn) {
401
+ subsciber.next(value);
402
+ }
403
+ },
404
+ error: error => subsciber.error(error),
405
+ complete: () => subsciber.complete()
406
+ }));
407
+ return subscription;
408
+ });
409
+ };
410
+ }
411
+ function skipOneWhen(skipper) {
412
+ return (source) => {
413
+ return new Observable(subsriber => {
414
+ const subscription = new Subscription();
415
+ let skipNext = false;
416
+ subscription.add(skipper.subscribe(_ => skipNext = true));
417
+ subscription.add(source.subscribe({
418
+ next(value) {
419
+ if (skipNext) {
420
+ skipNext = false;
421
+ }
422
+ else {
423
+ subsriber.next(value);
424
+ }
425
+ },
426
+ error: error => subsriber.error(error),
427
+ complete: () => subsriber.complete()
428
+ }));
429
+ return subscription;
430
+ });
431
+ };
432
+ }
433
+ function previousAndCurrent(startingValue) {
434
+ return (source) => {
435
+ return source.pipe(startWith$1(startingValue), pairwise());
436
+ };
437
+ }
438
+ function notNull() {
439
+ return (source) => {
440
+ return source.pipe(filter$1((o) => o != null));
441
+ };
442
+ }
443
+ function delayOn(predicate, delayTime) {
444
+ return (src) => {
445
+ return src.pipe(concatMap(r => {
446
+ if (predicate(r)) {
447
+ return merge(of({ r }), of(null).pipe(delay(delayTime))).pipe(notNull(), map$1(d => d.r));
448
+ }
449
+ else {
450
+ return of(r);
451
+ }
452
+ }));
453
+ };
454
+ }
455
+
456
+ class Subjectifier extends Observable {
457
+ _subj = new Subject();
458
+ merged;
459
+ constructor(_source) {
460
+ super((obs) => {
461
+ const s = merge(_source, this._subj).subscribe(obs);
462
+ return s;
463
+ });
464
+ this.merged = merge(_source, this._subj);
465
+ }
466
+ next = this._subj.next.bind(this._subj);
467
+ newSubj = (...operations) => new Subjectifier(this.merged.pipe(...operations));
468
+ }
469
+
470
+ class Subscriber {
471
+ subscriptions = [];
472
+ handle = (subscription) => {
473
+ this.subscriptions.push(subscription);
474
+ };
475
+ on = (obs, action) => {
476
+ this.handle(obs.subscribe(action));
477
+ };
478
+ ngOnDestroy() {
479
+ this.subscriptions.forEach(subscription => {
480
+ subscription.unsubscribe();
481
+ });
482
+ }
483
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive });
484
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: Subscriber, ngImport: i0 });
485
+ }
486
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, decorators: [{
487
+ type: Directive
488
+ }] });
489
+ function subscriber(obsOrSubOrInjector, actionOrInjector, injector) {
490
+ const destroyRef = getDestroyRef$1(obsOrSubOrInjector, actionOrInjector, injector);
491
+ const subscriber = new Subscriber();
492
+ if (obsOrSubOrInjector instanceof Subscription) {
493
+ subscriber.handle(obsOrSubOrInjector);
494
+ }
495
+ else if (obsOrSubOrInjector instanceof Observable) {
496
+ subscriber.handle(obsOrSubOrInjector.subscribe(actionOrInjector));
497
+ }
498
+ destroyRef.onDestroy(() => subscriber?.ngOnDestroy());
499
+ return subscriber;
500
+ }
501
+ function getDestroyRef$1(obsOrSubOrInjector, actionOrInjector, injector) {
502
+ const providedInjector = obsOrSubOrInjector instanceof Injector ? obsOrSubOrInjector
503
+ : actionOrInjector instanceof Injector ? actionOrInjector
504
+ : injector;
505
+ if (!providedInjector) {
506
+ try {
507
+ assertInInjectionContext(subscriber);
508
+ }
509
+ catch (error) {
510
+ throw new Error('createRequestor() must be used in an Injection Context or you must provide an injector to createRequestor()');
511
+ }
512
+ }
513
+ const destroyRef = providedInjector?.get(DestroyRef) || inject(DestroyRef);
514
+ return destroyRef;
515
+ }
516
+
365
517
  class HttpRequestStateStore extends ComponentStore {
366
518
  options;
367
519
  project;
368
520
  req;
521
+ injector;
369
522
  constructor(req, options, project) {
370
523
  super({ requestParams: null, response: notStarted });
371
524
  this.project = project;
372
525
  this.options = options;
526
+ this.injector = options?.injector;
373
527
  this.req = req;
374
528
  this.request = (this.options?.strategy === HttpRequestStrategy.singleUse) ? this.singleUseRequest : this.flattenedRequest;
375
529
  if (options?.autoRequestWith) {
@@ -383,7 +537,7 @@ class HttpRequestStateStore extends ComponentStore {
383
537
  if (this.options?.strategy === HttpRequestStrategy.concurrent)
384
538
  return mergeMap((params) => this.createRequest(...params));
385
539
  if (this.options?.strategy === HttpRequestStrategy.sequential)
386
- return concatMap((params) => this.createRequest(...params));
540
+ return concatMap$1((params) => this.createRequest(...params));
387
541
  return switchMap((params) => (params[0] instanceof CancellationToken) ?
388
542
  of({ requestParams: params[0], response: { status: HttpRequestStatus.cancelled } }) : this.createRequest(...params));
389
543
  };
@@ -449,6 +603,13 @@ class HttpRequestStateStore extends ComponentStore {
449
603
  ngOnDestroy() {
450
604
  super.ngOnDestroy();
451
605
  }
606
+ requestWith = (params) => {
607
+ if (isSignal(params)) {
608
+ params = toObservable(params, { injector: this.injector }).pipe(notNull());
609
+ }
610
+ params.pipe(takeUntil(this.destroy$)).subscribe((p) => this.request(...p));
611
+ return this;
612
+ };
452
613
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: HttpRequestStateStore, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
453
614
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: HttpRequestStateStore, usesInheritance: true, ngImport: i0 });
454
615
  }
@@ -457,6 +618,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
457
618
  }], ctorParameters: () => [{ type: undefined }, { type: undefined }, { type: undefined }] });
458
619
  class CancellationToken {
459
620
  }
621
+ function wrapInArr(sigOrObs) {
622
+ return isSignal(sigOrObs) ?
623
+ computed(() => [sigOrObs()])
624
+ : sigOrObs.pipe(map(a => [a]));
625
+ }
460
626
 
461
627
  class HttpRequestStateFactory {
462
628
  constructor() { }
@@ -482,7 +648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
482
648
  }], ctorParameters: () => [] });
483
649
  function createRequestor(req, optionsOrProject, options) {
484
650
  const ops = isFunction(optionsOrProject) ? options : optionsOrProject;
485
- const destroyRef = getDestroyRef$1(ops);
651
+ const destroyRef = getDestroyRef(ops);
486
652
  const requestStore = typeof (optionsOrProject) === 'function' ?
487
653
  new HttpRequestStateStore(req, options, optionsOrProject)
488
654
  : new HttpRequestStateStore(req, optionsOrProject);
@@ -492,7 +658,7 @@ function createRequestor(req, optionsOrProject, options) {
492
658
  function isFunction(value) {
493
659
  return typeof value === 'function';
494
660
  }
495
- function getDestroyRef$1(options) {
661
+ function getDestroyRef(options) {
496
662
  const providedInjector = options?.injector;
497
663
  if (!providedInjector) {
498
664
  try {
@@ -585,10 +751,10 @@ function metaDataArrToDict(arr, transform) {
585
751
  class GeneralTableSettings {
586
752
  constructor(settings) {
587
753
  if (settings) {
588
- merge(this.headerSettings, settings.headerSettings);
589
- merge(this.footerSettings, settings.footerSettings);
590
- merge(this.columnHeaderSettings, settings.columnHeaderSettings);
591
- merge(this.tableSettings, settings.tableSettings);
754
+ merge$1(this.headerSettings, settings.headerSettings);
755
+ merge$1(this.footerSettings, settings.footerSettings);
756
+ merge$1(this.columnHeaderSettings, settings.columnHeaderSettings);
757
+ merge$1(this.tableSettings, settings.tableSettings);
592
758
  if (settings.tableSettings?.useVirtualScroll) {
593
759
  const currVirt = settings.tableSettings.useVirtualScroll === true ? new VirtualScrollOptions() : settings.tableSettings.useVirtualScroll;
594
760
  this.tableSettings.useVirtualScroll = { ...new VirtualScrollOptions(), ...currVirt };
@@ -624,6 +790,7 @@ class TableSettings {
624
790
  useVirtualScroll = null;
625
791
  includeAllInPaginatorOptions = false;
626
792
  rowHeight = undefined;
793
+ groupHeaderHeight = undefined;
627
794
  }
628
795
  class PersistedTableSettings {
629
796
  constructor(tableSettings) {
@@ -651,6 +818,7 @@ class NotPersistedTableSettings {
651
818
  this.includeAllInPaginatorOptions = tableSettings.tableSettings.includeAllInPaginatorOptions;
652
819
  this.rowHeight = tableSettings.tableSettings.rowHeight;
653
820
  this.headerHeight = tableSettings.headerSettings.headerHeight;
821
+ this.groupHeaderHeight = tableSettings.tableSettings.groupHeaderHeight;
654
822
  }
655
823
  }
656
824
  hideExport = true;
@@ -664,6 +832,7 @@ class NotPersistedTableSettings {
664
832
  usePaginator = true;
665
833
  useVirtualScroll = null;
666
834
  includeAllInPaginatorOptions = false;
835
+ groupHeaderHeight = undefined;
667
836
  rowHeight;
668
837
  headerHeight = undefined;
669
838
  }
@@ -796,158 +965,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
796
965
  type: Input
797
966
  }] } });
798
967
 
799
- const onceWhen = (predicate) => (src) => {
800
- return src.pipe(filter$1(predicate), first());
801
- };
802
- const mapArray = (mapFunc) => (source) => source.pipe(map$1(src => src.map(mapFunc)));
803
- const filterArray = (filterFunc) => (source) => source.pipe(map$1(src => src.filter(filterFunc)));
804
- const onWait = startWithIfEmpty;
805
- function startWithIfEmpty(val, wait = 0) {
806
- return (source) => {
807
- return new Observable(subscriber => {
808
- let emitted = false;
809
- setTimeout(() => {
810
- if (!emitted) {
811
- subscriber.next(val);
812
- }
813
- }, wait);
814
- const sub = source.subscribe({
815
- next(x) { emitted = true; subscriber.next(x); },
816
- error(err) { emitted = true; subscriber.error(err); },
817
- complete() { emitted = true; subscriber.complete(); }
818
- });
819
- return () => sub.unsubscribe();
820
- });
821
- };
822
- }
823
- const combineArrays = (sources) => {
824
- return combineLatest(sources.map(src => src.pipe(startWithIfEmpty([])))).pipe(map$1(res => res.flat()));
825
- };
826
- function switchOff(switchSource, defaultState = true) {
827
- return (source) => {
828
- return new Observable(subsciber => {
829
- let isOn = defaultState;
830
- const subscription = new Subscription();
831
- subscription.add(switchSource.subscribe(on => isOn = on));
832
- subscription.add(source.subscribe({
833
- next(value) {
834
- if (isOn) {
835
- subsciber.next(value);
836
- }
837
- },
838
- error: error => subsciber.error(error),
839
- complete: () => subsciber.complete()
840
- }));
841
- return subscription;
842
- });
843
- };
844
- }
845
- function skipOneWhen(skipper) {
846
- return (source) => {
847
- return new Observable(subsriber => {
848
- const subscription = new Subscription();
849
- let skipNext = false;
850
- subscription.add(skipper.subscribe(_ => skipNext = true));
851
- subscription.add(source.subscribe({
852
- next(value) {
853
- if (skipNext) {
854
- skipNext = false;
855
- }
856
- else {
857
- subsriber.next(value);
858
- }
859
- },
860
- error: error => subsriber.error(error),
861
- complete: () => subsriber.complete()
862
- }));
863
- return subscription;
864
- });
865
- };
866
- }
867
- function previousAndCurrent(startingValue) {
868
- return (source) => {
869
- return source.pipe(startWith$1(startingValue), pairwise());
870
- };
871
- }
872
- function notNull() {
873
- return (source) => {
874
- return source.pipe(filter$1((o) => o != null));
875
- };
876
- }
877
- function delayOn(predicate, delayTime) {
878
- return (src) => {
879
- return src.pipe(concatMap$1(r => {
880
- if (predicate(r)) {
881
- return merge$1(of({ r }), of(null).pipe(delay(delayTime))).pipe(notNull(), map$1(d => d.r));
882
- }
883
- else {
884
- return of(r);
885
- }
886
- }));
887
- };
888
- }
889
-
890
- class Subjectifier extends Observable {
891
- _subj = new Subject();
892
- merged;
893
- constructor(_source) {
894
- super((obs) => {
895
- const s = merge$1(_source, this._subj).subscribe(obs);
896
- return s;
897
- });
898
- this.merged = merge$1(_source, this._subj);
899
- }
900
- next = this._subj.next.bind(this._subj);
901
- newSubj = (...operations) => new Subjectifier(this.merged.pipe(...operations));
902
- }
903
-
904
- class Subscriber {
905
- subscriptions = [];
906
- handle = (subscription) => {
907
- this.subscriptions.push(subscription);
908
- };
909
- on = (obs, action) => {
910
- this.handle(obs.subscribe(action));
911
- };
912
- ngOnDestroy() {
913
- this.subscriptions.forEach(subscription => {
914
- subscription.unsubscribe();
915
- });
916
- }
917
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive });
918
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: Subscriber, ngImport: i0 });
919
- }
920
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Subscriber, decorators: [{
921
- type: Directive
922
- }] });
923
- function subscriber(obsOrSubOrInjector, actionOrInjector, injector) {
924
- const destroyRef = getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector);
925
- const subscriber = new Subscriber();
926
- if (obsOrSubOrInjector instanceof Subscription) {
927
- subscriber.handle(obsOrSubOrInjector);
928
- }
929
- else if (obsOrSubOrInjector instanceof Observable) {
930
- subscriber.handle(obsOrSubOrInjector.subscribe(actionOrInjector));
931
- }
932
- destroyRef.onDestroy(() => subscriber?.ngOnDestroy());
933
- return subscriber;
934
- }
935
- function getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector) {
936
- const providedInjector = obsOrSubOrInjector instanceof Injector ? obsOrSubOrInjector
937
- : actionOrInjector instanceof Injector ? actionOrInjector
938
- : injector;
939
- if (!providedInjector) {
940
- try {
941
- assertInInjectionContext(subscriber);
942
- }
943
- catch (error) {
944
- throw new Error('createRequestor() must be used in an Injection Context or you must provide an injector to createRequestor()');
945
- }
946
- }
947
- const destroyRef = providedInjector?.get(DestroyRef) || inject(DestroyRef);
948
- return destroyRef;
949
- }
950
-
951
968
  class ResizeColumnDirective {
952
969
  renderer = inject(Renderer2);
953
970
  el = inject(ElementRef);
@@ -1030,9 +1047,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
1030
1047
  }] } });
1031
1048
 
1032
1049
  class TableWrapperDirective {
1033
- registrations = [];
1050
+ $registrations = signal([]);
1034
1051
  register(filter) {
1035
- this.registrations.push(filter);
1052
+ this.$registrations.update(registrations => [...registrations, filter]);
1036
1053
  }
1037
1054
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1038
1055
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.2", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 });
@@ -2422,7 +2439,7 @@ class MatSlideToggleGroupDirective {
2422
2439
  return startValue;
2423
2440
  }
2424
2441
  getObs() {
2425
- var toggleChanges = merge$1(...this._toggles.map(toggle => toggle.change));
2442
+ var toggleChanges = merge(...this._toggles.map(toggle => toggle.change));
2426
2443
  const startValue = this.getInitValue();
2427
2444
  return toggleChanges.pipe(scan((prev, cur) => {
2428
2445
  const toggleName = cur.source.name;
@@ -3809,16 +3826,22 @@ class GenericTableComponent {
3809
3826
  }
3810
3827
  return s.notPersistedTableSettings.headerHeight;
3811
3828
  });
3829
+ $groupHeaderHeight = this.state.selectSignal(s => {
3830
+ if (s.notPersistedTableSettings.groupHeaderHeight) {
3831
+ return s.notPersistedTableSettings.groupHeaderHeight + 'px';
3832
+ }
3833
+ return this.$rowHeight();
3834
+ });
3812
3835
  $stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
3813
3836
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3814
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, displayData$: { classPropertyName: "displayData$", publicName: "displayData$", isSignal: false, isRequired: false, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, columnInfos: { classPropertyName: "columnInfos", publicName: "columnInfos", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n [class]=\"(showFooterRow$ | async)\"\n #table\n [dataSource]=\"state.props().dataSource!\"\n [trackBy]=\"trackByFunction\"\n [style]=\"tableWidth | async \"\n>\n\n <!-- select column -->\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"/>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n\n <!-- index column -->\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n </mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n {{ 1 + i + offsetIndex }}\n </mat-cell>\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n </ng-container>\n\n <!-- Grouping -->\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n @if (!expanded()) {\n <mat-icon>chevron_right</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n @if (showHeader$ | async) {\n <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n }\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: keys; let i = index\"/>\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3837
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, displayData$: { classPropertyName: "displayData$", publicName: "displayData$", isSignal: false, isRequired: false, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, columnInfos: { classPropertyName: "columnInfos", publicName: "columnInfos", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n [class]=\"(showFooterRow$ | async)\"\n #table\n [dataSource]=\"state.props().dataSource!\"\n [trackBy]=\"trackByFunction\"\n [style]=\"tableWidth | async \"\n>\n\n <!-- select column -->\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"/>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n\n <!-- index column -->\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n </mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n {{ 1 + i + offsetIndex }}\n </mat-cell>\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n </ng-container>\n\n <!-- Grouping -->\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n @if (!expanded()) {\n <mat-icon>chevron_right</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n @if (showHeader$ | async) {\n <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n }\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: keys; let i = index\"/>\n <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3815
3838
  }
3816
3839
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
3817
3840
  type: Component,
3818
3841
  args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
3819
3842
  MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
3820
3843
  MatTooltipModule, AsyncPipe, FunctionPipe,
3821
- ], template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n [class]=\"(showFooterRow$ | async)\"\n #table\n [dataSource]=\"state.props().dataSource!\"\n [trackBy]=\"trackByFunction\"\n [style]=\"tableWidth | async \"\n>\n\n <!-- select column -->\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"/>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n\n <!-- index column -->\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n </mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n {{ 1 + i + offsetIndex }}\n </mat-cell>\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n </ng-container>\n\n <!-- Grouping -->\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n @if (!expanded()) {\n <mat-icon>chevron_right</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n @if (showHeader$ | async) {\n <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n }\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: keys; let i = index\"/>\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"] }]
3844
+ ], template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n [class]=\"(showFooterRow$ | async)\"\n #table\n [dataSource]=\"state.props().dataSource!\"\n [trackBy]=\"trackByFunction\"\n [style]=\"tableWidth | async \"\n>\n\n <!-- select column -->\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"/>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n\n <!-- index column -->\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n </mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n {{ 1 + i + offsetIndex }}\n </mat-cell>\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n </ng-container>\n\n <!-- Grouping -->\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n @if (!expanded()) {\n <mat-icon>chevron_right</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n @if (showHeader$ | async) {\n <mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n *matHeaderRowDef=\"keys; sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n }\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: keys; let i = index\"/>\n <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n <mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: $stickyFooter() \"\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\n\n</mat-table>\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n"] }]
3822
3845
  }], ctorParameters: () => [], propDecorators: { trackBy: [{
3823
3846
  type: Input
3824
3847
  }], displayData$: [{
@@ -4272,7 +4295,7 @@ class PaginatorComponent {
4272
4295
  this.state.on(this.state.select(s => s.dataLen), (len) => this.paginator.length = len);
4273
4296
  }
4274
4297
  ngAfterViewInit() {
4275
- this.currentPageData$ = merge$1(this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)), this.data$.pipe(distinctUntilKeyChanged("length"), delayToAllowForProperUpdate, map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))));
4298
+ this.currentPageData$ = merge(this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)), this.data$.pipe(distinctUntilKeyChanged("length"), delayToAllowForProperUpdate, map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))));
4276
4299
  }
4277
4300
  paginatorChange() {
4278
4301
  if (!this.ourPageEvent) {
@@ -4857,6 +4880,7 @@ const defaultProps = {
4857
4880
  selectionColumn: false,
4858
4881
  isSticky: true,
4859
4882
  stickyFooter: false,
4883
+ groupHeaderHeight: undefined,
4860
4884
  };
4861
4885
 
4862
4886
  class TableBuilderDataSource extends MatTableDataSource {
@@ -4913,10 +4937,42 @@ class TableContainerComponent {
4913
4937
  wrapper = inject(TableWrapperDirective, { optional: true });
4914
4938
  stateService = inject(TableBuilderStateStore);
4915
4939
  injector = inject(Injector);
4940
+ filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
4941
+ customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
4942
+ allFilterDirectives = computed(() => {
4943
+ if (this.wrapper) {
4944
+ return [...this.filterDirectives(), ...this.customFilterDirectives(), ...this.wrapper.$registrations()];
4945
+ }
4946
+ {
4947
+ return [...this.filterDirectives(), ...this.customFilterDirectives()];
4948
+ }
4949
+ });
4950
+ tableState = toSignal(this.state.state$.pipe(filter(stateIs(InitializationState.LoadedFromStore))));
4951
+ allFilterDirectivesEffect = effect(() => {
4952
+ const state = this.tableState();
4953
+ if (state) {
4954
+ this.allFilterDirectives().filter(f => !f.used).forEach(f => {
4955
+ f.used = true;
4956
+ if (f.savable) {
4957
+ var filter = state.filters[f.filterId];
4958
+ if (isFilterInfo(filter)) {
4959
+ const filterDirective = f;
4960
+ filterDirective.fieldType = filter.fieldType;
4961
+ filterDirective.filterType = filter.filterType;
4962
+ filterDirective.setFilterValue(filter.filterValue);
4963
+ filterDirective.key = filter.key;
4964
+ filterDirective.update();
4965
+ }
4966
+ if (isCustomFilter(filter)) {
4967
+ f.active = filter.active ?? false;
4968
+ }
4969
+ untracked(() => this.state.addFilter(f.filter$));
4970
+ }
4971
+ });
4972
+ }
4973
+ });
4916
4974
  paginatorComponent;
4917
4975
  genericTable;
4918
- customFilterDirectives;
4919
- filterDirectives;
4920
4976
  customRows;
4921
4977
  customCells;
4922
4978
  tableElRef;
@@ -4940,6 +4996,9 @@ class TableContainerComponent {
4940
4996
  set groupHeaderTemplate(template) {
4941
4997
  this.props.groupHeaderTemplate = template;
4942
4998
  }
4999
+ set groupHeaderHeight(value) {
5000
+ this.props.groupHeaderHeight = value;
5001
+ }
4943
5002
  trackBy;
4944
5003
  inputFilters;
4945
5004
  selection$ = new EventEmitter();
@@ -4967,8 +5026,8 @@ class TableContainerComponent {
4967
5026
  this.paginatorComponent?.paginator?.lastPage();
4968
5027
  }
4969
5028
  resetState() {
4970
- this.customFilterDirectives.forEach(cf => cf.reset());
4971
- this.filterDirectives.forEach(cf => cf.reset());
5029
+ this.customFilterDirectives().forEach(cf => cf.reset());
5030
+ this.filterDirectives().forEach(cf => cf.reset());
4972
5031
  this.state.resetState();
4973
5032
  this.onStateReset.next(null);
4974
5033
  }
@@ -5054,33 +5113,9 @@ class TableContainerComponent {
5054
5113
  };
5055
5114
  collapseHeader$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseHeader));
5056
5115
  addFilterDirectives = (state) => {
5057
- let allFilterDirectives = [...this.filterDirectives, ...this.customFilterDirectives];
5058
- if (this.wrapper) {
5059
- allFilterDirectives = [...allFilterDirectives, ...this.wrapper.registrations];
5060
- }
5061
- const customFilters = [];
5062
- allFilterDirectives.filter(f => !f.used).forEach(f => {
5063
- f.used = true;
5064
- if (f.savable) {
5065
- var filter = state.filters[f.filterId];
5066
- if (isFilterInfo(filter)) {
5067
- const filterDirective = f;
5068
- filterDirective.fieldType = filter.fieldType;
5069
- filterDirective.filterType = filter.filterType;
5070
- filterDirective.setFilterValue(filter.filterValue);
5071
- filterDirective.key = filter.key;
5072
- filterDirective.update();
5073
- }
5074
- if (isCustomFilter(filter)) {
5075
- f.active = filter.active ?? false;
5076
- }
5077
- this.state.addFilter(f.filter$);
5078
- }
5079
- else {
5080
- customFilters.push(f);
5081
- }
5082
- });
5083
- const customFilters$ = from(customFilters.map(cf => cf.filter$)).pipe(mergeAll$1(), scan$1((a, b) => {
5116
+ const customFilters$ = toObservable(this.allFilterDirectives, { injector: this.injector }).pipe(mergeMap(customerFilters => customerFilters
5117
+ .filter(filter => !filter.savable)
5118
+ .map(filter => filter.filter$)), mergeAll$1(), scan$1((a, b) => {
5084
5119
  if (b.active) {
5085
5120
  a[b.filterId] = isCustomFilter(b) ? b.predicate : createFilterFunc(b);
5086
5121
  }
@@ -5095,7 +5130,7 @@ class TableContainerComponent {
5095
5130
  };
5096
5131
  $useVirtual = this.state.$isVirtual;
5097
5132
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5098
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n <div class=\"header-wrapper\">\n <div class=\"title\">\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n <ng-content select=\".tb-header-title\"/>\n }\n @if((state.groupByKeys$ | async)?.length){\n <group-by-list />\n }\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list />\n @if (!tableSettings.hideHeader) {\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n @else {\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n }\n\n </div>\n </div>\n <div class=\"table-wrapper\">\n @if($useVirtual())\n {\n <tb-virtual-scroll-container>\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n </tb-virtual-scroll-container>\n }\n @else\n {\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n }\n\n </div>\n @if(tableSettings.usePaginator)\n {\n <div class=\"paginator\">\n <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n }\n\n <ng-template #headerMenu>\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n </ng-template>\n\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (tableId) {\n <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n <mat-icon color=\"primary\">people</mat-icon>\n <span>Profiles</span>\n </button>\n <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n }\n </ng-template>\n</ng-container>\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5133
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", groupHeaderHeight: "groupHeaderHeight", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n <div class=\"header-wrapper\">\n <div class=\"title\">\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n <ng-content select=\".tb-header-title\"/>\n }\n @if((state.groupByKeys$ | async)?.length){\n <group-by-list />\n }\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list />\n @if (!tableSettings.hideHeader) {\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n @else {\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n }\n\n </div>\n </div>\n <div class=\"table-wrapper\">\n @if($useVirtual())\n {\n <tb-virtual-scroll-container>\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n </tb-virtual-scroll-container>\n }\n @else\n {\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData$]=\"displayData\"\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\" />\n }\n\n </div>\n @if(tableSettings.usePaginator)\n {\n <div class=\"paginator\">\n <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n }\n\n <ng-template #headerMenu>\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n </ng-template>\n\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (tableId) {\n <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n <mat-icon color=\"primary\">people</mat-icon>\n <span>Profiles</span>\n </button>\n <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n }\n </ng-template>\n</ng-container>\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.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: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5099
5134
  }
5100
5135
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
5101
5136
  type: Component,
@@ -5106,12 +5141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
5106
5141
  }], genericTable: [{
5107
5142
  type: ViewChild,
5108
5143
  args: [GenericTableComponent]
5109
- }], customFilterDirectives: [{
5110
- type: ContentChildren,
5111
- args: [TableCustomFilterDirective, { descendants: true }]
5112
- }], filterDirectives: [{
5113
- type: ContentChildren,
5114
- args: [TableFilterDirective, { descendants: true }]
5115
5144
  }], customRows: [{
5116
5145
  type: ContentChildren,
5117
5146
  args: [MatRowDef]
@@ -5138,6 +5167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
5138
5167
  type: Input
5139
5168
  }], groupHeaderTemplate: [{
5140
5169
  type: Input
5170
+ }], groupHeaderHeight: [{
5171
+ type: Input
5141
5172
  }], trackBy: [{
5142
5173
  type: Input
5143
5174
  }], inputFilters: [{
@@ -5529,5 +5560,5 @@ function provideActionableSelector() {
5529
5560
  * Generated bundle index. Do not edit.
5530
5561
  */
5531
5562
 
5532
- export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isDifferent, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess };
5563
+ export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterTypes, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionableSelector, createFailure, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isDifferent, isErrorState, isSuccessOrErrorState, isSuccessState, mapArray, mapError, metaDataArrToDict, notNull, notStarted, onWait, onceWhen, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, wrapInArr };
5533
5564
  //# sourceMappingURL=one-paragon-angular-utilities.mjs.map