@one-paragon/angular-utilities 1.2.13 → 1.2.14
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/TableBuilderConfig.mjs +1 -1
- package/esm2022/table-builder/classes/TableBuilderDataSource.mjs +6 -3
- package/esm2022/table-builder/classes/TableState.mjs +1 -2
- package/esm2022/table-builder/classes/table-builder-general-settings.mjs +49 -45
- package/esm2022/table-builder/classes/table-builder.mjs +2 -2
- package/esm2022/table-builder/classes/table-store.mjs +14 -9
- package/esm2022/table-builder/components/column-builder/column-builder.component.mjs +2 -2
- package/esm2022/table-builder/components/generic-table/generic-table.component.mjs +15 -3
- package/esm2022/table-builder/components/generic-table/paginator.component.mjs +3 -3
- package/esm2022/table-builder/components/table-container/table-container.mjs +4 -4
- package/esm2022/table-builder/components/table-container/virtual-scroll-container.mjs +9 -5
- package/esm2022/table-builder/services/table-template-service.mjs +2 -2
- package/esm2022/table-builder/services/transform-creator.mjs +3 -3
- package/fesm2022/one-paragon-angular-utilities.mjs +97 -72
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/classes/TableBuilderConfig.d.ts +6 -4
- package/table-builder/classes/TableState.d.ts +0 -1
- package/table-builder/classes/table-builder-general-settings.d.ts +13 -6
- package/table-builder/classes/table-builder.d.ts +2 -2
- package/table-builder/classes/table-store.d.ts +4 -4
- package/table-builder/components/generic-table/generic-table.component.d.ts +2 -0
- package/table-builder/components/table-container/table-container-imports.d.ts +1 -1
- package/table-builder/components/table-container/table-container.d.ts +1 -1
- package/table-builder/components/table-container/virtual-scroll-container.d.ts +2 -1
- package/table-builder/directives/table-wrapper.directive.d.ts +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, isSignal, computed, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, forwardRef, contentChildren, runInInjectionContext, ContentChild, APP_INITIALIZER } from '@angular/core';
|
|
2
|
+
import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, isSignal, computed, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, contentChild, forwardRef, contentChildren, runInInjectionContext, ContentChild, APP_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, debounceTime, distinctUntilChanged, first as first$1, observeOn, scan as scan$1, timestamp as timestamp$1, mergeAll } from 'rxjs/operators';
|
|
4
4
|
import * as i1 from 'rxjs';
|
|
5
5
|
import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, BehaviorSubject, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, animationFrameScheduler, timestamp } from 'rxjs';
|
|
@@ -749,25 +749,6 @@ function metaDataArrToDict(arr, transform) {
|
|
|
749
749
|
}
|
|
750
750
|
|
|
751
751
|
class GeneralTableSettings {
|
|
752
|
-
constructor(settings) {
|
|
753
|
-
if (settings) {
|
|
754
|
-
merge$1(this.headerSettings, settings.headerSettings);
|
|
755
|
-
merge$1(this.footerSettings, settings.footerSettings);
|
|
756
|
-
merge$1(this.columnHeaderSettings, settings.columnHeaderSettings);
|
|
757
|
-
merge$1(this.tableSettings, settings.tableSettings);
|
|
758
|
-
if (settings.tableSettings?.useVirtualScroll) {
|
|
759
|
-
const currVirt = settings.tableSettings.useVirtualScroll === true ? new VirtualScrollOptions() : settings.tableSettings.useVirtualScroll;
|
|
760
|
-
if (!currVirt.headerHeight || settings.tableSettings.useVirtualScroll === true) {
|
|
761
|
-
currVirt.headerHeight = (typeof settings.headerSettings?.headerHeight === 'number' ? settings.headerSettings?.headerHeight : DefaultVirtualScrollOptions.headerHeight);
|
|
762
|
-
}
|
|
763
|
-
if (!currVirt.rowHeight || settings.tableSettings.useVirtualScroll === true) {
|
|
764
|
-
currVirt.rowHeight = (typeof settings.tableSettings?.rowHeight === 'number' ? settings.tableSettings?.rowHeight : DefaultVirtualScrollOptions.rowHeight);
|
|
765
|
-
}
|
|
766
|
-
this.tableSettings.useVirtualScroll = { ...new VirtualScrollOptions(), ...currVirt };
|
|
767
|
-
}
|
|
768
|
-
}
|
|
769
|
-
this.injector = settings?.injector;
|
|
770
|
-
}
|
|
771
752
|
headerSettings = new TableWrapperHeaderSettings();
|
|
772
753
|
footerSettings = new TableWrapperFooterSettings();
|
|
773
754
|
columnHeaderSettings = new TableColumnHeaderSettings();
|
|
@@ -793,54 +774,77 @@ class TableColumnHeaderSettings {
|
|
|
793
774
|
}
|
|
794
775
|
class TableSettings {
|
|
795
776
|
usePaginator = true;
|
|
796
|
-
useVirtualScroll =
|
|
777
|
+
useVirtualScroll = undefined;
|
|
797
778
|
includeAllInPaginatorOptions = false;
|
|
798
779
|
rowHeight = undefined;
|
|
799
780
|
groupHeaderHeight = undefined;
|
|
781
|
+
minColumnWidth;
|
|
800
782
|
}
|
|
801
783
|
class PersistedTableSettings {
|
|
802
784
|
constructor(tableSettings) {
|
|
803
785
|
if (tableSettings) {
|
|
804
|
-
this.collapseHeader = tableSettings.
|
|
805
|
-
this.collapseFooter = tableSettings.
|
|
786
|
+
this.collapseHeader = tableSettings.collapseHeader;
|
|
787
|
+
this.collapseFooter = tableSettings.collapseFooter;
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
merge(tableSettings) {
|
|
791
|
+
const newPts = new PersistedTableSettings(this);
|
|
792
|
+
if (tableSettings) {
|
|
793
|
+
newPts.collapseHeader = tableSettings.headerSettings?.collapse ?? newPts.collapseHeader;
|
|
794
|
+
newPts.collapseFooter = tableSettings.footerSettings?.collapse ?? newPts.collapseFooter;
|
|
806
795
|
}
|
|
796
|
+
return newPts;
|
|
807
797
|
}
|
|
808
798
|
collapseHeader = false;
|
|
809
799
|
collapseFooter = false;
|
|
810
800
|
}
|
|
811
801
|
class NotPersistedTableSettings {
|
|
812
|
-
|
|
802
|
+
merge(tableSettings) {
|
|
803
|
+
const newNpts = merge$1(this, new NotPersistedTableSettings());
|
|
813
804
|
if (tableSettings) {
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
805
|
+
newNpts.hideExport = tableSettings.headerSettings?.hideExport ?? newNpts.hideExport;
|
|
806
|
+
newNpts.hideColumnSettings = tableSettings.headerSettings?.hideColumnSettings ?? newNpts.hideColumnSettings;
|
|
807
|
+
newNpts.hideFilter = tableSettings.headerSettings?.hideFilter ?? newNpts.hideFilter;
|
|
808
|
+
newNpts.hideSort = tableSettings.headerSettings?.hideSort ?? newNpts.hideSort;
|
|
809
|
+
newNpts.showTitleWhenHeaderCollapsed = tableSettings.headerSettings?.showTitleWhenCollapsed ?? newNpts.showTitleWhenHeaderCollapsed;
|
|
810
|
+
newNpts.hideHeader = tableSettings.headerSettings?.hideHeader ?? newNpts.hideHeader;
|
|
811
|
+
newNpts.hideColumnHeaderFilters = tableSettings.columnHeaderSettings?.noFilters ?? newNpts.hideColumnHeaderFilters;
|
|
812
|
+
newNpts.hideColumnHeader = tableSettings.columnHeaderSettings?.noHeader ?? newNpts.hideColumnHeader;
|
|
813
|
+
newNpts.usePaginator = tableSettings.tableSettings?.usePaginator ?? newNpts.usePaginator;
|
|
814
|
+
newNpts.useVirtualScroll = tableSettings.tableSettings?.useVirtualScroll ?? newNpts.useVirtualScroll;
|
|
815
|
+
newNpts.includeAllInPaginatorOptions = tableSettings.tableSettings?.includeAllInPaginatorOptions ?? newNpts.includeAllInPaginatorOptions;
|
|
816
|
+
newNpts.rowHeight = tableSettings.tableSettings?.rowHeight ?? newNpts.rowHeight;
|
|
817
|
+
newNpts.headerHeight = tableSettings.headerSettings?.headerHeight ?? newNpts.headerHeight;
|
|
818
|
+
newNpts.groupHeaderHeight = tableSettings.tableSettings?.groupHeaderHeight ?? newNpts.groupHeaderHeight;
|
|
819
|
+
newNpts.minColumnWidth = tableSettings.tableSettings?.minColumnWidth ?? newNpts.minColumnWidth;
|
|
820
|
+
if (tableSettings.tableSettings?.useVirtualScroll) {
|
|
821
|
+
const currVirt = tableSettings.tableSettings.useVirtualScroll === true ? new VirtualScrollOptions() : tableSettings.tableSettings.useVirtualScroll;
|
|
822
|
+
if (!currVirt.headerHeight || tableSettings.tableSettings.useVirtualScroll === true) {
|
|
823
|
+
currVirt.headerHeight = (typeof tableSettings.headerSettings?.headerHeight === 'number' ? tableSettings.headerSettings?.headerHeight : DefaultVirtualScrollOptions.headerHeight);
|
|
824
|
+
}
|
|
825
|
+
if (!currVirt.rowHeight || tableSettings.tableSettings.useVirtualScroll === true) {
|
|
826
|
+
currVirt.rowHeight = (typeof tableSettings.tableSettings?.rowHeight === 'number' ? tableSettings.tableSettings?.rowHeight : DefaultVirtualScrollOptions.rowHeight);
|
|
827
|
+
}
|
|
828
|
+
this.useVirtualScroll = { ...new VirtualScrollOptions(), ...currVirt };
|
|
829
|
+
}
|
|
830
|
+
}
|
|
831
|
+
return newNpts;
|
|
832
|
+
}
|
|
833
|
+
hideExport = false;
|
|
834
|
+
hideFilter = false;
|
|
835
|
+
hideColumnSettings = false;
|
|
836
|
+
hideSort = false;
|
|
834
837
|
showTitleWhenHeaderCollapsed = true;
|
|
835
838
|
hideHeader = true;
|
|
836
|
-
hideColumnHeaderFilters =
|
|
837
|
-
hideColumnHeader =
|
|
839
|
+
hideColumnHeaderFilters = false;
|
|
840
|
+
hideColumnHeader = false;
|
|
838
841
|
usePaginator = true;
|
|
839
|
-
useVirtualScroll =
|
|
842
|
+
useVirtualScroll = undefined;
|
|
840
843
|
includeAllInPaginatorOptions = false;
|
|
841
844
|
groupHeaderHeight = undefined;
|
|
842
845
|
rowHeight;
|
|
843
846
|
headerHeight = undefined;
|
|
847
|
+
minColumnWidth;
|
|
844
848
|
}
|
|
845
849
|
class VirtualScrollOptions {
|
|
846
850
|
virtualAsDefault = true;
|
|
@@ -894,7 +898,6 @@ const defaultTableState = {
|
|
|
894
898
|
pageSize: 10,
|
|
895
899
|
linkMaps: {},
|
|
896
900
|
groupBy: [],
|
|
897
|
-
minColumnWidth: undefined,
|
|
898
901
|
currentPage: 0,
|
|
899
902
|
props: {},
|
|
900
903
|
showAll: false,
|
|
@@ -1726,7 +1729,14 @@ function stateIs(initializationState) {
|
|
|
1726
1729
|
class TableStore extends ComponentStore {
|
|
1727
1730
|
constructor() {
|
|
1728
1731
|
const config = inject(TableBuilderConfigToken);
|
|
1729
|
-
|
|
1732
|
+
const settingsFromConfig = {
|
|
1733
|
+
persistedTableSettings: new PersistedTableSettings().merge(config.defaultTableSettings),
|
|
1734
|
+
notPersistedTableSettings: new NotPersistedTableSettings().merge(config.defaultTableSettings),
|
|
1735
|
+
};
|
|
1736
|
+
if (config.defaultTableSettings?.pageSize) {
|
|
1737
|
+
settingsFromConfig['pageSize'] = config.defaultTableSettings?.pageSize;
|
|
1738
|
+
}
|
|
1739
|
+
super({ ...defaultTableState, ...settingsFromConfig });
|
|
1730
1740
|
}
|
|
1731
1741
|
selectStateReady = this.select(state => state.initializationState).pipe(filter(i => i === InitializationState.Ready));
|
|
1732
1742
|
getSavableState() {
|
|
@@ -1758,7 +1768,7 @@ class TableStore extends ComponentStore {
|
|
|
1758
1768
|
};
|
|
1759
1769
|
$getUserDefinedWidth = (key) => this.selectSignal(state => state.userDefined.widths[key]);
|
|
1760
1770
|
$getUserDefinedWidths = this.selectSignal(state => state.userDefined.widths);
|
|
1761
|
-
tableSettingsMinWidth = this.selectSignal(state => state.minColumnWidth);
|
|
1771
|
+
tableSettingsMinWidth = this.selectSignal(state => state.notPersistedTableSettings.minColumnWidth);
|
|
1762
1772
|
resetState = this.updater((state) => {
|
|
1763
1773
|
const sorted = this.createPreSort(state.metaData);
|
|
1764
1774
|
return ({ ...state, hiddenKeys: [], sorted, filters: {}, groupBy: [], userDefined: { widths: {}, order: {}, table: {} } });
|
|
@@ -1995,8 +2005,8 @@ class TableStore extends ComponentStore {
|
|
|
1995
2005
|
setTableSettings = this.updater((state, settings) => {
|
|
1996
2006
|
const s = {
|
|
1997
2007
|
...state,
|
|
1998
|
-
persistedTableSettings:
|
|
1999
|
-
notPersistedTableSettings:
|
|
2008
|
+
persistedTableSettings: state.persistedTableSettings.merge(settings),
|
|
2009
|
+
notPersistedTableSettings: state.notPersistedTableSettings.merge(settings)
|
|
2000
2010
|
};
|
|
2001
2011
|
return s;
|
|
2002
2012
|
});
|
|
@@ -2004,10 +2014,7 @@ class TableStore extends ComponentStore {
|
|
|
2004
2014
|
const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
|
|
2005
2015
|
return ts;
|
|
2006
2016
|
});
|
|
2007
|
-
tableSettings$ = this.
|
|
2008
|
-
const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
|
|
2009
|
-
return ts;
|
|
2010
|
-
});
|
|
2017
|
+
tableSettings$ = toObservable(this.tableSettings);
|
|
2011
2018
|
props = this.selectSignal(s => s.props);
|
|
2012
2019
|
setLinkMaps = this.updater((state, maps) => {
|
|
2013
2020
|
return { ...state, linkMaps: maps };
|
|
@@ -3076,8 +3083,8 @@ class TransformCreator {
|
|
|
3076
3083
|
var transformer = this.config.transformers[metaData.fieldType];
|
|
3077
3084
|
return (value) => transformer(defaultFunc(value));
|
|
3078
3085
|
}
|
|
3079
|
-
const defaultDateFormat = this.config.
|
|
3080
|
-
const defaultDateTimeFormat = this.config.
|
|
3086
|
+
const defaultDateFormat = this.config.dateFormats?.dateFormat ?? 'shortDate';
|
|
3087
|
+
const defaultDateTimeFormat = this.config.dateFormats?.dateTimeFormat ?? 'short';
|
|
3081
3088
|
switch (metaData.fieldType) {
|
|
3082
3089
|
case FieldType.Date:
|
|
3083
3090
|
const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
|
|
@@ -3328,7 +3335,7 @@ class TableTemplateService {
|
|
|
3328
3335
|
let tmp = metaData.fieldType === FieldType.Link && metaData.additional?.link?.useRouterLink
|
|
3329
3336
|
? this.templates[FieldType.Link + .5]
|
|
3330
3337
|
:
|
|
3331
|
-
metaData.fieldType === FieldType.Array && (metaData.additional?.arrayStyle === ArrayStyle.CommaDelimited || this.tableConfig?.
|
|
3338
|
+
metaData.fieldType === FieldType.Array && (metaData.additional?.arrayStyle === ArrayStyle.CommaDelimited || this.tableConfig?.arrayDefaults?.arrayStyle === ArrayStyle.CommaDelimited)
|
|
3332
3339
|
? this.templates[FieldType.Array + .5]
|
|
3333
3340
|
:
|
|
3334
3341
|
this.templates[metaData.fieldType];
|
|
@@ -3565,7 +3572,7 @@ class ColumnBuilderComponent {
|
|
|
3565
3572
|
? this.state.getLinkInfo(this.metaData)()
|
|
3566
3573
|
:
|
|
3567
3574
|
this.metaData.fieldType === FieldType.Array
|
|
3568
|
-
? this.metaData.additional?.limit || this.tableConfig?.
|
|
3575
|
+
? this.metaData.additional?.limit || this.tableConfig?.arrayDefaults?.arrayStyle
|
|
3569
3576
|
: undefined;
|
|
3570
3577
|
}
|
|
3571
3578
|
furtherSetUp() {
|
|
@@ -3658,6 +3665,7 @@ class GenericTableComponent {
|
|
|
3658
3665
|
dataStore = inject(DataStore);
|
|
3659
3666
|
viewContainer = inject(ViewContainerRef);
|
|
3660
3667
|
transformCreator = inject(TransformCreator);
|
|
3668
|
+
smallFooter = 10;
|
|
3661
3669
|
$headerRow = viewChild(MatHeaderRowDef);
|
|
3662
3670
|
$footerRow = viewChild(MatFooterRowDef);
|
|
3663
3671
|
$table = viewChild(MatTable);
|
|
@@ -3906,16 +3914,27 @@ class GenericTableComponent {
|
|
|
3906
3914
|
}
|
|
3907
3915
|
return this.$rowHeight();
|
|
3908
3916
|
});
|
|
3917
|
+
$footerHeight = this.state.selectSignal(s => {
|
|
3918
|
+
const footerStyle = this.$footerRowStyle();
|
|
3919
|
+
switch (footerStyle) {
|
|
3920
|
+
case 'regular-footer':
|
|
3921
|
+
return this.$rowHeight();
|
|
3922
|
+
case 'small-footer':
|
|
3923
|
+
return `${this.smallFooter}px`;
|
|
3924
|
+
default:
|
|
3925
|
+
return '0px';
|
|
3926
|
+
}
|
|
3927
|
+
});
|
|
3909
3928
|
$stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
|
|
3910
3929
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3911
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], 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
|
|
3930
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], 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 #table\r\n [dataSource]=\"state.props().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=\"select-column\">\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\" class=\"select-column\">\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 class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></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 @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\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=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3912
3931
|
}
|
|
3913
3932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
3914
3933
|
type: Component,
|
|
3915
3934
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3916
3935
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
3917
3936
|
MatTooltipModule, AsyncPipe, FunctionPipe,
|
|
3918
|
-
], 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
|
|
3937
|
+
], 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 #table\r\n [dataSource]=\"state.props().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=\"select-column\">\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\" class=\"select-column\">\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 class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></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 @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\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=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"/>\r\n <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\r\n</mat-table>\r\n\r\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\r\n *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\r\n<mat-footer-row [style.height]=\"$footerHeight()\" [style.min-height]=\"$footerHeight()\"\r\n *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\r\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
|
|
3919
3938
|
}], ctorParameters: () => [], propDecorators: { trackBy: [{
|
|
3920
3939
|
type: Input
|
|
3921
3940
|
}], rows: [{
|
|
@@ -4386,7 +4405,7 @@ class PaginatorComponent {
|
|
|
4386
4405
|
</mat-paginator>
|
|
4387
4406
|
@if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
|
|
4388
4407
|
</div>
|
|
4389
|
-
`, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}
|
|
4408
|
+
`, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4390
4409
|
}
|
|
4391
4410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
4392
4411
|
type: Component,
|
|
@@ -4402,7 +4421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
4402
4421
|
</mat-paginator>
|
|
4403
4422
|
@if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
|
|
4404
4423
|
</div>
|
|
4405
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}
|
|
4424
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
|
|
4406
4425
|
}] });
|
|
4407
4426
|
const mapPaginationEventToCurrentPageDetails = (pageData) => ({
|
|
4408
4427
|
currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
|
|
@@ -4471,6 +4490,7 @@ class VirtualScrollContainer {
|
|
|
4471
4490
|
state = inject(TableStore);
|
|
4472
4491
|
dataStore = inject(DataStore);
|
|
4473
4492
|
viewport = viewChild(CdkVirtualScrollViewport);
|
|
4493
|
+
genericTable = contentChild(GenericTableComponent);
|
|
4474
4494
|
defaultOptions = new VirtualScrollOptions();
|
|
4475
4495
|
scrollStrategy = new TableVirtualScrollStrategy(this.computedRowHeight(), this.computedHeaderHeight());
|
|
4476
4496
|
$usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
|
|
@@ -4545,7 +4565,9 @@ class VirtualScrollContainer {
|
|
|
4545
4565
|
const rowHeight = this.computedRowHeight();
|
|
4546
4566
|
let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
|
|
4547
4567
|
virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
|
|
4568
|
+
amountOfVisibleItems = Math.min(amountOfVisibleItems, this.$dataLength());
|
|
4548
4569
|
let height = (rowHeight * amountOfVisibleItems);
|
|
4570
|
+
height += parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
4549
4571
|
if (!this.state.tableSettings().hideHeader) {
|
|
4550
4572
|
const headerHeight = this.computedHeaderHeight();
|
|
4551
4573
|
height += headerHeight;
|
|
@@ -4573,11 +4595,11 @@ class VirtualScrollContainer {
|
|
|
4573
4595
|
return headerHeight;
|
|
4574
4596
|
}
|
|
4575
4597
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4576
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
4598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
4577
4599
|
<cdk-virtual-scroll-viewport>
|
|
4578
4600
|
<ng-content/>
|
|
4579
4601
|
</cdk-virtual-scroll-viewport>
|
|
4580
|
-
|
|
4602
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i1$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], viewProviders: [
|
|
4581
4603
|
{
|
|
4582
4604
|
provide: VIRTUAL_SCROLL_STRATEGY,
|
|
4583
4605
|
useFactory: (c) => c.scrollStrategy,
|
|
@@ -4593,7 +4615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
4593
4615
|
<cdk-virtual-scroll-viewport>
|
|
4594
4616
|
<ng-content/>
|
|
4595
4617
|
</cdk-virtual-scroll-viewport>
|
|
4596
|
-
|
|
4618
|
+
`,
|
|
4597
4619
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4598
4620
|
standalone: true,
|
|
4599
4621
|
imports: [ScrollingModule],
|
|
@@ -4997,7 +5019,10 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
4997
5019
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
4998
5020
|
});
|
|
4999
5021
|
const $dataToShow = computed(() => dataSrc().slice($dataSize().start, $dataSize().end));
|
|
5000
|
-
effect(() =>
|
|
5022
|
+
effect(() => {
|
|
5023
|
+
const dataToShow = $dataToShow();
|
|
5024
|
+
untracked(() => this.data = dataToShow);
|
|
5025
|
+
});
|
|
5001
5026
|
}
|
|
5002
5027
|
connect() {
|
|
5003
5028
|
return super.connect();
|
|
@@ -5216,7 +5241,7 @@ class TableContainerComponent {
|
|
|
5216
5241
|
if (meta.fieldType === FieldType.Array) {
|
|
5217
5242
|
const additional = { ...meta.additional };
|
|
5218
5243
|
additional.arrayStyle = additional?.arrayStyle ?? ArrayDefaults.arrayStyle;
|
|
5219
|
-
additional.limit = additional.limit ?? this.config.
|
|
5244
|
+
additional.limit = additional.limit ?? this.config.arrayDefaults?.limit ?? ArrayDefaults.limit;
|
|
5220
5245
|
return { ...meta, additional };
|
|
5221
5246
|
}
|
|
5222
5247
|
return meta;
|
|
@@ -5239,11 +5264,11 @@ class TableContainerComponent {
|
|
|
5239
5264
|
};
|
|
5240
5265
|
$useVirtual = this.state.$isVirtual;
|
|
5241
5266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5242
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", groupHeaderHeight: "groupHeaderHeight", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { data: "data", selection$: "selection$", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customRows", predicate: MatRowDef }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", 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()) || 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()) {\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() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n
|
|
5267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", groupHeaderHeight: "groupHeaderHeight", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { data: "data", selection$: "selection$", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customRows", predicate: MatRowDef }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", 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()) || 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()) {\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() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div class=\"paginator\">\r\n <tb-paginator #tbPaginator [tableElRef]=\"tableElRef\" />\r\n\r\n <mat-icon [matTooltip]=\"$collapseFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapseFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\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 @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\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 (tableId) {\r\n <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n <mat-icon color=\"primary\">people</mat-icon>\r\n <span>Profiles</span>\r\n </button>\r\n <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n }\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".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%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}:host ::ng-deep .scrollable mat-table{overflow-x:auto}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["tableElRef"] }, { kind: "directive", type: i3$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5243
5268
|
}
|
|
5244
5269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
5245
5270
|
type: Component,
|
|
5246
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, 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()) || 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()) {\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() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n
|
|
5271
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, 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()) || 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()) {\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() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapseHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\r\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div class=\"paginator\">\r\n <tb-paginator #tbPaginator [tableElRef]=\"tableElRef\" />\r\n\r\n <mat-icon [matTooltip]=\"$collapseFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapseFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\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 @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\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 (tableId) {\r\n <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\r\n <mat-icon color=\"primary\">people</mat-icon>\r\n <span>Profiles</span>\r\n </button>\r\n <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\r\n }\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".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%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}:host ::ng-deep .scrollable mat-table{overflow-x:auto}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
|
|
5247
5272
|
}], propDecorators: { data: [{
|
|
5248
5273
|
type: Output
|
|
5249
5274
|
}], paginatorComponent: [{
|
|
@@ -5429,7 +5454,7 @@ class TableBuilder {
|
|
|
5429
5454
|
settings;
|
|
5430
5455
|
constructor(data, metaData, settings = new GeneralTableSettings()) {
|
|
5431
5456
|
this.settings = this.coerceSettingsToObservable(settings)
|
|
5432
|
-
.pipe(
|
|
5457
|
+
.pipe(defaultShareReplay());
|
|
5433
5458
|
this.data$ = this.coerceToObservable(data, this.settings)
|
|
5434
5459
|
.pipe(notNull(), defaultShareReplay());
|
|
5435
5460
|
this.metaData$ = metaData ?
|