@saydar/table-builder 1.0.15-beta.2 → 1.0.16-beta.0
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.
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Directive, NgModule, Injectable, InjectionToken, Pipe, HostListener, Component, EventEmitter, Output, ContentChildren, Inject, ChangeDetectionStrategy, ViewChild, Injector, ElementRef, Optional, inject } from '@angular/core';
|
|
3
|
-
import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, last, takeUntil, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1,
|
|
2
|
+
import { Input, Directive, NgModule, Injectable, InjectionToken, Pipe, HostListener, Component, EventEmitter, Output, ContentChildren, Inject, ChangeDetectionStrategy, ViewChild, Injector, ElementRef, Optional, signal, inject } from '@angular/core';
|
|
3
|
+
import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, last, takeUntil, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1, withLatestFrom, mergeAll, scan as scan$1, distinctUntilChanged } from 'rxjs/operators';
|
|
4
4
|
import * as i3$3 from 'rxjs';
|
|
5
5
|
import { isObservable, Subject, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap as concatMap$1, merge, delay, switchMap as switchMap$1, scan, fromEvent, asyncScheduler, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, from } from 'rxjs';
|
|
6
6
|
import { ComponentStore } from '@ngrx/component-store';
|
|
7
|
-
import * as i4$
|
|
7
|
+
import * as i4$2 from '@angular/material/table';
|
|
8
8
|
import { MatColumnDef, MatTableDataSource, MatTable, MatTableModule, MatRowDef } from '@angular/material/table';
|
|
9
9
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
10
10
|
import * as _ from 'lodash';
|
|
@@ -15,11 +15,11 @@ import * as i2 from '@angular/common';
|
|
|
15
15
|
import { CommonModule, DatePipe, CurrencyPipe, AsyncPipe } from '@angular/common';
|
|
16
16
|
import * as i1 from '@angular/material/dialog';
|
|
17
17
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
18
|
-
import * as i5$
|
|
18
|
+
import * as i5$3 from '@angular/material/slide-toggle';
|
|
19
19
|
import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
20
20
|
import { v4 } from 'uuid';
|
|
21
21
|
import update from 'immutability-helper';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i5 from '@angular/material/icon';
|
|
23
23
|
import { MatIconModule } from '@angular/material/icon';
|
|
24
24
|
import * as i3 from '@angular/router';
|
|
25
25
|
import { RouterModule } from '@angular/router';
|
|
@@ -29,17 +29,17 @@ import * as i6 from '@angular/material/tooltip';
|
|
|
29
29
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
30
30
|
import * as i1$1 from '@angular/material/sort';
|
|
31
31
|
import { MatSortModule, MatSort } from '@angular/material/sort';
|
|
32
|
-
import * as
|
|
32
|
+
import * as i4$1 from '@angular/material/menu';
|
|
33
33
|
import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
34
34
|
import * as i3$1 from '@angular/material/select';
|
|
35
35
|
import { MatSelectModule } from '@angular/material/select';
|
|
36
36
|
import * as i4 from '@angular/material/datepicker';
|
|
37
37
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
38
|
-
import * as i5 from '@angular/material/radio';
|
|
38
|
+
import * as i5$1 from '@angular/material/radio';
|
|
39
39
|
import { MatRadioModule } from '@angular/material/radio';
|
|
40
|
-
import * as i5$
|
|
40
|
+
import * as i5$2 from '@angular/material/button';
|
|
41
41
|
import { MatButtonModule } from '@angular/material/button';
|
|
42
|
-
import * as i8$
|
|
42
|
+
import * as i8$1 from '@angular/material/input';
|
|
43
43
|
import { MatInputModule } from '@angular/material/input';
|
|
44
44
|
import * as i2$1 from '@angular/forms';
|
|
45
45
|
import { NG_VALUE_ACCESSOR, NgForm, ControlContainer, FormsModule } from '@angular/forms';
|
|
@@ -65,9 +65,9 @@ import { MatSidenavModule } from '@angular/material/sidenav';
|
|
|
65
65
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
66
66
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
67
67
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
68
|
-
import * as
|
|
68
|
+
import * as i4$3 from '@angular/material/chips';
|
|
69
69
|
import { MatChipsModule } from '@angular/material/chips';
|
|
70
|
-
import * as i8$
|
|
70
|
+
import * as i8$2 from '@angular/material/button-toggle';
|
|
71
71
|
import * as i3$4 from '@ngrx/store';
|
|
72
72
|
import { createSelector, createAction, props, select, createReducer, on, StoreModule, createFeatureSelector, Store } from '@ngrx/store';
|
|
73
73
|
import * as i1$3 from '@ngrx/effects';
|
|
@@ -1701,7 +1701,48 @@ class TableStore extends ComponentStore {
|
|
|
1701
1701
|
this.hideColumn = this.updater((state, key) => ({
|
|
1702
1702
|
...state,
|
|
1703
1703
|
hiddenKeys: [...state.hiddenKeys.filter(k => k !== key), key],
|
|
1704
|
+
sorted: state.sorted.filter(s => s.active !== key),
|
|
1704
1705
|
}));
|
|
1706
|
+
this.showColumnAt = this.updater((state, payload) => {
|
|
1707
|
+
const { key, newOrder } = payload;
|
|
1708
|
+
const hiddenKeys = state.hiddenKeys.filter(k => k !== key);
|
|
1709
|
+
const viewable = orderViewableMetaData({ ...state, hiddenKeys })
|
|
1710
|
+
.map(m => m.key)
|
|
1711
|
+
.filter(k => k !== key);
|
|
1712
|
+
const insertAt = Math.max(0, Math.min(newOrder, viewable.length));
|
|
1713
|
+
viewable.splice(insertAt, 0, key);
|
|
1714
|
+
const newViewableOrder = viewable.reduce((acc, k, i) => {
|
|
1715
|
+
acc[k] = i;
|
|
1716
|
+
return acc;
|
|
1717
|
+
}, {});
|
|
1718
|
+
const userDefinedOrder = { ...state.userDefined.order, ...newViewableOrder };
|
|
1719
|
+
return { ...state, hiddenKeys, userDefined: { ...state.userDefined, order: userDefinedOrder } };
|
|
1720
|
+
});
|
|
1721
|
+
this.cycleColumnSort = this.updater((state, key) => {
|
|
1722
|
+
const idx = state.sorted.findIndex(s => s.active === key);
|
|
1723
|
+
if (idx === -1) {
|
|
1724
|
+
return { ...state, sorted: [{ active: key, direction: 'asc' }, ...state.sorted] };
|
|
1725
|
+
}
|
|
1726
|
+
if (state.sorted[idx].direction === 'asc') {
|
|
1727
|
+
const next = state.sorted.map((s, i) => i === idx ? { ...s, direction: 'desc' } : s);
|
|
1728
|
+
return { ...state, sorted: next };
|
|
1729
|
+
}
|
|
1730
|
+
return { ...state, sorted: state.sorted.filter((_, i) => i !== idx) };
|
|
1731
|
+
});
|
|
1732
|
+
// Reorder a column within the visible columns (excludes user-hidden columns from the index space).
|
|
1733
|
+
// Hidden columns stay in their existing slots; only visible columns get rearranged.
|
|
1734
|
+
this.reorderVisibleColumn = this.updater((state, payload) => {
|
|
1735
|
+
const { previousVisibleIndex, currentVisibleIndex } = payload;
|
|
1736
|
+
const allViewable = orderViewableMetaData(state).map(m => m.key);
|
|
1737
|
+
const hiddenSet = new Set(state.hiddenKeys);
|
|
1738
|
+
const visibleSeq = allViewable.filter(k => !hiddenSet.has(k));
|
|
1739
|
+
const newVisibleSeq = [...visibleSeq];
|
|
1740
|
+
moveItemInArray(newVisibleSeq, previousVisibleIndex, currentVisibleIndex);
|
|
1741
|
+
let vi = 0;
|
|
1742
|
+
const newAll = allViewable.map(k => hiddenSet.has(k) ? k : newVisibleSeq[vi++]);
|
|
1743
|
+
const newOrder = newAll.reduce((acc, k, i) => { acc[k] = i; return acc; }, {});
|
|
1744
|
+
return { ...state, userDefined: { ...state.userDefined, order: newOrder } };
|
|
1745
|
+
});
|
|
1705
1746
|
this.resetState = this.updater((state) => {
|
|
1706
1747
|
const hiddenColumns = Object.values(state.metaData)
|
|
1707
1748
|
.filter(md => md.fieldType === FieldType.Hidden)
|
|
@@ -2075,7 +2116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2075
2116
|
|
|
2076
2117
|
class InitializationComponent {
|
|
2077
2118
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2078
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: InitializationComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "currencyTemplate", first: true, predicate: ["currency"], descendants: true, static: true }, { propertyName: "arrayTemplate", first: true, predicate: ["array"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link let-element='element' let-metaData='metaData' let-transform='transform'>\n <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\n</ng-template>\n\n<ng-template #imageUrl let-element='element' let-metaData='metaData'>\n <span>\n <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n </span>\n</ng-template>\n\n<ng-template #array let-element='element' let-metaData='metaData'>\n <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\n <span>{{ transform | func : element }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\n <mat-icon>{{ transform | func : element }}</mat-icon>\n</ng-template>\n", dependencies: [{ kind: "component", type:
|
|
2119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: InitializationComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "currencyTemplate", first: true, predicate: ["currency"], descendants: true, static: true }, { propertyName: "arrayTemplate", first: true, predicate: ["array"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link let-element='element' let-metaData='metaData' let-transform='transform'>\n <tb-link-column [element]=\"element\" [metaData]=\"metaData\" [transform]=\"transform\"></tb-link-column>\n</ng-template>\n\n<ng-template #imageUrl let-element='element' let-metaData='metaData'>\n <span>\n <img src=\"{{element[metaData.key]}}\" height=\"75px\" width=\"75px\" />\n </span>\n</ng-template>\n\n<ng-template #array let-element='element' let-metaData='metaData'>\n <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>\n</ng-template>\n\n<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >\n <span>{{ transform | func : element }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >\n <mat-icon>{{ transform | func : element }}</mat-icon>\n</ng-template>\n", dependencies: [{ kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ArrayColumnComponent, selector: "tb-array-column", inputs: ["array", "metaData"] }, { kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["metaData", "element", "transform"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
|
|
2079
2120
|
}
|
|
2080
2121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
2081
2122
|
type: Component,
|
|
@@ -2281,11 +2322,11 @@ class HeaderMenuComponent {
|
|
|
2281
2322
|
}
|
|
2282
2323
|
}
|
|
2283
2324
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: HeaderMenuComponent, isStandalone: false, 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 class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [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)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\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)\" class=\"tb-header-filter\">\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' >\r\n </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=\"font auto-width\">\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()\" class=\"header-filter-icon-button\">\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>\r\n \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 class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n <span class=\"suffix-icons\"\r\n >\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>\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 || metaData.fieldType === FieldType.DateTime\">\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n <span class=\"suffix-icons underline\"> =</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 class=\"date-toggle header-filter-icon-button\" 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}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.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}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2325
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: HeaderMenuComponent, isStandalone: false, 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 class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [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)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon class=\"tb-icon-primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon class=\"tb-icon-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)\" class=\"tb-header-filter\">\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' >\r\n </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=\"font auto-width\">\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 (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n <mat-icon class=\"tb-icon-primary\" [class.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>\r\n \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 class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n <span class=\"suffix-icons\"\r\n >\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>\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 || metaData.fieldType === FieldType.DateTime\">\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n <span class=\"suffix-icons underline\"> =</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 class=\"date-toggle header-filter-icon-button\" 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}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.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}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:var(--tb-chosen-icon-color, green)}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2285
2326
|
}
|
|
2286
2327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
2287
2328
|
type: Component,
|
|
2288
|
-
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [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)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon
|
|
2329
|
+
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [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)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon class=\"tb-icon-primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n <button mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon class=\"tb-icon-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)\" class=\"tb-header-filter\">\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' >\r\n </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=\"font auto-width\">\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 (click)=\"setStringFilterType()\" class=\"header-filter-icon-button\">\r\n <mat-icon class=\"tb-icon-primary\" [class.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>\r\n \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 class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberLessThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberLessThan }\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberGreaterThan)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberGreaterThan }\" >\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.NumberEquals)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.NumberEquals }\">\r\n <span class=\"suffix-icons\"\r\n >\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>\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 || metaData.fieldType === FieldType.DateTime\">\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrAfter)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrAfter }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateOnOrBefore)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateOnOrBefore }\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" (click)=\"setFilterType(FilterType.DateIsOn)\"\r\n [ngClass]=\"{'chosen-icon': myFilterType === FilterType.DateIsOn }\">\r\n <span class=\"suffix-icons underline\"> =</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 class=\"date-toggle header-filter-icon-button\" 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}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.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}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button.chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:var(--tb-chosen-icon-color, green)}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
2289
2330
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
|
|
2290
2331
|
type: Input
|
|
2291
2332
|
}], metaData: [{
|
|
@@ -2476,8 +2517,8 @@ class ColumnBuilderComponent {
|
|
|
2476
2517
|
this.metaData.click(element, key);
|
|
2477
2518
|
}
|
|
2478
2519
|
}
|
|
2479
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$
|
|
2480
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: ColumnBuilderComponent, isStandalone: false, 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 <mat-cell [matTooltip]=\"metaData.toolTip ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [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 }; Injector: injector\">\n </ng-container>\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\" cdkDragHandle>\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\n *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\n </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
|
|
2520
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i4$2.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: ColumnBuilderComponent, isStandalone: false, 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 <mat-cell [matTooltip]=\"metaData.toolTip ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [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 }; Injector: injector\">\n </ng-container>\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\" cdkDragHandle>\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\n *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\n </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:var(--mat-app-background-color, white);border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:var(--tb-drag-handle-color, lightblue);cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i9.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }], viewProviders: [
|
|
2481
2522
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
2482
2523
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2483
2524
|
}
|
|
@@ -2485,8 +2526,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2485
2526
|
type: Component,
|
|
2486
2527
|
args: [{ selector: 'tb-column-builder', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
2487
2528
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
2488
|
-
], standalone: false, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\n\n <ng-template #body let-element='element' >\n <mat-cell [matTooltip]=\"metaData.toolTip ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [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 }; Injector: injector\">\n </ng-container>\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\" cdkDragHandle>\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\n *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\n </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
|
|
2489
|
-
}], ctorParameters: () => [{ type: TransformCreator }, { type: i4$
|
|
2529
|
+
], standalone: false, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\n\n <ng-template #body let-element='element' >\n <mat-cell [matTooltip]=\"metaData.toolTip ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [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 }; Injector: injector\">\n </ng-container>\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\" cdkDragHandle>\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\n *ngIf=\"(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async);\" #menu [metaData]='metaData' [filter]='filter' >\n </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:var(--mat-app-background-color, white);border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:var(--tb-drag-handle-color, lightblue);cursor:move;margin-right:9px}\n"] }]
|
|
2530
|
+
}], ctorParameters: () => [{ type: TransformCreator }, { type: i4$2.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { metaData: [{
|
|
2490
2531
|
type: Input
|
|
2491
2532
|
}], customCell: [{
|
|
2492
2533
|
type: Input
|
|
@@ -2596,7 +2637,7 @@ class PaginatorComponent {
|
|
|
2596
2637
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 250, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2597
2638
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
2598
2639
|
</mat-paginator>
|
|
2599
|
-
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color
|
|
2640
|
+
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-menu-container-color, white)}:host::ng-deep mat-paginator{background-color:inherit}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2600
2641
|
}
|
|
2601
2642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
2602
2643
|
type: Component,
|
|
@@ -2607,7 +2648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2607
2648
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 250, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2608
2649
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
2609
2650
|
</mat-paginator>
|
|
2610
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".mat-mdc-row:nth-child(odd){background-color
|
|
2651
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-menu-container-color, white)}:host::ng-deep mat-paginator{background-color:inherit}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"] }]
|
|
2611
2652
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { dataSource: [{
|
|
2612
2653
|
type: Input
|
|
2613
2654
|
}], tableElRef: [{
|
|
@@ -2780,11 +2821,11 @@ class GenericTableComponent {
|
|
|
2780
2821
|
this.selection.select(...this.dataSource.data);
|
|
2781
2822
|
}
|
|
2782
2823
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$1.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2783
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: " <mat-table\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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color
|
|
2824
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableComponent, isStandalone: false, selector: "tb-generic-table", inputs: { data$: "data$", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey", disableSort: "disableSort" }, outputs: { paginatorChange: "paginatorChange", selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: " <mat-table\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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-menu-container-color, white)}:host::ng-deep mat-paginator{background-color:inherit}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2784
2825
|
}
|
|
2785
2826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
2786
2827
|
type: Component,
|
|
2787
|
-
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color
|
|
2828
|
+
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 (paginatorChangeEmitter)=\"paginatorChange.emit()\">\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\n\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-menu-container-color, white)}:host::ng-deep mat-paginator{background-color:inherit}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"] }]
|
|
2788
2829
|
}], ctorParameters: () => [{ type: i1$1.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
|
|
2789
2830
|
type: Input
|
|
2790
2831
|
}], IndexColumn: [{
|
|
@@ -2832,11 +2873,11 @@ class GenericTableVsComponent extends GenericTableComponent {
|
|
|
2832
2873
|
}
|
|
2833
2874
|
}
|
|
2834
2875
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2835
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color
|
|
2876
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenericTableVsComponent, isStandalone: false, selector: "tb-generic-table-vs", usesInheritance: true, ngImport: i0, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-menu-container-color, white)}:host::ng-deep mat-paginator{background-color:inherit}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$2.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i4$2.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i4$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i4$2.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i4$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4$2.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i13.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"], outputs: ["paginatorChangeEmitter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2836
2877
|
}
|
|
2837
2878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenericTableVsComponent, decorators: [{
|
|
2838
2879
|
type: Component,
|
|
2839
|
-
args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color
|
|
2880
|
+
args: [{ selector: 'tb-generic-table-vs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: " <cdk-virtual-scroll-viewport tvsItemSize class=\"tb-virtual-scroll-viewport\">\n\n <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\">\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\">\n <mat-checkbox *ngIf=\"!row.isGroupFooter\"\n (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>\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 </ng-container>\n\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\n <button mat-icon-button (click)=\"updateGroup(row);\">\n <mat-icon *ngIf=\"!row.isExpanded\">chevron_right</mat-icon>\n <mat-icon *ngIf=\"row.isExpanded\">expand_more</mat-icon>\n </button>\n {{row.groupHeaderName}}\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngIf=\"showHeader$ | async\">\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\"></mat-header-row>\n </ng-container>\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\"></mat-row>\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" class=\"group-header-row\" style=\"background-color: white;\"></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 </cdk-virtual-scroll-viewport>\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\n", styles: [".mat-mdc-row:nth-child(odd){background-color:var(--tb-row-stripe-bg, #cdeefe)}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:var(--mat-menu-container-color, white)}:host::ng-deep mat-paginator{background-color:inherit}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"] }]
|
|
2840
2881
|
}] });
|
|
2841
2882
|
|
|
2842
2883
|
// here is how to use it
|
|
@@ -2920,11 +2961,11 @@ class GenColDisplayerComponent {
|
|
|
2920
2961
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
2921
2962
|
}
|
|
2922
2963
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2923
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: GenColDisplayerComponent, isStandalone: false, selector: "tb-col-displayer", ngImport: i0, template: "@if (columns$ | async; as displayCols) {\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon class=\"tb-icon-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 <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </button>\n\n <button mat-menu-item stop-propagation>\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon class=\"tb-icon-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 class=\"tb-icon-primary\">cancel</mat-icon>\n </button>\n </span>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\n @for (col of displayCols; track col.key) {\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\" [matTooltip]=\"col.displayName || (col.key | spaceCase)\">\n @if (col.isVisible) {\n <button mat-icon-button class=\"show-hide\">\n <mat-icon class=\"tb-icon-primary\">check_box</mat-icon>\n </button>\n } @else {\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n <mat-icon>indeterminate_check_box</mat-icon>\n </button>\n }\n <p class=\"label\">\n {{col.displayName || (col.key | spaceCase) }}\n </p>\n </div>\n </button>\n }\n </div>\n </mat-menu>\n}\n", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:var(--tb-filter-name-color, cornflowerblue);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2924
2965
|
}
|
|
2925
2966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
2926
2967
|
type: Component,
|
|
2927
|
-
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "
|
|
2968
|
+
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (columns$ | async; as displayCols) {\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon class=\"tb-icon-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 <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </button>\n\n <button mat-menu-item stop-propagation>\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon class=\"tb-icon-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 class=\"tb-icon-primary\">cancel</mat-icon>\n </button>\n </span>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation cdkDropListLockAxis='y'>\n @for (col of displayCols; track col.key) {\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\" [matTooltip]=\"col.displayName || (col.key | spaceCase)\">\n @if (col.isVisible) {\n <button mat-icon-button class=\"show-hide\">\n <mat-icon class=\"tb-icon-primary\">check_box</mat-icon>\n </button>\n } @else {\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n <mat-icon>indeterminate_check_box</mat-icon>\n </button>\n }\n <p class=\"label\">\n {{col.displayName || (col.key | spaceCase) }}\n </p>\n </div>\n </button>\n }\n </div>\n </mat-menu>\n}\n", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:var(--tb-filter-name-color, cornflowerblue);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
|
|
2928
2969
|
}], ctorParameters: () => [{ type: TableStore }] });
|
|
2929
2970
|
|
|
2930
2971
|
class WrapperFilterStore extends ComponentStore {
|
|
@@ -2948,21 +2989,266 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2948
2989
|
type: Injectable
|
|
2949
2990
|
}], ctorParameters: () => [] });
|
|
2950
2991
|
|
|
2992
|
+
// FilterType is a string-valued enum where some entries share string values
|
|
2993
|
+
// (e.g. NumberEquals === StringEquals === 'Equals', NumberBetween === DateBetween === 'Between').
|
|
2994
|
+
// We dedupe by string value when building this lookup.
|
|
2995
|
+
const OPERATOR_LABELS = {
|
|
2996
|
+
[FilterType.StringContains]: 'contains',
|
|
2997
|
+
[FilterType.StringDoesNotContain]: 'not contains',
|
|
2998
|
+
[FilterType.StringEquals]: 'equals',
|
|
2999
|
+
[FilterType.StringStartWith]: 'starts with',
|
|
3000
|
+
[FilterType.StringEndsWith]: 'ends with',
|
|
3001
|
+
[FilterType.NumberNotEqual]: '≠',
|
|
3002
|
+
[FilterType.NumberLessThan]: '<',
|
|
3003
|
+
[FilterType.NumberGreaterThan]: '>',
|
|
3004
|
+
[FilterType.NumberBetween]: 'between',
|
|
3005
|
+
[FilterType.DateIsOn]: 'on',
|
|
3006
|
+
[FilterType.DateIsNotOn]: 'not on',
|
|
3007
|
+
[FilterType.DateOnOrAfter]: 'on or after',
|
|
3008
|
+
[FilterType.DateOnOrBefore]: 'on or before',
|
|
3009
|
+
[FilterType.DateTimeIsAt]: 'at',
|
|
3010
|
+
[FilterType.DateTimeIsNotAt]: 'not at',
|
|
3011
|
+
[FilterType.DateTimeAtOrAfter]: 'at or after',
|
|
3012
|
+
[FilterType.DateTimeAtOrBefore]: 'at or before',
|
|
3013
|
+
[FilterType.BooleanEquals]: 'is',
|
|
3014
|
+
[FilterType.IsNull]: 'is empty',
|
|
3015
|
+
[FilterType.In]: 'in',
|
|
3016
|
+
[FilterType.Or]: 'or',
|
|
3017
|
+
[FilterType.And]: 'and',
|
|
3018
|
+
[FilterType.Custom]: 'custom',
|
|
3019
|
+
};
|
|
2951
3020
|
class GenFilterDisplayerComponent {
|
|
2952
3021
|
constructor(tableState, filterStore) {
|
|
2953
3022
|
this.tableState = tableState;
|
|
2954
3023
|
this.filterStore = filterStore;
|
|
2955
|
-
|
|
3024
|
+
/** Which chip is currently in expanded form. Drives compact vs expanded rendering. */
|
|
3025
|
+
this.draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
|
|
3026
|
+
/** Whether the inline column picker is open (replaces the nested mat-menu so the
|
|
3027
|
+
* parent panel stays open after a column is selected). */
|
|
3028
|
+
this.pickerOpen = signal(false, ...(ngDevMode ? [{ debugName: "pickerOpen" }] : /* istanbul ignore next */ []));
|
|
3029
|
+
this.filterCols$ = tableState.metaDataArray$.pipe(map(md => Object.values(md).filter(m => m.fieldType !== FieldType.Hidden && !m.noFilter)));
|
|
3030
|
+
this.chips$ = combineLatest([this.tableState.filters$, this.tableState.metaData$]).pipe(map(([filters, metaData]) => Object.values(filters)
|
|
3031
|
+
.filter((f) => !!f)
|
|
3032
|
+
.filter(f => !(isFilterInfo(f) && f._isExternalyManaged))
|
|
3033
|
+
.map(f => {
|
|
3034
|
+
if (isCustomFilter(f)) {
|
|
3035
|
+
return {
|
|
3036
|
+
filterId: f.filterId,
|
|
3037
|
+
columnName: 'Custom',
|
|
3038
|
+
columnKey: '',
|
|
3039
|
+
filterType: f.filterType,
|
|
3040
|
+
fieldType: FieldType.Unknown,
|
|
3041
|
+
operatorLabel: 'custom',
|
|
3042
|
+
valueDisplay: '',
|
|
3043
|
+
rawValue: undefined,
|
|
3044
|
+
isCustom: true,
|
|
3045
|
+
isHidden: false,
|
|
3046
|
+
};
|
|
3047
|
+
}
|
|
3048
|
+
const key = f.key;
|
|
3049
|
+
const meta = metaData[key];
|
|
3050
|
+
const display = meta?.displayName || this.spaceCase(key);
|
|
3051
|
+
return {
|
|
3052
|
+
filterId: f.filterId,
|
|
3053
|
+
columnName: display,
|
|
3054
|
+
columnKey: key,
|
|
3055
|
+
filterType: f.filterType,
|
|
3056
|
+
fieldType: f.fieldType,
|
|
3057
|
+
operatorLabel: f.filterType ? (OPERATOR_LABELS[f.filterType] || f.filterType) : 'select',
|
|
3058
|
+
valueDisplay: this.formatValue(f.filterValue),
|
|
3059
|
+
rawValue: f.filterValue,
|
|
3060
|
+
isCustom: false,
|
|
3061
|
+
isHidden: meta ? meta.fieldType === FieldType.Hidden : false,
|
|
3062
|
+
};
|
|
3063
|
+
})));
|
|
3064
|
+
this.count$ = this.chips$.pipe(map(chips => chips.length));
|
|
3065
|
+
}
|
|
3066
|
+
/** Operators compatible with a chip's column fieldType, for the operator dropdown. */
|
|
3067
|
+
operatorsFor(fieldType) {
|
|
3068
|
+
if (fieldType === FieldType.Hidden || fieldType === FieldType.Expression || fieldType === FieldType.ImageUrl) {
|
|
3069
|
+
return [];
|
|
3070
|
+
}
|
|
3071
|
+
const map = filterTypeMap[fieldType];
|
|
3072
|
+
if (!map)
|
|
3073
|
+
return [];
|
|
3074
|
+
return Object.keys(map).map(ft => ({
|
|
3075
|
+
value: ft,
|
|
3076
|
+
label: OPERATOR_LABELS[ft] || ft,
|
|
3077
|
+
}));
|
|
3078
|
+
}
|
|
3079
|
+
/** Maps fieldType to the input style the expanded form should render. */
|
|
3080
|
+
inputKindFor(fieldType) {
|
|
3081
|
+
switch (fieldType) {
|
|
3082
|
+
case FieldType.Date: return 'date';
|
|
3083
|
+
case FieldType.DateTime: return 'datetime';
|
|
3084
|
+
case FieldType.Number:
|
|
3085
|
+
case FieldType.Currency: return 'number';
|
|
3086
|
+
case FieldType.Boolean: return 'boolean';
|
|
3087
|
+
default: return 'text';
|
|
3088
|
+
}
|
|
3089
|
+
}
|
|
3090
|
+
/**
|
|
3091
|
+
* Add a new filter from the column picker.
|
|
3092
|
+
* Combo 4: the chip is born expanded with no value yet. The user fills in value + Apply
|
|
3093
|
+
* to commit. Commits to TableStore happen on Apply, not on every keystroke, so the
|
|
3094
|
+
* table doesn't re-filter mid-edit.
|
|
3095
|
+
*/
|
|
3096
|
+
/** Toggle the inline column picker. */
|
|
3097
|
+
togglePicker(event) {
|
|
3098
|
+
if (event)
|
|
3099
|
+
event.stopPropagation();
|
|
3100
|
+
this.pickerOpen.update(v => !v);
|
|
3101
|
+
}
|
|
3102
|
+
closePicker() {
|
|
3103
|
+
this.pickerOpen.set(false);
|
|
2956
3104
|
}
|
|
2957
3105
|
addFilter(metaData) {
|
|
2958
|
-
this.
|
|
3106
|
+
const ops = this.operatorsFor(metaData.fieldType);
|
|
3107
|
+
const defaultType = ops.length ? ops[0].value : undefined;
|
|
3108
|
+
const filterId = v4();
|
|
3109
|
+
// Insert a placeholder filter so the chip renders. With filterValue: undefined,
|
|
3110
|
+
// createFilterFunc returns defaultPredicate (everything matches) — no table change.
|
|
3111
|
+
this.tableState.addFilter({
|
|
3112
|
+
filterId,
|
|
3113
|
+
key: metaData.key,
|
|
3114
|
+
fieldType: metaData.fieldType,
|
|
3115
|
+
filterType: defaultType,
|
|
3116
|
+
filterValue: undefined,
|
|
3117
|
+
});
|
|
3118
|
+
// Open the expanded form for editing and close the column picker.
|
|
3119
|
+
this.draft.set({
|
|
3120
|
+
filterId,
|
|
3121
|
+
filterType: defaultType,
|
|
3122
|
+
value: this.defaultDraftValue(metaData.fieldType),
|
|
3123
|
+
isNew: true,
|
|
3124
|
+
});
|
|
3125
|
+
this.pickerOpen.set(false);
|
|
3126
|
+
}
|
|
3127
|
+
/** Open the expanded form for an existing chip. Initializes the draft from current values. */
|
|
3128
|
+
expand(chip) {
|
|
3129
|
+
if (chip.isCustom)
|
|
3130
|
+
return;
|
|
3131
|
+
this.draft.set({
|
|
3132
|
+
filterId: chip.filterId,
|
|
3133
|
+
filterType: chip.filterType,
|
|
3134
|
+
value: chip.rawValue ?? this.defaultDraftValue(chip.fieldType),
|
|
3135
|
+
isNew: false,
|
|
3136
|
+
});
|
|
3137
|
+
}
|
|
3138
|
+
/** Update the operator in the draft (without committing). */
|
|
3139
|
+
draftSetOperator(filterType) {
|
|
3140
|
+
const d = this.draft();
|
|
3141
|
+
if (!d)
|
|
3142
|
+
return;
|
|
3143
|
+
this.draft.set({ ...d, filterType });
|
|
3144
|
+
}
|
|
3145
|
+
/** Update the value in the draft (without committing). */
|
|
3146
|
+
draftSetValue(value) {
|
|
3147
|
+
const d = this.draft();
|
|
3148
|
+
if (!d)
|
|
3149
|
+
return;
|
|
3150
|
+
this.draft.set({ ...d, value });
|
|
3151
|
+
}
|
|
3152
|
+
/** Apply: commit the draft to TableStore, collapse. */
|
|
3153
|
+
apply(chip) {
|
|
3154
|
+
const d = this.draft();
|
|
3155
|
+
if (!d || d.filterId !== chip.filterId)
|
|
3156
|
+
return;
|
|
3157
|
+
const value = this.parseDraftValue(d.value, chip.fieldType, d.filterType);
|
|
3158
|
+
this.tableState.addFilter({
|
|
3159
|
+
filterId: d.filterId,
|
|
3160
|
+
key: chip.columnKey,
|
|
3161
|
+
fieldType: chip.fieldType,
|
|
3162
|
+
filterType: d.filterType,
|
|
3163
|
+
filterValue: value,
|
|
3164
|
+
});
|
|
3165
|
+
this.draft.set(null);
|
|
3166
|
+
}
|
|
3167
|
+
/** Cancel: collapse without committing. For new chips, also remove the placeholder. */
|
|
3168
|
+
cancel(chip) {
|
|
3169
|
+
const d = this.draft();
|
|
3170
|
+
if (!d || d.filterId !== chip.filterId)
|
|
3171
|
+
return;
|
|
3172
|
+
if (d.isNew) {
|
|
3173
|
+
this.tableState.removeFilter(chip.filterId);
|
|
3174
|
+
}
|
|
3175
|
+
this.draft.set(null);
|
|
3176
|
+
}
|
|
3177
|
+
removeFilter(filterId) {
|
|
3178
|
+
if (this.draft()?.filterId === filterId) {
|
|
3179
|
+
this.draft.set(null);
|
|
3180
|
+
}
|
|
3181
|
+
this.tableState.removeFilter(filterId);
|
|
3182
|
+
}
|
|
3183
|
+
clearAll() {
|
|
3184
|
+
this.draft.set(null);
|
|
3185
|
+
this.tableState.clearFilters();
|
|
3186
|
+
}
|
|
3187
|
+
trackByFilterId(_, chip) {
|
|
3188
|
+
return chip.filterId;
|
|
3189
|
+
}
|
|
3190
|
+
trackByKey(_, md) {
|
|
3191
|
+
return md.key;
|
|
3192
|
+
}
|
|
3193
|
+
/** True when the chip is currently the one being edited (expanded). */
|
|
3194
|
+
isExpanded(filterId) {
|
|
3195
|
+
return this.draft()?.filterId === filterId;
|
|
3196
|
+
}
|
|
3197
|
+
// -------- internal helpers --------
|
|
3198
|
+
defaultDraftValue(fieldType) {
|
|
3199
|
+
switch (fieldType) {
|
|
3200
|
+
case FieldType.Boolean: return true;
|
|
3201
|
+
case FieldType.Number:
|
|
3202
|
+
case FieldType.Currency: return null;
|
|
3203
|
+
default: return '';
|
|
3204
|
+
}
|
|
3205
|
+
}
|
|
3206
|
+
/** Parse the draft's loosely-typed value into something filterValue-compatible. */
|
|
3207
|
+
parseDraftValue(raw, fieldType, ft) {
|
|
3208
|
+
if (raw === '' || raw === null || raw === undefined)
|
|
3209
|
+
return undefined;
|
|
3210
|
+
if (ft === FilterType.In && typeof raw === 'string') {
|
|
3211
|
+
return raw.split(',').map(s => s.trim()).filter(Boolean);
|
|
3212
|
+
}
|
|
3213
|
+
if (fieldType === FieldType.Number || fieldType === FieldType.Currency) {
|
|
3214
|
+
const n = typeof raw === 'number' ? raw : parseFloat(raw);
|
|
3215
|
+
return isNaN(n) ? undefined : n;
|
|
3216
|
+
}
|
|
3217
|
+
if (fieldType === FieldType.Date || fieldType === FieldType.DateTime) {
|
|
3218
|
+
// <input type="date"> gives "YYYY-MM-DD"; pass through. The filter pipeline
|
|
3219
|
+
// already handles string-or-Date comparisons elsewhere.
|
|
3220
|
+
return raw;
|
|
3221
|
+
}
|
|
3222
|
+
if (fieldType === FieldType.Boolean) {
|
|
3223
|
+
return raw === true || raw === 'true';
|
|
3224
|
+
}
|
|
3225
|
+
return raw;
|
|
3226
|
+
}
|
|
3227
|
+
formatValue(v) {
|
|
3228
|
+
if (v == null)
|
|
3229
|
+
return '';
|
|
3230
|
+
if (Array.isArray(v))
|
|
3231
|
+
return v.join(', ');
|
|
3232
|
+
if (typeof v === 'object' && v.Start !== undefined && v.End !== undefined) {
|
|
3233
|
+
return `${v.Start} – ${v.End}`;
|
|
3234
|
+
}
|
|
3235
|
+
return String(v);
|
|
3236
|
+
}
|
|
3237
|
+
/** Approximate the SpaceCase pipe locally so chip labels match the rest of the UI. */
|
|
3238
|
+
spaceCase(s) {
|
|
3239
|
+
if (!s)
|
|
3240
|
+
return '';
|
|
3241
|
+
return s
|
|
3242
|
+
.replace(/([a-z])([A-Z])/g, '$1 $2')
|
|
3243
|
+
.replace(/_/g, ' ')
|
|
3244
|
+
.replace(/\b\w/g, c => c.toUpperCase());
|
|
2959
3245
|
}
|
|
2960
3246
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenFilterDisplayerComponent, isStandalone: false, 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 *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\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{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: GenFilterDisplayerComponent, isStandalone: false, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Filters\">\n <mat-icon fontSet=\"material-icons-outlined\" class=\"filter-icon tb-icon-primary\">filter_alt</mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"filter-panel-menu\" xPosition=\"before\">\n <div class=\"fp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"fp-head\">\n <div class=\"fp-title\">\n Active filters\n <span class=\"fp-count\">{{ count$ | async }}</span>\n </div>\n <button class=\"fp-add-pill\"\n [class.fp-add-pill-active]=\"pickerOpen()\"\n type=\"button\"\n (click)=\"togglePicker($event)\"\n stop-propagation>\n <span class=\"fp-plus-circle\">\uFF0B</span> Add filter\n </button>\n </div>\n\n @if (pickerOpen()) {\n <div class=\"fp-col-picker\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"fp-col-picker-label\">Pick a column to filter</div>\n @for (md of filterCols$ | async; track md.key) {\n <button class=\"fp-col-picker-item\"\n type=\"button\"\n (click)=\"addFilter(md); $event.stopPropagation()\">\n {{ md.displayName || (md.key | spaceCase) }}\n </button>\n }\n </div>\n }\n\n @if (chips$ | async; as chips) {\n @if (chips.length === 0) {\n <div class=\"fp-empty\">\n No filters applied. Click <strong>+ Add filter</strong> to create one.\n </div>\n }\n <div class=\"fp-stack\">\n @for (chip of chips; track chip.filterId) {\n @if (isExpanded(chip.filterId) && draft(); as d) {\n\n <!-- ============ EXPANDED FORM ============ -->\n <div class=\"fp-expanded\">\n <div class=\"fp-expanded-head\">\n <span class=\"fp-col-name\">\n @if (chip.isHidden) {\n <mat-icon class=\"fp-col-hidden-icon\">visibility_off</mat-icon>\n }\n {{ chip.columnName }}\n </span>\n <button class=\"fp-x-btn\"\n type=\"button\"\n (click)=\"cancel(chip)\"\n stop-propagation\n [attr.aria-label]=\"'Close form for ' + chip.columnName\">\n \u2715\n </button>\n </div>\n\n <div class=\"fp-form-grid\">\n <span class=\"fp-form-lbl\">Operator</span>\n <select class=\"fp-form-select\"\n [value]=\"d.filterType || ''\"\n (change)=\"draftSetOperator($any($event.target).value)\"\n stop-propagation>\n @for (op of operatorsFor(chip.fieldType); track op.value) {\n <option [value]=\"op.value\">{{ op.label }}</option>\n }\n </select>\n\n <span class=\"fp-form-lbl\">Value</span>\n @switch (inputKindFor(chip.fieldType)) {\n @case ('date') {\n <input class=\"fp-form-input\"\n type=\"date\"\n [value]=\"d.value || ''\"\n (input)=\"draftSetValue($any($event.target).value)\"\n stop-propagation />\n }\n @case ('datetime') {\n <input class=\"fp-form-input\"\n type=\"datetime-local\"\n [value]=\"d.value || ''\"\n (input)=\"draftSetValue($any($event.target).value)\"\n stop-propagation />\n }\n @case ('number') {\n <input class=\"fp-form-input\"\n type=\"number\"\n [value]=\"d.value === null || d.value === undefined ? '' : d.value\"\n (input)=\"draftSetValue($any($event.target).valueAsNumber)\"\n stop-propagation />\n }\n @case ('boolean') {\n <span class=\"fp-form-toggle\">\n <button type=\"button\"\n [class.active]=\"d.value === true\"\n (click)=\"draftSetValue(true)\"\n stop-propagation>true</button>\n <button type=\"button\"\n [class.active]=\"d.value === false\"\n (click)=\"draftSetValue(false)\"\n stop-propagation>false</button>\n </span>\n }\n @default {\n <input class=\"fp-form-input\"\n type=\"text\"\n [value]=\"d.value || ''\"\n placeholder=\"value\"\n (input)=\"draftSetValue($any($event.target).value)\"\n (keydown.enter)=\"apply(chip)\"\n autofocus\n stop-propagation />\n }\n }\n </div>\n\n <div class=\"fp-form-actions\">\n <button type=\"button\" class=\"fp-btn-ghost\" (click)=\"cancel(chip)\" stop-propagation>\n Cancel\n </button>\n <button type=\"button\" class=\"fp-btn-primary\" (click)=\"apply(chip)\" stop-propagation>\n Apply\n </button>\n </div>\n </div>\n\n } @else {\n\n <!-- ============ COMPACT CHIP ============ -->\n <div class=\"fp-chip\"\n [class.fp-chip-custom]=\"chip.isCustom\"\n [class.fp-chip-pending]=\"!chip.valueDisplay && !chip.isCustom\"\n (click)=\"!chip.isCustom && expand(chip)\"\n [attr.role]=\"chip.isCustom ? null : 'button'\"\n [attr.tabindex]=\"chip.isCustom ? null : 0\">\n <span class=\"fp-col-name\">\n @if (chip.isHidden) {\n <mat-icon class=\"fp-col-hidden-icon\">visibility_off</mat-icon>\n }\n {{ chip.columnName }}\n </span>\n\n <span class=\"fp-op-pill\" [class.fp-op-custom]=\"chip.isCustom\">\n {{ chip.operatorLabel }}\n </span>\n\n @if (chip.isCustom) {\n <span class=\"fp-val-readonly\">(predicate)</span>\n } @else if (chip.valueDisplay) {\n <span class=\"fp-val-text\">{{ chip.valueDisplay }}</span>\n } @else {\n <span class=\"fp-val-pending\">click to set value\u2026</span>\n }\n\n <button class=\"fp-x-btn\"\n type=\"button\"\n (click)=\"$event.stopPropagation(); removeFilter(chip.filterId)\"\n [attr.aria-label]=\"'Remove filter on ' + chip.columnName\">\n \u2715\n </button>\n </div>\n }\n }\n </div>\n\n @if (chips.length > 0) {\n <div class=\"fp-foot\">\n <button class=\"fp-ghost-link\" type=\"button\" (click)=\"clearAll()\">Clear all</button>\n </div>\n }\n }\n </div>\n</mat-menu>\n\n", styles: [".filter{margin:15px;display:inline-block}.cancel-button{margin-right:30px;font-weight:700}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent);color:var(--mat-sys-primary, #006a6a);padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}.fl-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.fp-stack-inline{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}.fp-val-text{font-weight:500;color:var(--mat-sys-on-surface, #1d1b1e);padding:0 4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .filter-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:360px!important}.fp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);font-family:Inter,system-ui,sans-serif}.fp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.fp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.fp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.fp-add-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);border:none;border-radius:999px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-add-pill:hover{filter:brightness(.95)}.fp-plus-circle{width:16px;height:16px;border-radius:50%;background:#ffffff38;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1}.fp-empty{text-align:center;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:24px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--mat-sys-primary, #006a6a) 20%,transparent);margin-bottom:8px}.fp-empty strong{color:var(--mat-sys-primary, #006a6a)}.fp-stack{display:flex;flex-direction:column;gap:8px}.fp-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);color:var(--mat-sys-on-surface, #1d1b1e);border-radius:999px;padding:5px 4px 5px 12px;font-size:12.5px;border:1px solid transparent;max-width:100%;transition:background .15s ease,border-color .15s ease}.fp-chip:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 14%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent)}.fp-chip:hover .fp-x-btn{opacity:1}.fp-chip-custom{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 6%,transparent);border-color:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 12%,transparent)}.fp-col-name{display:inline-flex;align-items:center;gap:4px;font-weight:600;flex-shrink:0}.fp-col-hidden-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-op-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.4;min-width:24px;border:none;cursor:pointer;font-family:inherit;letter-spacing:.01em;box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-op-pill:hover{filter:brightness(.95)}.fp-op-custom{background:var(--mat-sys-on-surface-variant, #6b6970);cursor:default}.fp-val-input{border:none;background:transparent;padding:3px 6px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);border-radius:6px;outline:none;font-family:inherit;min-width:80px;width:auto;max-width:220px;flex:0 1 auto}.fp-val-input:focus,.fp-val-input:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-val-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-val-readonly{font-size:12px;color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-x-btn{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;opacity:0;margin-left:2px;font-size:11px;line-height:1;color:var(--mat-sys-on-surface-variant, #6b6970);border:none;cursor:pointer;font-family:inherit;transition:opacity .15s ease,background .15s ease,color .15s ease}.fp-x-btn:hover{background:color-mix(in srgb,var(--mat-sys-error, #ba1a1a) 18%,transparent);color:var(--mat-sys-error, #ba1a1a);opacity:1}.fp-foot{display:flex;align-items:center;justify-content:flex-end;padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06)}.fp-ghost-link{color:var(--mat-sys-primary, #006a6a);cursor:pointer;font-weight:500;background:transparent;border:none;font-size:11.5px;padding:4px 8px;border-radius:6px;font-family:inherit}.fp-ghost-link:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-chip{cursor:pointer}.fp-chip-custom{cursor:default}.fp-chip-pending{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 4%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent);border-style:dashed}.fp-val-pending{font-style:italic;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:0 4px}.fp-expanded{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;align-self:stretch;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-expanded-head{display:flex;align-items:center;gap:8px}.fp-expanded-head .fp-col-name{font-weight:600;font-size:13px;flex:1}.fp-expanded-head .fp-x-btn{margin-left:auto;opacity:.7}.fp-form-grid{display:grid;grid-template-columns:80px 1fr;gap:6px 12px;align-items:center}.fp-form-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600}.fp-form-input,.fp-form-select{font:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fff);border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:5px 8px;outline:none;width:100%;font-family:inherit;box-sizing:border-box}.fp-form-input:focus,.fp-form-select:focus{border-color:var(--mat-sys-primary, #006a6a);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent)}.fp-form-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-form-toggle{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent);overflow:hidden;width:fit-content}.fp-form-toggle button{background:transparent;border:none;padding:4px 14px;cursor:pointer;font-size:12px;font-weight:500;color:var(--mat-sys-on-surface-variant, #6b6970);font-family:inherit;transition:background .12s ease,color .12s ease}.fp-form-toggle button.active{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);font-weight:600}.fp-form-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}.fp-btn-ghost,.fp-btn-primary{border:none;padding:6px 14px;border-radius:6px;font-family:inherit;font-size:12.5px;cursor:pointer;font-weight:500}.fp-btn-ghost{background:transparent;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-btn-ghost:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 8%,transparent)}.fp-btn-primary{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-btn-primary:hover{filter:brightness(.96)}.fp-add-pill-active{filter:brightness(.94);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent),0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-col-picker{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:10px;padding:8px;margin-bottom:8px;display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-col-picker-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600;padding:4px 8px 6px}.fp-col-picker-item{background:transparent;border:none;text-align:left;font-family:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .12s ease}.fp-col-picker-item:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a)}\n"], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2962
3248
|
}
|
|
2963
3249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
2964
3250
|
type: Component,
|
|
2965
|
-
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\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{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"] }]
|
|
3251
|
+
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button stop-propagation class=\"filter-trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Filters\">\n <mat-icon fontSet=\"material-icons-outlined\" class=\"filter-icon tb-icon-primary\">filter_alt</mat-icon>\n</button>\n\n<mat-menu #menu=\"matMenu\" class=\"filter-panel-menu\" xPosition=\"before\">\n <div class=\"fp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"fp-head\">\n <div class=\"fp-title\">\n Active filters\n <span class=\"fp-count\">{{ count$ | async }}</span>\n </div>\n <button class=\"fp-add-pill\"\n [class.fp-add-pill-active]=\"pickerOpen()\"\n type=\"button\"\n (click)=\"togglePicker($event)\"\n stop-propagation>\n <span class=\"fp-plus-circle\">\uFF0B</span> Add filter\n </button>\n </div>\n\n @if (pickerOpen()) {\n <div class=\"fp-col-picker\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"fp-col-picker-label\">Pick a column to filter</div>\n @for (md of filterCols$ | async; track md.key) {\n <button class=\"fp-col-picker-item\"\n type=\"button\"\n (click)=\"addFilter(md); $event.stopPropagation()\">\n {{ md.displayName || (md.key | spaceCase) }}\n </button>\n }\n </div>\n }\n\n @if (chips$ | async; as chips) {\n @if (chips.length === 0) {\n <div class=\"fp-empty\">\n No filters applied. Click <strong>+ Add filter</strong> to create one.\n </div>\n }\n <div class=\"fp-stack\">\n @for (chip of chips; track chip.filterId) {\n @if (isExpanded(chip.filterId) && draft(); as d) {\n\n <!-- ============ EXPANDED FORM ============ -->\n <div class=\"fp-expanded\">\n <div class=\"fp-expanded-head\">\n <span class=\"fp-col-name\">\n @if (chip.isHidden) {\n <mat-icon class=\"fp-col-hidden-icon\">visibility_off</mat-icon>\n }\n {{ chip.columnName }}\n </span>\n <button class=\"fp-x-btn\"\n type=\"button\"\n (click)=\"cancel(chip)\"\n stop-propagation\n [attr.aria-label]=\"'Close form for ' + chip.columnName\">\n \u2715\n </button>\n </div>\n\n <div class=\"fp-form-grid\">\n <span class=\"fp-form-lbl\">Operator</span>\n <select class=\"fp-form-select\"\n [value]=\"d.filterType || ''\"\n (change)=\"draftSetOperator($any($event.target).value)\"\n stop-propagation>\n @for (op of operatorsFor(chip.fieldType); track op.value) {\n <option [value]=\"op.value\">{{ op.label }}</option>\n }\n </select>\n\n <span class=\"fp-form-lbl\">Value</span>\n @switch (inputKindFor(chip.fieldType)) {\n @case ('date') {\n <input class=\"fp-form-input\"\n type=\"date\"\n [value]=\"d.value || ''\"\n (input)=\"draftSetValue($any($event.target).value)\"\n stop-propagation />\n }\n @case ('datetime') {\n <input class=\"fp-form-input\"\n type=\"datetime-local\"\n [value]=\"d.value || ''\"\n (input)=\"draftSetValue($any($event.target).value)\"\n stop-propagation />\n }\n @case ('number') {\n <input class=\"fp-form-input\"\n type=\"number\"\n [value]=\"d.value === null || d.value === undefined ? '' : d.value\"\n (input)=\"draftSetValue($any($event.target).valueAsNumber)\"\n stop-propagation />\n }\n @case ('boolean') {\n <span class=\"fp-form-toggle\">\n <button type=\"button\"\n [class.active]=\"d.value === true\"\n (click)=\"draftSetValue(true)\"\n stop-propagation>true</button>\n <button type=\"button\"\n [class.active]=\"d.value === false\"\n (click)=\"draftSetValue(false)\"\n stop-propagation>false</button>\n </span>\n }\n @default {\n <input class=\"fp-form-input\"\n type=\"text\"\n [value]=\"d.value || ''\"\n placeholder=\"value\"\n (input)=\"draftSetValue($any($event.target).value)\"\n (keydown.enter)=\"apply(chip)\"\n autofocus\n stop-propagation />\n }\n }\n </div>\n\n <div class=\"fp-form-actions\">\n <button type=\"button\" class=\"fp-btn-ghost\" (click)=\"cancel(chip)\" stop-propagation>\n Cancel\n </button>\n <button type=\"button\" class=\"fp-btn-primary\" (click)=\"apply(chip)\" stop-propagation>\n Apply\n </button>\n </div>\n </div>\n\n } @else {\n\n <!-- ============ COMPACT CHIP ============ -->\n <div class=\"fp-chip\"\n [class.fp-chip-custom]=\"chip.isCustom\"\n [class.fp-chip-pending]=\"!chip.valueDisplay && !chip.isCustom\"\n (click)=\"!chip.isCustom && expand(chip)\"\n [attr.role]=\"chip.isCustom ? null : 'button'\"\n [attr.tabindex]=\"chip.isCustom ? null : 0\">\n <span class=\"fp-col-name\">\n @if (chip.isHidden) {\n <mat-icon class=\"fp-col-hidden-icon\">visibility_off</mat-icon>\n }\n {{ chip.columnName }}\n </span>\n\n <span class=\"fp-op-pill\" [class.fp-op-custom]=\"chip.isCustom\">\n {{ chip.operatorLabel }}\n </span>\n\n @if (chip.isCustom) {\n <span class=\"fp-val-readonly\">(predicate)</span>\n } @else if (chip.valueDisplay) {\n <span class=\"fp-val-text\">{{ chip.valueDisplay }}</span>\n } @else {\n <span class=\"fp-val-pending\">click to set value\u2026</span>\n }\n\n <button class=\"fp-x-btn\"\n type=\"button\"\n (click)=\"$event.stopPropagation(); removeFilter(chip.filterId)\"\n [attr.aria-label]=\"'Remove filter on ' + chip.columnName\">\n \u2715\n </button>\n </div>\n }\n }\n </div>\n\n @if (chips.length > 0) {\n <div class=\"fp-foot\">\n <button class=\"fp-ghost-link\" type=\"button\" (click)=\"clearAll()\">Clear all</button>\n </div>\n }\n }\n </div>\n</mat-menu>\n\n", styles: [".filter{margin:15px;display:inline-block}.cancel-button{margin-right:30px;font-weight:700}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent);color:var(--mat-sys-primary, #006a6a);padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}.fl-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.fp-stack-inline{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}.fp-val-text{font-weight:500;color:var(--mat-sys-on-surface, #1d1b1e);padding:0 4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .filter-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:360px!important}.fp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);font-family:Inter,system-ui,sans-serif}.fp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.fp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.fp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.fp-add-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);border:none;border-radius:999px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-add-pill:hover{filter:brightness(.95)}.fp-plus-circle{width:16px;height:16px;border-radius:50%;background:#ffffff38;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1}.fp-empty{text-align:center;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:24px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--mat-sys-primary, #006a6a) 20%,transparent);margin-bottom:8px}.fp-empty strong{color:var(--mat-sys-primary, #006a6a)}.fp-stack{display:flex;flex-direction:column;gap:8px}.fp-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);color:var(--mat-sys-on-surface, #1d1b1e);border-radius:999px;padding:5px 4px 5px 12px;font-size:12.5px;border:1px solid transparent;max-width:100%;transition:background .15s ease,border-color .15s ease}.fp-chip:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 14%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent)}.fp-chip:hover .fp-x-btn{opacity:1}.fp-chip-custom{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 6%,transparent);border-color:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 12%,transparent)}.fp-col-name{display:inline-flex;align-items:center;gap:4px;font-weight:600;flex-shrink:0}.fp-col-hidden-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-op-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.4;min-width:24px;border:none;cursor:pointer;font-family:inherit;letter-spacing:.01em;box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-op-pill:hover{filter:brightness(.95)}.fp-op-custom{background:var(--mat-sys-on-surface-variant, #6b6970);cursor:default}.fp-val-input{border:none;background:transparent;padding:3px 6px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);border-radius:6px;outline:none;font-family:inherit;min-width:80px;width:auto;max-width:220px;flex:0 1 auto}.fp-val-input:focus,.fp-val-input:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-val-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-val-readonly{font-size:12px;color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-x-btn{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;opacity:0;margin-left:2px;font-size:11px;line-height:1;color:var(--mat-sys-on-surface-variant, #6b6970);border:none;cursor:pointer;font-family:inherit;transition:opacity .15s ease,background .15s ease,color .15s ease}.fp-x-btn:hover{background:color-mix(in srgb,var(--mat-sys-error, #ba1a1a) 18%,transparent);color:var(--mat-sys-error, #ba1a1a);opacity:1}.fp-foot{display:flex;align-items:center;justify-content:flex-end;padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06)}.fp-ghost-link{color:var(--mat-sys-primary, #006a6a);cursor:pointer;font-weight:500;background:transparent;border:none;font-size:11.5px;padding:4px 8px;border-radius:6px;font-family:inherit}.fp-ghost-link:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-chip{cursor:pointer}.fp-chip-custom{cursor:default}.fp-chip-pending{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 4%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent);border-style:dashed}.fp-val-pending{font-style:italic;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:0 4px}.fp-expanded{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;align-self:stretch;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-expanded-head{display:flex;align-items:center;gap:8px}.fp-expanded-head .fp-col-name{font-weight:600;font-size:13px;flex:1}.fp-expanded-head .fp-x-btn{margin-left:auto;opacity:.7}.fp-form-grid{display:grid;grid-template-columns:80px 1fr;gap:6px 12px;align-items:center}.fp-form-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600}.fp-form-input,.fp-form-select{font:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fff);border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:5px 8px;outline:none;width:100%;font-family:inherit;box-sizing:border-box}.fp-form-input:focus,.fp-form-select:focus{border-color:var(--mat-sys-primary, #006a6a);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent)}.fp-form-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-form-toggle{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent);overflow:hidden;width:fit-content}.fp-form-toggle button{background:transparent;border:none;padding:4px 14px;cursor:pointer;font-size:12px;font-weight:500;color:var(--mat-sys-on-surface-variant, #6b6970);font-family:inherit;transition:background .12s ease,color .12s ease}.fp-form-toggle button.active{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);font-weight:600}.fp-form-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}.fp-btn-ghost,.fp-btn-primary{border:none;padding:6px 14px;border-radius:6px;font-family:inherit;font-size:12.5px;cursor:pointer;font-weight:500}.fp-btn-ghost{background:transparent;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-btn-ghost:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 8%,transparent)}.fp-btn-primary{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-btn-primary:hover{filter:brightness(.96)}.fp-add-pill-active{filter:brightness(.94);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent),0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-col-picker{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:10px;padding:8px;margin-bottom:8px;display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-col-picker-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600;padding:4px 8px 6px}.fp-col-picker-item{background:transparent;border:none;text-align:left;font-family:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .12s ease}.fp-col-picker-item:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a)}\n"] }]
|
|
2966
3252
|
}], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
|
|
2967
3253
|
|
|
2968
3254
|
class DateFilterComponent {
|
|
@@ -2970,11 +3256,11 @@ class DateFilterComponent {
|
|
|
2970
3256
|
this.FilterType = FilterType;
|
|
2971
3257
|
}
|
|
2972
3258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2973
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateFilterComponent, isStandalone: false, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n <mat-form-field>\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #cal></mat-datepicker>\n </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n <ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\" >\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\n (click)=\"fromVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #fromVal></mat-datepicker>\n </mat-form-field>\n <mat-form-field>\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #toVal></mat-datepicker>\n </mat-form-field>\n </ng-container>\n</ng-container>\n\n", styles: [".filter-name{color
|
|
3259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateFilterComponent, isStandalone: false, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n <mat-form-field>\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #cal></mat-datepicker>\n </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n <ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\" >\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\n (click)=\"fromVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #fromVal></mat-datepicker>\n </mat-form-field>\n <mat-form-field>\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #toVal></mat-datepicker>\n </mat-form-field>\n </ng-container>\n</ng-container>\n\n", styles: [".filter-name{color:var(--tb-filter-name-color, cornflowerblue);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2974
3260
|
}
|
|
2975
3261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
2976
3262
|
type: Component,
|
|
2977
|
-
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n <mat-form-field>\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #cal></mat-datepicker>\n </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n <ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\" >\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\n (click)=\"fromVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #fromVal></mat-datepicker>\n </mat-form-field>\n <mat-form-field>\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #toVal></mat-datepicker>\n </mat-form-field>\n </ng-container>\n</ng-container>\n\n", styles: [".filter-name{color
|
|
3263
|
+
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull\">\n <mat-form-field>\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #cal></mat-datepicker>\n </mat-form-field>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\n <ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\" >\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\n (click)=\"fromVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #fromVal></mat-datepicker>\n </mat-form-field>\n <mat-form-field>\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\n <mat-datepicker #toVal></mat-datepicker>\n </mat-form-field>\n </ng-container>\n</ng-container>\n\n", styles: [".filter-name{color:var(--tb-filter-name-color, cornflowerblue);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
2978
3264
|
}], propDecorators: { info: [{
|
|
2979
3265
|
type: Input
|
|
2980
3266
|
}], CurrentFilterType: [{
|
|
@@ -3107,7 +3393,7 @@ class NumberFilterComponent {
|
|
|
3107
3393
|
this.FieldType = FieldType;
|
|
3108
3394
|
}
|
|
3109
3395
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: NumberFilterComponent, isStandalone: false, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In) {\n<mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n [ngModel]=\"info.filterValue\"\n type=\"number\"\n />\n</mat-form-field>\n}\n\n@if (CurrentFilterType === FilterType.NumberBetween) {\n<ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"Start\"\n [ngModel]=\"info.filterValue?.Start\"\n placeholder=\"Start\"\n type=\"number\"\n />\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"End\"\n [ngModel]=\"info.filterValue?.End\"\n placeholder=\"End\"\n type=\"number\"\n />\n </mat-form-field>\n</ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n<div class=\"inline\">\n <lib-in-filter\n name='filterValue'\n [type]=\"FieldType.Number\"\n [(ngModel)]='info.filterValue'\n ></lib-in-filter>\n</div>\n}", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$
|
|
3396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: NumberFilterComponent, isStandalone: false, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In) {\n<mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n [ngModel]=\"info.filterValue\"\n type=\"number\"\n />\n</mat-form-field>\n}\n\n@if (CurrentFilterType === FilterType.NumberBetween) {\n<ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"Start\"\n [ngModel]=\"info.filterValue?.Start\"\n placeholder=\"Start\"\n type=\"number\"\n />\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"End\"\n [ngModel]=\"info.filterValue?.End\"\n placeholder=\"End\"\n type=\"number\"\n />\n </mat-form-field>\n</ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n<div class=\"inline\">\n <lib-in-filter\n name='filterValue'\n [type]=\"FieldType.Number\"\n [(ngModel)]='info.filterValue'\n ></lib-in-filter>\n</div>\n}", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3111
3397
|
}
|
|
3112
3398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3113
3399
|
type: Component,
|
|
@@ -3123,11 +3409,11 @@ class DateTimeFilterComponent {
|
|
|
3123
3409
|
this.FilterType = FilterType;
|
|
3124
3410
|
}
|
|
3125
3411
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateTimeFilterComponent, isStandalone: false, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n</ng-container>", styles: [".filter-name{color
|
|
3412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: DateTimeFilterComponent, isStandalone: false, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n</ng-container>", styles: [".filter-name{color:var(--tb-filter-name-color, cornflowerblue);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3127
3413
|
}
|
|
3128
3414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
3129
3415
|
type: Component,
|
|
3130
|
-
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n</ng-container>", styles: [".filter-name{color
|
|
3416
|
+
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "<ng-container *ngIf=\"CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n</ng-container>\n\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n</ng-container>", styles: [".filter-name{color:var(--tb-filter-name-color, cornflowerblue);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
3131
3417
|
}], propDecorators: { info: [{
|
|
3132
3418
|
type: Input
|
|
3133
3419
|
}], CurrentFilterType: [{
|
|
@@ -3154,11 +3440,11 @@ class FilterComponent {
|
|
|
3154
3440
|
}
|
|
3155
3441
|
}
|
|
3156
3442
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3157
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterComponent, isStandalone: false, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n color=\"primary\"\n mat-icon-button\n (click)=\"close.emit();\"\n type=\"button\"\n matTooltip=\"Close\"\n >\n <mat-icon\n class=\"cancel-button\"\n color=\"primary\"\n >close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\">\n <mat-select\n placeholder=\"Select Filter Type\"\n name=\"filterType\"\n [(ngModel)]=\"currentFilterType\"\n >\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n <mat-option [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @switch (true) {\n @case (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 }\n @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n <tb-number-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-number-filter>\n }\n @case (filter.fieldType === FieldType.Boolean) {\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Date) {\n <tb-date-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-time-filter>\n }\n @case (filter.fieldType === FieldType.Enum) {\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n }\n }\n @if (currentFilterType === FilterType.IsNull) {\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\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\n mat-button\n (click)=\"state.addFilter(form.value)\"\n disableRipple\n [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n >\n Apply\n </button>\n\n\n <ng-template #String>\n @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n tbPreservePasteDelimiters\n [ngModel]=\"filter.filterValue\"\n />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter\n [type]=\"FieldType.String\"\n name='filterValue'\n [(ngModel)]=\"filter.filterValue\"\n ></lib-in-filter>\n }\n </ng-template>\n\n <ng-template #Boolean>\n @if (currentFilterType === FilterType.BooleanEquals) {\n <div class=\"switch\">\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button\n [value]=\"true\"\n preventEnter\n >True</mat-radio-button>\n <mat-radio-button\n [value]=\"false\"\n preventEnter\n >False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter\n [key]='filter.key'\n name='filterValue'\n [(ngModel)]='filter.filterValue'\n ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "directive", type: PreservePasteDelimitersDirective, selector: "input[tbPreservePasteDelimiters]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3443
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterComponent, isStandalone: false, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n mat-icon-button\n (click)=\"close.emit();\"\n type=\"button\"\n matTooltip=\"Close\"\n >\n <mat-icon\n class=\"cancel-button tb-icon-primary\"\n >close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\">\n <mat-select\n placeholder=\"Select Filter Type\"\n name=\"filterType\"\n [(ngModel)]=\"currentFilterType\"\n >\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n <mat-option [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @switch (true) {\n @case (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 }\n @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n <tb-number-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-number-filter>\n }\n @case (filter.fieldType === FieldType.Boolean) {\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Date) {\n <tb-date-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-time-filter>\n }\n @case (filter.fieldType === FieldType.Enum) {\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n }\n }\n @if (currentFilterType === FilterType.IsNull) {\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\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\n mat-button\n (click)=\"state.addFilter(form.value)\"\n disableRipple\n [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n >\n Apply\n </button>\n\n\n <ng-template #String>\n @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n tbPreservePasteDelimiters\n [ngModel]=\"filter.filterValue\"\n />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter\n [type]=\"FieldType.String\"\n name='filterValue'\n [(ngModel)]=\"filter.filterValue\"\n ></lib-in-filter>\n }\n </ng-template>\n\n <ng-template #Boolean>\n @if (currentFilterType === FilterType.BooleanEquals) {\n <div class=\"switch\">\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button\n [value]=\"true\"\n preventEnter\n >True</mat-radio-button>\n <mat-radio-button\n [value]=\"false\"\n preventEnter\n >False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter\n [key]='filter.key'\n name='filterValue'\n [(ngModel)]='filter.filterValue'\n ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:var(--tb-filter-name-color, cornflowerblue);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i5$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "directive", type: PreservePasteDelimitersDirective, selector: "input[tbPreservePasteDelimiters]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3158
3444
|
}
|
|
3159
3445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3160
3446
|
type: Component,
|
|
3161
|
-
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n
|
|
3447
|
+
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (filter) {\n<mat-card\n appearance=\"outlined\"\n class=\"filter-card\"\n>\n <mat-card-content>\n <form\n #form=\"ngForm\"\n (keydown.enter)=\"onEnter(form.value,$event)\"\n (keydown.escape)=\"close.emit()\"\n >\n <input\n type=\"hidden\"\n name=\"filterId\"\n [ngModel]=\"filter.filterId\"\n />\n <input\n type=\"hidden\"\n name=\"key\"\n [ngModel]=\"filter.key\"\n />\n <input\n type=\"hidden\"\n name=\"fieldType\"\n [ngModel]=\"filter.fieldType\"\n />\n <div class=\"head-row\">\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button\n class=\"cancel-button small-button\"\n mat-icon-button\n (click)=\"close.emit();\"\n type=\"button\"\n matTooltip=\"Close\"\n >\n <mat-icon\n class=\"cancel-button tb-icon-primary\"\n >close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\">\n <mat-select\n placeholder=\"Select Filter Type\"\n name=\"filterType\"\n [(ngModel)]=\"currentFilterType\"\n >\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\n <mat-option [value]=\"$any(kvp.value)[0]\">\n {{ kvp.key }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @switch (true) {\n @case (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 }\n @case (filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency) {\n <tb-number-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-number-filter>\n }\n @case (filter.fieldType === FieldType.Boolean) {\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\n }\n @case (filter.fieldType === FieldType.Date) {\n <tb-date-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter\n [info]=\"filter\"\n [CurrentFilterType]=\"currentFilterType!\"\n ></tb-date-time-filter>\n }\n @case (filter.fieldType === FieldType.Enum) {\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\n }\n }\n @if (currentFilterType === FilterType.IsNull) {\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\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\n mat-button\n (click)=\"state.addFilter(form.value)\"\n disableRipple\n [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\"\n >\n Apply\n </button>\n\n\n <ng-template #String>\n @if (currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In) {\n <mat-form-field class=\"my-filter\">\n <input\n matInput\n name=\"filterValue\"\n tbPreservePasteDelimiters\n [ngModel]=\"filter.filterValue\"\n />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter\n [type]=\"FieldType.String\"\n name='filterValue'\n [(ngModel)]=\"filter.filterValue\"\n ></lib-in-filter>\n }\n </ng-template>\n\n <ng-template #Boolean>\n @if (currentFilterType === FilterType.BooleanEquals) {\n <div class=\"switch\">\n <mat-radio-group\n name=\"filterValue\"\n [ngModel]=\"filter.filterValue\"\n >\n <mat-radio-button\n [value]=\"true\"\n preventEnter\n >True</mat-radio-button>\n <mat-radio-button\n [value]=\"false\"\n preventEnter\n >False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter\n [key]='filter.key'\n name='filterValue'\n [(ngModel)]='filter.filterValue'\n ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}", styles: [".filter-name{color:var(--tb-filter-name-color, cornflowerblue);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
3162
3448
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
|
|
3163
3449
|
type: Input
|
|
3164
3450
|
}], close: [{
|
|
@@ -3662,7 +3948,7 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
3662
3948
|
ngOnInit() {
|
|
3663
3949
|
super.ngOnInit();
|
|
3664
3950
|
}
|
|
3665
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [{ token: i5$
|
|
3951
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [{ token: i5$3.MatSlideToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3666
3952
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatSlideToggleTbFilterDirective, isStandalone: false, selector: "mat-slide-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
3667
3953
|
}
|
|
3668
3954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
|
|
@@ -3675,7 +3961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3675
3961
|
providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }],
|
|
3676
3962
|
standalone: false
|
|
3677
3963
|
}]
|
|
3678
|
-
}], ctorParameters: () => [{ type: i5$
|
|
3964
|
+
}], ctorParameters: () => [{ type: i5$3.MatSlideToggle }, { type: TableWrapperDirective, decorators: [{
|
|
3679
3965
|
type: Optional
|
|
3680
3966
|
}] }] });
|
|
3681
3967
|
// Radio button
|
|
@@ -3691,7 +3977,7 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
3691
3977
|
ngOnInit() {
|
|
3692
3978
|
super.ngOnInit();
|
|
3693
3979
|
}
|
|
3694
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [{ token: i5.MatRadioButton }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3980
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [{ token: i5$1.MatRadioButton }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3695
3981
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatRadioButtonTbFilterDirective, isStandalone: false, selector: "mat-radio-button[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"] }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
3696
3982
|
}
|
|
3697
3983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
|
|
@@ -3702,7 +3988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3702
3988
|
providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }],
|
|
3703
3989
|
standalone: false
|
|
3704
3990
|
}]
|
|
3705
|
-
}], ctorParameters: () => [{ type: i5.MatRadioButton }, { type: TableWrapperDirective, decorators: [{
|
|
3991
|
+
}], ctorParameters: () => [{ type: i5$1.MatRadioButton }, { type: TableWrapperDirective, decorators: [{
|
|
3706
3992
|
type: Optional
|
|
3707
3993
|
}] }] });
|
|
3708
3994
|
// Option (select)
|
|
@@ -3756,7 +4042,7 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
|
|
|
3756
4042
|
ngOnInit() {
|
|
3757
4043
|
super.ngOnInit();
|
|
3758
4044
|
}
|
|
3759
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8$
|
|
4045
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8$2.MatButtonToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3760
4046
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: MatButtonToggleFilterDirective, isStandalone: false, selector: "mat-button-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
3761
4047
|
}
|
|
3762
4048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
|
|
@@ -3769,7 +4055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3769
4055
|
providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }],
|
|
3770
4056
|
standalone: false
|
|
3771
4057
|
}]
|
|
3772
|
-
}], ctorParameters: () => [{ type: i8$
|
|
4058
|
+
}], ctorParameters: () => [{ type: i8$2.MatButtonToggle }, { type: TableWrapperDirective, decorators: [{
|
|
3773
4059
|
type: Optional
|
|
3774
4060
|
}] }] });
|
|
3775
4061
|
|
|
@@ -3980,97 +4266,72 @@ const key = (metaData) => metaData.additional.link?.urlKey ?
|
|
|
3980
4266
|
(element) => get(element, metaData.key);
|
|
3981
4267
|
const parseInterpolated = (interpolatedString, element) => interpolatedString.replace(/{([^}]+)}/g, (_, key) => get(element, key));
|
|
3982
4268
|
|
|
3983
|
-
class
|
|
3984
|
-
constructor(
|
|
3985
|
-
super({ notSorted: [], sorted: [] });
|
|
3986
|
-
this.tableState = tableState;
|
|
3987
|
-
this.set = this.updater((state, data) => ({ ...data }));
|
|
3988
|
-
this.setSorted = this.updater((state, sorted) => ({ ...state, sorted }));
|
|
3989
|
-
this.setNotSorted = this.updater((state, notSorted) => ({ ...state, notSorted }));
|
|
3990
|
-
this.sorted$ = this.select(state => state.sorted);
|
|
3991
|
-
this.notSorted$ = this.select(state => state.notSorted);
|
|
3992
|
-
this.setDirection = this.updater((state, sort) => {
|
|
3993
|
-
const index = state.sorted.findIndex(s => s.active === sort.active);
|
|
3994
|
-
const sorted = [...state.sorted];
|
|
3995
|
-
sorted.splice(index, 1, sort);
|
|
3996
|
-
return ({ ...state, sorted });
|
|
3997
|
-
});
|
|
3998
|
-
this.reset = () => {
|
|
3999
|
-
const sorted = this.tableState.sorted$.pipe(mergeMap(sort => this.tableState.metaData$.pipe(notNull(), map(meta => sort.map(s => {
|
|
4000
|
-
return { ...s, displayName: meta[s.active]?.displayName };
|
|
4001
|
-
})))));
|
|
4002
|
-
const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sorted$.pipe(map(s => metas.filter(meta => !s.some(s => s.active === meta.key))
|
|
4003
|
-
.map(meta => ({ active: meta.key, displayName: meta.displayName }))))));
|
|
4004
|
-
this.set(combineLatest([
|
|
4005
|
-
sorted.pipe(distinctSortArray), notSorted.pipe(distinctSortArray)
|
|
4006
|
-
]).pipe(map(([sorted, notSorted]) => ({ sorted, notSorted }))));
|
|
4007
|
-
};
|
|
4008
|
-
}
|
|
4009
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4010
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore }); }
|
|
4011
|
-
}
|
|
4012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
4013
|
-
type: Injectable
|
|
4014
|
-
}], ctorParameters: () => [{ type: TableStore }] });
|
|
4015
|
-
const equalSortArray = (arr1, arr2) => arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
|
|
4016
|
-
const distinctSortArray = distinctUntilChanged(equalSortArray);
|
|
4017
|
-
|
|
4018
|
-
class SortMenuComponent {
|
|
4019
|
-
constructor(tableState, store) {
|
|
4020
|
-
this.tableState = tableState;
|
|
4269
|
+
class ColumnsPanelComponent {
|
|
4270
|
+
constructor(store) {
|
|
4021
4271
|
this.store = store;
|
|
4022
|
-
this.
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4272
|
+
this.visibleRows$ = this.store.state$.pipe(map(state => {
|
|
4273
|
+
const sorted = state.sorted;
|
|
4274
|
+
return orderViewableMetaData(state)
|
|
4275
|
+
.filter(md => !state.hiddenKeys.includes(md.key))
|
|
4276
|
+
.map(md => {
|
|
4277
|
+
const sortIdx = sorted.findIndex(s => s.active === md.key);
|
|
4278
|
+
return {
|
|
4279
|
+
key: md.key,
|
|
4280
|
+
displayName: md.displayName || md.key,
|
|
4281
|
+
sortDirection: sortIdx === -1 ? null : sorted[sortIdx].direction,
|
|
4282
|
+
sortPriority: sortIdx === -1 ? null : sortIdx + 1,
|
|
4283
|
+
};
|
|
4284
|
+
});
|
|
4285
|
+
}));
|
|
4286
|
+
this.hiddenRows$ = this.store.state$.pipe(map(state => Object.values(state.metaData)
|
|
4287
|
+
.filter((md) => state.hiddenKeys.includes(md.key) &&
|
|
4288
|
+
md.fieldType !== FieldType.Hidden)
|
|
4289
|
+
.map(md => ({
|
|
4290
|
+
key: md.key,
|
|
4291
|
+
displayName: md.displayName || md.key,
|
|
4292
|
+
}))));
|
|
4293
|
+
this.visibleCount$ = this.visibleRows$.pipe(map(rows => rows.length));
|
|
4294
|
+
this.totalCount$ = this.store.state$.pipe(map(state => Object.values(state.metaData).filter((md) => md.fieldType !== FieldType.Hidden).length));
|
|
4034
4295
|
}
|
|
4035
|
-
|
|
4036
|
-
|
|
4296
|
+
cycleSort(key, ev) {
|
|
4297
|
+
ev.stopPropagation();
|
|
4298
|
+
this.store.cycleColumnSort(key);
|
|
4037
4299
|
}
|
|
4038
|
-
|
|
4039
|
-
this.dirty$.next(true);
|
|
4300
|
+
onVisibleDrop(event) {
|
|
4040
4301
|
if (event.previousContainer === event.container) {
|
|
4041
|
-
|
|
4042
|
-
|
|
4302
|
+
// reorder within Visible — indices are in visible-rows-only space,
|
|
4303
|
+
// so use reorderVisibleColumn (translates to userDefined.order correctly,
|
|
4304
|
+
// leaving hidden columns' slots untouched).
|
|
4305
|
+
this.store.reorderVisibleColumn({
|
|
4306
|
+
previousVisibleIndex: event.previousIndex,
|
|
4307
|
+
currentVisibleIndex: event.currentIndex,
|
|
4308
|
+
});
|
|
4043
4309
|
}
|
|
4044
4310
|
else {
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
this.store.
|
|
4048
|
-
this.store.setNotSorted(event.previousContainer.data);
|
|
4311
|
+
// dropped from Hidden into Visible at a position
|
|
4312
|
+
const hiddenRow = event.item.data;
|
|
4313
|
+
this.store.showColumnAt({ key: hiddenRow.key, newOrder: event.currentIndex });
|
|
4049
4314
|
}
|
|
4050
4315
|
}
|
|
4051
|
-
|
|
4316
|
+
onHiddenDrop(event) {
|
|
4052
4317
|
if (event.previousContainer === event.container) {
|
|
4318
|
+
// reorder within Hidden — no-op for now (hidden order isn't persisted)
|
|
4053
4319
|
return;
|
|
4054
4320
|
}
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex] };
|
|
4059
|
-
this.store.setNotSorted(event.container.data);
|
|
4060
|
-
this.store.setSorted(event.previousContainer.data);
|
|
4061
|
-
}
|
|
4321
|
+
// dropped from Visible into Hidden
|
|
4322
|
+
const visibleRow = event.item.data;
|
|
4323
|
+
this.store.hideColumn(visibleRow.key);
|
|
4062
4324
|
}
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
this.store.setDirection(sort);
|
|
4325
|
+
trackByKey(_, row) {
|
|
4326
|
+
return row.key;
|
|
4066
4327
|
}
|
|
4067
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type:
|
|
4068
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: SortMenuComponent, isStandalone: false, 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:#fff}.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;height:27px}.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-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
|
|
4328
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnsPanelComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ColumnsPanelComponent, isStandalone: false, selector: "tb-columns-panel", ngImport: i0, template: "<button stop-propagation class=\"trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Columns\">\n <mat-icon class=\"tb-icon-primary\">tune</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"columns-panel-menu\" xPosition=\"before\">\n <div class=\"cp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"cp-head\">\n <div class=\"cp-title\">\n Columns\n <span class=\"cp-count\">{{ (visibleCount$ | async) }} / {{ (totalCount$ | async) }}</span>\n </div>\n </div>\n\n <div class=\"cp-zones\">\n <!-- HIDDEN ZONE -->\n <div class=\"cp-zone\"\n cdkDropList\n #hiddenList=\"cdkDropList\"\n [cdkDropListData]=\"(hiddenRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[visibleList]\"\n (cdkDropListDropped)=\"onHiddenDrop($event)\">\n <div class=\"cp-zone-label\">\n Hidden\n <span class=\"cp-zone-count\">{{ ((hiddenRows$ | async) || []).length }}</span>\n </div>\n @if (hiddenRows$ | async; as hiddenRows) {\n @if (hiddenRows.length === 0) {\n <div class=\"cp-empty\">All visible</div>\n }\n @for (row of hiddenRows; track row.key) {\n <div class=\"cp-tag cp-tag-hidden\"\n cdkDrag\n [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-name\">{{ row.displayName }}</span>\n </div>\n }\n }\n </div>\n\n <!-- VISIBLE ZONE -->\n <div class=\"cp-zone cp-zone-visible\"\n cdkDropList\n #visibleList=\"cdkDropList\"\n [cdkDropListData]=\"(visibleRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[hiddenList]\"\n (cdkDropListDropped)=\"onVisibleDrop($event)\">\n <div class=\"cp-zone-label\">\n Visible\n <span class=\"cp-zone-count\">{{ ((visibleRows$ | async) || []).length }}</span>\n </div>\n @if (visibleRows$ | async; as visibleRows) {\n @if (visibleRows.length === 0) {\n <div class=\"cp-empty\">No columns visible</div>\n }\n @for (row of visibleRows; track row.key) {\n <div class=\"cp-row\" cdkDrag [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-priority\"\n [class.cp-priority-empty]=\"row.sortPriority === null\">\n {{ row.sortPriority }}\n </span>\n <span class=\"cp-col-name\">{{ row.displayName }}</span>\n <button class=\"cp-dir-pill\"\n [class.cp-dir-none]=\"row.sortDirection === null\"\n [class.cp-dir-asc]=\"row.sortDirection === 'asc'\"\n [class.cp-dir-desc]=\"row.sortDirection === 'desc'\"\n (click)=\"cycleSort(row.key, $event)\"\n type=\"button\">\n @switch (row.sortDirection) {\n @case ('asc') { \u2191 asc }\n @case ('desc') { \u2193 desc }\n @default { sort }\n }\n </button>\n </div>\n }\n }\n </div>\n </div>\n\n <div class=\"cp-foot\">\n Drag between zones to show/hide. Drag within Visible to reorder. Click direction to cycle sort.\n </div>\n </div>\n</mat-menu>\n", styles: ["::ng-deep .columns-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:380px!important}.cp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fdfbff)}.cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.cp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 10%,transparent);color:var(--mat-sys-primary, #7d00fa);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.cp-zones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.cp-zone{background:var(--mat-sys-surface-container-lowest, #ffffff);border:1.5px dashed color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 20%,transparent);border-radius:10px;padding:8px;min-height:200px;max-height:360px;overflow-y:auto}.cp-zone-visible{border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 45%,transparent)}.cp-zone.cdk-drop-list-dragging{background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 4%,transparent)}.cp-zone-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--mat-sys-primary, #7d00fa);padding:2px 4px 8px;display:flex;align-items:center;gap:6px}.cp-zone-count{background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 10%,transparent);color:var(--mat-sys-primary, #7d00fa);padding:1px 7px;border-radius:999px;font-size:10px}.cp-empty{text-align:center;color:#00000059;font-size:11.5px;font-style:italic;padding:16px 8px}.cp-tag{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;-webkit-user-select:none;user-select:none}.cp-tag-hidden{background:#00000006;border-style:dashed;color:var(--mat-sys-on-surface-variant, #6b6970)}.cp-tag:hover{border-color:var(--mat-sys-primary, #7d00fa)}.cp-tag .cp-grip,.cp-row .cp-grip{color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 50%,transparent);font-size:11px;flex-shrink:0;cursor:grab}.cp-tag .cp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;transition:border-color .12s ease}.cp-row:hover{border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 40%,transparent)}.cp-priority{width:18px;height:18px;border-radius:50%;background:var(--mat-sys-primary, #7d00fa);color:var(--mat-sys-on-primary, #fff);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.cp-priority.cp-priority-empty{background:transparent;color:transparent}.cp-col-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-dir-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4;min-width:56px;box-sizing:border-box;cursor:pointer;border:1px solid transparent;background:transparent;font-family:inherit;transition:all .15s ease;flex-shrink:0}.cp-dir-pill.cp-dir-none{color:#00000059;border-color:#0000001a}.cp-dir-pill.cp-dir-none:hover{color:var(--mat-sys-primary, #7d00fa);border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 40%,transparent)}.cp-dir-pill.cp-dir-asc,.cp-dir-pill.cp-dir-desc{background:var(--mat-sys-primary, #7d00fa);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 50%,transparent)}.cp-foot{font-size:10.5px;color:var(--mat-sys-on-surface-variant, #6b6970);padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06);line-height:1.4}.cdk-drag-placeholder{opacity:.4}.cdk-drag-preview{box-shadow:0 4px 14px #14003c33}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4069
4330
|
}
|
|
4070
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type:
|
|
4331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ColumnsPanelComponent, decorators: [{
|
|
4071
4332
|
type: Component,
|
|
4072
|
-
args: [{ selector: 'tb-
|
|
4073
|
-
}], ctorParameters: () => [{ type: TableStore }
|
|
4333
|
+
args: [{ selector: 'tb-columns-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button stop-propagation class=\"trigger-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Columns\">\n <mat-icon class=\"tb-icon-primary\">tune</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"columns-panel-menu\" xPosition=\"before\">\n <div class=\"cp-panel\" stop-propagation (click)=\"$event.stopPropagation()\">\n <div class=\"cp-head\">\n <div class=\"cp-title\">\n Columns\n <span class=\"cp-count\">{{ (visibleCount$ | async) }} / {{ (totalCount$ | async) }}</span>\n </div>\n </div>\n\n <div class=\"cp-zones\">\n <!-- HIDDEN ZONE -->\n <div class=\"cp-zone\"\n cdkDropList\n #hiddenList=\"cdkDropList\"\n [cdkDropListData]=\"(hiddenRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[visibleList]\"\n (cdkDropListDropped)=\"onHiddenDrop($event)\">\n <div class=\"cp-zone-label\">\n Hidden\n <span class=\"cp-zone-count\">{{ ((hiddenRows$ | async) || []).length }}</span>\n </div>\n @if (hiddenRows$ | async; as hiddenRows) {\n @if (hiddenRows.length === 0) {\n <div class=\"cp-empty\">All visible</div>\n }\n @for (row of hiddenRows; track row.key) {\n <div class=\"cp-tag cp-tag-hidden\"\n cdkDrag\n [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-name\">{{ row.displayName }}</span>\n </div>\n }\n }\n </div>\n\n <!-- VISIBLE ZONE -->\n <div class=\"cp-zone cp-zone-visible\"\n cdkDropList\n #visibleList=\"cdkDropList\"\n [cdkDropListData]=\"(visibleRows$ | async) || []\"\n [cdkDropListConnectedTo]=\"[hiddenList]\"\n (cdkDropListDropped)=\"onVisibleDrop($event)\">\n <div class=\"cp-zone-label\">\n Visible\n <span class=\"cp-zone-count\">{{ ((visibleRows$ | async) || []).length }}</span>\n </div>\n @if (visibleRows$ | async; as visibleRows) {\n @if (visibleRows.length === 0) {\n <div class=\"cp-empty\">No columns visible</div>\n }\n @for (row of visibleRows; track row.key) {\n <div class=\"cp-row\" cdkDrag [cdkDragData]=\"row\">\n <span class=\"cp-grip\">\u22EE\u22EE</span>\n <span class=\"cp-priority\"\n [class.cp-priority-empty]=\"row.sortPriority === null\">\n {{ row.sortPriority }}\n </span>\n <span class=\"cp-col-name\">{{ row.displayName }}</span>\n <button class=\"cp-dir-pill\"\n [class.cp-dir-none]=\"row.sortDirection === null\"\n [class.cp-dir-asc]=\"row.sortDirection === 'asc'\"\n [class.cp-dir-desc]=\"row.sortDirection === 'desc'\"\n (click)=\"cycleSort(row.key, $event)\"\n type=\"button\">\n @switch (row.sortDirection) {\n @case ('asc') { \u2191 asc }\n @case ('desc') { \u2193 desc }\n @default { sort }\n }\n </button>\n </div>\n }\n }\n </div>\n </div>\n\n <div class=\"cp-foot\">\n Drag between zones to show/hide. Drag within Visible to reorder. Click direction to cycle sort.\n </div>\n </div>\n</mat-menu>\n", styles: ["::ng-deep .columns-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:380px!important}.cp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fdfbff)}.cp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.cp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 10%,transparent);color:var(--mat-sys-primary, #7d00fa);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.cp-zones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.cp-zone{background:var(--mat-sys-surface-container-lowest, #ffffff);border:1.5px dashed color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 20%,transparent);border-radius:10px;padding:8px;min-height:200px;max-height:360px;overflow-y:auto}.cp-zone-visible{border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 45%,transparent)}.cp-zone.cdk-drop-list-dragging{background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 4%,transparent)}.cp-zone-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--mat-sys-primary, #7d00fa);padding:2px 4px 8px;display:flex;align-items:center;gap:6px}.cp-zone-count{background:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 10%,transparent);color:var(--mat-sys-primary, #7d00fa);padding:1px 7px;border-radius:999px;font-size:10px}.cp-empty{text-align:center;color:#00000059;font-size:11.5px;font-style:italic;padding:16px 8px}.cp-tag{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;-webkit-user-select:none;user-select:none}.cp-tag-hidden{background:#00000006;border-style:dashed;color:var(--mat-sys-on-surface-variant, #6b6970)}.cp-tag:hover{border-color:var(--mat-sys-primary, #7d00fa)}.cp-tag .cp-grip,.cp-row .cp-grip{color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 50%,transparent);font-size:11px;flex-shrink:0;cursor:grab}.cp-tag .cp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 8px;background:var(--mat-sys-surface-container-lowest, #fff);border:1px solid rgba(0,0,0,.1);border-radius:8px;margin-bottom:4px;font-size:12.5px;cursor:grab;transition:border-color .12s ease}.cp-row:hover{border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 40%,transparent)}.cp-priority{width:18px;height:18px;border-radius:50%;background:var(--mat-sys-primary, #7d00fa);color:var(--mat-sys-on-primary, #fff);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}.cp-priority.cp-priority-empty{background:transparent;color:transparent}.cp-col-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-dir-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4;min-width:56px;box-sizing:border-box;cursor:pointer;border:1px solid transparent;background:transparent;font-family:inherit;transition:all .15s ease;flex-shrink:0}.cp-dir-pill.cp-dir-none{color:#00000059;border-color:#0000001a}.cp-dir-pill.cp-dir-none:hover{color:var(--mat-sys-primary, #7d00fa);border-color:color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 40%,transparent)}.cp-dir-pill.cp-dir-asc,.cp-dir-pill.cp-dir-desc{background:var(--mat-sys-primary, #7d00fa);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #7d00fa) 50%,transparent)}.cp-foot{font-size:10.5px;color:var(--mat-sys-on-surface-variant, #6b6970);padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06);line-height:1.4}.cdk-drag-placeholder{opacity:.4}.cdk-drag-preview{box-shadow:0 4px 14px #14003c33}.cdk-drag-animating{transition:transform .2s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
4334
|
+
}], ctorParameters: () => [{ type: TableStore }] });
|
|
4074
4335
|
|
|
4075
4336
|
class KeyDisplayPipe {
|
|
4076
4337
|
constructor(tableState) {
|
|
@@ -4189,11 +4450,11 @@ class FilterChipsComponent {
|
|
|
4189
4450
|
this.filterStore.clearAll();
|
|
4190
4451
|
}
|
|
4191
4452
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, 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 Cards\">\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-set *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}}\n @if (filter.filterValue | asFilterPills; as pills) {\n @for (v of pills; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n }\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-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: AsFilterPillsPipe, name: "asFilterPills" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
|
|
4453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"fl-row\" *ngrxLet=\"currentFilters$ as currentFilters\">\n\n @if (currentFilters.length > 0) {\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all in-progress filters\">\n <mat-icon class=\"cancel-button\">close</mat-icon>\n </button>\n\n <div class=\"float\">\n @for (filter of currentFilters; track $index; let i = $index) {\n <div class=\"filter\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\"></tb-filter>\n </div>\n }\n </div>\n }\n\n <div class=\"fp-stack-inline\" *ngrxLet=\"filters$ as filters\">\n @for (filter of filters; track filter.filterId) {\n <div class=\"fp-chip\" [matTooltip]=\"'Double-click to edit'\" (dblclick)=\"addFilter(filter)\">\n <span class=\"fp-col-name\">{{ filter.key | keyDisplay | async }}</span>\n <span class=\"fp-op-pill\">{{ filter.filterType | formatFilterType : filter.filterValue }}</span>\n @if (filter.filterValue | asFilterPills; as pills) {\n @for (v of pills; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n <span class=\"fp-val-text\">{{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}</span>\n }\n <button class=\"fp-x-btn\" type=\"button\"\n (click)=\"tableState.removeFilter(filter.filterId!)\"\n [attr.aria-label]=\"'Remove filter on ' + (filter.key | keyDisplay | async)\">\n \u2715\n </button>\n </div>\n }\n @if (filters.length >= 2) {\n <button class=\"fp-ghost-link\" type=\"button\" (click)=\"tableState.clearFilters()\">\n Clear all\n </button>\n }\n </div>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.cancel-button{margin-right:30px;font-weight:700}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent);color:var(--mat-sys-primary, #006a6a);padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}.fl-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.fp-stack-inline{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}.fp-val-text{font-weight:500;color:var(--mat-sys-on-surface, #1d1b1e);padding:0 4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .filter-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:360px!important}.fp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);font-family:Inter,system-ui,sans-serif}.fp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.fp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.fp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.fp-add-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);border:none;border-radius:999px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-add-pill:hover{filter:brightness(.95)}.fp-plus-circle{width:16px;height:16px;border-radius:50%;background:#ffffff38;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1}.fp-empty{text-align:center;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:24px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--mat-sys-primary, #006a6a) 20%,transparent);margin-bottom:8px}.fp-empty strong{color:var(--mat-sys-primary, #006a6a)}.fp-stack{display:flex;flex-direction:column;gap:8px}.fp-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);color:var(--mat-sys-on-surface, #1d1b1e);border-radius:999px;padding:5px 4px 5px 12px;font-size:12.5px;border:1px solid transparent;max-width:100%;transition:background .15s ease,border-color .15s ease}.fp-chip:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 14%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent)}.fp-chip:hover .fp-x-btn{opacity:1}.fp-chip-custom{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 6%,transparent);border-color:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 12%,transparent)}.fp-col-name{display:inline-flex;align-items:center;gap:4px;font-weight:600;flex-shrink:0}.fp-col-hidden-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-op-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.4;min-width:24px;border:none;cursor:pointer;font-family:inherit;letter-spacing:.01em;box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-op-pill:hover{filter:brightness(.95)}.fp-op-custom{background:var(--mat-sys-on-surface-variant, #6b6970);cursor:default}.fp-val-input{border:none;background:transparent;padding:3px 6px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);border-radius:6px;outline:none;font-family:inherit;min-width:80px;width:auto;max-width:220px;flex:0 1 auto}.fp-val-input:focus,.fp-val-input:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-val-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-val-readonly{font-size:12px;color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-x-btn{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;opacity:0;margin-left:2px;font-size:11px;line-height:1;color:var(--mat-sys-on-surface-variant, #6b6970);border:none;cursor:pointer;font-family:inherit;transition:opacity .15s ease,background .15s ease,color .15s ease}.fp-x-btn:hover{background:color-mix(in srgb,var(--mat-sys-error, #ba1a1a) 18%,transparent);color:var(--mat-sys-error, #ba1a1a);opacity:1}.fp-foot{display:flex;align-items:center;justify-content:flex-end;padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06)}.fp-ghost-link{color:var(--mat-sys-primary, #006a6a);cursor:pointer;font-weight:500;background:transparent;border:none;font-size:11.5px;padding:4px 8px;border-radius:6px;font-family:inherit}.fp-ghost-link:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-chip{cursor:pointer}.fp-chip-custom{cursor:default}.fp-chip-pending{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 4%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent);border-style:dashed}.fp-val-pending{font-style:italic;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:0 4px}.fp-expanded{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;align-self:stretch;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-expanded-head{display:flex;align-items:center;gap:8px}.fp-expanded-head .fp-col-name{font-weight:600;font-size:13px;flex:1}.fp-expanded-head .fp-x-btn{margin-left:auto;opacity:.7}.fp-form-grid{display:grid;grid-template-columns:80px 1fr;gap:6px 12px;align-items:center}.fp-form-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600}.fp-form-input,.fp-form-select{font:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fff);border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:5px 8px;outline:none;width:100%;font-family:inherit;box-sizing:border-box}.fp-form-input:focus,.fp-form-select:focus{border-color:var(--mat-sys-primary, #006a6a);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent)}.fp-form-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-form-toggle{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent);overflow:hidden;width:fit-content}.fp-form-toggle button{background:transparent;border:none;padding:4px 14px;cursor:pointer;font-size:12px;font-weight:500;color:var(--mat-sys-on-surface-variant, #6b6970);font-family:inherit;transition:background .12s ease,color .12s ease}.fp-form-toggle button.active{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);font-weight:600}.fp-form-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}.fp-btn-ghost,.fp-btn-primary{border:none;padding:6px 14px;border-radius:6px;font-family:inherit;font-size:12.5px;cursor:pointer;font-weight:500}.fp-btn-ghost{background:transparent;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-btn-ghost:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 8%,transparent)}.fp-btn-primary{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-btn-primary:hover{filter:brightness(.96)}.fp-add-pill-active{filter:brightness(.94);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent),0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-col-picker{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:10px;padding:8px;margin-bottom:8px;display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-col-picker-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600;padding:4px 8px 6px}.fp-col-picker-item{background:transparent;border:none;text-align:left;font-family:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .12s ease}.fp-col-picker-item:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a)}\n"], dependencies: [{ kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: AsFilterPillsPipe, name: "asFilterPills" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
|
|
4193
4454
|
}
|
|
4194
4455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
4195
4456
|
type: Component,
|
|
4196
|
-
args: [{ selector: 'lib-filter-list', standalone: false, 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 Cards\">\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-set *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}}\n @if (filter.filterValue | asFilterPills; as pills) {\n @for (v of pills; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n }\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-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"] }]
|
|
4457
|
+
args: [{ selector: 'lib-filter-list', standalone: false, template: "<div class=\"fl-row\" *ngrxLet=\"currentFilters$ as currentFilters\">\n\n @if (currentFilters.length > 0) {\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all in-progress filters\">\n <mat-icon class=\"cancel-button\">close</mat-icon>\n </button>\n\n <div class=\"float\">\n @for (filter of currentFilters; track $index; let i = $index) {\n <div class=\"filter\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\"></tb-filter>\n </div>\n }\n </div>\n }\n\n <div class=\"fp-stack-inline\" *ngrxLet=\"filters$ as filters\">\n @for (filter of filters; track filter.filterId) {\n <div class=\"fp-chip\" [matTooltip]=\"'Double-click to edit'\" (dblclick)=\"addFilter(filter)\">\n <span class=\"fp-col-name\">{{ filter.key | keyDisplay | async }}</span>\n <span class=\"fp-op-pill\">{{ filter.filterType | formatFilterType : filter.filterValue }}</span>\n @if (filter.filterValue | asFilterPills; as pills) {\n @for (v of pills; track $index) {\n <span class=\"filter-value-pill\">{{ v }}</span>\n }\n } @else {\n <span class=\"fp-val-text\">{{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}</span>\n }\n <button class=\"fp-x-btn\" type=\"button\"\n (click)=\"tableState.removeFilter(filter.filterId!)\"\n [attr.aria-label]=\"'Remove filter on ' + (filter.key | keyDisplay | async)\">\n \u2715\n </button>\n </div>\n }\n @if (filters.length >= 2) {\n <button class=\"fp-ghost-link\" type=\"button\" (click)=\"tableState.clearFilters()\">\n Clear all\n </button>\n }\n </div>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.cancel-button{margin-right:30px;font-weight:700}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent);color:var(--mat-sys-primary, #006a6a);padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}.fl-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.fp-stack-inline{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}.fp-val-text{font-weight:500;color:var(--mat-sys-on-surface, #1d1b1e);padding:0 4px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .filter-panel-menu.mat-mdc-menu-panel{max-width:480px!important;min-width:360px!important}.fp-panel{padding:14px 16px 12px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);font-family:Inter,system-ui,sans-serif}.fp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.fp-title{display:inline-flex;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}.fp-count{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}.fp-add-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 10px;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);border:none;border-radius:999px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-add-pill:hover{filter:brightness(.95)}.fp-plus-circle{width:16px;height:16px;border-radius:50%;background:#ffffff38;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1}.fp-empty{text-align:center;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:24px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--mat-sys-primary, #006a6a) 20%,transparent);margin-bottom:8px}.fp-empty strong{color:var(--mat-sys-primary, #006a6a)}.fp-stack{display:flex;flex-direction:column;gap:8px}.fp-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);color:var(--mat-sys-on-surface, #1d1b1e);border-radius:999px;padding:5px 4px 5px 12px;font-size:12.5px;border:1px solid transparent;max-width:100%;transition:background .15s ease,border-color .15s ease}.fp-chip:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 14%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent)}.fp-chip:hover .fp-x-btn{opacity:1}.fp-chip-custom{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 6%,transparent);border-color:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 12%,transparent)}.fp-col-name{display:inline-flex;align-items:center;gap:4px;font-weight:600;flex-shrink:0}.fp-col-hidden-icon{font-size:14px;width:14px;height:14px;line-height:14px;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-op-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.4;min-width:24px;border:none;cursor:pointer;font-family:inherit;letter-spacing:.01em;box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-op-pill:hover{filter:brightness(.95)}.fp-op-custom{background:var(--mat-sys-on-surface-variant, #6b6970);cursor:default}.fp-val-input{border:none;background:transparent;padding:3px 6px;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);border-radius:6px;outline:none;font-family:inherit;min-width:80px;width:auto;max-width:220px;flex:0 1 auto}.fp-val-input:focus,.fp-val-input:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-val-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-val-readonly{font-size:12px;color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-x-btn{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;opacity:0;margin-left:2px;font-size:11px;line-height:1;color:var(--mat-sys-on-surface-variant, #6b6970);border:none;cursor:pointer;font-family:inherit;transition:opacity .15s ease,background .15s ease,color .15s ease}.fp-x-btn:hover{background:color-mix(in srgb,var(--mat-sys-error, #ba1a1a) 18%,transparent);color:var(--mat-sys-error, #ba1a1a);opacity:1}.fp-foot{display:flex;align-items:center;justify-content:flex-end;padding-top:10px;margin-top:10px;border-top:1px solid rgba(0,0,0,.06)}.fp-ghost-link{color:var(--mat-sys-primary, #006a6a);cursor:pointer;font-weight:500;background:transparent;border:none;font-size:11.5px;padding:4px 8px;border-radius:6px;font-family:inherit}.fp-ghost-link:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent)}.fp-chip{cursor:pointer}.fp-chip-custom{cursor:default}.fp-chip-pending{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 4%,transparent);border-color:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent);border-style:dashed}.fp-val-pending{font-style:italic;color:var(--mat-sys-on-surface-variant, #6b6970);font-size:12px;padding:0 4px}.fp-expanded{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;align-self:stretch;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-expanded-head{display:flex;align-items:center;gap:8px}.fp-expanded-head .fp-col-name{font-weight:600;font-size:13px;flex:1}.fp-expanded-head .fp-x-btn{margin-left:auto;opacity:.7}.fp-form-grid{display:grid;grid-template-columns:80px 1fr;gap:6px 12px;align-items:center}.fp-form-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600}.fp-form-input,.fp-form-select{font:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);background:var(--mat-sys-surface, #fff);border:1px solid rgba(0,0,0,.12);border-radius:6px;padding:5px 8px;outline:none;width:100%;font-family:inherit;box-sizing:border-box}.fp-form-input:focus,.fp-form-select:focus{border-color:var(--mat-sys-primary, #006a6a);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 15%,transparent)}.fp-form-input::placeholder{color:var(--mat-sys-on-surface-variant, #6b6970);font-style:italic}.fp-form-toggle{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 8%,transparent);border:1px solid color-mix(in srgb,var(--mat-sys-primary, #006a6a) 22%,transparent);overflow:hidden;width:fit-content}.fp-form-toggle button{background:transparent;border:none;padding:4px 14px;cursor:pointer;font-size:12px;font-weight:500;color:var(--mat-sys-on-surface-variant, #6b6970);font-family:inherit;transition:background .12s ease,color .12s ease}.fp-form-toggle button.active{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);font-weight:600}.fp-form-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}.fp-btn-ghost,.fp-btn-primary{border:none;padding:6px 14px;border-radius:6px;font-family:inherit;font-size:12.5px;cursor:pointer;font-weight:500}.fp-btn-ghost{background:transparent;color:var(--mat-sys-on-surface-variant, #6b6970)}.fp-btn-ghost:hover{background:color-mix(in srgb,var(--mat-sys-on-surface, #6b6970) 8%,transparent)}.fp-btn-primary{background:var(--mat-sys-primary, #006a6a);color:var(--mat-sys-on-primary, #fff);box-shadow:0 1px 3px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 50%,transparent)}.fp-btn-primary:hover{filter:brightness(.96)}.fp-add-pill-active{filter:brightness(.94);box-shadow:0 0 0 3px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent),0 2px 6px -1px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 45%,transparent)}.fp-col-picker{background:var(--mat-sys-surface, #fff);border:1px solid var(--mat-sys-primary, #006a6a);border-radius:10px;padding:8px;margin-bottom:8px;display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--mat-sys-primary, #006a6a) 25%,transparent)}.fp-col-picker-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mat-sys-on-surface-variant, #6b6970);font-weight:600;padding:4px 8px 6px}.fp-col-picker-item{background:transparent;border:none;text-align:left;font-family:inherit;font-size:13px;color:var(--mat-sys-on-surface, #1d1b1e);padding:6px 10px;border-radius:6px;cursor:pointer;transition:background .12s ease}.fp-col-picker-item:hover{background:color-mix(in srgb,var(--mat-sys-primary, #006a6a) 10%,transparent);color:var(--mat-sys-primary, #006a6a)}\n"] }]
|
|
4197
4458
|
}], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
|
|
4198
4459
|
|
|
4199
4460
|
class GroupByListComponent {
|
|
@@ -4203,7 +4464,7 @@ class GroupByListComponent {
|
|
|
4203
4464
|
ngOnInit() {
|
|
4204
4465
|
}
|
|
4205
4466
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GroupByListComponent, isStandalone: false, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\n <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\n <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n {{groupByKey | spaceCase}}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </ng-container>\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
4467
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GroupByListComponent, isStandalone: false, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\n <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\n <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n {{groupByKey | spaceCase}}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n </ng-container>\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
|
|
4207
4468
|
}
|
|
4208
4469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
4209
4470
|
type: Component,
|
|
@@ -4448,11 +4709,11 @@ class TableContainerComponent {
|
|
|
4448
4709
|
return this.tbGroupBy(data, groupByKeys);
|
|
4449
4710
|
}
|
|
4450
4711
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, deps: [{ token: TableStore }, { token: ExportToCsvService }, { token: TableBuilderConfigToken }, { token: i3$4.Store }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4451
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: TableContainerComponent, isStandalone: false, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", isVs: "isVs", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey" }, outputs: { selection$: "selection$", data: "data", paginatorChange: "paginatorChange", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<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 <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\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 </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\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\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [compareWithKey]=\"compareWithKey\">\n </tb-generic-table>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n (paginatorChange)=\"paginatorChange.emit()\">\n </tb-generic-table-vs>\n </div>\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)=\"resetState()\">\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 <ng-container *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 </ng-container>\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["add_opDialog_Class", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "compareWithKey", "disableSort"], outputs: ["paginatorChange", "selection$"] }, { kind: "component", type: GenericTableVsComponent, selector: "tb-generic-table-vs" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: TableContainerComponent, isStandalone: false, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", IndexColumn: "IndexColumn", SelectionColumn: "SelectionColumn", trackBy: "trackBy", isSticky: "isSticky", isVs: "isVs", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate", compareWithKey: "compareWithKey" }, outputs: { selection$: "selection$", data: "data", paginatorChange: "paginatorChange", OnStateReset: "OnStateReset", OnSaveState: "OnSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore], queries: [{ propertyName: "customFilters", predicate: TableCustomFilterDirective, descendants: true }, { propertyName: "filters", predicate: TableFilterDirective, descendants: true }, { propertyName: "customRows", predicate: MatRowDef }, { propertyName: "customCells", predicate: CustomCellDirective }], viewQueries: [{ propertyName: "genericTableComponent", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<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 <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(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 } @else {\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(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 }\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 </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\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\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [compareWithKey]=\"compareWithKey\">\n </tb-generic-table>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n (paginatorChange)=\"paginatorChange.emit()\">\n </tb-generic-table-vs>\n </div>\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-columns-panel *ngIf=\"!tableSettings.hideColumnSettings || !tableSettings.hideSort\"></tb-columns-panel>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon class=\"tb-icon-primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon class=\"tb-icon-primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (currentStateKey$ | async; as currentKey) {\n @if (tableId) {\n <button mat-menu-item (click)=\"saveState()\">\n <mat-icon class=\"tb-icon-primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n }\n @if (tableId) {\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n }\n }\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 @for (key of stateKeys$ | async; track key) {\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 class=\"tb-icon-warn\" (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n }\n </mat-menu>\n <ng-container *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 </ng-container>\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%;background-color:var(--mat-menu-container-color, white)}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}:host ::ng-deep .tb-icon-primary,::ng-deep .tb-icon-primary{color:var(--mat-sys-primary, #006a6a)}:host ::ng-deep .tb-icon-warn,::ng-deep .tb-icon-warn{color:var(--mat-sys-error, #ba1a1a)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["add_opDialog_Class", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "IndexColumn", "SelectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "compareWithKey", "disableSort"], outputs: ["paginatorChange", "selection$"] }, { kind: "component", type: GenericTableVsComponent, selector: "tb-generic-table-vs" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: ColumnsPanelComponent, selector: "tb-columns-panel" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4452
4713
|
}
|
|
4453
4714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
4454
4715
|
type: Component,
|
|
4455
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: false, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<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 <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n
|
|
4716
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: false, template: "<ng-content select=\"[before]\" >\n</ng-content>\n\n<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 <group-by-list></group-by-list>\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list></lib-filter-list>\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(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 } @else {\n <button mat-icon-button [matMenuTriggerFor]=\"mainMenu\"\n [class.flat-menu]=\"(collapseHeader$ | async)\">\n <mat-icon class=\"tb-icon-primary\">{{(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 }\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 </ng-container>\n </div>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\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\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [compareWithKey]=\"compareWithKey\">\n </tb-generic-table>\n </div>\n\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\n (paginatorChange)=\"paginatorChange.emit()\">\n </tb-generic-table-vs>\n </div>\n\n\n <ng-template #headerMenu>\n <ng-container>\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\n </tb-filter-displayer>\n <tb-columns-panel *ngIf=\"!tableSettings.hideColumnSettings || !tableSettings.hideSort\"></tb-columns-panel>\n </ng-container>\n </ng-template>\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon class=\"tb-icon-primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon class=\"tb-icon-primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (currentStateKey$ | async; as currentKey) {\n @if (tableId) {\n <button mat-menu-item (click)=\"saveState()\">\n <mat-icon class=\"tb-icon-primary\">save</mat-icon>\n <span>Save to {{currentKey}}</span>\n </button>\n }\n @if (tableId) {\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\n <span>Choose Profile</span>\n </button>\n }\n }\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 @for (key of stateKeys$ | async; track key) {\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 class=\"tb-icon-warn\" (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\n </span>\n </div>\n </button>\n }\n </mat-menu>\n <ng-container *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 </ng-container>\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%;background-color:var(--mat-menu-container-color, white)}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}:host ::ng-deep .tb-icon-primary,::ng-deep .tb-icon-primary{color:var(--mat-sys-primary, #006a6a)}:host ::ng-deep .tb-icon-warn,::ng-deep .tb-icon-warn{color:var(--mat-sys-error, #ba1a1a)}\n", ".collapse-icon{font-size:16px;height:16px;padding-bottom:.2rem;color:var(--tb-primary-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"] }]
|
|
4456
4717
|
}], ctorParameters: () => [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
|
|
4457
4718
|
type: Inject,
|
|
4458
4719
|
args: [TableBuilderConfigToken]
|
|
@@ -4597,6 +4858,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4597
4858
|
type: Injectable
|
|
4598
4859
|
}], ctorParameters: () => [{ type: i1$3.Actions }, { type: i3$4.Store }] });
|
|
4599
4860
|
|
|
4861
|
+
class SortMenuComponentStore extends ComponentStore {
|
|
4862
|
+
constructor(tableState) {
|
|
4863
|
+
super({ notSorted: [], sorted: [] });
|
|
4864
|
+
this.tableState = tableState;
|
|
4865
|
+
this.set = this.updater((state, data) => ({ ...data }));
|
|
4866
|
+
this.setSorted = this.updater((state, sorted) => ({ ...state, sorted }));
|
|
4867
|
+
this.setNotSorted = this.updater((state, notSorted) => ({ ...state, notSorted }));
|
|
4868
|
+
this.sorted$ = this.select(state => state.sorted);
|
|
4869
|
+
this.notSorted$ = this.select(state => state.notSorted);
|
|
4870
|
+
this.setDirection = this.updater((state, sort) => {
|
|
4871
|
+
const index = state.sorted.findIndex(s => s.active === sort.active);
|
|
4872
|
+
const sorted = [...state.sorted];
|
|
4873
|
+
sorted.splice(index, 1, sort);
|
|
4874
|
+
return ({ ...state, sorted });
|
|
4875
|
+
});
|
|
4876
|
+
this.reset = () => {
|
|
4877
|
+
const sorted = this.tableState.sorted$.pipe(mergeMap(sort => this.tableState.metaData$.pipe(notNull(), map(meta => sort.map(s => {
|
|
4878
|
+
return { ...s, displayName: meta[s.active]?.displayName };
|
|
4879
|
+
})))));
|
|
4880
|
+
const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(metas => this.tableState.sorted$.pipe(map(s => metas.filter(meta => !s.some(s => s.active === meta.key))
|
|
4881
|
+
.map(meta => ({ active: meta.key, displayName: meta.displayName }))))));
|
|
4882
|
+
this.set(combineLatest([
|
|
4883
|
+
sorted.pipe(distinctSortArray), notSorted.pipe(distinctSortArray)
|
|
4884
|
+
]).pipe(map(([sorted, notSorted]) => ({ sorted, notSorted }))));
|
|
4885
|
+
};
|
|
4886
|
+
}
|
|
4887
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4888
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore }); }
|
|
4889
|
+
}
|
|
4890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
4891
|
+
type: Injectable
|
|
4892
|
+
}], ctorParameters: () => [{ type: TableStore }] });
|
|
4893
|
+
const equalSortArray = (arr1, arr2) => arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
|
|
4894
|
+
const distinctSortArray = distinctUntilChanged(equalSortArray);
|
|
4895
|
+
|
|
4896
|
+
class SortMenuComponent {
|
|
4897
|
+
constructor(tableState, store) {
|
|
4898
|
+
this.tableState = tableState;
|
|
4899
|
+
this.store = store;
|
|
4900
|
+
this.SortDirection = SortDirection;
|
|
4901
|
+
this.dirty$ = new BehaviorSubject(false);
|
|
4902
|
+
this.apply = this.store.effect((obs) => obs.pipe(tap(() => {
|
|
4903
|
+
this.dirty$.next(false);
|
|
4904
|
+
this.tableState.setAllSort(this.store.sorted$.pipe(first$1()));
|
|
4905
|
+
})));
|
|
4906
|
+
this.sorted$ = this.store.sorted$.pipe(map(data => [...data]));
|
|
4907
|
+
this.notSorted$ = this.store.notSorted$.pipe(map(data => [...data]));
|
|
4908
|
+
}
|
|
4909
|
+
reset() {
|
|
4910
|
+
this.dirty$.next(false);
|
|
4911
|
+
this.store.reset();
|
|
4912
|
+
}
|
|
4913
|
+
ngOnInit() {
|
|
4914
|
+
this.store.reset();
|
|
4915
|
+
}
|
|
4916
|
+
dropIntoSorted(event) {
|
|
4917
|
+
this.dirty$.next(true);
|
|
4918
|
+
if (event.previousContainer === event.container) {
|
|
4919
|
+
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
|
|
4920
|
+
this.store.setSorted(event.container.data);
|
|
4921
|
+
}
|
|
4922
|
+
else {
|
|
4923
|
+
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
|
|
4924
|
+
event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex], direction: SortDirection.asc };
|
|
4925
|
+
this.store.setSorted(event.container.data);
|
|
4926
|
+
this.store.setNotSorted(event.previousContainer.data);
|
|
4927
|
+
}
|
|
4928
|
+
}
|
|
4929
|
+
dropIntoNotSorted(event) {
|
|
4930
|
+
if (event.previousContainer === event.container) {
|
|
4931
|
+
return;
|
|
4932
|
+
}
|
|
4933
|
+
else {
|
|
4934
|
+
this.dirty$.next(true);
|
|
4935
|
+
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
|
|
4936
|
+
event.container.data[event.currentIndex] = { ...event.container.data[event.currentIndex] };
|
|
4937
|
+
this.store.setNotSorted(event.container.data);
|
|
4938
|
+
this.store.setSorted(event.previousContainer.data);
|
|
4939
|
+
}
|
|
4940
|
+
}
|
|
4941
|
+
setDirection(sort) {
|
|
4942
|
+
this.dirty$.next(true);
|
|
4943
|
+
this.store.setDirection(sort);
|
|
4944
|
+
}
|
|
4945
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4946
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: SortMenuComponent, isStandalone: false, 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 class=\"tb-icon-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 class=\"tb-icon-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:var(--mat-app-background-color, white)}.light-arrow{color:var(--tb-primary-light, rgba(147, 177, 234, .47))}.dark-arrow{color:var(--tb-primary-dark, #224e9c)}.up-down-button{background-color:var(--mat-app-background-color, white);border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.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-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:var(--tb-primary-dark, #224e9c);font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:var(--tb-primary-dark, #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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: i9.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i9.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
|
|
4947
|
+
}
|
|
4948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
4949
|
+
type: Component,
|
|
4950
|
+
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], standalone: false, 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 class=\"tb-icon-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 class=\"tb-icon-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:var(--mat-app-background-color, white)}.light-arrow{color:var(--tb-primary-light, rgba(147, 177, 234, .47))}.dark-arrow{color:var(--tb-primary-dark, #224e9c)}.up-down-button{background-color:var(--mat-app-background-color, white);border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.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-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:var(--tb-primary-dark, #224e9c);font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:var(--tb-primary-dark, #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"] }]
|
|
4951
|
+
}], ctorParameters: () => [{ type: TableStore }, { type: SortMenuComponentStore }] });
|
|
4952
|
+
|
|
4600
4953
|
class TableBuilderModule {
|
|
4601
4954
|
static forRoot(config) {
|
|
4602
4955
|
return {
|
|
@@ -4616,6 +4969,7 @@ class TableBuilderModule {
|
|
|
4616
4969
|
CustomCellDirective,
|
|
4617
4970
|
GenColDisplayerComponent,
|
|
4618
4971
|
GenFilterDisplayerComponent,
|
|
4972
|
+
ColumnsPanelComponent,
|
|
4619
4973
|
DateFilterComponent,
|
|
4620
4974
|
FilterComponent,
|
|
4621
4975
|
MultiSortDirective,
|
|
@@ -4658,6 +5012,7 @@ class TableBuilderModule {
|
|
|
4658
5012
|
CustomCellDirective,
|
|
4659
5013
|
GenColDisplayerComponent,
|
|
4660
5014
|
GenFilterDisplayerComponent,
|
|
5015
|
+
ColumnsPanelComponent,
|
|
4661
5016
|
FilterComponent,
|
|
4662
5017
|
MultiSortDirective,
|
|
4663
5018
|
ResizeColumnDirective,
|
|
@@ -4711,6 +5066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4711
5066
|
CustomCellDirective,
|
|
4712
5067
|
GenColDisplayerComponent,
|
|
4713
5068
|
GenFilterDisplayerComponent,
|
|
5069
|
+
ColumnsPanelComponent,
|
|
4714
5070
|
FilterComponent,
|
|
4715
5071
|
MultiSortDirective,
|
|
4716
5072
|
ResizeColumnDirective,
|
|
@@ -4734,6 +5090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4734
5090
|
CustomCellDirective,
|
|
4735
5091
|
GenColDisplayerComponent,
|
|
4736
5092
|
GenFilterDisplayerComponent,
|
|
5093
|
+
ColumnsPanelComponent,
|
|
4737
5094
|
DateFilterComponent,
|
|
4738
5095
|
FilterComponent,
|
|
4739
5096
|
MultiSortDirective,
|
|
@@ -5111,5 +5468,5 @@ const shallowEquals = (first, second) => {
|
|
|
5111
5468
|
* Generated bundle index. Do not edit.
|
|
5112
5469
|
*/
|
|
5113
5470
|
|
|
5114
|
-
export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreservePasteDelimitersDirective, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollViewportDirective, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
|
|
5471
|
+
export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ColumnsPanelComponent, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, DateFilterComponent, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GenericTableVsComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, HttpRequestStateFactory, HttpRequestStateStore, HttpRequestStatus, HttpRequestStrategy, HttpSuccessStateDirective, InitializationState, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersisitedTableSettings, PaginatorComponent, PesrsistedTableSettings, PhoneNumberPipe, PreservePasteDelimitersDirective, PreventEnterDirective, ResizeColumnDirective, SortDirection, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, TableBuilder, TableBuilderModule, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableStore, TableVirtualScrollObservableDataSource, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollViewportDirective, actionStatusReducer, chainRequest, combineArrays, createActionableSelector, createFailure, createFilterFunc, createSuccess, defaultFilter, defaultShareReplay, defaultTableState, delayOn, filterArray, filterTypeMap, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialState, isCustomFilter, isErrorState, isFilterInfo, isSuccessOrErrorState, isSuccessState, keysToDelete, mapArray, mapError, notNull, notStarted, onWait, onceWhen, orderMetaData, orderViewableMetaData, previousAndCurrent, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setUpStoreFactory, skipOneWhen, spaceCase, stateIs, statusAdapter, statusIsSuccessOrInProgress, switchOff, tapError, tapSuccess };
|
|
5115
5472
|
//# sourceMappingURL=saydar-table-builder.mjs.map
|