@one-paragon/angular-utilities 2.1.2 → 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/one-paragon-angular-utilities.mjs +172 -154
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/components/table-container/table-container.d.ts +1 -1
- package/table-builder/directives/table-wrapper.directive.d.ts +1 -1
- package/table-builder/functions/sort-data-function.d.ts +1 -0
|
@@ -4,9 +4,9 @@ import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switch
|
|
|
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, pipe, concatMap, merge, delay, fromEvent, takeUntil as takeUntil$1, tap as tap$1, switchMap as switchMap$1, scan, timestamp } from 'rxjs';
|
|
6
6
|
import { toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
7
|
-
import { isFunction, merge as merge$1, get, sumBy, difference, groupBy, intersection, set } from 'lodash';
|
|
8
7
|
import * as i3$2 from '@angular/material/sort';
|
|
9
8
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
9
|
+
import { merge as merge$1, sumBy, difference, groupBy, intersection, set, get } from 'lodash';
|
|
10
10
|
import { CdkColumnDef } from '@angular/cdk/table';
|
|
11
11
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
12
12
|
import { MatSlideToggle } from '@angular/material/slide-toggle';
|
|
@@ -725,7 +725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
725
725
|
type: Injectable
|
|
726
726
|
}], ctorParameters: () => [] });
|
|
727
727
|
function createRequestor(req, optionsOrProject, options) {
|
|
728
|
-
const ops =
|
|
728
|
+
const ops = typeof (optionsOrProject) === 'function' ? options : optionsOrProject;
|
|
729
729
|
const injector = getInjector(ops);
|
|
730
730
|
return runInInjectionContext(injector, () => {
|
|
731
731
|
const requestStore = typeof (optionsOrProject) === 'function' ?
|
|
@@ -1794,6 +1794,89 @@ const BooleanFilterFuncs = {
|
|
|
1794
1794
|
[FilterType.IsNull]: isNull,
|
|
1795
1795
|
};
|
|
1796
1796
|
|
|
1797
|
+
function sortData(data, sorted) {
|
|
1798
|
+
return data.sort(compareT(sorted));
|
|
1799
|
+
}
|
|
1800
|
+
function filterData(data, filters, resetAll = false) {
|
|
1801
|
+
if (filters.length === 0) {
|
|
1802
|
+
if (resetAll) {
|
|
1803
|
+
for (let index = 0; index < data.length; index++) {
|
|
1804
|
+
const element = data[index];
|
|
1805
|
+
element[tbNoShowSymbol] = false;
|
|
1806
|
+
}
|
|
1807
|
+
}
|
|
1808
|
+
return data;
|
|
1809
|
+
}
|
|
1810
|
+
for (let index = 0; index < data.length; index++) {
|
|
1811
|
+
const element = data[index];
|
|
1812
|
+
const hide = !filters.every(filter => filter(element));
|
|
1813
|
+
if (hide || resetAll) {
|
|
1814
|
+
element[tbNoShowSymbol] = hide;
|
|
1815
|
+
}
|
|
1816
|
+
}
|
|
1817
|
+
return data;
|
|
1818
|
+
}
|
|
1819
|
+
const tbNoShowSymbol = Symbol('tb_no_show');
|
|
1820
|
+
function compareT(criteria) {
|
|
1821
|
+
const transforms = criteria.reduce((acc, c) => {
|
|
1822
|
+
acc[c.active] = {
|
|
1823
|
+
transform: c.sortBy ? c.sortBy : getFactory(c.active), nulls: c.nulls === 'first' ? -1 : 1
|
|
1824
|
+
};
|
|
1825
|
+
return acc;
|
|
1826
|
+
}, {});
|
|
1827
|
+
return function (a, b) {
|
|
1828
|
+
for (let index = 0; index < criteria.length; index++) {
|
|
1829
|
+
const c = criteria[index];
|
|
1830
|
+
const d = transforms[c.active];
|
|
1831
|
+
const nullValue = d.nulls;
|
|
1832
|
+
if (a == null) {
|
|
1833
|
+
if (b == null)
|
|
1834
|
+
return 0;
|
|
1835
|
+
return nullValue;
|
|
1836
|
+
}
|
|
1837
|
+
if (b == null)
|
|
1838
|
+
return -nullValue;
|
|
1839
|
+
const transform = d.transform;
|
|
1840
|
+
const aVal = transform(a);
|
|
1841
|
+
const bVal = transform(b);
|
|
1842
|
+
if (aVal == null) {
|
|
1843
|
+
if (bVal == null)
|
|
1844
|
+
return 0;
|
|
1845
|
+
return nullValue;
|
|
1846
|
+
}
|
|
1847
|
+
if (bVal == null)
|
|
1848
|
+
return -nullValue;
|
|
1849
|
+
if (aVal < bVal)
|
|
1850
|
+
return c.direction === 'asc' ? -1 : 1;
|
|
1851
|
+
if (aVal > bVal)
|
|
1852
|
+
return c.direction === 'asc' ? 1 : -1;
|
|
1853
|
+
}
|
|
1854
|
+
return 0;
|
|
1855
|
+
};
|
|
1856
|
+
}
|
|
1857
|
+
function getFactory(b) {
|
|
1858
|
+
if (typeof b !== 'string')
|
|
1859
|
+
return (a) => a[b];
|
|
1860
|
+
if (!b.includes('.'))
|
|
1861
|
+
return (a) => {
|
|
1862
|
+
if (!a)
|
|
1863
|
+
return a;
|
|
1864
|
+
return a[b];
|
|
1865
|
+
};
|
|
1866
|
+
const arr = b.split('.');
|
|
1867
|
+
return (a) => {
|
|
1868
|
+
let val = a;
|
|
1869
|
+
if (!a)
|
|
1870
|
+
return a;
|
|
1871
|
+
for (let index = 0; index < arr.length; index++) {
|
|
1872
|
+
val = val[arr[index]];
|
|
1873
|
+
if (typeof val !== 'object' && index + 1 < arr.length)
|
|
1874
|
+
return undefined;
|
|
1875
|
+
}
|
|
1876
|
+
return val;
|
|
1877
|
+
};
|
|
1878
|
+
}
|
|
1879
|
+
|
|
1797
1880
|
const filterFactoryMap = {
|
|
1798
1881
|
[FilterType.And]: (filter) => {
|
|
1799
1882
|
const filters = createFilterFuncs(filter.filterValue);
|
|
@@ -1848,7 +1931,7 @@ function createFilterFunc(filter) {
|
|
|
1848
1931
|
}
|
|
1849
1932
|
}
|
|
1850
1933
|
const cannotBeTrueForNull = !FalseyValueCanBeIncludedFilterTypes.includes(filter.filterType);
|
|
1851
|
-
const getter = filter.filterBy || (
|
|
1934
|
+
const getter = filter.filterBy || getFactory(filter.key);
|
|
1852
1935
|
return (rowObj) => {
|
|
1853
1936
|
const value = getter(rowObj);
|
|
1854
1937
|
return ((value == undefined) && cannotBeTrueForNull)
|
|
@@ -1953,6 +2036,8 @@ const mergeMeta = (orig, merge) => {
|
|
|
1953
2036
|
template: merge.template ?? orig.template,
|
|
1954
2037
|
toolTip: merge.toolTip ?? orig.toolTip,
|
|
1955
2038
|
useIcon: merge.useIcon ?? orig.useIcon,
|
|
2039
|
+
filterLogic: merge.filterLogic ?? orig.filterLogic,
|
|
2040
|
+
sortLogic: merge.sortLogic ?? orig.sortLogic
|
|
1956
2041
|
};
|
|
1957
2042
|
};
|
|
1958
2043
|
const initializeOrder = (state, mds) => {
|
|
@@ -3132,14 +3217,14 @@ class GenColDisplayerComponent {
|
|
|
3132
3217
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
3133
3218
|
}
|
|
3134
3219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols)\r\n{\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 {\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 }
|
|
3220
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols)\r\n{\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 {\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 {\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 }\r\n @else\r\n {\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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.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: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.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.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: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3136
3221
|
}
|
|
3137
3222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
3138
3223
|
type: Component,
|
|
3139
3224
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3140
3225
|
MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
3141
3226
|
DragDropModule, SpaceCasePipe
|
|
3142
|
-
], template: "@if($columns(); as displayCols)\r\n{\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 {\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 }
|
|
3227
|
+
], template: "@if($columns(); as displayCols)\r\n{\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 {\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 {\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 }\r\n @else\r\n {\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"] }]
|
|
3143
3228
|
}] });
|
|
3144
3229
|
|
|
3145
3230
|
class WrapperFilterStore extends ComponentStore {
|
|
@@ -3278,8 +3363,7 @@ function isPipe(o) {
|
|
|
3278
3363
|
return typeof (o.transform) === 'function';
|
|
3279
3364
|
}
|
|
3280
3365
|
function createTransformer(metaData, config, noIcons = false, forItem = false) {
|
|
3281
|
-
const
|
|
3282
|
-
const defaultFunc = nested ? (value) => get(value, metaData.key) : (value) => value[metaData.key];
|
|
3366
|
+
const defaultFunc = getFactory(metaData.key);
|
|
3283
3367
|
if (metaData.map && !forItem) {
|
|
3284
3368
|
return (value) => {
|
|
3285
3369
|
return metaData.map(value);
|
|
@@ -3555,7 +3639,7 @@ class ColumnHeaderMenuComponent {
|
|
|
3555
3639
|
if (this.$metaData().additional?.filterOptions?.filterableValues) {
|
|
3556
3640
|
return FilterType.In;
|
|
3557
3641
|
}
|
|
3558
|
-
switch (this.$
|
|
3642
|
+
switch (this.$fieldType()) {
|
|
3559
3643
|
case FieldType.String:
|
|
3560
3644
|
case FieldType.Link:
|
|
3561
3645
|
case FieldType.PhoneNumber:
|
|
@@ -4315,7 +4399,7 @@ class ExportToCsvService {
|
|
|
4315
4399
|
return res.join('\n');
|
|
4316
4400
|
};
|
|
4317
4401
|
metaToField = (meta, row) => {
|
|
4318
|
-
let val =
|
|
4402
|
+
let val = getFactory(meta.key)(row);
|
|
4319
4403
|
if (val == null && !meta.transform)
|
|
4320
4404
|
return val;
|
|
4321
4405
|
if (meta.transform && meta.fieldType !== FieldType.Expression) {
|
|
@@ -4378,9 +4462,15 @@ function createLinkCreator(metaData) {
|
|
|
4378
4462
|
const target = metaData.additional?.link?.target || '_blank';
|
|
4379
4463
|
const useRouterLink = metaData.additional?.link?.useRouterLink || false;
|
|
4380
4464
|
const hasRoute = !!metaData.additional?.link?.interpolatedRoute;
|
|
4465
|
+
const qp = useRouterLink ?
|
|
4466
|
+
metaData.additional.link.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
|
|
4467
|
+
map[key] = typeof value === 'function' ? value : parseInterpolated(value);
|
|
4468
|
+
return map;
|
|
4469
|
+
}, {})
|
|
4470
|
+
: undefined;
|
|
4381
4471
|
const routerLinkOptions = useRouterLink ? {
|
|
4382
4472
|
queryParams: (element) => metaData.additional.link.routerLinkOptions?.queryParams?.reduce((map, [key, value]) => {
|
|
4383
|
-
map[key] =
|
|
4473
|
+
map[key] = qp[key](element);
|
|
4384
4474
|
return map;
|
|
4385
4475
|
}, {}) ?? null,
|
|
4386
4476
|
fragment: metaData.additional.link?.routerLinkOptions?.fragment,
|
|
@@ -4391,7 +4481,7 @@ function createLinkCreator(metaData) {
|
|
|
4391
4481
|
if (hasRoute) {
|
|
4392
4482
|
const value = metaData.additional.link.interpolatedRoute;
|
|
4393
4483
|
return ({
|
|
4394
|
-
link:
|
|
4484
|
+
link: typeof value === 'function' ? (element) => value(element) : parseInterpolated(value),
|
|
4395
4485
|
target,
|
|
4396
4486
|
useRouterLink,
|
|
4397
4487
|
routerLinkOptions,
|
|
@@ -4410,10 +4500,33 @@ function createLinkCreator(metaData) {
|
|
|
4410
4500
|
}
|
|
4411
4501
|
}
|
|
4412
4502
|
const key = (metaData) => metaData.additional.link?.urlKey ?
|
|
4413
|
-
(
|
|
4503
|
+
getFactory(metaData.additional.link.urlKey)
|
|
4414
4504
|
:
|
|
4415
|
-
(
|
|
4416
|
-
|
|
4505
|
+
getFactory(metaData.key);
|
|
4506
|
+
function parseInterpolated(input) {
|
|
4507
|
+
// Match either content inside curly braces or content between curly braces
|
|
4508
|
+
const parts = input.split(/({[\w.]+})/);
|
|
4509
|
+
const result = parts
|
|
4510
|
+
.filter(part => part !== '') // Remove empty strings
|
|
4511
|
+
.map(part => {
|
|
4512
|
+
if (part.startsWith('{') && part.endsWith('}')) {
|
|
4513
|
+
// For interpolated values, remove the curly braces
|
|
4514
|
+
return {
|
|
4515
|
+
type: 'interpolated',
|
|
4516
|
+
val: getFactory(part.slice(1, -1))
|
|
4517
|
+
};
|
|
4518
|
+
}
|
|
4519
|
+
else {
|
|
4520
|
+
return {
|
|
4521
|
+
type: 'string',
|
|
4522
|
+
val: part
|
|
4523
|
+
};
|
|
4524
|
+
}
|
|
4525
|
+
});
|
|
4526
|
+
return function (val) {
|
|
4527
|
+
return result.map(part => part.type === 'string' ? part.val : part.val(val)).join('');
|
|
4528
|
+
};
|
|
4529
|
+
}
|
|
4417
4530
|
|
|
4418
4531
|
class TableBuilderStateStore extends ComponentStore {
|
|
4419
4532
|
constructor() {
|
|
@@ -4664,59 +4777,6 @@ function patchDirectiveFromState(directive, stateFilter) {
|
|
|
4664
4777
|
}
|
|
4665
4778
|
}
|
|
4666
4779
|
|
|
4667
|
-
function sortData(data, sorted) {
|
|
4668
|
-
return data.sort(compareT(sorted));
|
|
4669
|
-
}
|
|
4670
|
-
function filterData(data, filters, resetAll = false) {
|
|
4671
|
-
if (filters.length === 0) {
|
|
4672
|
-
if (resetAll) {
|
|
4673
|
-
for (let index = 0; index < data.length; index++) {
|
|
4674
|
-
const element = data[index];
|
|
4675
|
-
element[tbNoShowSymbol] = false;
|
|
4676
|
-
}
|
|
4677
|
-
}
|
|
4678
|
-
return data;
|
|
4679
|
-
}
|
|
4680
|
-
for (let index = 0; index < data.length; index++) {
|
|
4681
|
-
const element = data[index];
|
|
4682
|
-
const hide = !filters.every(filter => filter(element));
|
|
4683
|
-
if (hide || resetAll) {
|
|
4684
|
-
element[tbNoShowSymbol] = hide;
|
|
4685
|
-
}
|
|
4686
|
-
}
|
|
4687
|
-
return data;
|
|
4688
|
-
}
|
|
4689
|
-
const tbNoShowSymbol = Symbol('tb_no_show');
|
|
4690
|
-
function compareT(criteria) {
|
|
4691
|
-
return function (a, b) {
|
|
4692
|
-
for (let index = 0; index < criteria.length; index++) {
|
|
4693
|
-
const c = criteria[index];
|
|
4694
|
-
const nullValue = c.nulls === 'first' ? -1 : 1;
|
|
4695
|
-
if (a == null) {
|
|
4696
|
-
if (b == null)
|
|
4697
|
-
return 0;
|
|
4698
|
-
return nullValue;
|
|
4699
|
-
}
|
|
4700
|
-
if (b == null)
|
|
4701
|
-
return -nullValue;
|
|
4702
|
-
const aVal = c.sortBy ? c.sortBy(a) : a[c.active];
|
|
4703
|
-
const bVal = c.sortBy ? c.sortBy(b) : b[c.active];
|
|
4704
|
-
if (aVal == null) {
|
|
4705
|
-
if (bVal == null)
|
|
4706
|
-
return 0;
|
|
4707
|
-
return nullValue;
|
|
4708
|
-
}
|
|
4709
|
-
if (bVal == null)
|
|
4710
|
-
return -nullValue;
|
|
4711
|
-
if (aVal < bVal)
|
|
4712
|
-
return c.direction === 'asc' ? -1 : 1;
|
|
4713
|
-
if (aVal > bVal)
|
|
4714
|
-
return c.direction === 'asc' ? 1 : -1;
|
|
4715
|
-
}
|
|
4716
|
-
return 0;
|
|
4717
|
-
};
|
|
4718
|
-
}
|
|
4719
|
-
|
|
4720
4780
|
const _sortAndFilterData = (data, sortState, filterState) => combineLatest([
|
|
4721
4781
|
data.pipe(timestamp()),
|
|
4722
4782
|
sortState.pipe(timestamp()),
|
|
@@ -4758,103 +4818,58 @@ const createDataCleaners = (metadatas, mutate = false) => {
|
|
|
4758
4818
|
};
|
|
4759
4819
|
const createCleaners = (metadatas) => {
|
|
4760
4820
|
return metadatas.reduce((transforms, metaData) => {
|
|
4761
|
-
const
|
|
4821
|
+
const getter = getFactory(metaData.key);
|
|
4822
|
+
const setter = metaData.key.includes('.') ? (t, val) => set(t, metaData.key, val) : (t, val) => t[metaData.key] = val;
|
|
4762
4823
|
switch (metaData.fieldType) {
|
|
4763
4824
|
case FieldType.Currency:
|
|
4764
4825
|
case FieldType.Number: {
|
|
4765
|
-
const
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4770
|
-
|
|
4771
|
-
});
|
|
4772
|
-
}
|
|
4773
|
-
else {
|
|
4774
|
-
transforms.push((t) => {
|
|
4775
|
-
const val = t[notNestedKey];
|
|
4776
|
-
const num = Number(val);
|
|
4777
|
-
t[notNestedKey] = (isNaN(num) || val == null ? null : num);
|
|
4778
|
-
});
|
|
4779
|
-
}
|
|
4826
|
+
const transform = (t) => {
|
|
4827
|
+
const val = getter(t);
|
|
4828
|
+
const num = Number(val);
|
|
4829
|
+
setter(t, isNaN(num) || val == null ? null : num);
|
|
4830
|
+
};
|
|
4831
|
+
transforms.push(transform);
|
|
4780
4832
|
break;
|
|
4781
4833
|
}
|
|
4782
4834
|
case FieldType.Date: {
|
|
4783
|
-
const
|
|
4784
|
-
|
|
4785
|
-
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
|
|
4797
|
-
else {
|
|
4798
|
-
transforms.push((t) => {
|
|
4799
|
-
const val = t[notNestedKey];
|
|
4800
|
-
const date = Date.parse(val);
|
|
4801
|
-
if (isNaN(date)) {
|
|
4802
|
-
t[notNestedKey] = null;
|
|
4803
|
-
return;
|
|
4804
|
-
}
|
|
4805
|
-
const d = new Date(date);
|
|
4806
|
-
d.setHours(0, 0, 0, 0);
|
|
4807
|
-
t[notNestedKey] = d;
|
|
4808
|
-
});
|
|
4809
|
-
}
|
|
4835
|
+
const transform = (t) => {
|
|
4836
|
+
const val = getter(t);
|
|
4837
|
+
const date = Date.parse(val);
|
|
4838
|
+
let mappedDate;
|
|
4839
|
+
if (isNaN(date)) {
|
|
4840
|
+
mappedDate = null;
|
|
4841
|
+
}
|
|
4842
|
+
else {
|
|
4843
|
+
mappedDate = new Date(date);
|
|
4844
|
+
mappedDate.setHours(0, 0, 0, 0);
|
|
4845
|
+
}
|
|
4846
|
+
setter(t, mappedDate);
|
|
4847
|
+
};
|
|
4848
|
+
transforms.push(transform);
|
|
4810
4849
|
break;
|
|
4811
4850
|
}
|
|
4812
4851
|
case FieldType.DateTime: {
|
|
4813
|
-
const
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
set(t, metaData.key, dt);
|
|
4830
|
-
return;
|
|
4831
|
-
}
|
|
4832
|
-
dt.setSeconds(0, 0);
|
|
4833
|
-
set(t, metaData.key, dt);
|
|
4834
|
-
});
|
|
4835
|
-
}
|
|
4836
|
-
else {
|
|
4837
|
-
transforms.push((t) => {
|
|
4838
|
-
const val = t[notNestedKey];
|
|
4839
|
-
const dateTime = Date.parse(val);
|
|
4840
|
-
if (isNaN(dateTime)) {
|
|
4841
|
-
t[notNestedKey] = null;
|
|
4842
|
-
return;
|
|
4843
|
-
}
|
|
4844
|
-
const dt = new Date(dateTime);
|
|
4845
|
-
if (metaData.additional?.dateTimeOptions?.includeMilliseconds) {
|
|
4846
|
-
t[notNestedKey] = dt;
|
|
4847
|
-
return;
|
|
4848
|
-
}
|
|
4849
|
-
if (metaData.additional?.dateTimeOptions?.includeSeconds) {
|
|
4850
|
-
dt.setMilliseconds(0);
|
|
4851
|
-
t[notNestedKey] = dt;
|
|
4852
|
-
return;
|
|
4852
|
+
const transform = (t) => {
|
|
4853
|
+
const val = getter(t);
|
|
4854
|
+
const date = Date.parse(val);
|
|
4855
|
+
let mappedDate;
|
|
4856
|
+
if (isNaN(date)) {
|
|
4857
|
+
mappedDate = null;
|
|
4858
|
+
}
|
|
4859
|
+
else {
|
|
4860
|
+
mappedDate = new Date(date);
|
|
4861
|
+
if (!metaData.additional?.dateTimeOptions?.includeMilliseconds) {
|
|
4862
|
+
if (metaData.additional?.dateTimeOptions?.includeSeconds) {
|
|
4863
|
+
mappedDate.setMilliseconds(0);
|
|
4864
|
+
}
|
|
4865
|
+
else {
|
|
4866
|
+
mappedDate.setSeconds(0, 0);
|
|
4867
|
+
}
|
|
4853
4868
|
}
|
|
4854
|
-
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
|
|
4869
|
+
}
|
|
4870
|
+
setter(t, mappedDate);
|
|
4871
|
+
};
|
|
4872
|
+
transforms.push(transform);
|
|
4858
4873
|
}
|
|
4859
4874
|
}
|
|
4860
4875
|
return transforms;
|
|
@@ -5929,6 +5944,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
|
|
|
5929
5944
|
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer
|
|
5930
5945
|
], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n </div>\r\n @if(state.$groupByKeys().length){\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"l.menu()\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n\r\n <lib-table-header-menu #l/>\r\n\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; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n (selection)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div class=\"paginator\">\r\n <tb-paginator #tbPaginator />\r\n\r\n <mat-icon [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapsedFooter() ? '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\"/>}\r\n </ng-template>\r\n\r\n</ng-container>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
|
|
5931
5946
|
}] });
|
|
5947
|
+
function isFunction(a) {
|
|
5948
|
+
return typeof a === 'function';
|
|
5949
|
+
}
|
|
5932
5950
|
|
|
5933
5951
|
class TableBuilderModule {
|
|
5934
5952
|
static forRoot(config) {
|