@one-paragon/angular-utilities 0.3.9 → 0.3.10--beta.1
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.
- package/esm2022/table-builder/classes/MatTableObservableDataSource.mjs +32 -3
- package/esm2022/table-builder/classes/TableState.mjs +11 -1
- package/esm2022/table-builder/components/generic-table/generic-table.component.mjs +32 -36
- package/esm2022/table-builder/components/generic-table/paginator.component.mjs +15 -14
- package/esm2022/table-builder/components/scroll-strategy.mjs +63 -0
- package/esm2022/table-builder/components/table-container/table-container-imports.mjs +5 -2
- package/esm2022/table-builder/components/table-container/table-container.mjs +101 -39
- package/esm2022/table-builder/components/table-container/tableProps.mjs +9 -0
- package/esm2022/table-builder/components/table-container/virtual-scroll-container.mjs +101 -0
- package/esm2022/table-builder/components/table-context.mjs +2 -0
- package/fesm2022/one-paragon-angular-utilities.mjs +413 -151
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/classes/MatTableObservableDataSource.d.ts +6 -2
- package/table-builder/classes/TableState.d.ts +5 -0
- package/table-builder/components/generic-table/generic-table.component.d.ts +11 -14
- package/table-builder/components/generic-table/paginator.component.d.ts +5 -6
- package/table-builder/components/scroll-strategy.d.ts +23 -0
- package/table-builder/components/table-container/table-container-imports.d.ts +3 -1
- package/table-builder/components/table-container/table-container.d.ts +18 -7
- package/table-builder/components/table-container/tableProps.d.ts +11 -0
- package/table-builder/components/table-container/virtual-scroll-container.d.ts +17 -0
- package/table-builder/components/table-context.d.ts +10 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Input, NgModule, Injectable, Pipe, Optional, InjectionToken, makeEnvironmentProviders, Inject, HostListener, Component, ChangeDetectionStrategy, EventEmitter, Output, ContentChildren, inject, ViewChild, Injector, ElementRef, APP_INITIALIZER } from '@angular/core';
|
|
3
|
-
import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, distinctUntilChanged, last,
|
|
2
|
+
import { Directive, Input, NgModule, Injectable, Pipe, Optional, InjectionToken, makeEnvironmentProviders, Inject, HostListener, Component, ChangeDetectionStrategy, EventEmitter, Output, ContentChildren, inject, ViewChild, Injector, ElementRef, forwardRef, APP_INITIALIZER } from '@angular/core';
|
|
3
|
+
import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, takeUntil, distinctUntilChanged, last, first as first$1, distinctUntilKeyChanged, delay as delay$1, distinct, mergeAll, scan as scan$1, timestamp as timestamp$1, withLatestFrom } from 'rxjs/operators';
|
|
4
4
|
import * as i3$1 from 'rxjs';
|
|
5
|
-
import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, delay, merge as merge$1, concatMap as concatMap$1, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, timestamp, from } from 'rxjs';
|
|
5
|
+
import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, delay, merge as merge$1, concatMap as concatMap$1, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, distinctUntilChanged as distinctUntilChanged$1, timestamp, from } from 'rxjs';
|
|
6
6
|
import { ComponentStore } from '@ngrx/component-store';
|
|
7
7
|
import * as i1$3 from '@angular/common';
|
|
8
8
|
import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgClass, DecimalPipe, CommonModule } from '@angular/common';
|
|
@@ -43,18 +43,20 @@ import * as i3$2 from '@angular/material/icon';
|
|
|
43
43
|
import { MatIconModule } from '@angular/material/icon';
|
|
44
44
|
import * as i9 from '@angular/material/select';
|
|
45
45
|
import { MatSelectModule } from '@angular/material/select';
|
|
46
|
-
import * as
|
|
46
|
+
import * as i15 from '@angular/material/menu';
|
|
47
47
|
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
|
|
48
|
-
import * as
|
|
48
|
+
import * as i3$3 from '@ngrx/component';
|
|
49
49
|
import { LetDirective } from '@ngrx/component';
|
|
50
50
|
import * as i4$3 from '@angular/material/chips';
|
|
51
51
|
import { MatChipsModule } from '@angular/material/chips';
|
|
52
52
|
import * as i4$4 from '@angular/material/table';
|
|
53
|
-
import { MatColumnDef, MatTableModule,
|
|
53
|
+
import { MatColumnDef, MatTableModule, MatTable, MatTableDataSource, MatRowDef } from '@angular/material/table';
|
|
54
54
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
55
|
+
import { concatLatestFrom } from '@ngrx/effects';
|
|
55
56
|
import * as i2$2 from '@angular/material/paginator';
|
|
56
57
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
57
|
-
import
|
|
58
|
+
import * as i2$3 from '@angular/cdk/scrolling';
|
|
59
|
+
import { CdkVirtualScrollViewport, ScrollingModule, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
|
|
58
60
|
import * as i1$5 from '@ngrx/store';
|
|
59
61
|
import { createFeatureSelector, createSelector, StoreModule, Store } from '@ngrx/store';
|
|
60
62
|
import { createEntityAdapter } from '@ngrx/entity';
|
|
@@ -636,6 +638,11 @@ class KeysToDelete {
|
|
|
636
638
|
this.notPersistedTableSettings = null;
|
|
637
639
|
this.linkMaps = null;
|
|
638
640
|
this.pageSize = null;
|
|
641
|
+
this.currentPage = null;
|
|
642
|
+
this.virtualScrollOffset = null;
|
|
643
|
+
this.dataLen = null;
|
|
644
|
+
this.virtualStart = null;
|
|
645
|
+
this.virtualEnd = null;
|
|
639
646
|
}
|
|
640
647
|
}
|
|
641
648
|
const keysToDelete = Object.keys(new KeysToDelete());
|
|
@@ -658,6 +665,11 @@ const defaultTableState = {
|
|
|
658
665
|
pageSize: 10,
|
|
659
666
|
linkMaps: {},
|
|
660
667
|
groupBy: [],
|
|
668
|
+
currentPage: 0,
|
|
669
|
+
virtualScrollOffset: 0,
|
|
670
|
+
dataLen: 0,
|
|
671
|
+
virtualStart: 0,
|
|
672
|
+
virtualEnd: 20,
|
|
661
673
|
};
|
|
662
674
|
|
|
663
675
|
// here is how to use it
|
|
@@ -2762,7 +2774,7 @@ class GenColDisplayerComponent {
|
|
|
2762
2774
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
2763
2775
|
}
|
|
2764
2776
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2765
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\r\n <span matTooltip=\"Show/hide columns\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n </button>\r\n </span>\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n <button mat-menu-item>\r\n <span matTooltip=\"Close\">\r\n <button class=\"filter-button\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <button mat-menu-item stop-propagation>\r\n <span matTooltip=\"Show all columns\">\r\n <button mat-icon-button (click)=\"reset(displayCols)\">\r\n <mat-icon color=\"primary\">done_all</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <span matTooltip=\"Hide all columns\">\r\n <button mat-icon-button (click)=\"unset(displayCols)\">\r\n <mat-icon color=\"primary\">cancel</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n @for (col of displayCols; track col.key) {\r\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n @if(col.isVisible){\r\n <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n <mat-icon color=\"primary\">check_box</mat-icon>\r\n </button>\r\n } @else {\r\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n <mat-icon>indeterminate_check_box</mat-icon>\r\n </button>\r\n }\r\n \r\n <p class=\"label\">\r\n {{col.displayName || (col.key | spaceCase) }}\r\n </p>\r\n\r\n </div>\r\n </button>\r\n }\r\n\r\n </div>\r\n </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type:
|
|
2777
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\r\n <span matTooltip=\"Show/hide columns\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n </button>\r\n </span>\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n <button mat-menu-item>\r\n <span matTooltip=\"Close\">\r\n <button class=\"filter-button\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <button mat-menu-item stop-propagation>\r\n <span matTooltip=\"Show all columns\">\r\n <button mat-icon-button (click)=\"reset(displayCols)\">\r\n <mat-icon color=\"primary\">done_all</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <span matTooltip=\"Hide all columns\">\r\n <button mat-icon-button (click)=\"unset(displayCols)\">\r\n <mat-icon color=\"primary\">cancel</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n @for (col of displayCols; track col.key) {\r\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n @if(col.isVisible){\r\n <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n <mat-icon color=\"primary\">check_box</mat-icon>\r\n </button>\r\n } @else {\r\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n <mat-icon>indeterminate_check_box</mat-icon>\r\n </button>\r\n }\r\n \r\n <p class=\"label\">\r\n {{col.displayName || (col.key | spaceCase) }}\r\n </p>\r\n\r\n </div>\r\n </button>\r\n }\r\n\r\n </div>\r\n </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2766
2778
|
}
|
|
2767
2779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
2768
2780
|
type: Component,
|
|
@@ -2803,7 +2815,7 @@ class GenFilterDisplayerComponent {
|
|
|
2803
2815
|
this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
|
|
2804
2816
|
}
|
|
2805
2817
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2806
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n @for (md of filterCols$ | async; track md.key) {\r\n <button (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type:
|
|
2818
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n @for (md of filterCols$ | async; track md.key) {\r\n <button (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.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: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2807
2819
|
}
|
|
2808
2820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
2809
2821
|
type: Component,
|
|
@@ -2965,7 +2977,7 @@ class HeaderMenuComponent {
|
|
|
2965
2977
|
}
|
|
2966
2978
|
}
|
|
2967
2979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2968
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: HeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n \r\n @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n }\r\n @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (metaData.fieldType === FieldType.Boolean) {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: HeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" (keydown.enter)=\"onEnter(myForm.value)\" class=\"tb-header-filter\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n \r\n @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n }\r\n @else if(metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber) {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (metaData.fieldType === FieldType.Boolean) {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (metaData.fieldType === FieldType.Date || metaData.fieldType === FieldType.DateTime) {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' :\r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2969
2981
|
}
|
|
2970
2982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
2971
2983
|
type: Component,
|
|
@@ -3375,96 +3387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
3375
3387
|
args: ['body']
|
|
3376
3388
|
}] } });
|
|
3377
3389
|
|
|
3378
|
-
class PaginatorComponent {
|
|
3379
|
-
constructor(state) {
|
|
3380
|
-
this.state = state;
|
|
3381
|
-
this.ourPageEvent = false;
|
|
3382
|
-
}
|
|
3383
|
-
ngOnInit() {
|
|
3384
|
-
this.dataSource.paginator = this.paginator;
|
|
3385
|
-
this.ourPageEvent = true;
|
|
3386
|
-
this.state.on(metaDataPageSizeChange(this.state), setPaginatorPageSize(this.paginator));
|
|
3387
|
-
this.state.setPageSize(onPaginatorPageSizeChange(this.paginator));
|
|
3388
|
-
this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
|
|
3389
|
-
}
|
|
3390
|
-
ngAfterViewInit() {
|
|
3391
|
-
this.currentPageData$ = merge$1(this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)), this.data$.pipe(distinctUntilKeyChanged("length"), delayToAllowForProperUpdate, map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))));
|
|
3392
|
-
}
|
|
3393
|
-
paginatorChange() {
|
|
3394
|
-
if (!this.ourPageEvent) {
|
|
3395
|
-
setTimeout(() => this.tableElRef?.nativeElement?.scrollIntoView(), 0);
|
|
3396
|
-
}
|
|
3397
|
-
else {
|
|
3398
|
-
this.ourPageEvent = false;
|
|
3399
|
-
}
|
|
3400
|
-
}
|
|
3401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { dataSource: "dataSource", tableElRef: "tableElRef", data$: "data$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
|
|
3403
|
-
@if(currentPageData$ | async; as pageData){
|
|
3404
|
-
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
|
|
3405
|
-
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
3406
|
-
</div>
|
|
3407
|
-
}
|
|
3408
|
-
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
3409
|
-
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
3410
|
-
</mat-paginator>
|
|
3411
|
-
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3412
|
-
}
|
|
3413
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
3414
|
-
type: Component,
|
|
3415
|
-
args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass], template: `
|
|
3416
|
-
@if(currentPageData$ | async; as pageData){
|
|
3417
|
-
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
|
|
3418
|
-
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
3419
|
-
</div>
|
|
3420
|
-
}
|
|
3421
|
-
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
3422
|
-
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
3423
|
-
</mat-paginator>
|
|
3424
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
3425
|
-
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { dataSource: [{
|
|
3426
|
-
type: Input
|
|
3427
|
-
}], tableElRef: [{
|
|
3428
|
-
type: Input
|
|
3429
|
-
}], paginator: [{
|
|
3430
|
-
type: ViewChild,
|
|
3431
|
-
args: [MatPaginator, { static: true }]
|
|
3432
|
-
}], data$: [{
|
|
3433
|
-
type: Input
|
|
3434
|
-
}] } });
|
|
3435
|
-
const mapPaginationEventToCurrentPageDetails = (pageData) => ({
|
|
3436
|
-
currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
|
|
3437
|
-
currentEnd: Math.min(pageData.length, ((pageData.pageIndex + 1) * pageData.pageSize)),
|
|
3438
|
-
total: pageData.length
|
|
3439
|
-
});
|
|
3440
|
-
const updateCurrentPageDetailsOnDataLengthChange = (paginator) => () => ({ currentStart: (paginator.pageIndex * paginator.pageSize) + 1,
|
|
3441
|
-
currentEnd: Math.min(paginator.length, ((paginator.pageIndex + 1) * paginator.pageSize)),
|
|
3442
|
-
total: paginator.length });
|
|
3443
|
-
const delayToAllowForProperUpdate = delay$1(0, asyncScheduler);
|
|
3444
|
-
const metaDataPageSizeChange = (state) => state.state$.pipe(map(state => state.userDefined.pageSize || state.pageSize), distinct());
|
|
3445
|
-
const setPaginatorPageSize = (paginator) => (pageSize) => paginator._changePageSize(pageSize);
|
|
3446
|
-
const onPaginatorPageSizeChange = (paginator) => paginator.page.pipe(map(e => e.pageSize), distinct());
|
|
3447
|
-
|
|
3448
|
-
class MatTableObservableDataSource extends MatTableDataSource {
|
|
3449
|
-
constructor(dataSrc) {
|
|
3450
|
-
super([]);
|
|
3451
|
-
this.dataSrc = dataSrc;
|
|
3452
|
-
}
|
|
3453
|
-
connect() {
|
|
3454
|
-
if (!this.subscription) {
|
|
3455
|
-
this.subscription = this.dataSrc.subscribe(data => this.data = data);
|
|
3456
|
-
}
|
|
3457
|
-
return super.connect();
|
|
3458
|
-
}
|
|
3459
|
-
disconnect() {
|
|
3460
|
-
if (this.subscription) {
|
|
3461
|
-
this.subscription.unsubscribe();
|
|
3462
|
-
this.subscription = undefined;
|
|
3463
|
-
}
|
|
3464
|
-
super.disconnect();
|
|
3465
|
-
}
|
|
3466
|
-
}
|
|
3467
|
-
|
|
3468
3390
|
// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
|
|
3469
3391
|
// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
|
|
3470
3392
|
// So we need to calculate the matching tail of the sort array. Then sortsToRun will be the non-matching head.
|
|
@@ -3509,18 +3431,20 @@ class GenericTableComponent {
|
|
|
3509
3431
|
this.trackByFunction = (index, item) => item[trackBy];
|
|
3510
3432
|
}
|
|
3511
3433
|
}
|
|
3512
|
-
|
|
3434
|
+
set tableElRef(val) {
|
|
3435
|
+
this.context.tableElRef = val;
|
|
3436
|
+
}
|
|
3437
|
+
constructor(sort, state, viewContainer, transformCreator, injector, context) {
|
|
3513
3438
|
this.sort = sort;
|
|
3514
3439
|
this.state = state;
|
|
3515
3440
|
this.viewContainer = viewContainer;
|
|
3516
3441
|
this.transformCreator = transformCreator;
|
|
3517
|
-
this.
|
|
3518
|
-
this.selectionColumn = false;
|
|
3519
|
-
this.isSticky = false;
|
|
3442
|
+
this.context = context;
|
|
3520
3443
|
this.keys = [];
|
|
3521
3444
|
this.rowDefArr = [];
|
|
3522
3445
|
this.columns = [];
|
|
3523
3446
|
this.myColumns = {};
|
|
3447
|
+
this.offsetIndex = 0;
|
|
3524
3448
|
this.defaultTrackBy = (index, item) => item[initIndexSymbol];
|
|
3525
3449
|
this.trackByFunction = this.defaultTrackBy;
|
|
3526
3450
|
this.initializeRowDefs = (defs) => {
|
|
@@ -3549,7 +3473,6 @@ class GenericTableComponent {
|
|
|
3549
3473
|
return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
|
|
3550
3474
|
}
|
|
3551
3475
|
}));
|
|
3552
|
-
this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
|
|
3553
3476
|
this.getTransform = (key, val) => {
|
|
3554
3477
|
if (val == undefined || val === 'null')
|
|
3555
3478
|
return '';
|
|
@@ -3560,6 +3483,7 @@ class GenericTableComponent {
|
|
|
3560
3483
|
return val;
|
|
3561
3484
|
}
|
|
3562
3485
|
};
|
|
3486
|
+
this.props = context.tableProps;
|
|
3563
3487
|
this.injector = Injector.create({
|
|
3564
3488
|
providers: [
|
|
3565
3489
|
{ provide: MatTable, useFactory: () => this.table },
|
|
@@ -3567,6 +3491,7 @@ class GenericTableComponent {
|
|
|
3567
3491
|
],
|
|
3568
3492
|
parent: injector
|
|
3569
3493
|
});
|
|
3494
|
+
this.offset$ = this.state.select(s => s.virtualScrollOffset);
|
|
3570
3495
|
}
|
|
3571
3496
|
ngOnChanges(changes) {
|
|
3572
3497
|
if (changes.rows && this.rows && this.myColumns.length) {
|
|
@@ -3574,13 +3499,12 @@ class GenericTableComponent {
|
|
|
3574
3499
|
}
|
|
3575
3500
|
}
|
|
3576
3501
|
ngOnInit() {
|
|
3577
|
-
if (this.selectionColumn) {
|
|
3502
|
+
if (this.props.selectionColumn) {
|
|
3578
3503
|
this.columns.push('select');
|
|
3579
3504
|
}
|
|
3580
|
-
if (this.indexColumn) {
|
|
3505
|
+
if (this.props.indexColumn) {
|
|
3581
3506
|
this.columns.push('index');
|
|
3582
3507
|
}
|
|
3583
|
-
this.createDataSource();
|
|
3584
3508
|
this.state.on(this.columnInfos, columns => {
|
|
3585
3509
|
columns.forEach(ci => this.addMetaData(ci));
|
|
3586
3510
|
});
|
|
@@ -3595,12 +3519,17 @@ class GenericTableComponent {
|
|
|
3595
3519
|
this.state.metaDataArray$.pipe(map(metaData => metaData.some(md => !!md.additional?.footer)), distinctUntilChanged()),
|
|
3596
3520
|
this.columnInfos.pipe(map(columnInfos => columnInfos.some(ci => !!ci.customCell?.columnDef?.footerCell)), distinctUntilChanged()),
|
|
3597
3521
|
]).pipe(map(([hasData, hasFooterDef, hasCustomFooter]) => {
|
|
3598
|
-
const hasSelectionColumn = this.selectionColumn;
|
|
3522
|
+
const hasSelectionColumn = this.props.selectionColumn;
|
|
3599
3523
|
return hasCustomFooter || (hasData && (hasFooterDef || hasSelectionColumn)) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
|
|
3600
3524
|
}));
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3525
|
+
if (this.context.tableProps.usePaginator || this.context.tableProps.useVirtualScroll) {
|
|
3526
|
+
this.state.on(this.state.state$, (state) => {
|
|
3527
|
+
this.offsetIndex = state.virtualStart;
|
|
3528
|
+
if (this.context.tableProps.usePaginator) {
|
|
3529
|
+
this.offsetIndex += (state.pageSize * state.currentPage);
|
|
3530
|
+
}
|
|
3531
|
+
});
|
|
3532
|
+
}
|
|
3604
3533
|
}
|
|
3605
3534
|
isGroupHeader(_, row) {
|
|
3606
3535
|
return row.isGroupHeader;
|
|
@@ -3626,44 +3555,39 @@ class GenericTableComponent {
|
|
|
3626
3555
|
}
|
|
3627
3556
|
isAllSelected() {
|
|
3628
3557
|
const numSelected = this.selection.selected.length;
|
|
3629
|
-
const numRows = this.dataSource
|
|
3558
|
+
const numRows = this.context.dataSource?.data.length;
|
|
3630
3559
|
return numSelected === numRows;
|
|
3631
3560
|
}
|
|
3632
3561
|
/** Selects all rows if they are not all selected; otherwise clear selection. */
|
|
3633
3562
|
masterToggle() {
|
|
3634
3563
|
this.isAllSelected() ?
|
|
3635
3564
|
this.selection.clear() :
|
|
3636
|
-
this.selection.select(...this.dataSource.data);
|
|
3565
|
+
this.selection.select(...this.context.dataSource.data);
|
|
3637
3566
|
}
|
|
3638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$4.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: TransformCreator }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$",
|
|
3567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$4.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: TransformCreator }, { token: i0.Injector }, { token: "TABLE_CONTEXT" }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$", rows: "rows", columnBuilders: "columnBuilders", columnInfos: "columnInfos" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"context.dataSource!\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\">\r\n {{ 1 + i + offsetIndex}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"props.groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: props.isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: props.stickyFooter \" [style.bottom.px]=\"props.stickyFooter ? (offset$ | async) : undefined\" />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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: i4$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.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: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3640
3569
|
}
|
|
3641
3570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
3642
3571
|
type: Component,
|
|
3643
3572
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3644
3573
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
3645
|
-
|
|
3646
|
-
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"dataSource
|
|
3647
|
-
}], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: TransformCreator }, { type: i0.Injector }
|
|
3574
|
+
MatTooltipModule, AsyncPipe, LetDirective, FunctionPipe,
|
|
3575
|
+
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"context.dataSource!\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\">\r\n {{ 1 + i + offsetIndex}}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"props.groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: props.isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []; sticky: props.stickyFooter \" [style.bottom.px]=\"props.stickyFooter ? (offset$ | async) : undefined\" />\r\n\r\n</mat-table>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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"] }]
|
|
3576
|
+
}], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: TransformCreator }, { type: i0.Injector }, { type: undefined, decorators: [{
|
|
3577
|
+
type: Inject,
|
|
3578
|
+
args: ["TABLE_CONTEXT"]
|
|
3579
|
+
}] }], propDecorators: { trackBy: [{
|
|
3648
3580
|
type: Input
|
|
3649
3581
|
}], displayData$: [{
|
|
3650
3582
|
type: Input
|
|
3651
3583
|
}], data$: [{
|
|
3652
3584
|
type: Input
|
|
3653
|
-
}], indexColumn: [{
|
|
3654
|
-
type: Input
|
|
3655
|
-
}], selectionColumn: [{
|
|
3656
|
-
type: Input
|
|
3657
3585
|
}], rows: [{
|
|
3658
3586
|
type: Input
|
|
3659
|
-
}], isSticky: [{
|
|
3660
|
-
type: Input
|
|
3661
3587
|
}], columnBuilders: [{
|
|
3662
3588
|
type: Input
|
|
3663
3589
|
}], columnInfos: [{
|
|
3664
3590
|
type: Input
|
|
3665
|
-
}], groupHeaderTemplate: [{
|
|
3666
|
-
type: Input
|
|
3667
3591
|
}], table: [{
|
|
3668
3592
|
type: ViewChild,
|
|
3669
3593
|
args: [MatTable, { static: true }]
|
|
@@ -3673,9 +3597,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
3673
3597
|
}], tableElRef: [{
|
|
3674
3598
|
type: ViewChild,
|
|
3675
3599
|
args: ['table', { read: ElementRef }]
|
|
3676
|
-
}], paginatorComponent: [{
|
|
3677
|
-
type: ViewChild,
|
|
3678
|
-
args: [PaginatorComponent]
|
|
3679
3600
|
}], selection$: [{
|
|
3680
3601
|
type: Output
|
|
3681
3602
|
}] } });
|
|
@@ -4040,7 +3961,7 @@ class SortMenuComponent {
|
|
|
4040
3961
|
this.store.setDirection(sort);
|
|
4041
3962
|
}
|
|
4042
3963
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4043
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n @if(sorted$ | async; as sorted){\r\n @if (notSorted$ | async; as notSorted) {\r\n <!-- Menu Trigger -->\r\n <span matTooltip=\"Sort\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <!-- Menu -->\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\r\n <div mat-menu-item class=\"menu-button\">\r\n <div class=\"close-button-wrapper\">\r\n <span matTooltip=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </span>\r\n @if(dirty){\r\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n <mat-icon>undo</mat-icon>\r\n </span>\r\n }\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"apply-button-wrapper\">\r\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n stop-propagation [class.apply-border]=\"dirty\"\r\n [disabled]=\"!dirty\">\r\n Apply @if (dirty) { Unsaved Changes }\r\n </button>\r\n </div>\r\n\r\n <!-- Default Sorting Text -->\r\n @if (!sorted.length) {\r\n <div class=\"tip\" >\r\n Sorting List\r\n </div>\r\n }\r\n\r\n <!-- Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #sortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n [cdkDropListData]=\"sorted\"\r\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n <!-- Menu Item Wrapper -->\r\n @for (sort of sorted; track sort.active) {\r\n <!-- Menu Item Headers -->\r\n @if (sorted.length > 1) {\r\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n }\r\n \r\n <!-- Menu Item -->\r\n <div mat-menu-item cdkDrag class=\"menu-item\">\r\n <div class=\"sort-item\">\r\n <span class=\"sorted-name\">\r\n {{sort.displayName || (sort.active | spaceCase)}}\r\n <span class=\"direction-text\">{{sort.direction}}</span>\r\n </span>\r\n \r\n <!-- Sort Direction Buttons -->\r\n <div class=\"up-down-buttons-wrapper\">\r\n <button class=\"up-down-button up-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_upward\r\n </mat-icon>\r\n </button>\r\n \r\n <button class=\"up-down-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_downward\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Default Not Sorted Text -->\r\n @if(!notSorted.length){\r\n <div class=\"tip\" >\r\n Not Sorted List\r\n </div>\r\n }\r\n\r\n <!-- Not Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #notSortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n [cdkDropListData]=\"notSorted\"\r\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n @for (sort of notSorted; track sort.active) {\r\n <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n </div>\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n }\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type:
|
|
3964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n @if(sorted$ | async; as sorted){\r\n @if (notSorted$ | async; as notSorted) {\r\n <!-- Menu Trigger -->\r\n <span matTooltip=\"Sort\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <!-- Menu -->\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\r\n <div mat-menu-item class=\"menu-button\">\r\n <div class=\"close-button-wrapper\">\r\n <span matTooltip=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </span>\r\n @if(dirty){\r\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n <mat-icon>undo</mat-icon>\r\n </span>\r\n }\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"apply-button-wrapper\">\r\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n stop-propagation [class.apply-border]=\"dirty\"\r\n [disabled]=\"!dirty\">\r\n Apply @if (dirty) { Unsaved Changes }\r\n </button>\r\n </div>\r\n\r\n <!-- Default Sorting Text -->\r\n @if (!sorted.length) {\r\n <div class=\"tip\" >\r\n Sorting List\r\n </div>\r\n }\r\n\r\n <!-- Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #sortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n [cdkDropListData]=\"sorted\"\r\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n <!-- Menu Item Wrapper -->\r\n @for (sort of sorted; track sort.active) {\r\n <!-- Menu Item Headers -->\r\n @if (sorted.length > 1) {\r\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n }\r\n \r\n <!-- Menu Item -->\r\n <div mat-menu-item cdkDrag class=\"menu-item\">\r\n <div class=\"sort-item\">\r\n <span class=\"sorted-name\">\r\n {{sort.displayName || (sort.active | spaceCase)}}\r\n <span class=\"direction-text\">{{sort.direction}}</span>\r\n </span>\r\n \r\n <!-- Sort Direction Buttons -->\r\n <div class=\"up-down-buttons-wrapper\">\r\n <button class=\"up-down-button up-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_upward\r\n </mat-icon>\r\n </button>\r\n \r\n <button class=\"up-down-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_downward\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Default Not Sorted Text -->\r\n @if(!notSorted.length){\r\n <div class=\"tip\" >\r\n Not Sorted List\r\n </div>\r\n }\r\n\r\n <!-- Not Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #notSortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n [cdkDropListData]=\"notSorted\"\r\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n @for (sort of notSorted; track sort.active) {\r\n <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n </div>\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n }\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4044
3965
|
}
|
|
4045
3966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
4046
3967
|
type: Component,
|
|
@@ -4050,12 +3971,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
4050
3971
|
], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n @if(sorted$ | async; as sorted){\r\n @if (notSorted$ | async; as notSorted) {\r\n <!-- Menu Trigger -->\r\n <span matTooltip=\"Sort\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <!-- Menu -->\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\r\n <div mat-menu-item class=\"menu-button\">\r\n <div class=\"close-button-wrapper\">\r\n <span matTooltip=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </span>\r\n @if(dirty){\r\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n <mat-icon>undo</mat-icon>\r\n </span>\r\n }\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"apply-button-wrapper\">\r\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n stop-propagation [class.apply-border]=\"dirty\"\r\n [disabled]=\"!dirty\">\r\n Apply @if (dirty) { Unsaved Changes }\r\n </button>\r\n </div>\r\n\r\n <!-- Default Sorting Text -->\r\n @if (!sorted.length) {\r\n <div class=\"tip\" >\r\n Sorting List\r\n </div>\r\n }\r\n\r\n <!-- Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #sortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n [cdkDropListData]=\"sorted\"\r\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n <!-- Menu Item Wrapper -->\r\n @for (sort of sorted; track sort.active) {\r\n <!-- Menu Item Headers -->\r\n @if (sorted.length > 1) {\r\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n }\r\n \r\n <!-- Menu Item -->\r\n <div mat-menu-item cdkDrag class=\"menu-item\">\r\n <div class=\"sort-item\">\r\n <span class=\"sorted-name\">\r\n {{sort.displayName || (sort.active | spaceCase)}}\r\n <span class=\"direction-text\">{{sort.direction}}</span>\r\n </span>\r\n \r\n <!-- Sort Direction Buttons -->\r\n <div class=\"up-down-buttons-wrapper\">\r\n <button class=\"up-down-button up-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_upward\r\n </mat-icon>\r\n </button>\r\n \r\n <button class=\"up-down-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_downward\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Default Not Sorted Text -->\r\n @if(!notSorted.length){\r\n <div class=\"tip\" >\r\n Not Sorted List\r\n </div>\r\n }\r\n\r\n <!-- Not Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #notSortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n [cdkDropListData]=\"notSorted\"\r\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n @for (sort of notSorted; track sort.active) {\r\n <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n </div>\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n }\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
|
|
4051
3972
|
}], ctorParameters: () => [{ type: TableStore }, { type: SortMenuComponentStore }] });
|
|
4052
3973
|
|
|
3974
|
+
class PaginatorComponent {
|
|
3975
|
+
constructor(state, context) {
|
|
3976
|
+
this.state = state;
|
|
3977
|
+
this.context = context;
|
|
3978
|
+
this.ourPageEvent = false;
|
|
3979
|
+
}
|
|
3980
|
+
ngOnInit() {
|
|
3981
|
+
this.ourPageEvent = true;
|
|
3982
|
+
this.state.on(metaDataPageSizeChange(this.state), setPaginatorPageSize(this.paginator));
|
|
3983
|
+
this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
|
|
3984
|
+
this.state.on(this.paginator.page, (pageEvent) => {
|
|
3985
|
+
this.state.updateState({ currentPage: pageEvent.pageIndex, pageSize: pageEvent.pageSize });
|
|
3986
|
+
});
|
|
3987
|
+
this.state.on(this.state.select(s => s.dataLen), (len) => this.paginator.length = len);
|
|
3988
|
+
}
|
|
3989
|
+
ngAfterViewInit() {
|
|
3990
|
+
this.currentPageData$ = merge$1(this.paginator.page.pipe(map(mapPaginationEventToCurrentPageDetails)), this.data$.pipe(distinctUntilKeyChanged("length"), delayToAllowForProperUpdate, map(updateCurrentPageDetailsOnDataLengthChange(this.paginator))));
|
|
3991
|
+
}
|
|
3992
|
+
paginatorChange() {
|
|
3993
|
+
if (!this.ourPageEvent) {
|
|
3994
|
+
setTimeout(() => this.context.tableElRef?.nativeElement?.scrollIntoView(), 0);
|
|
3995
|
+
}
|
|
3996
|
+
else {
|
|
3997
|
+
this.ourPageEvent = false;
|
|
3998
|
+
}
|
|
3999
|
+
}
|
|
4000
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }, { token: "TABLE_CONTEXT" }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4001
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
|
|
4002
|
+
@if(currentPageData$ | async; as pageData){
|
|
4003
|
+
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
|
|
4004
|
+
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
4005
|
+
</div>
|
|
4006
|
+
}
|
|
4007
|
+
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4008
|
+
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
4009
|
+
</mat-paginator>
|
|
4010
|
+
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4011
|
+
}
|
|
4012
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
4013
|
+
type: Component,
|
|
4014
|
+
args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass], template: `
|
|
4015
|
+
@if(currentPageData$ | async; as pageData){
|
|
4016
|
+
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
|
|
4017
|
+
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
4018
|
+
</div>
|
|
4019
|
+
}
|
|
4020
|
+
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4021
|
+
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
4022
|
+
</mat-paginator>
|
|
4023
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}: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:0 0 0 .2rem;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", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
4024
|
+
}], ctorParameters: () => [{ type: TableStore }, { type: undefined, decorators: [{
|
|
4025
|
+
type: Inject,
|
|
4026
|
+
args: ["TABLE_CONTEXT"]
|
|
4027
|
+
}] }], propDecorators: { paginator: [{
|
|
4028
|
+
type: ViewChild,
|
|
4029
|
+
args: [MatPaginator, { static: true }]
|
|
4030
|
+
}], data$: [{
|
|
4031
|
+
type: Input
|
|
4032
|
+
}] } });
|
|
4033
|
+
const mapPaginationEventToCurrentPageDetails = (pageData) => ({
|
|
4034
|
+
currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
|
|
4035
|
+
currentEnd: Math.min(pageData.length, ((pageData.pageIndex + 1) * pageData.pageSize)),
|
|
4036
|
+
total: pageData.length
|
|
4037
|
+
});
|
|
4038
|
+
const updateCurrentPageDetailsOnDataLengthChange = (paginator) => () => ({ currentStart: (paginator.pageIndex * paginator.pageSize) + 1,
|
|
4039
|
+
currentEnd: Math.min(paginator.length, ((paginator.pageIndex + 1) * paginator.pageSize)),
|
|
4040
|
+
total: paginator.length });
|
|
4041
|
+
const delayToAllowForProperUpdate = delay$1(0, asyncScheduler);
|
|
4042
|
+
const metaDataPageSizeChange = (state) => state.state$.pipe(map(state => state.userDefined.pageSize || state.pageSize), distinct());
|
|
4043
|
+
const setPaginatorPageSize = (paginator) => (pageSize) => paginator._changePageSize(pageSize);
|
|
4044
|
+
|
|
4045
|
+
class VirtualScrollContainer {
|
|
4046
|
+
constructor(context, state) {
|
|
4047
|
+
this.context = context;
|
|
4048
|
+
this.state = state;
|
|
4049
|
+
this.resizeHandler = () => {
|
|
4050
|
+
if (this.viewport) {
|
|
4051
|
+
this.setSize(this.viewport.elementRef);
|
|
4052
|
+
}
|
|
4053
|
+
};
|
|
4054
|
+
}
|
|
4055
|
+
ngOnInit() {
|
|
4056
|
+
addEventListener('resize', this.resizeHandler);
|
|
4057
|
+
setTimeout(() => {
|
|
4058
|
+
this.setSize(this.viewport.elementRef);
|
|
4059
|
+
}, 0);
|
|
4060
|
+
if (this.context.tableProps.usePaginator) {
|
|
4061
|
+
this.state.on(this.state.select((s) => s.pageSize), (len) => this.context.scrollStrategy.setDataLength(len));
|
|
4062
|
+
}
|
|
4063
|
+
else {
|
|
4064
|
+
this.state.on(this.state.select((s) => s.dataLen), (len) => this.context.scrollStrategy.setDataLength(len));
|
|
4065
|
+
}
|
|
4066
|
+
this.state.on(this.viewport.renderedRangeStream, (range) => {
|
|
4067
|
+
this.state.updateState({
|
|
4068
|
+
virtualStart: range.start,
|
|
4069
|
+
virtualEnd: range.end,
|
|
4070
|
+
});
|
|
4071
|
+
});
|
|
4072
|
+
var offset$ = this.viewport.scrolledIndexChange.pipe(map$1(() => this.viewport.getOffsetToRenderedContentStart() ?? 0), distinctUntilChanged$1(), defaultShareReplay());
|
|
4073
|
+
this.state.on(offset$, (offset) => {
|
|
4074
|
+
this.state.updateState({ virtualScrollOffset: offset });
|
|
4075
|
+
});
|
|
4076
|
+
}
|
|
4077
|
+
ngOnDestroy() {
|
|
4078
|
+
removeEventListener('resize', this.resizeHandler);
|
|
4079
|
+
}
|
|
4080
|
+
setSize(el) {
|
|
4081
|
+
const vsViewport = el.nativeElement;
|
|
4082
|
+
const vsContentWrapper = vsViewport?.children[0];
|
|
4083
|
+
const hasHorizontalScrollBar = vsViewport?.scrollWidth > vsViewport?.clientWidth;
|
|
4084
|
+
const rect = vsContentWrapper.getBoundingClientRect();
|
|
4085
|
+
let wrapperHeight = 0;
|
|
4086
|
+
if (rect.top >= 0) {
|
|
4087
|
+
wrapperHeight = rect.bottom;
|
|
4088
|
+
}
|
|
4089
|
+
else {
|
|
4090
|
+
wrapperHeight = rect.bottom + rect.top;
|
|
4091
|
+
}
|
|
4092
|
+
if (wrapperHeight < window.innerHeight) {
|
|
4093
|
+
vsViewport.setAttribute('style', `height: ${vsContentWrapper.clientHeight + (hasHorizontalScrollBar ? 17 : 0)}px !important;`);
|
|
4094
|
+
}
|
|
4095
|
+
else {
|
|
4096
|
+
vsViewport.setAttribute('style', `height: ${window.innerHeight - el.nativeElement.offsetTop - (0 || 167)}px !important;`);
|
|
4097
|
+
}
|
|
4098
|
+
this.viewport?.checkViewportSize();
|
|
4099
|
+
const virtualScrollOffset = this.viewport.getOffsetToRenderedContentStart() ?? 0;
|
|
4100
|
+
this.state.updateState({ virtualScrollOffset });
|
|
4101
|
+
}
|
|
4102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: VirtualScrollContainer, deps: [{ token: 'TABLE_CONTEXT' }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, static: true }], ngImport: i0, template: `<cdk-virtual-scroll-viewport>
|
|
4104
|
+
<ng-content></ng-content>
|
|
4105
|
+
</cdk-virtual-scroll-viewport> `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], viewProviders: [
|
|
4106
|
+
{
|
|
4107
|
+
provide: VIRTUAL_SCROLL_STRATEGY,
|
|
4108
|
+
useFactory: (c) => c.context.scrollStrategy,
|
|
4109
|
+
deps: [forwardRef(() => VirtualScrollContainer)],
|
|
4110
|
+
},
|
|
4111
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4112
|
+
}
|
|
4113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: VirtualScrollContainer, decorators: [{
|
|
4114
|
+
type: Component,
|
|
4115
|
+
args: [{
|
|
4116
|
+
selector: 'tb-virtual-scroll-container',
|
|
4117
|
+
template: `<cdk-virtual-scroll-viewport>
|
|
4118
|
+
<ng-content></ng-content>
|
|
4119
|
+
</cdk-virtual-scroll-viewport> `,
|
|
4120
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4121
|
+
standalone: true,
|
|
4122
|
+
imports: [ScrollingModule],
|
|
4123
|
+
viewProviders: [
|
|
4124
|
+
{
|
|
4125
|
+
provide: VIRTUAL_SCROLL_STRATEGY,
|
|
4126
|
+
useFactory: (c) => c.context.scrollStrategy,
|
|
4127
|
+
deps: [forwardRef(() => VirtualScrollContainer)],
|
|
4128
|
+
},
|
|
4129
|
+
],
|
|
4130
|
+
}]
|
|
4131
|
+
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4132
|
+
type: Inject,
|
|
4133
|
+
args: ['TABLE_CONTEXT']
|
|
4134
|
+
}] }, { type: TableStore }], propDecorators: { viewport: [{
|
|
4135
|
+
type: ViewChild,
|
|
4136
|
+
args: [CdkVirtualScrollViewport, { static: true }]
|
|
4137
|
+
}] } });
|
|
4138
|
+
|
|
4053
4139
|
const containerImports = [
|
|
4054
4140
|
AsyncPipe, NgTemplateOutlet,
|
|
4141
|
+
PaginatorComponent,
|
|
4055
4142
|
LetDirective,
|
|
4056
4143
|
MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
|
|
4057
4144
|
SortMenuComponent, GenericTableComponent, StopPropagationDirective, ClickEmitterDirective, DialogDirective,
|
|
4058
|
-
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, MatInputModule
|
|
4145
|
+
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, MatInputModule, VirtualScrollContainer
|
|
4059
4146
|
];
|
|
4060
4147
|
|
|
4061
4148
|
const updateFilterState = (previousState, [filterInfoDict, predicateArr], index) => {
|
|
@@ -4173,11 +4260,131 @@ const initialGroupByState = { displayData: [], groupedData: [] };
|
|
|
4173
4260
|
|
|
4174
4261
|
const initialDataState = { mappedData: [] };
|
|
4175
4262
|
|
|
4263
|
+
const defaultProps = {
|
|
4264
|
+
usePaginator: true,
|
|
4265
|
+
useVirtualScroll: false,
|
|
4266
|
+
indexColumn: false,
|
|
4267
|
+
selectionColumn: false,
|
|
4268
|
+
isSticky: false,
|
|
4269
|
+
stickyFooter: false,
|
|
4270
|
+
};
|
|
4271
|
+
|
|
4272
|
+
class TableVirtualScrollStrategy {
|
|
4273
|
+
constructor(itemHeight, headerOffset) {
|
|
4274
|
+
this.itemHeight = itemHeight;
|
|
4275
|
+
this.headerOffset = headerOffset;
|
|
4276
|
+
this.dataLength = 0;
|
|
4277
|
+
this.indexChange = new Subject();
|
|
4278
|
+
this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
|
|
4279
|
+
}
|
|
4280
|
+
attach(viewport) {
|
|
4281
|
+
this.viewport = viewport;
|
|
4282
|
+
this.onDataLengthChanged();
|
|
4283
|
+
}
|
|
4284
|
+
onContentScrolled() {
|
|
4285
|
+
this.updateContent();
|
|
4286
|
+
}
|
|
4287
|
+
onDataLengthChanged() {
|
|
4288
|
+
if (this.viewport) {
|
|
4289
|
+
this.viewport.setTotalContentSize(this.dataLength * this.itemHeight);
|
|
4290
|
+
this.updateContent();
|
|
4291
|
+
}
|
|
4292
|
+
}
|
|
4293
|
+
setDataLength(length) {
|
|
4294
|
+
this.dataLength = length;
|
|
4295
|
+
this.onDataLengthChanged();
|
|
4296
|
+
}
|
|
4297
|
+
setScrollHeight(rowHeight, headerOffset) {
|
|
4298
|
+
this.itemHeight = rowHeight;
|
|
4299
|
+
this.headerOffset = headerOffset;
|
|
4300
|
+
this.updateContent();
|
|
4301
|
+
}
|
|
4302
|
+
setItemHeight(rowHeight) {
|
|
4303
|
+
this.itemHeight = rowHeight;
|
|
4304
|
+
this.updateContent();
|
|
4305
|
+
}
|
|
4306
|
+
setHeaderOffset(headerOffset) {
|
|
4307
|
+
this.headerOffset = headerOffset;
|
|
4308
|
+
this.updateContent();
|
|
4309
|
+
}
|
|
4310
|
+
detach() { }
|
|
4311
|
+
onContentRendered() { }
|
|
4312
|
+
onRenderedOffsetChanged() {
|
|
4313
|
+
}
|
|
4314
|
+
scrollToIndex(index, behavior) {
|
|
4315
|
+
}
|
|
4316
|
+
updateContent() {
|
|
4317
|
+
if (!this.viewport) {
|
|
4318
|
+
return;
|
|
4319
|
+
}
|
|
4320
|
+
const amount = Math.ceil(this.viewport.getViewportSize() / this.itemHeight);
|
|
4321
|
+
const offset = this.viewport.measureScrollOffset() - this.headerOffset;
|
|
4322
|
+
const buffer = Math.ceil(amount / 2);
|
|
4323
|
+
const skip = Math.round(offset / this.itemHeight);
|
|
4324
|
+
const index = Math.max(0, skip);
|
|
4325
|
+
const start = Math.max(0, index - buffer);
|
|
4326
|
+
const end = Math.min(this.dataLength, index + amount + buffer);
|
|
4327
|
+
this.viewport.setRenderedContentOffset(this.itemHeight * start);
|
|
4328
|
+
this.viewport.setRenderedRange({ start, end });
|
|
4329
|
+
this.indexChange.next(index);
|
|
4330
|
+
}
|
|
4331
|
+
}
|
|
4332
|
+
|
|
4333
|
+
class MatTableObservableDataSource extends MatTableDataSource {
|
|
4334
|
+
constructor(dataSrc, state, context) {
|
|
4335
|
+
super([]);
|
|
4336
|
+
this.dataSrc = dataSrc;
|
|
4337
|
+
this.state = state;
|
|
4338
|
+
this.context = context;
|
|
4339
|
+
}
|
|
4340
|
+
connect() {
|
|
4341
|
+
if (!this.subscription) {
|
|
4342
|
+
let dataSource$ = this.dataSrc;
|
|
4343
|
+
if (this.context.tableProps.usePaginator) {
|
|
4344
|
+
const currentPage$ = this.state.select(s => s.currentPage);
|
|
4345
|
+
const pageSize$ = this.state.select(s => s.pageSize);
|
|
4346
|
+
dataSource$ = combineLatest([
|
|
4347
|
+
currentPage$,
|
|
4348
|
+
pageSize$,
|
|
4349
|
+
dataSource$
|
|
4350
|
+
]).pipe(map$1(([currentPage, pageSize, d]) => {
|
|
4351
|
+
const start = currentPage * pageSize;
|
|
4352
|
+
return d.slice(start, start + pageSize);
|
|
4353
|
+
}));
|
|
4354
|
+
}
|
|
4355
|
+
if (this.context.tableProps.useVirtualScroll) {
|
|
4356
|
+
const start$ = this.state.select(s => s.virtualStart);
|
|
4357
|
+
const end$ = this.state.select(s => s.virtualEnd);
|
|
4358
|
+
dataSource$ = combineLatest([
|
|
4359
|
+
start$,
|
|
4360
|
+
end$,
|
|
4361
|
+
dataSource$
|
|
4362
|
+
]).pipe(map$1(([start, end, data]) => {
|
|
4363
|
+
return data.slice(start, end);
|
|
4364
|
+
}));
|
|
4365
|
+
}
|
|
4366
|
+
this.subscription = dataSource$.subscribe((data) => {
|
|
4367
|
+
this.data = data;
|
|
4368
|
+
});
|
|
4369
|
+
}
|
|
4370
|
+
return super.connect();
|
|
4371
|
+
}
|
|
4372
|
+
disconnect() {
|
|
4373
|
+
if (this.subscription) {
|
|
4374
|
+
this.subscription.unsubscribe();
|
|
4375
|
+
this.subscription = undefined;
|
|
4376
|
+
}
|
|
4377
|
+
super.disconnect();
|
|
4378
|
+
}
|
|
4379
|
+
}
|
|
4380
|
+
|
|
4176
4381
|
class TableContainerComponent {
|
|
4177
4382
|
constructor() {
|
|
4178
|
-
this.
|
|
4179
|
-
this.
|
|
4180
|
-
|
|
4383
|
+
this.props = defaultProps;
|
|
4384
|
+
this.context = {
|
|
4385
|
+
tableProps: this.props,
|
|
4386
|
+
scrollStrategy: new TableVirtualScrollStrategy(48, 56),
|
|
4387
|
+
};
|
|
4181
4388
|
this.selection$ = new EventEmitter();
|
|
4182
4389
|
this.displayDataSubject = new ReplaySubject(1);
|
|
4183
4390
|
this.displayData = this.displayDataSubject.pipe(switchAll(), defaultShareReplay());
|
|
@@ -4187,6 +4394,7 @@ class TableContainerComponent {
|
|
|
4187
4394
|
this.onSaveState = new EventEmitter();
|
|
4188
4395
|
this.state = inject(TableStore);
|
|
4189
4396
|
this.state$ = this.state.getSavableState().pipe(map(state => cloneDeep(state)), defaultShareReplay());
|
|
4397
|
+
this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
|
|
4190
4398
|
this.config = inject(TableBuilderConfigToken);
|
|
4191
4399
|
this.exportToCsvService = inject((ExportToCsvService));
|
|
4192
4400
|
this.wrapper = inject(TableWrapperDirective, { optional: true });
|
|
@@ -4248,14 +4456,41 @@ class TableContainerComponent {
|
|
|
4248
4456
|
});
|
|
4249
4457
|
};
|
|
4250
4458
|
}
|
|
4459
|
+
set indexColumn(val) {
|
|
4460
|
+
this.props.indexColumn = val;
|
|
4461
|
+
}
|
|
4462
|
+
set selectionColumn(val) {
|
|
4463
|
+
this.props.selectionColumn = val;
|
|
4464
|
+
}
|
|
4465
|
+
set isSticky(val) {
|
|
4466
|
+
this.props.isSticky = val;
|
|
4467
|
+
}
|
|
4468
|
+
set stickyFooter(val) {
|
|
4469
|
+
this.props.stickyFooter = val;
|
|
4470
|
+
}
|
|
4251
4471
|
set pageSize(value) {
|
|
4252
4472
|
this.state.setPageSize(value);
|
|
4253
4473
|
}
|
|
4474
|
+
set groupHeaderTemplate(template) {
|
|
4475
|
+
this.props.groupHeaderTemplate = template;
|
|
4476
|
+
}
|
|
4477
|
+
set usePaginator(val) {
|
|
4478
|
+
this.props.usePaginator = val;
|
|
4479
|
+
}
|
|
4480
|
+
set itemHeight(val) {
|
|
4481
|
+
this.context.scrollStrategy.setItemHeight(val);
|
|
4482
|
+
}
|
|
4483
|
+
set headerOffset(val) {
|
|
4484
|
+
this.context.scrollStrategy.setHeaderOffset(val);
|
|
4485
|
+
}
|
|
4486
|
+
set useVirtualScroll(val) {
|
|
4487
|
+
this.props.useVirtualScroll = val;
|
|
4488
|
+
}
|
|
4254
4489
|
firstPage() {
|
|
4255
|
-
this.
|
|
4490
|
+
this.paginatorComponent?.paginator?.firstPage();
|
|
4256
4491
|
}
|
|
4257
4492
|
lastPage() {
|
|
4258
|
-
this.
|
|
4493
|
+
this.paginatorComponent?.paginator?.lastPage();
|
|
4259
4494
|
}
|
|
4260
4495
|
resetState() {
|
|
4261
4496
|
this.customFilterDirectives.forEach(cf => cf.reset());
|
|
@@ -4300,8 +4535,13 @@ class TableContainerComponent {
|
|
|
4300
4535
|
const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp$1()), this.state.groupByKeys$.pipe(timestamp$1()), this.state.expandedGroups$.pipe(timestamp$1())]).pipe(scan$1(updateGroupByState, initialGroupByState), map(({ displayData }) => displayData), defaultShareReplay());
|
|
4301
4536
|
this.displayDataSubject.next(flatGrouped$);
|
|
4302
4537
|
this.dataSubject.next(sortedAndFilteredData$);
|
|
4538
|
+
this.state.on(this.displayData, (data) => {
|
|
4539
|
+
this.state.updateState({ dataLen: data.length });
|
|
4540
|
+
});
|
|
4303
4541
|
}
|
|
4304
4542
|
ngOnInit() {
|
|
4543
|
+
const ds = new MatTableObservableDataSource(this.displayData, this.state, this.context);
|
|
4544
|
+
this.context.dataSource = ds;
|
|
4305
4545
|
this.initializeState();
|
|
4306
4546
|
this.initializeData();
|
|
4307
4547
|
if (this.tableId) {
|
|
@@ -4353,14 +4593,46 @@ class TableContainerComponent {
|
|
|
4353
4593
|
this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })));
|
|
4354
4594
|
}
|
|
4355
4595
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <div>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\" [indexColumn]='indexColumn'\r\n [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.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%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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$", "indexColumn", "selectionColumn", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i14.MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.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: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", usePaginator: "usePaginator", itemHeight: "itemHeight", headerOffset: "headerOffset", useVirtualScroll: "useVirtualScroll", tableId: "tableId", tableBuilder: "tableBuilder", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ 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 }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n <div>\r\n @if(props.useVirtualScroll) {\r\n <tb-virtual-scroll-container>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n </tb-virtual-scroll-container>\r\n }\r\n @else {\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n }\r\n @if(props.usePaginator) {\r\n <div class=\"flx-row-end sticky\" style=\"height: 100px;\">\r\n <tb-paginator #tbPaginator [data$]=\"data\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.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%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$"] }, { 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: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i15.MatMenuModule }, { kind: "component", type: i15.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: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.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: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$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"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], viewProviders: [
|
|
4597
|
+
{
|
|
4598
|
+
provide: "TABLE_CONTEXT",
|
|
4599
|
+
useFactory: (c) => c.context,
|
|
4600
|
+
deps: [forwardRef(() => TableContainerComponent)],
|
|
4601
|
+
},
|
|
4602
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4357
4603
|
}
|
|
4358
4604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
4359
4605
|
type: Component,
|
|
4360
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: containerImports,
|
|
4361
|
-
|
|
4606
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: containerImports, viewProviders: [
|
|
4607
|
+
{
|
|
4608
|
+
provide: "TABLE_CONTEXT",
|
|
4609
|
+
useFactory: (c) => c.context,
|
|
4610
|
+
deps: [forwardRef(() => TableContainerComponent)],
|
|
4611
|
+
},
|
|
4612
|
+
], template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n <div>\r\n @if(props.useVirtualScroll) {\r\n <tb-virtual-scroll-container>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n </tb-virtual-scroll-container>\r\n }\r\n @else {\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]=\"trackBy\"></tb-generic-table>\r\n }\r\n @if(props.usePaginator) {\r\n <div class=\"flx-row-end sticky\" style=\"height: 100px;\">\r\n <tb-paginator #tbPaginator [data$]=\"data\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.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%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
4613
|
+
}], propDecorators: { indexColumn: [{
|
|
4614
|
+
type: Input
|
|
4615
|
+
}], selectionColumn: [{
|
|
4616
|
+
type: Input
|
|
4617
|
+
}], isSticky: [{
|
|
4618
|
+
type: Input
|
|
4619
|
+
}], stickyFooter: [{
|
|
4620
|
+
type: Input
|
|
4621
|
+
}], pageSize: [{
|
|
4622
|
+
type: Input
|
|
4623
|
+
}], groupHeaderTemplate: [{
|
|
4624
|
+
type: Input
|
|
4625
|
+
}], usePaginator: [{
|
|
4626
|
+
type: Input
|
|
4627
|
+
}], itemHeight: [{
|
|
4628
|
+
type: Input
|
|
4629
|
+
}], headerOffset: [{
|
|
4630
|
+
type: Input
|
|
4631
|
+
}], useVirtualScroll: [{
|
|
4632
|
+
type: Input
|
|
4633
|
+
}], paginatorComponent: [{
|
|
4362
4634
|
type: ViewChild,
|
|
4363
|
-
args: [
|
|
4635
|
+
args: [PaginatorComponent]
|
|
4364
4636
|
}], customFilterDirectives: [{
|
|
4365
4637
|
type: ContentChildren,
|
|
4366
4638
|
args: [TableCustomFilterDirective, { descendants: true }]
|
|
@@ -4377,20 +4649,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
4377
4649
|
type: Input
|
|
4378
4650
|
}], tableBuilder: [{
|
|
4379
4651
|
type: Input
|
|
4380
|
-
}], indexColumn: [{
|
|
4381
|
-
type: Input
|
|
4382
|
-
}], selectionColumn: [{
|
|
4383
|
-
type: Input
|
|
4384
4652
|
}], trackBy: [{
|
|
4385
4653
|
type: Input
|
|
4386
|
-
}], isSticky: [{
|
|
4387
|
-
type: Input
|
|
4388
|
-
}], pageSize: [{
|
|
4389
|
-
type: Input
|
|
4390
4654
|
}], inputFilters: [{
|
|
4391
4655
|
type: Input
|
|
4392
|
-
}], groupHeaderTemplate: [{
|
|
4393
|
-
type: Input
|
|
4394
4656
|
}], selection$: [{
|
|
4395
4657
|
type: Output
|
|
4396
4658
|
}], data: [{
|