@one-paragon/angular-utilities 0.3.4 → 0.3.6
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/components/column-builder/column-builder.component.mjs +7 -13
- package/esm2022/table-builder/components/generic-table/generic-table.component.mjs +11 -8
- package/esm2022/table-builder/components/number-filter/number-filter.component.mjs +3 -3
- package/esm2022/table-builder/components/table-container-filter/filter-list/filter-list.component.mjs +3 -3
- package/esm2022/table-builder/pipes/column-total.pipe.mjs +1 -2
- package/fesm2022/one-paragon-angular-utilities.mjs +19 -23
- 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 +4 -4
- package/table-builder/components/table-container/table-container-imports.d.ts +2 -2
- package/table-builder/pipes/column-total.pipe.d.ts +1 -1
|
@@ -8,7 +8,6 @@ export class ColumnTotalPipe {
|
|
|
8
8
|
case 'sum':
|
|
9
9
|
return sumBy(dataToCalculate, metaData.key);
|
|
10
10
|
}
|
|
11
|
-
return null;
|
|
12
11
|
}
|
|
13
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
14
13
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
|
|
@@ -20,4 +19,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
20
19
|
standalone: true
|
|
21
20
|
}]
|
|
22
21
|
}] });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLXRvdGFsLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXV0aWxpdGllcy9zcmMvdGFibGUtYnVpbGRlci9waXBlcy9jb2x1bW4tdG90YWwucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUVwRCxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sUUFBUSxDQUFDOztBQU03QixNQUFNLE9BQU8sZUFBZTtJQUMxQixTQUFTLENBQUMsSUFBVyxFQUFFLFFBQWtCO1FBQ3ZDLE1BQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhLElBQUksQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUE7UUFDOUUsUUFBUSxRQUFRLENBQUMsVUFBVyxDQUFDLE1BQU8sQ0FBQyxJQUFJLEVBQUU7WUFDekMsS0FBSyxLQUFLO2dCQUNWLE9BQU8sS0FBSyxDQUFDLGVBQWUsRUFBRSxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDN0M7SUFDSCxDQUFDOzhHQVBVLGVBQWU7NEdBQWYsZUFBZTs7MkZBQWYsZUFBZTtrQkFKM0IsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsYUFBYTtvQkFDakIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNZXRhRGF0YSB9IGZyb20gJy4uL2ludGVyZmFjZXMvcmVwb3J0LWRlZic7XHJcbmltcG9ydCB7c3VtQnl9IGZyb20gJ2xvZGFzaCc7XHJcblxyXG5AUGlwZSh7XHJcbiAgbmFtZTogJ2NvbHVtblRvdGFsJyxcclxuICAgIHN0YW5kYWxvbmU6IHRydWVcclxuICB9KVxyXG5leHBvcnQgY2xhc3MgQ29sdW1uVG90YWxQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XHJcbiAgdHJhbnNmb3JtKGRhdGE6IGFueVtdLCBtZXRhRGF0YTogTWV0YURhdGEpIHtcclxuICAgIGNvbnN0IGRhdGFUb0NhbGN1bGF0ZSA9IGRhdGEuZmlsdGVyKGQgPT4gIWQuaXNHcm91cEhlYWRlciAmJiAhZC5pc0dyb3VwRm9vdGVyKVxyXG4gICAgc3dpdGNoIChtZXRhRGF0YS5hZGRpdGlvbmFsIS5mb290ZXIhLnR5cGUpIHtcclxuICAgICAgY2FzZSAnc3VtJzpcclxuICAgICAgcmV0dXJuIHN1bUJ5KGRhdGFUb0NhbGN1bGF0ZSwgbWV0YURhdGEua2V5KTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19
|
|
@@ -2544,13 +2544,13 @@ class NumberFilterComponent {
|
|
|
2544
2544
|
this.FieldType = FieldType;
|
|
2545
2545
|
}
|
|
2546
2546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2547
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween
|
|
2547
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n <ng-container ngModelGroup=\"filterValue\" >\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n </mat-form-field>\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n </mat-form-field>\r\n </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2548
2548
|
}
|
|
2549
2549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
2550
2550
|
type: Component,
|
|
2551
2551
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
|
|
2552
2552
|
MatInputModule, FormsModule, InFilterComponent
|
|
2553
|
-
], template: "@if(CurrentFilterType !== FilterType.NumberBetween
|
|
2553
|
+
], template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n </mat-form-field>\r\n}\r\n@if(CurrentFilterType === FilterType.NumberBetween){\r\n <ng-container ngModelGroup=\"filterValue\" >\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n </mat-form-field>\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n </mat-form-field>\r\n </ng-container>\r\n}\r\n\r\n@if (CurrentFilterType === FilterType.In) {\r\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
|
|
2554
2554
|
}], propDecorators: { CurrentFilterType: [{
|
|
2555
2555
|
type: Input
|
|
2556
2556
|
}], info: [{
|
|
@@ -2860,14 +2860,14 @@ class FilterChipsComponent {
|
|
|
2860
2860
|
this.filterStore.clearAll();
|
|
2861
2861
|
}
|
|
2862
2862
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2863
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n @if (currentFilters.length) {\r\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n <div class=\"float\">\r\n @for (filter of currentFilters
|
|
2863
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n @if (currentFilters.length) {\r\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n <div class=\"float\">\r\n @for (filter of currentFilters; track filter.key) {\r\n <div class=\"filter\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n @for (filter of filters; track filter.key) {\r\n <mat-chip (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n @if (filters.length > 1) {\r\n <mat-chip (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2864
2864
|
}
|
|
2865
2865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
2866
2866
|
type: Component,
|
|
2867
2867
|
args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2868
2868
|
LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
2869
2869
|
MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
|
|
2870
|
-
], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n @if (currentFilters.length) {\r\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n <div class=\"float\">\r\n @for (filter of currentFilters
|
|
2870
|
+
], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n @if (currentFilters.length) {\r\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n <div class=\"float\">\r\n @for (filter of currentFilters; track filter.key) {\r\n <div class=\"filter\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n @for (filter of filters; track filter.key) {\r\n <mat-chip (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n @if (filters.length > 1) {\r\n <mat-chip (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
2871
2871
|
}] });
|
|
2872
2872
|
|
|
2873
2873
|
class HeaderMenuComponent {
|
|
@@ -2953,7 +2953,6 @@ class ColumnTotalPipe {
|
|
|
2953
2953
|
case 'sum':
|
|
2954
2954
|
return sumBy(dataToCalculate, metaData.key);
|
|
2955
2955
|
}
|
|
2956
|
-
return null;
|
|
2957
2956
|
}
|
|
2958
2957
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2959
2958
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.3", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
|
|
@@ -3287,7 +3286,7 @@ class ColumnBuilderComponent {
|
|
|
3287
3286
|
};
|
|
3288
3287
|
return styles;
|
|
3289
3288
|
}));
|
|
3290
|
-
this.
|
|
3289
|
+
this.showFilters$ = this.state.tableSettings$.pipe(map(settings => !(settings.hideColumnHeaderFilters || this.metaData.noFilter)));
|
|
3291
3290
|
}
|
|
3292
3291
|
ngAfterViewInit() {
|
|
3293
3292
|
this.outerTemplate = this.getOuterTemplate();
|
|
@@ -3301,26 +3300,20 @@ class ColumnBuilderComponent {
|
|
|
3301
3300
|
}
|
|
3302
3301
|
}
|
|
3303
3302
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$3.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "
|
|
3303
|
+
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 [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref \r\n [conditionalClasses]='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 ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (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 [styler]='styles.footer' *ngrxLet=\"data$ as data\" [conditionalClasses]='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: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.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: i6$1.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: [
|
|
3305
3304
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3306
3305
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3307
3306
|
}
|
|
3308
3307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
|
|
3309
3308
|
type: Component,
|
|
3310
|
-
args: [{
|
|
3309
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
3311
3310
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3312
3311
|
], standalone: true, imports: [
|
|
3313
3312
|
MatTableModule, NgTemplateOutlet, StylerDirective, ResizeColumnDirective,
|
|
3314
3313
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
|
|
3315
3314
|
AsyncPipe, MatTooltipModule, LetDirective, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
3316
|
-
], 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 [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref \r\n [conditionalClasses]='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) && (
|
|
3317
|
-
}], ctorParameters: () => [{ type: TransformCreator }, { type: i3$3.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: {
|
|
3318
|
-
type: Input
|
|
3319
|
-
}], customCell: [{
|
|
3320
|
-
type: Input
|
|
3321
|
-
}], data$: [{
|
|
3322
|
-
type: Input
|
|
3323
|
-
}], columnDef: [{
|
|
3315
|
+
], 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 [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref \r\n [conditionalClasses]='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 ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (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 [styler]='styles.footer' *ngrxLet=\"data$ as data\" [conditionalClasses]='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"] }]
|
|
3316
|
+
}], ctorParameters: () => [{ type: TransformCreator }, { type: i3$3.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { columnDef: [{
|
|
3324
3317
|
type: ViewChild,
|
|
3325
3318
|
args: [MatColumnDef]
|
|
3326
3319
|
}], bodyTemplate: [{
|
|
@@ -3495,10 +3488,13 @@ class GenericTableComponent {
|
|
|
3495
3488
|
}
|
|
3496
3489
|
}));
|
|
3497
3490
|
this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
|
|
3498
|
-
this.injector = Injector.create({
|
|
3499
|
-
|
|
3500
|
-
{ provide:
|
|
3501
|
-
|
|
3491
|
+
this.injector = Injector.create({
|
|
3492
|
+
providers: [
|
|
3493
|
+
{ provide: MatTable, useFactory: () => this.table },
|
|
3494
|
+
{ provide: CdkDropList, useFactory: () => this.dropList },
|
|
3495
|
+
],
|
|
3496
|
+
parent: injector
|
|
3497
|
+
});
|
|
3502
3498
|
}
|
|
3503
3499
|
ngOnChanges(changes) {
|
|
3504
3500
|
if (changes.rows && this.rows && this.myColumns.length) {
|
|
@@ -3550,7 +3546,7 @@ class GenericTableComponent {
|
|
|
3550
3546
|
});
|
|
3551
3547
|
}
|
|
3552
3548
|
addMetaData(column) {
|
|
3553
|
-
|
|
3549
|
+
const columnBuilder = this.myColumns[column.metaData.key];
|
|
3554
3550
|
if (columnBuilder) {
|
|
3555
3551
|
columnBuilder.metaData = column.metaData;
|
|
3556
3552
|
}
|
|
@@ -3577,14 +3573,14 @@ class GenericTableComponent {
|
|
|
3577
3573
|
this.selection.select(...this.dataSource.data);
|
|
3578
3574
|
}
|
|
3579
3575
|
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: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3580
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { data$: "data$", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", disableSort: "disableSort" }, 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 [styler]=\"tableWidth | async\"\r\n>\r\n\r\n
|
|
3576
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { data$: "data$", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", disableSort: "disableSort" }, 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 [styler]=\"tableWidth | async\"\r\n>\r\n\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 @if(!row.isGroupFooter){\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 }\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 <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 <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n <button mat-icon-button (click)=\"updateGroup(row);\">\r\n @if(!row.isExpanded){\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 {{row.groupHeaderName}}\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-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\" />\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: i3$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3581
3577
|
}
|
|
3582
3578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
3583
3579
|
type: Component,
|
|
3584
3580
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3585
3581
|
MatTableModule, DragDropModule, StylerDirective, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
3586
3582
|
PaginatorComponent, MatTooltipModule, AsyncPipe
|
|
3587
|
-
], 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 [styler]=\"tableWidth | async\"\r\n>\r\n\r\n
|
|
3583
|
+
], 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 [styler]=\"tableWidth | async\"\r\n>\r\n\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 @if(!row.isGroupFooter){\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 }\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 <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 <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n <button mat-icon-button (click)=\"updateGroup(row);\">\r\n @if(!row.isExpanded){\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 {{row.groupHeaderName}}\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-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\" />\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"] }]
|
|
3588
3584
|
}], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
|
|
3589
3585
|
type: Input
|
|
3590
3586
|
}], indexColumn: [{
|