@saydar/table-builder 1.0.9-beta.3 → 1.0.9-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
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,
|
|
3
|
+
import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, last, takeUntil, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1, distinctUntilChanged, withLatestFrom, mergeAll, scan as scan$1 } 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';
|
|
@@ -65,7 +65,7 @@ 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 i7$3 from '@angular/material/chips';
|
|
69
69
|
import { MatChipsModule } from '@angular/material/chips';
|
|
70
70
|
import * as i8$3 from '@angular/material/button-toggle';
|
|
71
71
|
import * as i3$4 from '@ngrx/store';
|
|
@@ -73,7 +73,6 @@ import { createSelector, createAction, props, select, createReducer, on, StoreMo
|
|
|
73
73
|
import * as i1$3 from '@ngrx/effects';
|
|
74
74
|
import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
|
|
75
75
|
import { concatLatestFrom } from '@ngrx/operators';
|
|
76
|
-
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
|
77
76
|
import { createEntityAdapter } from '@ngrx/entity';
|
|
78
77
|
|
|
79
78
|
var HttpRequestStatus;
|
|
@@ -1445,46 +1444,29 @@ const isNull = (filterInfo) => {
|
|
|
1445
1444
|
return func;
|
|
1446
1445
|
};
|
|
1447
1446
|
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
const vals = filterValue.map((v) => prepareForStringCompare(v));
|
|
1452
|
-
return ((val) => vals.some((v) => prepareForStringCompare(val) === v));
|
|
1447
|
+
function normalizeStringFilterValue(v) {
|
|
1448
|
+
if (typeof v === 'string' && v.includes(',')) {
|
|
1449
|
+
return v.split(',').map(s => s.trim()).filter(s => s);
|
|
1453
1450
|
}
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
const
|
|
1458
|
-
const filterValue = filterInfo.filterValue;
|
|
1451
|
+
return v;
|
|
1452
|
+
}
|
|
1453
|
+
const makeStringFunc = (op) => (filterInfo) => {
|
|
1454
|
+
const filterValue = normalizeStringFilterValue(filterInfo.filterValue);
|
|
1459
1455
|
if (Array.isArray(filterValue)) {
|
|
1460
1456
|
const vals = filterValue.map((v) => prepareForStringCompare(v));
|
|
1461
|
-
return (
|
|
1457
|
+
return (val) => vals.some((v) => op(prepareForStringCompare(val), v));
|
|
1462
1458
|
}
|
|
1463
|
-
const
|
|
1464
|
-
return (
|
|
1459
|
+
const fv = prepareForStringCompare(filterValue);
|
|
1460
|
+
return (val) => op(prepareForStringCompare(val), fv);
|
|
1465
1461
|
};
|
|
1462
|
+
const stringEqualFunc = makeStringFunc((a, b) => a === b);
|
|
1463
|
+
const stringContainsFunc = makeStringFunc((a, b) => a.includes(b));
|
|
1464
|
+
const stringStartsWithFunc = makeStringFunc((a, b) => a.startsWith(b));
|
|
1465
|
+
const stringEndsWithFunc = makeStringFunc((a, b) => a.endsWith(b));
|
|
1466
1466
|
const stringDoesNotContainFunc = (filterInfo) => {
|
|
1467
1467
|
const doesNotContainVal = prepareForStringCompare(filterInfo.filterValue);
|
|
1468
1468
|
return ((val) => !prepareForStringCompare(val)?.includes(doesNotContainVal));
|
|
1469
1469
|
};
|
|
1470
|
-
const stringStartsWithFunc = (filterInfo) => {
|
|
1471
|
-
const filterValue = filterInfo.filterValue;
|
|
1472
|
-
if (Array.isArray(filterValue)) {
|
|
1473
|
-
const vals = filterValue.map((v) => prepareForStringCompare(v));
|
|
1474
|
-
return ((val) => vals.some((v) => prepareForStringCompare(val).startsWith(v)));
|
|
1475
|
-
}
|
|
1476
|
-
const startsWith = prepareForStringCompare(filterValue);
|
|
1477
|
-
return ((val) => prepareForStringCompare(val).startsWith(startsWith));
|
|
1478
|
-
};
|
|
1479
|
-
const stringEndsWithFunc = (filterInfo) => {
|
|
1480
|
-
const filterValue = filterInfo.filterValue;
|
|
1481
|
-
if (Array.isArray(filterValue)) {
|
|
1482
|
-
const vals = filterValue.map((v) => prepareForStringCompare(v));
|
|
1483
|
-
return ((val) => vals.some((v) => prepareForStringCompare(val).endsWith(v)));
|
|
1484
|
-
}
|
|
1485
|
-
const endsWith = prepareForStringCompare(filterValue);
|
|
1486
|
-
return ((val) => prepareForStringCompare(val).endsWith(endsWith));
|
|
1487
|
-
};
|
|
1488
1470
|
const multipleStringValuesEqualsFunc = (filterInfo) => {
|
|
1489
1471
|
const filterVals = filterInfo.filterValue.map((v) => prepareForStringCompare(v));
|
|
1490
1472
|
return ((val) => filterVals.some((s) => prepareForStringCompare(val) === s));
|
|
@@ -1504,8 +1486,14 @@ const EnumFilterFuncs = {
|
|
|
1504
1486
|
};
|
|
1505
1487
|
const prepareForStringCompare = (val) => val?.toString().trim().toLowerCase();
|
|
1506
1488
|
|
|
1489
|
+
function normalizeNumberFilterValue(v) {
|
|
1490
|
+
if (typeof v === 'string' && v.includes(',')) {
|
|
1491
|
+
return v.split(',').map(s => Number(s.trim())).filter(n => !isNaN(n));
|
|
1492
|
+
}
|
|
1493
|
+
return v;
|
|
1494
|
+
}
|
|
1507
1495
|
const numberEqalsFunc = (filterInfo) => {
|
|
1508
|
-
const filterValue = filterInfo.filterValue;
|
|
1496
|
+
const filterValue = normalizeNumberFilterValue(filterInfo.filterValue);
|
|
1509
1497
|
if (Array.isArray(filterValue)) {
|
|
1510
1498
|
return (val) => filterValue.some((v) => val === v);
|
|
1511
1499
|
}
|
|
@@ -2263,18 +2251,8 @@ class HeaderMenuComponent {
|
|
|
2263
2251
|
this.myFilterType = filterType;
|
|
2264
2252
|
}
|
|
2265
2253
|
}
|
|
2266
|
-
onMenuOpened() {
|
|
2267
|
-
this.tableState.getFilter$('header-column-' + this.metaData.key).pipe(take(1)).subscribe(existing => {
|
|
2268
|
-
if (!existing) {
|
|
2269
|
-
this.filter.filterValue = undefined;
|
|
2270
|
-
}
|
|
2271
|
-
});
|
|
2272
|
-
}
|
|
2273
2254
|
onEnter(filter) {
|
|
2274
2255
|
if (filter.filterValue != undefined && filter.filterType) {
|
|
2275
|
-
if (typeof filter.filterValue === 'string' && filter.filterValue.includes(',')) {
|
|
2276
|
-
filter.filterValue = filter.filterValue.split(',').map((s) => s.trim()).filter((s) => s);
|
|
2277
|
-
}
|
|
2278
2256
|
this.tableState.addFilter(filter);
|
|
2279
2257
|
this.trigger.closeMenu();
|
|
2280
2258
|
}
|
|
@@ -2592,7 +2570,7 @@ class PaginatorComponent {
|
|
|
2592
2570
|
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
|
|
2593
2571
|
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
2594
2572
|
</div>
|
|
2595
|
-
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2573
|
+
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 250, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2596
2574
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
2597
2575
|
</mat-paginator>
|
|
2598
2576
|
`, isInline: true, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\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.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 }); }
|
|
@@ -2603,7 +2581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2603
2581
|
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}" *ngIf="currentPageData$ | async as pageData">
|
|
2604
2582
|
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
2605
2583
|
</div>
|
|
2606
|
-
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2584
|
+
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 250, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2607
2585
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
2608
2586
|
</mat-paginator>
|
|
2609
2587
|
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\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"] }]
|
|
@@ -3048,11 +3026,11 @@ class NumberFilterComponent {
|
|
|
3048
3026
|
this.FieldType = FieldType;
|
|
3049
3027
|
}
|
|
3050
3028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3051
|
-
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
|
|
3029
|
+
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$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: "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 }); }
|
|
3052
3030
|
}
|
|
3053
3031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3054
3032
|
type: Component,
|
|
3055
|
-
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In) {\n
|
|
3033
|
+
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, 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"] }]
|
|
3056
3034
|
}], propDecorators: { CurrentFilterType: [{
|
|
3057
3035
|
type: Input
|
|
3058
3036
|
}], info: [{
|
|
@@ -3090,22 +3068,16 @@ class FilterComponent {
|
|
|
3090
3068
|
onEnter(filter, event) {
|
|
3091
3069
|
event.preventDefault();
|
|
3092
3070
|
if (filter.filterValue != null && filter.filterType) {
|
|
3093
|
-
this.
|
|
3071
|
+
this.state.addFilter(filter);
|
|
3094
3072
|
this.close.emit();
|
|
3095
3073
|
}
|
|
3096
3074
|
}
|
|
3097
|
-
applyFilter(filter) {
|
|
3098
|
-
if (typeof filter.filterValue === 'string' && filter.filterValue.includes(',')) {
|
|
3099
|
-
filter.filterValue = filter.filterValue.split(',').map((s) => s.trim()).filter((s) => s);
|
|
3100
|
-
}
|
|
3101
|
-
this.state.addFilter(filter);
|
|
3102
|
-
}
|
|
3103
3075
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3104
|
-
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 appearance=\"outlined\" class=\"filter-card\">\n <mat-card-content>\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n <div class=\"head-row\" >\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n matTooltip=\"Close\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\" >\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [(ngModel)]=\"currentFilterType\" >\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 [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></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 [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\n }\n @case (filter.fieldType === FieldType.DateTime) {\n <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></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 name=\"filterValue\" [ngModel]=\"filter.filterValue\">\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n }\n </div>\n <button mat-button (click)=\"applyFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\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 matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n </mat-form-field>\n }\n @if (currentFilterType === FilterType.In) {\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" ></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 name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if (currentFilterType === FilterType.In) {\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}\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: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3076
|
+
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 [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: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3105
3077
|
}
|
|
3106
3078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3107
3079
|
type: Component,
|
|
3108
|
-
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (filter) {\n<mat-card
|
|
3080
|
+
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 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 [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"] }]
|
|
3109
3081
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
|
|
3110
3082
|
type: Input
|
|
3111
3083
|
}], close: [{
|
|
@@ -3452,9 +3424,6 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
|
|
|
3452
3424
|
super.reset();
|
|
3453
3425
|
}
|
|
3454
3426
|
setFilter(filter) {
|
|
3455
|
-
if (typeof filter.filterValue === 'string' && filter.filterValue.includes(',')) {
|
|
3456
|
-
filter.filterValue = filter.filterValue.split(',').map((s) => s.trim()).filter((s) => s);
|
|
3457
|
-
}
|
|
3458
3427
|
filter.active = filter.filterValue && this._userActive;
|
|
3459
3428
|
super.setFilter(filter);
|
|
3460
3429
|
}
|
|
@@ -4119,7 +4088,7 @@ class FilterChipsComponent {
|
|
|
4119
4088
|
this.filterStore.clearAll();
|
|
4120
4089
|
}
|
|
4121
4090
|
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 }); }
|
|
4122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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\" >\r\n\r\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n\r\n\r\n <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n </div>\r\n </div>\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\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:
|
|
4091
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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\" >\r\n\r\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n\r\n\r\n <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n </div>\r\n </div>\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\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: FormatFilterTypePipe, name: "formatFilterType" }] }); }
|
|
4123
4092
|
}
|
|
4124
4093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
4125
4094
|
type: Component,
|
|
@@ -4133,7 +4102,7 @@ class GroupByListComponent {
|
|
|
4133
4102
|
ngOnInit() {
|
|
4134
4103
|
}
|
|
4135
4104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4136
|
-
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\">\r\n <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\r\n <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\r\n <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\r\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n {{groupByKey | spaceCase}}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </ng-container>\r\n</mat-chip-set>\r\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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type:
|
|
4105
|
+
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\">\r\n <span *ngIf=\"groupByKeys?.length\" class=\"tb-group-label\">Group By:</span>\r\n <ng-container *ngFor=\"let groupByKey of groupByKeys; let i = index;\">\r\n <mat-icon *ngIf=\"i > 0\" class=\"nested-arrow\">arrow_right</mat-icon>\r\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n {{groupByKey | spaceCase}}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </ng-container>\r\n</mat-chip-set>\r\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: 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: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
|
|
4137
4106
|
}
|
|
4138
4107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
4139
4108
|
type: Component,
|
|
@@ -4518,88 +4487,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4518
4487
|
type: Injectable
|
|
4519
4488
|
}], ctorParameters: () => [{ type: i1$3.Actions }, { type: i3$4.Store }] });
|
|
4520
4489
|
|
|
4521
|
-
class ChipFilterInputComponent {
|
|
4522
|
-
constructor(ref) {
|
|
4523
|
-
this.ref = ref;
|
|
4524
|
-
this.FieldType = FieldType;
|
|
4525
|
-
this.values = [];
|
|
4526
|
-
this.separatorKeyCodes = [COMMA, ENTER];
|
|
4527
|
-
this.onChange = (_) => { };
|
|
4528
|
-
this.onTouched = () => { };
|
|
4529
|
-
}
|
|
4530
|
-
writeValue(obj) {
|
|
4531
|
-
if (Array.isArray(obj)) {
|
|
4532
|
-
this.values = obj.filter(v => v != null && v !== '');
|
|
4533
|
-
}
|
|
4534
|
-
else if (obj != null && obj !== '') {
|
|
4535
|
-
this.values = [obj];
|
|
4536
|
-
}
|
|
4537
|
-
else {
|
|
4538
|
-
this.values = [];
|
|
4539
|
-
}
|
|
4540
|
-
this.ref.markForCheck();
|
|
4541
|
-
}
|
|
4542
|
-
registerOnChange(fn) {
|
|
4543
|
-
this.onChange = fn;
|
|
4544
|
-
}
|
|
4545
|
-
registerOnTouched(fn) {
|
|
4546
|
-
this.onTouched = fn;
|
|
4547
|
-
}
|
|
4548
|
-
add(event) {
|
|
4549
|
-
const raw = (event.value || '').trim();
|
|
4550
|
-
if (!raw) {
|
|
4551
|
-
event.chipInput.clear();
|
|
4552
|
-
return;
|
|
4553
|
-
}
|
|
4554
|
-
if (this.isNumericType()) {
|
|
4555
|
-
const num = Number(raw);
|
|
4556
|
-
if (isNaN(num)) {
|
|
4557
|
-
event.chipInput.clear();
|
|
4558
|
-
return;
|
|
4559
|
-
}
|
|
4560
|
-
this.values = [...this.values, num];
|
|
4561
|
-
}
|
|
4562
|
-
else {
|
|
4563
|
-
this.values = [...this.values, raw];
|
|
4564
|
-
}
|
|
4565
|
-
event.chipInput.clear();
|
|
4566
|
-
this.emitValue();
|
|
4567
|
-
}
|
|
4568
|
-
remove(index) {
|
|
4569
|
-
this.values = [...this.values];
|
|
4570
|
-
this.values.splice(index, 1);
|
|
4571
|
-
this.emitValue();
|
|
4572
|
-
}
|
|
4573
|
-
onKeydown(event) {
|
|
4574
|
-
if (event.key === 'Enter') {
|
|
4575
|
-
event.stopPropagation();
|
|
4576
|
-
}
|
|
4577
|
-
}
|
|
4578
|
-
emitValue() {
|
|
4579
|
-
this.ref.markForCheck();
|
|
4580
|
-
this.onChange(this.values.length > 0 ? this.values : undefined);
|
|
4581
|
-
}
|
|
4582
|
-
isNumericType() {
|
|
4583
|
-
return this.type === FieldType.Number || this.type === FieldType.Currency;
|
|
4584
|
-
}
|
|
4585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ChipFilterInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: ChipFilterInputComponent, isStandalone: false, selector: "tb-chip-filter-input", inputs: { type: "type" }, providers: [{
|
|
4587
|
-
provide: NG_VALUE_ACCESSOR,
|
|
4588
|
-
useExisting: ChipFilterInputComponent,
|
|
4589
|
-
multi: true
|
|
4590
|
-
}], ngImport: i0, template: "<mat-form-field class=\"chip-filter-field\">\r\n <mat-chip-grid #chipGrid>\r\n @for (val of values; track $index) {\r\n <mat-chip-row (removed)=\"remove($index)\">\r\n {{val}}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n <input matInput\r\n [matChipInputFor]=\"chipGrid\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\r\n [matChipInputAddOnBlur]=\"true\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n />\r\n</mat-form-field>\r\n", styles: [".chip-filter-field{width:100%}:host ::ng-deep .mat-mdc-chip.mat-mdc-chip-row{font-size:12px;min-height:24px;padding:0 8px}:host ::ng-deep .mat-mdc-chip-remove{width:16px;height:16px;font-size:16px}:host ::ng-deep .mdc-evolution-chip__action--trailing{padding:0}\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$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: "component", type: i4$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4591
|
-
}
|
|
4592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: ChipFilterInputComponent, decorators: [{
|
|
4593
|
-
type: Component,
|
|
4594
|
-
args: [{ selector: 'tb-chip-filter-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
4595
|
-
provide: NG_VALUE_ACCESSOR,
|
|
4596
|
-
useExisting: ChipFilterInputComponent,
|
|
4597
|
-
multi: true
|
|
4598
|
-
}], standalone: false, template: "<mat-form-field class=\"chip-filter-field\">\r\n <mat-chip-grid #chipGrid>\r\n @for (val of values; track $index) {\r\n <mat-chip-row (removed)=\"remove($index)\">\r\n {{val}}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n <input matInput\r\n [matChipInputFor]=\"chipGrid\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeyCodes\"\r\n [matChipInputAddOnBlur]=\"true\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n />\r\n</mat-form-field>\r\n", styles: [".chip-filter-field{width:100%}:host ::ng-deep .mat-mdc-chip.mat-mdc-chip-row{font-size:12px;min-height:24px;padding:0 8px}:host ::ng-deep .mat-mdc-chip-remove{width:16px;height:16px;font-size:16px}:host ::ng-deep .mdc-evolution-chip__action--trailing{padding:0}\n"] }]
|
|
4599
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
4600
|
-
type: Input
|
|
4601
|
-
}] } });
|
|
4602
|
-
|
|
4603
4490
|
class TableBuilderModule {
|
|
4604
4491
|
static forRoot(config) {
|
|
4605
4492
|
return {
|
|
@@ -4645,8 +4532,7 @@ class TableBuilderModule {
|
|
|
4645
4532
|
TableFilterStringContainsDirective,
|
|
4646
4533
|
TableWrapperDirective,
|
|
4647
4534
|
GroupByListComponent,
|
|
4648
|
-
DateTimeFilterComponent,
|
|
4649
|
-
ChipFilterInputComponent], imports: [CommonModule,
|
|
4535
|
+
DateTimeFilterComponent], imports: [CommonModule,
|
|
4650
4536
|
MaterialModule, i3$4.StoreFeatureModule, i1$3.EffectsFeatureModule, FormsModule,
|
|
4651
4537
|
RouterModule,
|
|
4652
4538
|
LetDirective,
|
|
@@ -4761,7 +4647,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4761
4647
|
TableWrapperDirective,
|
|
4762
4648
|
GroupByListComponent,
|
|
4763
4649
|
DateTimeFilterComponent,
|
|
4764
|
-
ChipFilterInputComponent,
|
|
4765
4650
|
],
|
|
4766
4651
|
providers: [
|
|
4767
4652
|
SpaceCasePipe,
|