@one-paragon/angular-utilities 0.0.19 → 0.0.20
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/esm2020/table-builder/classes/table-builder.mjs +2 -2
- package/esm2020/table-builder/components/column-builder/column-builder.component.mjs +12 -6
- package/esm2020/table-builder/components/gen-col-displayer/gen-col-displayer.component.mjs +3 -3
- package/esm2020/table-builder/components/generic-table/generic-table.component.mjs +39 -17
- package/esm2020/table-builder/components/generic-table/paginator.component.mjs +2 -2
- package/esm2020/table-builder/components/table-container/table-container.mjs +31 -5
- package/esm2020/table-builder/directives/resize-column.directive.mjs +4 -3
- package/esm2020/table-builder/interfaces/report-def.mjs +1 -1
- package/fesm2015/one-paragon-angular-utilities.mjs +81 -33
- package/fesm2015/one-paragon-angular-utilities.mjs.map +1 -1
- package/fesm2020/one-paragon-angular-utilities.mjs +83 -33
- package/fesm2020/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/components/generic-table/generic-table.component.d.ts +15 -7
- package/table-builder/components/table-container/table-container.d.ts +2 -0
- package/table-builder/interfaces/report-def.d.ts +5 -0
|
@@ -6,13 +6,14 @@ import { ComponentStore } from '@ngrx/component-store';
|
|
|
6
6
|
import * as i3$1 from '@angular/material/table';
|
|
7
7
|
import { MatColumnDef, MatTableDataSource, MatTable, MatTableModule, MatRowDef } from '@angular/material/table';
|
|
8
8
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
9
|
+
import * as _ from 'lodash';
|
|
9
10
|
import { flatten, merge, sumBy, orderBy, cloneDeep } from 'lodash';
|
|
11
|
+
import * as i10 from '@angular/cdk/drag-drop';
|
|
12
|
+
import { moveItemInArray, CDK_DROP_LIST, CdkDropList, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
|
|
10
13
|
import * as i1 from '@angular/common';
|
|
11
14
|
import { CommonModule, DatePipe, CurrencyPipe } from '@angular/common';
|
|
12
15
|
import { v4 } from 'uuid';
|
|
13
16
|
import update from 'immutability-helper';
|
|
14
|
-
import * as i8$2 from '@angular/cdk/drag-drop';
|
|
15
|
-
import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
|
|
16
17
|
import * as i4 from '@angular/material/icon';
|
|
17
18
|
import { MatIconModule } from '@angular/material/icon';
|
|
18
19
|
import * as i4$1 from '@angular/router';
|
|
@@ -34,7 +35,7 @@ import * as i8 from '@angular/material/datepicker';
|
|
|
34
35
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
35
36
|
import * as i4$3 from '@angular/material/input';
|
|
36
37
|
import { MatInputModule } from '@angular/material/input';
|
|
37
|
-
import * as
|
|
38
|
+
import * as i9 from '@angular/material/tooltip';
|
|
38
39
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
39
40
|
import * as i7$1 from '@ngrx/component';
|
|
40
41
|
import { ReactiveComponentModule } from '@ngrx/component';
|
|
@@ -1324,7 +1325,7 @@ class HeaderMenuComponent {
|
|
|
1324
1325
|
}
|
|
1325
1326
|
}
|
|
1326
1327
|
HeaderMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
1327
|
-
HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n\r\n <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' ></tb-in-list-filter>\r\n </ng-container>\r\n\r\n\r\n <ng-template #defaultFilter>\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n <mat-form-field stop-propagation class=\"example-full-width font\" style=\"padding: 0 16px\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n <mat-form-field class=\"auto-width\" stop-propagation style=\"padding: 0 16px\">\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n =</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n <div style=\"padding: 0 16px\">\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' : \r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["key"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i6.MatPrefix, selector: "[matPrefix]" }, { type: i6.MatLabel, selector: "mat-label" }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1328
|
+
HeaderMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: { filter: "filter", metaData: "metaData" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n\r\n <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' ></tb-in-list-filter>\r\n </ng-container>\r\n\r\n\r\n <ng-template #defaultFilter>\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n <mat-form-field stop-propagation class=\"example-full-width font\" style=\"padding: 0 16px\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n <mat-form-field class=\"auto-width\" stop-propagation style=\"padding: 0 16px\">\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n =</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n <div style=\"padding: 0 16px\">\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' : \r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["key"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i8.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i6.MatPrefix, selector: "[matPrefix]" }, { type: i6.MatLabel, selector: "mat-label" }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.MatSuffix, selector: "[matSuffix]" }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1328
1329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
1329
1330
|
type: Component,
|
|
1330
1331
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button disableRipple [matMenuTriggerFor]=\"menu\" style=\"height:16px;\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" [ngSwitch]=\"true\" (keydown.enter)=\"onEnter(myForm.value)\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"'header-column-' + metaData.key\" />\r\n <input type=\"hidden\" name=\"filterType\" [ngModel]=\"myFilterType\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"metaData.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"metaData.fieldType\" />\r\n\r\n <ng-container *ngIf=\"(myFilterType === FilterType.Or || myFilterType === FilterType.In); else defaultFilter\">\r\n <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue' ></tb-in-list-filter>\r\n </ng-container>\r\n\r\n\r\n <ng-template #defaultFilter>\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Link || metaData.fieldType === FieldType.String || metaData.fieldType === FieldType.Array || metaData.fieldType === FieldType.Unknown || metaData.fieldType === FieldType.PhoneNumber\">\r\n <mat-form-field stop-propagation class=\"example-full-width font\" style=\"padding: 0 16px\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{myFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matSuffix [matTooltip]=\"myFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" (click)=\"setStringFilterType()\">\r\n <mat-icon [ngClass]=\"{'chosen-icon': myFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency\">\r\n <mat-form-field class=\"auto-width\" stop-propagation style=\"padding: 0 16px\">\r\n <mat-label>{{myFilterType === FilterType.NumberEquals ? 'Equals...' : myFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberLessThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.NumberGreaterThan)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.NumberEquals)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n =</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Boolean\">\r\n <div style=\"padding: 0 16px\">\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group stop-propagation #ctrl=\"matRadioGroup\" #boolField='ngModel' class=\"font\" name=\"filterValue\" [ngModel]=\"myFilterValue\" >\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = true;\" [value]=\"true\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" (click)=\"myFilterValue = false\" [value]=\"false\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"metaData.fieldType === FieldType.Date\">\r\n <mat-form-field style=\"padding: 0 16px\" class=\"font auto-width\" stop-propagation >\r\n <span matPrefix>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrAfter)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <mat-icon (click)=\"setFilterType(FilterType.DateOnOrBefore)\" class=\"suffix-icons underline\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple>\r\n <span (click)=\"setFilterType(FilterType.DateIsOn)\" class=\"suffix-icons\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{myFilterType === FilterType.DateIsOn ? 'On...' : \r\n myFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle matSuffix [for]=\"calendar\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #calendar></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-template>\r\n\r\n <button mat-button (click)=\"onEnter(myForm.value)\" [disabled]=\"myForm.value.filterValue == undefined\" disableRipple>\r\n Apply\r\n </button>\r\n </ng-form>\r\n</mat-menu>\r\n", styles: ["input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}::ng-deep .form-field .mat-form-field-wrapper{padding-bottom:4px!important;padding-top:4px!important;margin-bottom:5px!important}.menu-icon{font-size:16px;line-height:16px!important;vertical-align:top!important}.search-icon{margin-right:16px;vertical-align:middle;height:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}::ng-deep .form-field.mat-form-field-appearance-outline .mat-form-field-infix{padding:5px 0;width:auto}::ng-deep .auto-width .mat-form-field-infix{width:auto}.suffix-icons{font-size:14px;margin-left:6px}mat-icon.chosen-icon.mat-icon.suffix-icons,.chosen-icon{font-size:20px;color:green}mat-icon.mat-icon.suffix-icons.underline{-webkit-text-decoration:underline .1px solid;text-decoration:underline .1px solid;transform:scaleX(.7)}\n"] }]
|
|
@@ -1380,7 +1381,7 @@ class ResizeColumnDirective {
|
|
|
1380
1381
|
widthInPixel: newColumnWidth,
|
|
1381
1382
|
tableSize: newTableWidth,
|
|
1382
1383
|
});
|
|
1383
|
-
}),
|
|
1384
|
+
}), defaultShareReplay());
|
|
1384
1385
|
this.store.setUserDefinedWidth(resizeColsData$.pipe(map(resizeData => ([{ key: this.key, widthInPixel: resizeData.widthInPixel }]))));
|
|
1385
1386
|
this.store.setTableWidth(resizeColsData$.pipe(map(resizeData => resizeData.tableSize)));
|
|
1386
1387
|
}
|
|
@@ -1513,10 +1514,14 @@ class ColumnBuilderComponent {
|
|
|
1513
1514
|
}
|
|
1514
1515
|
}
|
|
1515
1516
|
ColumnBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$1.MatTable }, { token: TableStore }, { token: TableTemplateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1516
|
-
ColumnBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColumnBuilderComponent, selector: "tb-column-builder", inputs: { metaData: "metaData", customCell: "customCell", data$: "data$" }, 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\">\n\n <ng-template #body let-element='element' >\n
|
|
1517
|
+
ColumnBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ColumnBuilderComponent, selector: "tb-column-builder", inputs: { metaData: "metaData", customCell: "customCell", data$: "data$" }, 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\">\n\n <ng-template #body let-element='element' >\n\n <mat-cell [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)'>\n <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }\">\n </ng-container>\n <span class=\"no-val\" *ngIf=\"\n !element.isGroupFooter &&\n metaData.fieldType !== FieldType.Expression &&\n (element[metaData.key] == null) &&\n !((customCell && customCell.TemplateRef) || metaData.template)\n \"> - </span>\n </mat-cell>\n\n </ng-template>\n\n <ng-template matHeaderCellDef #myHeader>\n\n <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\n <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \">\n </ng-container>\n </ng-container>\n\n <ng-template #header>\n\n <mat-header-cell cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref >\n <div class=\"header-container\">\n <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n <ng-template #headerWithoutMenu >\n <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n </ng-template>\n <tb-header-menu cdkDragHandle *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (!metaData.noFilter)\" #menu [metaData]='metaData' [filter]='filter' ></tb-header-menu>\n </div>\n </mat-header-cell>\n\n </ng-template>\n\n </ng-template>\n\n\n <ng-container *matCellDef=\"let element;\">\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\n </ng-container>\n </ng-container>\n\n <ng-template matFooterCellDef>\n <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\n <ng-container\n *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\n </ng-container>\n </ng-container>\n\n <ng-template #footer>\n <mat-footer-cell [styler]='styles.footer' *ngrxLet=\"data$ as data\">\n <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\n <span *ngSwitchCase=\"FieldType.Currency\">\n {{ data | columnTotal: metaData | currency }}\n </span>\n <span *ngSwitchCase=\"FieldType.Number\">\n {{ data | columnTotal: metaData | number }}\n </span>\n </span>\n </mat-footer-cell>\n </ng-template>\n </ng-template>\n</ng-container>\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;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i3$1.MatCellDef, selector: "[matCellDef]" }, { type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "spaceCase": SpaceCasePipe, "currency": i1.CurrencyPipe, "columnTotal": ColumnTotalPipe, "number": i1.DecimalPipe }, viewProviders: [
|
|
1518
|
+
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
1519
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1517
1520
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
|
|
1518
1521
|
type: Component,
|
|
1519
|
-
args: [{ selector: 'tb-column-builder', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1522
|
+
args: [{ selector: 'tb-column-builder', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
1523
|
+
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
1524
|
+
], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\">\n\n <ng-template #body let-element='element' >\n\n <mat-cell [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)'>\n <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }\">\n </ng-container>\n <span class=\"no-val\" *ngIf=\"\n !element.isGroupFooter &&\n metaData.fieldType !== FieldType.Expression &&\n (element[metaData.key] == null) &&\n !((customCell && customCell.TemplateRef) || metaData.template)\n \"> - </span>\n </mat-cell>\n\n </ng-template>\n\n <ng-template matHeaderCellDef #myHeader>\n\n <ng-container *ngIf=\"customCell?.columnDef?.headerCell;else header;\">\n <ng-container *ngTemplateOutlet=\"customCell.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \">\n </ng-container>\n </ng-container>\n\n <ng-template #header>\n\n <mat-header-cell cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref >\n <div class=\"header-container\">\n <div *ngIf=\"!metaData._internalNotUserDefined || !customCell?.columnDef?.cell ; else headerWithoutMenu\" mat-sort-header style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n <ng-template #headerWithoutMenu >\n <div *ngIf=\"metaData._internalNotUserDefined;\" style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n </ng-template>\n <tb-header-menu cdkDragHandle *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (!metaData.noFilter)\" #menu [metaData]='metaData' [filter]='filter' ></tb-header-menu>\n </div>\n </mat-header-cell>\n\n </ng-template>\n\n </ng-template>\n\n\n <ng-container *matCellDef=\"let element;\">\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\">\n </ng-container>\n </ng-container>\n\n <ng-template matFooterCellDef>\n <ng-container *ngIf=\"customCell?.columnDef?.footerCell;else footer\">\n <ng-container\n *ngTemplateOutlet=\"customCell.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\">\n </ng-container>\n </ng-container>\n\n <ng-template #footer>\n <mat-footer-cell [styler]='styles.footer' *ngrxLet=\"data$ as data\">\n <span *ngIf=\"data?.length && metaData.additional?.footer\" [ngSwitch]=\"metaData.fieldType\" class=\"bold\">\n <span *ngSwitchCase=\"FieldType.Currency\">\n {{ data | columnTotal: metaData | currency }}\n </span>\n <span *ngSwitchCase=\"FieldType.Number\">\n {{ data | columnTotal: metaData | number }}\n </span>\n </span>\n </mat-footer-cell>\n </ng-template>\n </ng-template>\n</ng-container>\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;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
1520
1525
|
}], ctorParameters: function () { return [{ type: TransformCreator }, { type: i3$1.MatTable }, { type: TableStore }, { type: TableTemplateService }]; }, propDecorators: { metaData: [{
|
|
1521
1526
|
type: Input
|
|
1522
1527
|
}], customCell: [{
|
|
@@ -1598,7 +1603,7 @@ PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
|
|
|
1598
1603
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
1599
1604
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
1600
1605
|
</mat-paginator>
|
|
1601
|
-
`, isInline: true, styles: [".mat-
|
|
1606
|
+
`, isInline: true, styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1602
1607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1603
1608
|
type: Component,
|
|
1604
1609
|
args: [{ selector: 'tb-paginator', template: `
|
|
@@ -1608,7 +1613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
1608
1613
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
1609
1614
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
1610
1615
|
</mat-paginator>
|
|
1611
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-
|
|
1616
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
1612
1617
|
}], ctorParameters: function () { return [{ type: TableStore }]; }, propDecorators: { dataSource: [{
|
|
1613
1618
|
type: Input
|
|
1614
1619
|
}], tableElRef: [{
|
|
@@ -1633,7 +1638,7 @@ const setPaginatorPageSize = (paginator) => (pageSize) => paginator._changePageS
|
|
|
1633
1638
|
const onPagiantorPageSizeChange = (paginator) => paginator.page.pipe(map(e => e.pageSize), distinct());
|
|
1634
1639
|
|
|
1635
1640
|
class GenericTableComponent {
|
|
1636
|
-
constructor(sort, state,
|
|
1641
|
+
constructor(sort, state, viewContainer, injector) {
|
|
1637
1642
|
this.sort = sort;
|
|
1638
1643
|
this.state = state;
|
|
1639
1644
|
this.viewContainer = viewContainer;
|
|
@@ -1641,6 +1646,9 @@ class GenericTableComponent {
|
|
|
1641
1646
|
this.SelectionColumn = false;
|
|
1642
1647
|
this.isSticky = false;
|
|
1643
1648
|
this.keys = [];
|
|
1649
|
+
this.rowDefArr = [];
|
|
1650
|
+
this.columns = [];
|
|
1651
|
+
this.myColumns = {};
|
|
1644
1652
|
this.trackByFunction = (index, item) => {
|
|
1645
1653
|
if (!item) {
|
|
1646
1654
|
return null;
|
|
@@ -1650,9 +1658,6 @@ class GenericTableComponent {
|
|
|
1650
1658
|
}
|
|
1651
1659
|
return item;
|
|
1652
1660
|
};
|
|
1653
|
-
this.rowDefArr = [];
|
|
1654
|
-
this.columns = [];
|
|
1655
|
-
this.myColumns = {};
|
|
1656
1661
|
this.initializeRowDefs = (defs) => {
|
|
1657
1662
|
this.rowDefArr.forEach(r => this.table.removeRowDef(r));
|
|
1658
1663
|
this.rowDefArr = defs;
|
|
@@ -1667,7 +1672,6 @@ class GenericTableComponent {
|
|
|
1667
1672
|
this.selection$ = this.selection.changed;
|
|
1668
1673
|
this.masterToggleChecked$ = this.selection$.pipe(map(() => this.selection.hasValue() && this.isAllSelected()));
|
|
1669
1674
|
this.masterToggleIndeterminate$ = this.selection$.pipe(map(() => this.selection.hasValue() && !this.isAllSelected()));
|
|
1670
|
-
this.defVal = 0;
|
|
1671
1675
|
this.tableWidth = this.state.getUserDefinedTableSize$.pipe(previousAndCurrent(0), map(([previousUserDefinedWidth, currentUserDefinedWidth]) => {
|
|
1672
1676
|
if (currentUserDefinedWidth) {
|
|
1673
1677
|
return ({ width: `${currentUserDefinedWidth}px` });
|
|
@@ -1681,8 +1685,13 @@ class GenericTableComponent {
|
|
|
1681
1685
|
}
|
|
1682
1686
|
}));
|
|
1683
1687
|
this.collapseFooter$ = this.state.state$.pipe(map(state => state.persistedTableSettings.collapseFooter));
|
|
1684
|
-
this.
|
|
1685
|
-
|
|
1688
|
+
this.injector = Injector.create({ providers: [
|
|
1689
|
+
{ provide: MatTable, useFactory: () => { return this.table; } },
|
|
1690
|
+
{ provide: CdkDropList, useFactory: () => { return this.dropList; } },
|
|
1691
|
+
], parent: injector });
|
|
1692
|
+
}
|
|
1693
|
+
drop(event) {
|
|
1694
|
+
this.state.setUserDefinedOrder({ newOrder: event.currentIndex, oldOrder: event.previousIndex });
|
|
1686
1695
|
}
|
|
1687
1696
|
ngOnChanges(changes) {
|
|
1688
1697
|
if (changes.rows && this.rows && this.myColumns.length) {
|
|
@@ -1708,7 +1717,15 @@ class GenericTableComponent {
|
|
|
1708
1717
|
}
|
|
1709
1718
|
createDataSource() {
|
|
1710
1719
|
this.dataSource = new GenericTableDataSource(this.data$.pipe(tap((d) => this.selection.clear())));
|
|
1711
|
-
this.
|
|
1720
|
+
if (!this.disableSort) {
|
|
1721
|
+
this.dataSource.sort = this.sort;
|
|
1722
|
+
}
|
|
1723
|
+
}
|
|
1724
|
+
isGroupHeader(_, row) {
|
|
1725
|
+
return row.isGroupHeader;
|
|
1726
|
+
}
|
|
1727
|
+
isGroupFooter(_, row) {
|
|
1728
|
+
return row.isGroupFooter;
|
|
1712
1729
|
}
|
|
1713
1730
|
addMetaData(column) {
|
|
1714
1731
|
let columnBuilder = this.myColumns[column.metaData.key];
|
|
@@ -1716,7 +1733,10 @@ class GenericTableComponent {
|
|
|
1716
1733
|
columnBuilder.metaData = column.metaData;
|
|
1717
1734
|
}
|
|
1718
1735
|
else {
|
|
1719
|
-
const component = this.viewContainer.createComponent(
|
|
1736
|
+
const component = this.viewContainer.createComponent(ColumnBuilderComponent, {
|
|
1737
|
+
index: 0,
|
|
1738
|
+
injector: this.injector
|
|
1739
|
+
});
|
|
1720
1740
|
component.instance.customCell = column.customCell;
|
|
1721
1741
|
component.instance.metaData = column.metaData;
|
|
1722
1742
|
component.instance.data$ = this.data$;
|
|
@@ -1735,12 +1755,12 @@ class GenericTableComponent {
|
|
|
1735
1755
|
this.selection.select(...this.dataSource.data);
|
|
1736
1756
|
}
|
|
1737
1757
|
}
|
|
1738
|
-
GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.
|
|
1739
|
-
GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GenericTableComponent, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<mat-table
|
|
1758
|
+
GenericTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
1759
|
+
GenericTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GenericTableComponent, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", 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 }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n>\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\" class=\"group-header\">\n {{row.groupHeaderName}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: lightgray;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n</div>\n", styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: i3$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i3$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i3$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i10.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"] }, { type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { type: i3$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i3$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i3$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i3$1.MatCellDef, selector: "[matCellDef]" }, { type: i3$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i3$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { type: i3$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { type: i3$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i3$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i3$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1740
1760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
1741
1761
|
type: Component,
|
|
1742
|
-
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-table
|
|
1743
|
-
}], ctorParameters: function () { return [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.
|
|
1762
|
+
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n #table\n [dataSource]=\"dataSource\"\n [trackBy]='trackByFunction'\n [styler]=\"tableWidth | async\"\n>\n\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" style=\"flex: 0 0 30px;\" >\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" style=\"flex: 0 0 30px;\">\n <mat-checkbox (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\">\n </mat-checkbox>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef style=\"flex: 0 0 30px;\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\n\n </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\" class=\"group-header\">\n {{row.groupHeaderName}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: lightgray;\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\"></mat-row>\n <mat-footer-row *matFooterRowDef=\"keys\"></mat-footer-row>\n\n</mat-table>\n\n<div class=\"flx-row-end sticky\">\n <tb-paginator #tbPaginator\n [dataSource]=\"dataSource\"\n [tableElRef]=\"tableElRef\"\n [data$]=\"data$\">\n </tb-paginator>\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n</div>\n", styles: [".mat-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0px;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-paginator-container{min-height:initial!important}:host::ng-deep .mat-paginator-container .mat-form-field-infix{padding:0!important}.group-header{font-weight:700;font-size:20px}: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)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
1763
|
+
}], ctorParameters: function () { return [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { data$: [{
|
|
1744
1764
|
type: Input
|
|
1745
1765
|
}], IndexColumn: [{
|
|
1746
1766
|
type: Input
|
|
@@ -1756,9 +1776,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
|
|
|
1756
1776
|
type: Input
|
|
1757
1777
|
}], columnInfos: [{
|
|
1758
1778
|
type: Input
|
|
1779
|
+
}], disableSort: [{
|
|
1780
|
+
type: Input
|
|
1759
1781
|
}], table: [{
|
|
1760
1782
|
type: ViewChild,
|
|
1761
1783
|
args: [MatTable, { static: true }]
|
|
1784
|
+
}], dropList: [{
|
|
1785
|
+
type: ViewChild,
|
|
1786
|
+
args: [CdkDropList, { static: true }]
|
|
1762
1787
|
}], tableElRef: [{
|
|
1763
1788
|
type: ViewChild,
|
|
1764
1789
|
args: ['table', { read: ElementRef }]
|
|
@@ -1847,10 +1872,10 @@ class GenColDisplayerComponent {
|
|
|
1847
1872
|
}
|
|
1848
1873
|
}
|
|
1849
1874
|
GenColDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
1850
|
-
GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GenColDisplayerComponent, selector: "tb-col-displayer", ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">visibility_off</mat-icon>\n </button>\n </span>\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n <button mat-menu-item>\n <div style=\"display: flex; flex-direction: row-reverse;\">\n <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </div>\n </button>\n <button mat-menu-item stop-propagation>\n <div style=\"display: flex; justify-content: space-between;\">\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon color=\"primary\">done_all</mat-icon>\n </button>\n </span>\n\n <span matTooltip=\"Hide all columns\">\n <button mat-icon-button (click)=\"unset(displayCols)\">\n <mat-icon color=\"primary\">cancel</mat-icon>\n </button>\n </span>\n </div>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation
|
|
1875
|
+
GenColDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GenColDisplayerComponent, selector: "tb-col-displayer", ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">visibility_off</mat-icon>\n </button>\n </span>\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n <button mat-menu-item>\n <div style=\"display: flex; flex-direction: row-reverse;\">\n <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </div>\n </button>\n <button mat-menu-item stop-propagation>\n <div style=\"display: flex; justify-content: space-between;\">\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon color=\"primary\">done_all</mat-icon>\n </button>\n </span>\n\n <span matTooltip=\"Hide all columns\">\n <button mat-icon-button (click)=\"unset(displayCols)\">\n <mat-icon color=\"primary\">cancel</mat-icon>\n </button>\n </span>\n </div>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y' >\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n *ngFor=\"let col of displayCols\">\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <p class=\"label\" style=\"display: flex;\">\n {{col.displayName || (col.key | spaceCase) }}\n </p>\n <span matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\n <button mat-icon-button>\n <mat-icon color=\"primary\">check_box</mat-icon>\n </button>\n </span>\n\n <ng-template #hidden >\n <span matTooltip=\"Show Column\" class=\"show-hide\">\n <button mat-icon-button>\n <mat-icon>indeterminate_check_box</mat-icon>\n </button>\n </span>\n </ng-template>\n\n </div>\n </button>\n </div>\n </mat-menu>\n</ng-container>\n", styles: [".show-hide{margin-left:15px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i10.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"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1851
1876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
1852
1877
|
type: Component,
|
|
1853
|
-
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">visibility_off</mat-icon>\n </button>\n </span>\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n <button mat-menu-item>\n <div style=\"display: flex; flex-direction: row-reverse;\">\n <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </div>\n </button>\n <button mat-menu-item stop-propagation>\n <div style=\"display: flex; justify-content: space-between;\">\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon color=\"primary\">done_all</mat-icon>\n </button>\n </span>\n\n <span matTooltip=\"Hide all columns\">\n <button mat-icon-button (click)=\"unset(displayCols)\">\n <mat-icon color=\"primary\">cancel</mat-icon>\n </button>\n </span>\n </div>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation
|
|
1878
|
+
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columns$ | async as displayCols\">\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">visibility_off</mat-icon>\n </button>\n </span>\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n <button mat-menu-item>\n <div style=\"display: flex; flex-direction: row-reverse;\">\n <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </div>\n </button>\n <button mat-menu-item stop-propagation>\n <div style=\"display: flex; justify-content: space-between;\">\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon color=\"primary\">done_all</mat-icon>\n </button>\n </span>\n\n <span matTooltip=\"Hide all columns\">\n <button mat-icon-button (click)=\"unset(displayCols)\">\n <mat-icon color=\"primary\">cancel</mat-icon>\n </button>\n </span>\n </div>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y' >\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\"\n *ngFor=\"let col of displayCols\">\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <p class=\"label\" style=\"display: flex;\">\n {{col.displayName || (col.key | spaceCase) }}\n </p>\n <span matTooltip=\"Hide Column\" class=\"show-hide\" *ngIf=\"col.isVisible; else hidden\">\n <button mat-icon-button>\n <mat-icon color=\"primary\">check_box</mat-icon>\n </button>\n </span>\n\n <ng-template #hidden >\n <span matTooltip=\"Show Column\" class=\"show-hide\">\n <button mat-icon-button>\n <mat-icon>indeterminate_check_box</mat-icon>\n </button>\n </span>\n </ng-template>\n\n </div>\n </button>\n </div>\n </mat-menu>\n</ng-container>\n", styles: [".show-hide{margin-left:15px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
1854
1879
|
}], ctorParameters: function () { return [{ type: TableStore }]; } });
|
|
1855
1880
|
|
|
1856
1881
|
class WrapperFilterStore extends ComponentStore {
|
|
@@ -1885,7 +1910,7 @@ class GenFilterDisplayerComponent {
|
|
|
1885
1910
|
}
|
|
1886
1911
|
}
|
|
1887
1912
|
GenFilterDisplayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
1888
|
-
GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n {{md.displayName || (md.key | spaceCase)}}\n </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.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}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: StopPropagationDirective, selector: "[stop-propagation]" }, { type:
|
|
1913
|
+
GenFilterDisplayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n {{md.displayName || (md.key | spaceCase)}}\n </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.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}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1889
1914
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
1890
1915
|
type: Component,
|
|
1891
1916
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n <button class=\"filter-labels\" *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n {{md.displayName || (md.key | spaceCase)}}\n </button>\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.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}\n"] }]
|
|
@@ -2197,7 +2222,7 @@ class FilterComponent {
|
|
|
2197
2222
|
}
|
|
2198
2223
|
}
|
|
2199
2224
|
FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
2200
|
-
FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterComponent, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "<mat-card class=\"mat-elevation-z5\" *ngIf=\"filter\">\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n <div class=\"row\" >\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button class=\"cancel-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n matTooltip=\"Close\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n </div>\n <div class=\"row\">\n <mat-form-field class=\"my-filter\" >\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [(ngModel)]=\"currentFilterType\" >\n <mat-option *ngFor=\"let kvp of filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n </ng-container>\n <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n </ng-container>\n </ng-container>\n\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n\n </div>\n <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n Apply\n </button>\n\n\n<ng-template #String>\n <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n </mat-form-field>\n <ng-container *ngIf=\"currentFilterType === FilterType.In\">\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n </ng-container>\n</ng-template>\n\n<ng-template #Boolean >\n <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\n <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n </mat-radio-group>\n </div>\n </div>\n</ng-template>\n\n <ng-template #Enum>\n <ng-container *ngIf='currentFilterType === FilterType.In' >\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n </ng-container>\n </ng-template>\n\n </form>\n</mat-card>\n", styles: [".filter-name{color:#6495ed;margin-right:30px;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.row{margin:0}.cancel-button{font-size:18px;font-weight:700}mat-radio-button{margin:5px}\n"], components: [{ type: i2$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["key"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type:
|
|
2225
|
+
FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterComponent, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "<mat-card class=\"mat-elevation-z5\" *ngIf=\"filter\">\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n <div class=\"row\" >\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button class=\"cancel-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n matTooltip=\"Close\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n </div>\n <div class=\"row\">\n <mat-form-field class=\"my-filter\" >\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [(ngModel)]=\"currentFilterType\" >\n <mat-option *ngFor=\"let kvp of filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n </ng-container>\n <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n </ng-container>\n </ng-container>\n\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n\n </div>\n <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n Apply\n </button>\n\n\n<ng-template #String>\n <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n </mat-form-field>\n <ng-container *ngIf=\"currentFilterType === FilterType.In\">\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n </ng-container>\n</ng-template>\n\n<ng-template #Boolean >\n <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\n <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n </mat-radio-group>\n </div>\n </div>\n</ng-template>\n\n <ng-template #Enum>\n <ng-container *ngIf='currentFilterType === FilterType.In' >\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n </ng-container>\n </ng-template>\n\n </form>\n</mat-card>\n", styles: [".filter-name{color:#6495ed;margin-right:30px;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.row{margin:0}.cancel-button{font-size:18px;font-weight:700}mat-radio-button{margin:5px}\n"], components: [{ type: i2$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i7$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { type: i7.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["key"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "spaceCase": SpaceCasePipe, "keyvalue": i1.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2201
2226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterComponent, decorators: [{
|
|
2202
2227
|
type: Component,
|
|
2203
2228
|
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"mat-elevation-z5\" *ngIf=\"filter\">\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n <div class=\"row\" >\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button class=\"cancel-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n matTooltip=\"Close\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n </div>\n <div class=\"row\">\n <mat-form-field class=\"my-filter\" >\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [(ngModel)]=\"currentFilterType\" >\n <mat-option *ngFor=\"let kvp of filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n </ng-container>\n <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n </ng-container>\n </ng-container>\n\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n\n </div>\n <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n Apply\n </button>\n\n\n<ng-template #String>\n <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n </mat-form-field>\n <ng-container *ngIf=\"currentFilterType === FilterType.In\">\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></lib-in-filter>\n </ng-container>\n</ng-template>\n\n<ng-template #Boolean >\n <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\n <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n </mat-radio-group>\n </div>\n </div>\n</ng-template>\n\n <ng-template #Enum>\n <ng-container *ngIf='currentFilterType === FilterType.In' >\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n </ng-container>\n </ng-template>\n\n </form>\n</mat-card>\n", styles: [".filter-name{color:#6495ed;margin-right:30px;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.row{margin:0}.cancel-button{font-size:18px;font-weight:700}mat-radio-button{margin:5px}\n"] }]
|
|
@@ -2657,7 +2682,7 @@ class FilterChipsComponent {
|
|
|
2657
2682
|
}
|
|
2658
2683
|
}
|
|
2659
2684
|
FilterChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
2660
|
-
FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterChipsComponent, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-list *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.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}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { type: i6$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type:
|
|
2685
|
+
FilterChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterChipsComponent, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-list *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.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}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { type: i6$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i6$2.MatChipRemove, selector: "[matChipRemove]" }], pipes: { "async": i1.AsyncPipe, "keyDisplay": KeyDisplayPipe, "formatFilterType": FormatFilterTypePipe, "formatFilterValue": FormatFilterValuePipe } });
|
|
2661
2686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
2662
2687
|
type: Component,
|
|
2663
2688
|
args: [{ selector: 'lib-filter-list', template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\n matTooltip=\"Close all Filters\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n\n\n <div *ngIf=\"currentFilters.length\" class=\"float\">\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\n </div>\n </div>\n\n <mat-chip-list *ngrxLet=\"filters$ as filters\">\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </mat-chip-list>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{font-size:24px;font-weight:700;height:initial;line-height:initial}.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}\n"] }]
|
|
@@ -2748,7 +2773,7 @@ class SortMenuComponent {
|
|
|
2748
2773
|
}
|
|
2749
2774
|
}
|
|
2750
2775
|
SortMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
2751
|
-
SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SortMenuComponent, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container *ngIf=\"sorted$ | async as sorted\">\n <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n <!-- Menu Trigger -->\n <span matTooltip=\"Sort\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">swap_vert</mat-icon>\n </button>\n </span>\n\n <!-- Menu -->\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\n <div mat-menu-item class=\"menu-button\">\n <div class=\"close-button-wrapper\">\n <span matTooltip=\"Close\">\n <mat-icon>close</mat-icon>\n </span>\n <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n <mat-icon>undo</mat-icon>\n </span>\n </div>\n </div>\n\n <!-- Apply Button -->\n <div class=\"apply-button-wrapper\">\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\n stop-propagation [class.apply-border]=\"dirty\"\n [disabled]=\"!dirty\">\n Apply\n <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n </button>\n </div>\n\n <!-- Default Sorting Text -->\n <div *ngIf=\"!sorted.length\" class=\"tip\" >\n Sorting List\n </div>\n\n <!-- Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #sortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n [cdkDropListData]=\"sorted\"\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n <!-- Menu Item Wrapper -->\n <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n <!-- Menu Item Headers -->\n <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\" class=\"sort-header\">Then By</span>\n\n <!-- Menu Item -->\n <div mat-menu-item cdkDrag class=\"menu-item\">\n <div class=\"sort-item\">\n <span class=\"sorted-name\">\n {{sort.displayName || (sort.active | spaceCase)}}\n <span class=\"direction-text\">{{sort.direction}}</span>\n </span>\n\n <!-- Sort Direction Buttons -->\n <div class=\"up-down-buttons-wrapper\">\n <button class=\"up-down-button up-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_upward\n </mat-icon>\n </button>\n\n <button class=\"up-down-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_downward\n </mat-icon>\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Default Not Sorted Text -->\n <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n Not Sorted List\n </div>\n <!-- Not Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #notSortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\n [cdkDropListData]=\"notSorted\"\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n <div mat-menu-item *ngFor=\"let sort of notSorted\" class=\"menu-item\" cdkDrag>\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n </div>\n </div>\n </mat-menu>\n </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type:
|
|
2776
|
+
SortMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: SortMenuComponent, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container *ngIf=\"sorted$ | async as sorted\">\n <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n <!-- Menu Trigger -->\n <span matTooltip=\"Sort\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">swap_vert</mat-icon>\n </button>\n </span>\n\n <!-- Menu -->\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\n <div mat-menu-item class=\"menu-button\">\n <div class=\"close-button-wrapper\">\n <span matTooltip=\"Close\">\n <mat-icon>close</mat-icon>\n </span>\n <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n <mat-icon>undo</mat-icon>\n </span>\n </div>\n </div>\n\n <!-- Apply Button -->\n <div class=\"apply-button-wrapper\">\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\n stop-propagation [class.apply-border]=\"dirty\"\n [disabled]=\"!dirty\">\n Apply\n <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n </button>\n </div>\n\n <!-- Default Sorting Text -->\n <div *ngIf=\"!sorted.length\" class=\"tip\" >\n Sorting List\n </div>\n\n <!-- Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #sortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n [cdkDropListData]=\"sorted\"\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n <!-- Menu Item Wrapper -->\n <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n <!-- Menu Item Headers -->\n <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\" class=\"sort-header\">Then By</span>\n\n <!-- Menu Item -->\n <div mat-menu-item cdkDrag class=\"menu-item\">\n <div class=\"sort-item\">\n <span class=\"sorted-name\">\n {{sort.displayName || (sort.active | spaceCase)}}\n <span class=\"direction-text\">{{sort.direction}}</span>\n </span>\n\n <!-- Sort Direction Buttons -->\n <div class=\"up-down-buttons-wrapper\">\n <button class=\"up-down-button up-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_upward\n </mat-icon>\n </button>\n\n <button class=\"up-down-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_downward\n </mat-icon>\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Default Not Sorted Text -->\n <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n Not Sorted List\n </div>\n <!-- Not Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #notSortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\n [cdkDropListData]=\"notSorted\"\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n <div mat-menu-item *ngFor=\"let sort of notSorted\" class=\"menu-item\" cdkDrag>\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n </div>\n </div>\n </mat-menu>\n </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: i10.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"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "spaceCase": SpaceCasePipe } });
|
|
2752
2777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
2753
2778
|
type: Component,
|
|
2754
2779
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n<ng-container *ngIf=\"sorted$ | async as sorted\">\n <ng-container *ngIf=\"notSorted$ | async as notSorted\">\n <!-- Menu Trigger -->\n <span matTooltip=\"Sort\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">swap_vert</mat-icon>\n </button>\n </span>\n\n <!-- Menu -->\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\n <div mat-menu-item class=\"menu-button\">\n <div class=\"close-button-wrapper\">\n <span matTooltip=\"Close\">\n <mat-icon>close</mat-icon>\n </span>\n <span *ngIf=\"dirty\" matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n <mat-icon>undo</mat-icon>\n </span>\n </div>\n </div>\n\n <!-- Apply Button -->\n <div class=\"apply-button-wrapper\">\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\n stop-propagation [class.apply-border]=\"dirty\"\n [disabled]=\"!dirty\">\n Apply\n <ng-container *ngIf=\"dirty\">Unsaved Changes</ng-container>\n </button>\n </div>\n\n <!-- Default Sorting Text -->\n <div *ngIf=\"!sorted.length\" class=\"tip\" >\n Sorting List\n </div>\n\n <!-- Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #sortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n [cdkDropListData]=\"sorted\"\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n <!-- Menu Item Wrapper -->\n <ng-container *ngFor=\"let sort of sorted;let i=index\">\n\n <!-- Menu Item Headers -->\n <span *ngIf=\"sorted.length > 1 && i === 0 \" class=\"description\" class=\"sort-header\">First By</span>\n <span *ngIf=\"sorted.length > 1 && i !== 0 \" class=\"description\" class=\"sort-header\">Then By</span>\n\n <!-- Menu Item -->\n <div mat-menu-item cdkDrag class=\"menu-item\">\n <div class=\"sort-item\">\n <span class=\"sorted-name\">\n {{sort.displayName || (sort.active | spaceCase)}}\n <span class=\"direction-text\">{{sort.direction}}</span>\n </span>\n\n <!-- Sort Direction Buttons -->\n <div class=\"up-down-buttons-wrapper\">\n <button class=\"up-down-button up-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_upward\n </mat-icon>\n </button>\n\n <button class=\"up-down-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_downward\n </mat-icon>\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Default Not Sorted Text -->\n <div *ngIf=\"!notSorted.length\" class=\"tip\" >\n Not Sorted List\n </div>\n <!-- Not Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #notSortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\n [cdkDropListData]=\"notSorted\"\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n <div mat-menu-item *ngFor=\"let sort of notSorted\" class=\"menu-item\" cdkDrag>\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n </div>\n </div>\n </mat-menu>\n </ng-container>\n</ng-container>\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-menu-item.menu-item,.mat-menu-item.menu-button{padding:0 3px;font-size:17px;font-weight:700;line-height:25px;height:30px}.mat-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c}.not-sorted-name{color:#93b1ea}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
|
|
@@ -2976,7 +3001,7 @@ class TableContainerComponent {
|
|
|
2976
3001
|
const filters$ = this.state.filters$.pipe(map(filters => Object.values(filters)));
|
|
2977
3002
|
const data = new DataFilter(this.inputFilters)
|
|
2978
3003
|
.appendFilters(filters$)
|
|
2979
|
-
.filterData(this.tableBuilder.getData$());
|
|
3004
|
+
.filterData(this.tableBuilder.getData$().pipe(switchMap(data => this.state.metaDataArray$.pipe(map(metaData => this.getData(data, metaData))))));
|
|
2980
3005
|
this.dataSubject.next(data);
|
|
2981
3006
|
}
|
|
2982
3007
|
exportToCsv() {
|
|
@@ -3000,7 +3025,7 @@ class TableContainerComponent {
|
|
|
3000
3025
|
}
|
|
3001
3026
|
InitializeColumns() {
|
|
3002
3027
|
const customCellMap = new Map(this.customCells.map(cc => [cc.customCell, cc]));
|
|
3003
|
-
this.state.setMetaData(this.tableBuilder.metaData$.pipe(
|
|
3028
|
+
this.state.setMetaData(this.tableBuilder.metaData$.pipe(map((mds) => {
|
|
3004
3029
|
mds = mds.map(this.mapMetaDatas);
|
|
3005
3030
|
return [
|
|
3006
3031
|
...mds,
|
|
@@ -3009,12 +3034,37 @@ class TableContainerComponent {
|
|
|
3009
3034
|
})));
|
|
3010
3035
|
this.myColumns$ = this.state.metaDataArray$.pipe(mapArray(metaData => ({ metaData, customCell: customCellMap.get(metaData.key) })));
|
|
3011
3036
|
}
|
|
3037
|
+
getData(data, metaData) {
|
|
3038
|
+
const meta = metaData.find(m => m.additional?.grouping?.groupBy);
|
|
3039
|
+
if (!meta) {
|
|
3040
|
+
return data;
|
|
3041
|
+
}
|
|
3042
|
+
this.disableSort = true;
|
|
3043
|
+
const grouped = _.groupBy(data, meta.key);
|
|
3044
|
+
const withHeadersAndFooters = Object.keys(grouped).map(k => {
|
|
3045
|
+
const header = {
|
|
3046
|
+
isGroupHeader: true,
|
|
3047
|
+
groupHeaderName: meta.additional?.grouping?.groupTitleFn ? meta.additional?.grouping?.groupTitleFn(k) : k
|
|
3048
|
+
};
|
|
3049
|
+
const sumCols = metaData.filter(md => md.additional?.grouping?.sum).map(md => md.key);
|
|
3050
|
+
const totals = sumCols.reduce((acc, key) => {
|
|
3051
|
+
acc[key] = _.sumBy(grouped[k], key);
|
|
3052
|
+
return acc;
|
|
3053
|
+
}, {});
|
|
3054
|
+
const footer = {
|
|
3055
|
+
isGroupFooter: true,
|
|
3056
|
+
...totals
|
|
3057
|
+
};
|
|
3058
|
+
return [header, grouped[k], footer];
|
|
3059
|
+
});
|
|
3060
|
+
return _.flattenDeep(withHeadersAndFooters);
|
|
3061
|
+
}
|
|
3012
3062
|
}
|
|
3013
3063
|
TableContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$2.Store }], target: i0.ɵɵFactoryTarget.Component });
|
|
3014
|
-
TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", SaveState: "SaveState", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], ngImport: i0, template: "<ng-container multiSort>\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-container>\n <ng-template #allMenu>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-template>\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </div>\n </div>\n\n <div style=\"clear: both;\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$'>\n </tb-generic-table>\n </div>\n\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"state.resetState();OnStateReset.next(null)\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n </ng-container>\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n <ng-container *ngFor='let key of stateKeys$ | async'>\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n </ng-container>\n </mat-menu>\n <div *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </div>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: FilterChipsComponent, selector: "lib-filter-list" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { type: SortMenuComponent, selector: "tb-sort-menu" }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type:
|
|
3064
|
+
TableContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TableContainerComponent, selector: "tb-table-container", inputs: { tableId: "tableId", SaveState: "SaveState", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], ngImport: i0, template: "<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-container>\n <ng-template #allMenu>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-template>\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </div>\n </div>\n\n <div style=\"clear: both;\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n </tb-generic-table>\n </div>\n\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"state.resetState();OnStateReset.next(null)\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n </ng-container>\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n <ng-container *ngFor='let key of stateKeys$ | async'>\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n </ng-container>\n </mat-menu>\n <div *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </div>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], components: [{ type: FilterChipsComponent, selector: "lib-filter-list" }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "disableSort"], outputs: ["selection$"] }, { type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { type: SortMenuComponent, selector: "tb-sort-menu" }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { type: i7$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StopPropagationDirective, selector: "[stop-propagation]" }, { type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3015
3065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
3016
3066
|
type: Component,
|
|
3017
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-container multiSort>\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-container>\n <ng-template #allMenu>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-template>\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </div>\n </div>\n\n <div style=\"clear: both;\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$'>\n </tb-generic-table>\n </div>\n\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"state.resetState();OnStateReset.next(null)\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n </ng-container>\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n <ng-container *ngFor='let key of stateKeys$ | async'>\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n </ng-container>\n </mat-menu>\n <div *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </div>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
3067
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], template: "<ng-container multiSort [matSortDisabled]=\"disableSort\">\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\n\n\n <div class=\"header-wrapper\">\n <div class=\"title\">\n <ng-content select=\".tb-header-title\"\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\n\n </ng-content>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-container>\n <ng-template #allMenu>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\n </mat-menu>\n </ng-template>\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n </div>\n </div>\n\n <div style=\"clear: both;\">\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\">\n </tb-generic-table>\n </div>\n\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"state.resetState();OnStateReset.next(null)\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n </ng-container>\n\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\n <button mat-menu-item clickEmitter #add='clickEmitter'>\n <mat-icon>add</mat-icon>\n <span>New</span>\n </button>\n <ng-container *ngFor='let key of stateKeys$ | async'>\n <button mat-menu-item (click)='setProfileState(key)'>\n <div style='display: flex; align-items: center; justify-content: space-between;'>\n <span style='display:flex;'>{{key}}</span>\n <span style='display:flex;'>\n <span style=\"width: 120px;\"></span>\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n </ng-container>\n </mat-menu>\n <div *opDialog='add'>\n <mat-form-field>\n <input style='width:90%' matInput #addedKey />\n </mat-form-field>\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\n [disabled]=\"!addedKey.value\">Add</button>\n </div>\n </ng-template>\n\n </ng-container>\n\n</ng-container>\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}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:#3f51b5}.collapse-icon.header{align-self:flex-end}.collapse-icon.footer{align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
3018
3068
|
}], ctorParameters: function () { return [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
|
|
3019
3069
|
type: Inject,
|
|
3020
3070
|
args: [TableBuilderConfigToken]
|
|
@@ -3435,7 +3485,7 @@ class TableBuilder {
|
|
|
3435
3485
|
this.data$ = data$;
|
|
3436
3486
|
this.data$ = this.data$.pipe(defaultShareReplay());
|
|
3437
3487
|
this.metaData$ = metaData$ ?
|
|
3438
|
-
metaData$.pipe(
|
|
3488
|
+
metaData$.pipe(defaultShareReplay()) :
|
|
3439
3489
|
data$.pipe(first(), map(data => this.createMetaData(data[0])), defaultShareReplay());
|
|
3440
3490
|
const s = isObservable(settings) ? settings : of(settings);
|
|
3441
3491
|
this.settings = s.pipe(map(sett => new GeneralTableSettings(sett)), defaultShareReplay());
|