@one-paragon/angular-utilities 0.3.7-beta.1 → 0.3.7-beta.2
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/table-builder.mjs +4 -3
- package/esm2022/table-builder/components/column-builder/column-builder.component.mjs +12 -5
- package/esm2022/table-builder/components/generic-table/generic-table.component.mjs +8 -21
- package/esm2022/table-builder/components/table-container/table-container.helpers/groupBy.helpers.mjs +3 -1
- package/esm2022/table-builder/components/table-container/table-container.mjs +3 -6
- package/esm2022/table-builder/interfaces/report-def.mjs +1 -1
- package/esm2022/utilities/directives/conditional-classes.directive.mjs +1 -1
- package/esm2022/utilities/directives/styler.mjs +25 -10
- package/fesm2022/one-paragon-angular-utilities.mjs +80 -74
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/components/column-builder/column-builder.component.d.ts +7 -3
- package/table-builder/components/generic-table/generic-table.component.d.ts +3 -3
- package/table-builder/components/table-container/table-container.d.ts +0 -2
- package/table-builder/interfaces/report-def.d.ts +9 -3
- package/utilities/directives/styler.d.ts +11 -4
|
@@ -9,7 +9,7 @@ import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgCl
|
|
|
9
9
|
import * as i1$4 from '@angular/material/sort';
|
|
10
10
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
11
11
|
import { v4 } from 'uuid';
|
|
12
|
-
import { merge, get, sumBy, orderBy, intersection,
|
|
12
|
+
import { merge, get, sumBy, difference, orderBy, intersection, groupBy, cloneDeep, set } from 'lodash';
|
|
13
13
|
import * as i1 from '@angular/cdk/table';
|
|
14
14
|
import * as i3 from '@angular/forms';
|
|
15
15
|
import { FormsModule, ControlContainer, NgForm, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -2248,18 +2248,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
2248
2248
|
|
|
2249
2249
|
class StylerDirective {
|
|
2250
2250
|
set styler(styles) {
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2251
|
+
const toApply = Object.entries(styles ?? {}).reduce((acc, [key, val]) => {
|
|
2252
|
+
if (typeof (val) === 'string') {
|
|
2253
|
+
acc[key] = val;
|
|
2254
|
+
this.el.nativeElement.style[key] = val;
|
|
2255
|
+
}
|
|
2256
|
+
else if (val?.condition === true || val?.condition(this.element)) {
|
|
2257
|
+
const value = typeof (val.value) === 'string' ? val.value : val?.value(this.element);
|
|
2258
|
+
acc[key] = value;
|
|
2259
|
+
this.el.nativeElement.style[key] = value;
|
|
2260
|
+
}
|
|
2261
|
+
return acc;
|
|
2262
|
+
}, {});
|
|
2263
|
+
Object.keys(this.stylesApplied).filter(key => !Object.keys(toApply).includes(key)).forEach(key => {
|
|
2264
|
+
this.renderer.removeStyle(this.el.nativeElement, key);
|
|
2265
|
+
});
|
|
2266
|
+
this.stylesApplied = toApply;
|
|
2256
2267
|
}
|
|
2257
2268
|
;
|
|
2258
|
-
constructor(el) {
|
|
2269
|
+
constructor(el, renderer) {
|
|
2259
2270
|
this.el = el;
|
|
2271
|
+
this.renderer = renderer;
|
|
2272
|
+
this.stylesApplied = {};
|
|
2260
2273
|
}
|
|
2261
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2262
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { styler: "styler" }, ngImport: i0 }); }
|
|
2274
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: StylerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2275
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.3", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { element: "element", styler: "styler" }, ngImport: i0 }); }
|
|
2263
2276
|
}
|
|
2264
2277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: StylerDirective, decorators: [{
|
|
2265
2278
|
type: Directive,
|
|
@@ -2267,7 +2280,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
2267
2280
|
selector: '[styler]',
|
|
2268
2281
|
standalone: true
|
|
2269
2282
|
}]
|
|
2270
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: {
|
|
2283
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { element: [{
|
|
2284
|
+
type: Input
|
|
2285
|
+
}], styler: [{
|
|
2271
2286
|
type: Input
|
|
2272
2287
|
}] } });
|
|
2273
2288
|
|
|
@@ -3287,6 +3302,12 @@ class ColumnBuilderComponent {
|
|
|
3287
3302
|
return previousUserDefinedWidth >= 0 && currentUserDefinedWidth == null;
|
|
3288
3303
|
}
|
|
3289
3304
|
};
|
|
3305
|
+
this.getTooltip = (element) => {
|
|
3306
|
+
if (typeof this.metaData.toolTip === 'string') {
|
|
3307
|
+
return this.metaData.toolTip;
|
|
3308
|
+
}
|
|
3309
|
+
return this.metaData.toolTip(element);
|
|
3310
|
+
};
|
|
3290
3311
|
}
|
|
3291
3312
|
getInnerTemplate() {
|
|
3292
3313
|
if (this.metaData.template)
|
|
@@ -3333,7 +3354,7 @@ class ColumnBuilderComponent {
|
|
|
3333
3354
|
}
|
|
3334
3355
|
}
|
|
3335
3356
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$4.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3336
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n <!-- header -->\r\n <ng-template matHeaderCellDef #myHeader>\r\n @if(customCell?.columnDef?.headerCell){\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \"/>\r\n } @else {\r\n <mat-header-cell cdkDrag [
|
|
3357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n <!-- header -->\r\n <ng-template matHeaderCellDef #myHeader>\r\n @if(customCell?.columnDef?.headerCell){\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \"/>\r\n } @else {\r\n <mat-header-cell cdkDrag [style]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref \r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData._internalNotUserDefined) {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showFilters$ | async)){\r\n <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n }\r\n \r\n </div>\r\n </mat-header-cell>\r\n }\r\n </ng-template>\r\n\r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context: { metaData: metaData, element: element, transform: transform, $implicit: element }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell){\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n } @else {\r\n <mat-footer-cell [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer){\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType) {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:white;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i1$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
|
|
3337
3358
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3338
3359
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3339
3360
|
}
|
|
@@ -3342,10 +3363,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
3342
3363
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
3343
3364
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3344
3365
|
], standalone: true, imports: [
|
|
3345
|
-
MatTableModule, NgTemplateOutlet,
|
|
3366
|
+
MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
|
|
3346
3367
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
|
|
3347
3368
|
AsyncPipe, MatTooltipModule, LetDirective, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
3348
|
-
], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n <!-- header -->\r\n <ng-template matHeaderCellDef #myHeader>\r\n @if(customCell?.columnDef?.headerCell){\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \"/>\r\n } @else {\r\n <mat-header-cell cdkDrag [
|
|
3369
|
+
], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n <!-- header -->\r\n <ng-template matHeaderCellDef #myHeader>\r\n @if(customCell?.columnDef?.headerCell){\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \"/>\r\n } @else {\r\n <mat-header-cell cdkDrag [style]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref \r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData._internalNotUserDefined) {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showFilters$ | async)){\r\n <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n }\r\n \r\n </div>\r\n </mat-header-cell>\r\n }\r\n </ng-template>\r\n\r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context: { metaData: metaData, element: element, transform: transform, $implicit: element }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell){\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n } @else {\r\n <mat-footer-cell [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer){\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType) {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:white;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
|
|
3349
3370
|
}], ctorParameters: () => [{ type: TransformCreator }, { type: i4$4.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { columnDef: [{
|
|
3350
3371
|
type: ViewChild,
|
|
3351
3372
|
args: [MatColumnDef]
|
|
@@ -3444,6 +3465,41 @@ class MatTableObservableDataSource extends MatTableDataSource {
|
|
|
3444
3465
|
}
|
|
3445
3466
|
}
|
|
3446
3467
|
|
|
3468
|
+
// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
|
|
3469
|
+
// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
|
|
3470
|
+
// So we need to calculate the matching tail of the sort array. Then sortsToRun will be the non-matching head.
|
|
3471
|
+
// But if any sorts were removed the only way to 'unsort' is to start by the original data and run all the existing sorts again, so 'sorts to run' will be all
|
|
3472
|
+
// the sorts.
|
|
3473
|
+
// We always pass allSorts to the container because if the table data changes all the sorts will need to be run.
|
|
3474
|
+
function updateSortState(previousSorts, currentSorts) {
|
|
3475
|
+
currentSorts = addInitSort(currentSorts);
|
|
3476
|
+
if (sortsRemoved(previousSorts.allSorts, currentSorts)) {
|
|
3477
|
+
return ({ sortsToRun: currentSorts, allSorts: currentSorts });
|
|
3478
|
+
}
|
|
3479
|
+
const sameTailLength = getSameTailLength(previousSorts.allSorts, currentSorts);
|
|
3480
|
+
const sortsToRun = currentSorts.slice(0, currentSorts.length - sameTailLength);
|
|
3481
|
+
return ({ sortsToRun, allSorts: currentSorts });
|
|
3482
|
+
}
|
|
3483
|
+
function addInitSort(sorts) {
|
|
3484
|
+
return [...sorts, { active: initIndexSymbol, direction: 'asc' }];
|
|
3485
|
+
}
|
|
3486
|
+
function sortsRemoved(previousSorts, currentSorts) {
|
|
3487
|
+
const previousSortedColumns = previousSorts.map(s => s.active);
|
|
3488
|
+
const currentSortedColumns = currentSorts.map(s => s.active);
|
|
3489
|
+
const sortsRemoved = !!difference(previousSortedColumns, currentSortedColumns).length;
|
|
3490
|
+
return sortsRemoved;
|
|
3491
|
+
}
|
|
3492
|
+
function getSameTailLength(previousSorts, currentSorts) {
|
|
3493
|
+
previousSorts = [...previousSorts].reverse();
|
|
3494
|
+
currentSorts = [...currentSorts].reverse();
|
|
3495
|
+
let indexOfChange = currentSorts.findIndex((s, i) => s.active !== previousSorts[i]?.active || s.direction !== previousSorts[i]?.direction);
|
|
3496
|
+
if (indexOfChange === -1)
|
|
3497
|
+
return indexOfChange = currentSorts.length;
|
|
3498
|
+
return indexOfChange;
|
|
3499
|
+
}
|
|
3500
|
+
const initIndexSymbol = Symbol('tb_init_index');
|
|
3501
|
+
const initialSortState = { sortsToRun: [], allSorts: [] };
|
|
3502
|
+
|
|
3447
3503
|
class GenericTableComponent {
|
|
3448
3504
|
drop(event) {
|
|
3449
3505
|
this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
|
|
@@ -3453,17 +3509,6 @@ class GenericTableComponent {
|
|
|
3453
3509
|
this.trackByFunction = (index, item) => item[trackBy];
|
|
3454
3510
|
}
|
|
3455
3511
|
}
|
|
3456
|
-
set grouped(grouped) {
|
|
3457
|
-
if (this.trackBy) {
|
|
3458
|
-
return;
|
|
3459
|
-
}
|
|
3460
|
-
if (grouped) {
|
|
3461
|
-
this.trackByFunction = (index, item) => item;
|
|
3462
|
-
}
|
|
3463
|
-
else {
|
|
3464
|
-
this.trackByFunction = (index, item) => index;
|
|
3465
|
-
}
|
|
3466
|
-
}
|
|
3467
3512
|
constructor(sort, state, viewContainer, transformCreator, injector) {
|
|
3468
3513
|
this.sort = sort;
|
|
3469
3514
|
this.state = state;
|
|
@@ -3476,9 +3521,8 @@ class GenericTableComponent {
|
|
|
3476
3521
|
this.rowDefArr = [];
|
|
3477
3522
|
this.columns = [];
|
|
3478
3523
|
this.myColumns = {};
|
|
3479
|
-
this.
|
|
3480
|
-
|
|
3481
|
-
};
|
|
3524
|
+
this.defaultTrackBy = (index, item) => item[initIndexSymbol];
|
|
3525
|
+
this.trackByFunction = this.defaultTrackBy;
|
|
3482
3526
|
this.initializeRowDefs = (defs) => {
|
|
3483
3527
|
this.rowDefArr.forEach(r => this.table.removeRowDef(r));
|
|
3484
3528
|
this.rowDefArr = defs;
|
|
@@ -3592,18 +3636,16 @@ class GenericTableComponent {
|
|
|
3592
3636
|
this.selection.select(...this.dataSource.data);
|
|
3593
3637
|
}
|
|
3594
3638
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$4.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: TransformCreator }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3595
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy",
|
|
3639
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: "trackBy", displayData$: "displayData$", data$: "data$", indexColumn: "indexColumn", selectionColumn: "selectionColumn", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: 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 [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon> \r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n <tb-paginator #tbPaginator\r\n [dataSource]=\"dataSource\"\r\n [tableElRef]=\"tableElRef\"\r\n [data$]=\"data$\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i4$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3596
3640
|
}
|
|
3597
3641
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
3598
3642
|
type: Component,
|
|
3599
3643
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3600
|
-
MatTableModule, DragDropModule,
|
|
3644
|
+
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
3601
3645
|
PaginatorComponent, MatTooltipModule, AsyncPipe, LetDirective, FunctionPipe
|
|
3602
|
-
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"trackByFunction\"\r\n [
|
|
3646
|
+
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n [trackBy]=\"trackByFunction\"\r\n [style]=\"tableWidth | async\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" *ngrxLet=\"(state.getIsExpanded | func : row.key : row.groupName ) as expanded\">\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded);\">\r\n @if(!expanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon> \r\n }\r\n </button>\r\n {{getTransform | func : row.key : row.groupHeaderDisplay}} ({{row.length}})\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n <tb-paginator #tbPaginator\r\n [dataSource]=\"dataSource\"\r\n [tableElRef]=\"tableElRef\"\r\n [data$]=\"data$\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
3603
3647
|
}], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: TransformCreator }, { type: i0.Injector }], propDecorators: { trackBy: [{
|
|
3604
3648
|
type: Input
|
|
3605
|
-
}], grouped: [{
|
|
3606
|
-
type: Input
|
|
3607
3649
|
}], displayData$: [{
|
|
3608
3650
|
type: Input
|
|
3609
3651
|
}], data$: [{
|
|
@@ -4075,41 +4117,6 @@ function filtersUpdated(previousFilterInfos, currentFilterInfos) {
|
|
|
4075
4117
|
}
|
|
4076
4118
|
const initialFilterState = { allFilters: [], onlyAddedFilters: undefined, predicateArr: [], filterInfoDict: {} };
|
|
4077
4119
|
|
|
4078
|
-
// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
|
|
4079
|
-
// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
|
|
4080
|
-
// So we need to calculate the matching tail of the sort array. Then sortsToRun will be the non-matching head.
|
|
4081
|
-
// But if any sorts were removed the only way to 'unsort' is to start by the original data and run all the existing sorts again, so 'sorts to run' will be all
|
|
4082
|
-
// the sorts.
|
|
4083
|
-
// We always pass allSorts to the container because if the table data changes all the sorts will need to be run.
|
|
4084
|
-
function updateSortState(previousSorts, currentSorts) {
|
|
4085
|
-
currentSorts = addInitSort(currentSorts);
|
|
4086
|
-
if (sortsRemoved(previousSorts.allSorts, currentSorts)) {
|
|
4087
|
-
return ({ sortsToRun: currentSorts, allSorts: currentSorts });
|
|
4088
|
-
}
|
|
4089
|
-
const sameTailLength = getSameTailLength(previousSorts.allSorts, currentSorts);
|
|
4090
|
-
const sortsToRun = currentSorts.slice(0, currentSorts.length - sameTailLength);
|
|
4091
|
-
return ({ sortsToRun, allSorts: currentSorts });
|
|
4092
|
-
}
|
|
4093
|
-
function addInitSort(sorts) {
|
|
4094
|
-
return [...sorts, { active: initIndexSymbol, direction: 'asc' }];
|
|
4095
|
-
}
|
|
4096
|
-
function sortsRemoved(previousSorts, currentSorts) {
|
|
4097
|
-
const previousSortedColumns = previousSorts.map(s => s.active);
|
|
4098
|
-
const currentSortedColumns = currentSorts.map(s => s.active);
|
|
4099
|
-
const sortsRemoved = !!difference(previousSortedColumns, currentSortedColumns).length;
|
|
4100
|
-
return sortsRemoved;
|
|
4101
|
-
}
|
|
4102
|
-
function getSameTailLength(previousSorts, currentSorts) {
|
|
4103
|
-
previousSorts = [...previousSorts].reverse();
|
|
4104
|
-
currentSorts = [...currentSorts].reverse();
|
|
4105
|
-
let indexOfChange = currentSorts.findIndex((s, i) => s.active !== previousSorts[i]?.active || s.direction !== previousSorts[i]?.direction);
|
|
4106
|
-
if (indexOfChange === -1)
|
|
4107
|
-
return indexOfChange = currentSorts.length;
|
|
4108
|
-
return indexOfChange;
|
|
4109
|
-
}
|
|
4110
|
-
const initIndexSymbol = Symbol('tb_init_index');
|
|
4111
|
-
const initialSortState = { sortsToRun: [], allSorts: [] };
|
|
4112
|
-
|
|
4113
4120
|
function getGroupedData(data, groupByKeys) {
|
|
4114
4121
|
return tbGroupBy(data, groupByKeys);
|
|
4115
4122
|
}
|
|
@@ -4133,6 +4140,7 @@ const tbGroupBy = (data, groupByKeys, parentGroupName) => {
|
|
|
4133
4140
|
padding: 1,
|
|
4134
4141
|
key: currentKey,
|
|
4135
4142
|
length: groupHeaders.reduce((acc, curr) => curr.length + acc, 0) + ((res[groupName] ?? []).length - groupHeaders.length),
|
|
4143
|
+
[initIndexSymbol]: uniqName,
|
|
4136
4144
|
});
|
|
4137
4145
|
});
|
|
4138
4146
|
};
|
|
@@ -4179,8 +4187,6 @@ class TableContainerComponent {
|
|
|
4179
4187
|
this.onSaveState = new EventEmitter();
|
|
4180
4188
|
this.state = inject(TableStore);
|
|
4181
4189
|
this.state$ = this.state.getSavableState().pipe(map(state => cloneDeep(state)), defaultShareReplay());
|
|
4182
|
-
this.groupedSubject = new ReplaySubject();
|
|
4183
|
-
this.grouped = this.groupedSubject.pipe(switchAll(), defaultShareReplay());
|
|
4184
4190
|
this.config = inject(TableBuilderConfigToken);
|
|
4185
4191
|
this.exportToCsvService = inject((ExportToCsvService));
|
|
4186
4192
|
this.wrapper = inject(TableWrapperDirective, { optional: true });
|
|
@@ -4292,7 +4298,6 @@ class TableContainerComponent {
|
|
|
4292
4298
|
return ({ mappedData: filterData(resultData, f.value.onlyAddedFilters || f.value.allFilters, !!f.value.onlyAddedFilters) });
|
|
4293
4299
|
}, initialDataState)).pipe(map(({ mappedData: resultData }) => resultData.filter(item => !item[tbNoShowSymbol])), defaultShareReplay());
|
|
4294
4300
|
const flatGrouped$ = combineLatest([sortedAndFilteredData$.pipe(timestamp$1()), this.state.groupByKeys$.pipe(timestamp$1()), this.state.expandedGroups$.pipe(timestamp$1())]).pipe(scan$1(updateGroupByState, initialGroupByState), map(({ displayData }) => displayData), defaultShareReplay());
|
|
4295
|
-
this.groupedSubject.next(flatGrouped$.pipe(map(maybeGrouped => !!maybeGrouped[0]?.isGroupHeader)));
|
|
4296
4301
|
this.displayDataSubject.next(flatGrouped$);
|
|
4297
4302
|
this.dataSubject.next(sortedAndFilteredData$);
|
|
4298
4303
|
}
|
|
@@ -4348,11 +4353,11 @@ class TableContainerComponent {
|
|
|
4348
4353
|
this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })));
|
|
4349
4354
|
}
|
|
4350
4355
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <div>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\" [indexColumn]='indexColumn'\r\n [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [groupHeaderTemplate]=\"groupHeaderTemplate\"
|
|
4356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <div>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\" [indexColumn]='indexColumn'\r\n [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["trackBy", "displayData$", "data$", "indexColumn", "selectionColumn", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i14.MatMenuModule }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4352
4357
|
}
|
|
4353
4358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
4354
4359
|
type: Component,
|
|
4355
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], 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$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <div>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\" [indexColumn]='indexColumn'\r\n [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [groupHeaderTemplate]=\"groupHeaderTemplate\"
|
|
4360
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], 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$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n <div>\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [displayData$]=\"displayData\" [indexColumn]='indexColumn'\r\n [selectionColumn]='selectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [groupHeaderTemplate]=\"groupHeaderTemplate\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
4356
4361
|
}], propDecorators: { genericTableComponent: [{
|
|
4357
4362
|
type: ViewChild,
|
|
4358
4363
|
args: [GenericTableComponent]
|
|
@@ -4521,8 +4526,9 @@ class TableBuilder {
|
|
|
4521
4526
|
}
|
|
4522
4527
|
getData$() {
|
|
4523
4528
|
return this.metaData$.pipe(switchMap(metaData => this.data$.pipe(mapArray((data, i) => {
|
|
4524
|
-
|
|
4525
|
-
|
|
4529
|
+
const cleanedRecord = this.cleanRecord(data, metaData);
|
|
4530
|
+
cleanedRecord[initIndexSymbol] = i;
|
|
4531
|
+
return cleanedRecord;
|
|
4526
4532
|
}))));
|
|
4527
4533
|
}
|
|
4528
4534
|
createMetaData(obj) {
|