@saydar/table-builder 1.0.9-beta.0 → 1.0.9-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
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
3
|
import { shareReplay, map, switchAll, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap, last, take, takeUntil, distinctUntilKeyChanged, delay as delay$1, distinct, first as first$1, distinctUntilChanged, withLatestFrom, mergeAll, scan as scan$1 } from 'rxjs/operators';
|
|
4
|
-
import * as i3$
|
|
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
7
|
import * as i4$1 from '@angular/material/table';
|
|
@@ -39,24 +39,21 @@ import * as i5 from '@angular/material/radio';
|
|
|
39
39
|
import { MatRadioModule } from '@angular/material/radio';
|
|
40
40
|
import * as i5$1 from '@angular/material/button';
|
|
41
41
|
import { MatButtonModule } from '@angular/material/button';
|
|
42
|
-
import * as
|
|
42
|
+
import * as i8$2 from '@angular/material/input';
|
|
43
43
|
import { MatInputModule } from '@angular/material/input';
|
|
44
|
-
import * as
|
|
44
|
+
import * as i2$1 from '@angular/forms';
|
|
45
45
|
import { NG_VALUE_ACCESSOR, NgForm, ControlContainer, FormsModule } from '@angular/forms';
|
|
46
46
|
import * as i7 from '@angular/material/checkbox';
|
|
47
47
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
48
48
|
import * as i13 from 'ng-table-virtual-scroll';
|
|
49
49
|
import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
|
|
50
|
-
import * as i3$
|
|
50
|
+
import * as i3$2 from '@angular/material/paginator';
|
|
51
51
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
52
52
|
import * as i12 from '@angular/cdk/scrolling';
|
|
53
53
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
54
54
|
import * as i1$2 from '@angular/cdk/table';
|
|
55
55
|
import * as i7$1 from '@angular/material/card';
|
|
56
56
|
import { MatCardModule } from '@angular/material/card';
|
|
57
|
-
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
|
58
|
-
import * as i4$2 from '@angular/material/chips';
|
|
59
|
-
import { MatChipsModule } from '@angular/material/chips';
|
|
60
57
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
61
58
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
62
59
|
import * as i7$2 from '@angular/material/core';
|
|
@@ -68,12 +65,15 @@ import { MatSidenavModule } from '@angular/material/sidenav';
|
|
|
68
65
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
69
66
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
70
67
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
71
|
-
import * as
|
|
72
|
-
import
|
|
68
|
+
import * as i4$2 from '@angular/material/chips';
|
|
69
|
+
import { MatChipsModule } from '@angular/material/chips';
|
|
70
|
+
import * as i8$3 from '@angular/material/button-toggle';
|
|
71
|
+
import * as i3$4 from '@ngrx/store';
|
|
73
72
|
import { createSelector, createAction, props, select, createReducer, on, StoreModule, createFeatureSelector, Store } from '@ngrx/store';
|
|
74
73
|
import * as i1$3 from '@ngrx/effects';
|
|
75
74
|
import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
|
|
76
75
|
import { concatLatestFrom } from '@ngrx/operators';
|
|
76
|
+
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
|
77
77
|
import { createEntityAdapter } from '@ngrx/entity';
|
|
78
78
|
|
|
79
79
|
var HttpRequestStatus;
|
|
@@ -2280,7 +2280,7 @@ class HeaderMenuComponent {
|
|
|
2280
2280
|
}
|
|
2281
2281
|
}
|
|
2282
2282
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2283
|
-
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: i2$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: 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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.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 }); }
|
|
2283
|
+
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 }); }
|
|
2284
2284
|
}
|
|
2285
2285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
2286
2286
|
type: Component,
|
|
@@ -2595,7 +2595,7 @@ class PaginatorComponent {
|
|
|
2595
2595
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
2596
2596
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
2597
2597
|
</mat-paginator>
|
|
2598
|
-
`, 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$
|
|
2598
|
+
`, 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 }); }
|
|
2599
2599
|
}
|
|
2600
2600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
2601
2601
|
type: Component,
|
|
@@ -2969,7 +2969,7 @@ class DateFilterComponent {
|
|
|
2969
2969
|
this.FilterType = FilterType;
|
|
2970
2970
|
}
|
|
2971
2971
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2972
|
-
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\">\r\n <mat-form-field>\r\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #cal></mat-datepicker>\r\n </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\r\n <ng-container ngModelGroup=\"filterValue\">\r\n <mat-form-field class=\"my-filter\" >\r\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n (click)=\"fromVal.open()\"/>\r\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #fromVal></mat-datepicker>\r\n </mat-form-field>\r\n <mat-form-field>\r\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #toVal></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n</ng-container>\r\n\r\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.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:
|
|
2972
|
+
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\">\r\n <mat-form-field>\r\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #cal></mat-datepicker>\r\n </mat-form-field>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateBetween\">\r\n <ng-container ngModelGroup=\"filterValue\">\r\n <mat-form-field class=\"my-filter\" >\r\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\r\n (click)=\"fromVal.open()\"/>\r\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #fromVal></mat-datepicker>\r\n </mat-form-field>\r\n <mat-form-field>\r\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter></mat-datepicker-toggle>\r\n <mat-datepicker #toVal></mat-datepicker>\r\n </mat-form-field>\r\n </ng-container>\r\n</ng-container>\r\n\r\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.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$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.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 }); }
|
|
2973
2973
|
}
|
|
2974
2974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
2975
2975
|
type: Component,
|
|
@@ -2980,25 +2980,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
2980
2980
|
type: Input
|
|
2981
2981
|
}] } });
|
|
2982
2982
|
|
|
2983
|
-
class
|
|
2983
|
+
class InFilterComponent {
|
|
2984
2984
|
constructor(ref) {
|
|
2985
2985
|
this.ref = ref;
|
|
2986
2986
|
this.FieldType = FieldType;
|
|
2987
|
-
this.
|
|
2988
|
-
this.separatorKeyCodes = [COMMA, ENTER];
|
|
2987
|
+
this.value = [undefined];
|
|
2989
2988
|
this.onChange = (_) => { };
|
|
2990
2989
|
this.onTouched = () => { };
|
|
2990
|
+
this.value = [undefined];
|
|
2991
2991
|
}
|
|
2992
2992
|
writeValue(obj) {
|
|
2993
|
-
if (
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
else if (obj != null && obj !== '') {
|
|
2997
|
-
this.values = [obj];
|
|
2998
|
-
}
|
|
2999
|
-
else {
|
|
3000
|
-
this.values = [];
|
|
3001
|
-
}
|
|
2993
|
+
if (!obj?.length)
|
|
2994
|
+
obj = [undefined];
|
|
2995
|
+
this.value = obj;
|
|
3002
2996
|
this.ref.markForCheck();
|
|
3003
2997
|
}
|
|
3004
2998
|
registerOnChange(fn) {
|
|
@@ -3007,57 +3001,43 @@ class ChipFilterInputComponent {
|
|
|
3007
3001
|
registerOnTouched(fn) {
|
|
3008
3002
|
this.onTouched = fn;
|
|
3009
3003
|
}
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
return;
|
|
3015
|
-
}
|
|
3016
|
-
if (this.isNumericType()) {
|
|
3017
|
-
const num = Number(raw);
|
|
3018
|
-
if (isNaN(num)) {
|
|
3019
|
-
event.chipInput.clear();
|
|
3020
|
-
return;
|
|
3021
|
-
}
|
|
3022
|
-
this.values = [...this.values, num];
|
|
3023
|
-
}
|
|
3024
|
-
else {
|
|
3025
|
-
this.values = [...this.values, raw];
|
|
3026
|
-
}
|
|
3027
|
-
event.chipInput.clear();
|
|
3028
|
-
this.emitValue();
|
|
3004
|
+
addInput() {
|
|
3005
|
+
this.value = [...this.value, undefined];
|
|
3006
|
+
this.ref.markForCheck();
|
|
3007
|
+
this.onChange(this.value);
|
|
3029
3008
|
}
|
|
3030
|
-
|
|
3031
|
-
this.
|
|
3032
|
-
this.
|
|
3033
|
-
this.
|
|
3009
|
+
removeInput(index) {
|
|
3010
|
+
this.value = [...this.value];
|
|
3011
|
+
this.value.splice(index, 1);
|
|
3012
|
+
this.ref.markForCheck();
|
|
3013
|
+
this.onChange(this.value);
|
|
3034
3014
|
}
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3015
|
+
onValueChange(i, value) {
|
|
3016
|
+
this.value = [...this.value];
|
|
3017
|
+
if (typeof value === 'string' && value.includes(',')) {
|
|
3018
|
+
const parts = value.split(',').map(s => s.trim()).filter(s => s);
|
|
3019
|
+
this.value.splice(i, 1, ...parts);
|
|
3020
|
+
}
|
|
3021
|
+
else {
|
|
3022
|
+
this.value[i] = value;
|
|
3038
3023
|
}
|
|
3039
|
-
}
|
|
3040
|
-
emitValue() {
|
|
3041
3024
|
this.ref.markForCheck();
|
|
3042
|
-
this.onChange(this.
|
|
3043
|
-
}
|
|
3044
|
-
isNumericType() {
|
|
3045
|
-
return this.type === FieldType.Number || this.type === FieldType.Currency;
|
|
3025
|
+
this.onChange(this.value);
|
|
3046
3026
|
}
|
|
3047
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type:
|
|
3048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: InFilterComponent, isStandalone: false, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
|
|
3049
3029
|
provide: NG_VALUE_ACCESSOR,
|
|
3050
|
-
useExisting:
|
|
3030
|
+
useExisting: InFilterComponent,
|
|
3051
3031
|
multi: true
|
|
3052
|
-
}], ngImport: i0, template: "<
|
|
3032
|
+
}], ngImport: i0, template: "<div class=inline>\r\n <div *ngFor=\"let val of value; index as i\">\r\n <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\r\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\r\n <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\r\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n #input [autoFocus]=\"i === value.length - 1\" />\r\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\r\n <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n </div>\r\n</div>\r\n", styles: [".inline{display:inline-block}\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: "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: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3053
3033
|
}
|
|
3054
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type:
|
|
3034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
3055
3035
|
type: Component,
|
|
3056
|
-
args: [{ selector: '
|
|
3036
|
+
args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3057
3037
|
provide: NG_VALUE_ACCESSOR,
|
|
3058
|
-
useExisting:
|
|
3038
|
+
useExisting: InFilterComponent,
|
|
3059
3039
|
multi: true
|
|
3060
|
-
}], standalone: false, template: "<
|
|
3040
|
+
}], standalone: false, template: "<div class=inline>\r\n <div *ngFor=\"let val of value; index as i\">\r\n <input *ngIf=\"type === FieldType.Number || type === FieldType.Currency\"\r\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n [readonly]=\"i+1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"i === value.length - 1\"/>\r\n <input *ngIf=\"type !== FieldType.Number && type !== FieldType.Currency\"\r\n [ngModel]=\"val\" (ngModelChange)=\"onValueChange(i,$event)\"\r\n [readonly]=\"i+1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n #input [autoFocus]=\"i === value.length - 1\" />\r\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput(i)\">-</button>\r\n <button *ngIf=\"i === value.length - 1\" [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n </div>\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
|
|
3061
3041
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
3062
3042
|
type: Input
|
|
3063
3043
|
}] } });
|
|
@@ -3068,11 +3048,11 @@ class NumberFilterComponent {
|
|
|
3068
3048
|
this.FieldType = FieldType;
|
|
3069
3049
|
}
|
|
3070
3050
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3071
|
-
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
|
|
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 <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\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 matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n </mat-form-field>\n </ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n <div class=\"inline\">\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'></lib-in-filter>\n </div>\n}\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 }); }
|
|
3072
3052
|
}
|
|
3073
3053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3074
3054
|
type: Component,
|
|
3075
|
-
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: false, template: "@if (CurrentFilterType
|
|
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 <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\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 matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n </mat-form-field>\n </ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n <div class=\"inline\">\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue'></lib-in-filter>\n </div>\n}\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
|
|
3076
3056
|
}], propDecorators: { CurrentFilterType: [{
|
|
3077
3057
|
type: Input
|
|
3078
3058
|
}], info: [{
|
|
@@ -3084,7 +3064,7 @@ class DateTimeFilterComponent {
|
|
|
3084
3064
|
this.FilterType = FilterType;
|
|
3085
3065
|
}
|
|
3086
3066
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3087
|
-
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\">\r\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\r\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\r\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\r\n</ng-container>", 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type:
|
|
3067
|
+
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\">\r\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"CurrentFilterType === FilterType.DateTimeBetween\" ngModelGroup=\"filterValue\">\r\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\r\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\r\n</ng-container>", 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.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 }); }
|
|
3088
3068
|
}
|
|
3089
3069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
3090
3070
|
type: Component,
|
|
@@ -3103,15 +3083,6 @@ class FilterComponent {
|
|
|
3103
3083
|
this.FilterType = FilterType;
|
|
3104
3084
|
this.FieldType = FieldType;
|
|
3105
3085
|
this.close = new EventEmitter();
|
|
3106
|
-
this.singleValueFilterTypes = new Set([
|
|
3107
|
-
FilterType.StringDoesNotContain,
|
|
3108
|
-
FilterType.IsNull,
|
|
3109
|
-
FilterType.NumberNotEqual,
|
|
3110
|
-
FilterType.NumberGreaterThan,
|
|
3111
|
-
FilterType.NumberLessThan,
|
|
3112
|
-
FilterType.NumberBetween,
|
|
3113
|
-
FilterType.BooleanEquals,
|
|
3114
|
-
]);
|
|
3115
3086
|
}
|
|
3116
3087
|
ngOnInit() {
|
|
3117
3088
|
this.currentFilterType = this.filter.filterType;
|
|
@@ -3119,23 +3090,22 @@ class FilterComponent {
|
|
|
3119
3090
|
onEnter(filter, event) {
|
|
3120
3091
|
event.preventDefault();
|
|
3121
3092
|
if (filter.filterValue != null && filter.filterType) {
|
|
3122
|
-
this.
|
|
3093
|
+
this.applyFilter(filter);
|
|
3123
3094
|
this.close.emit();
|
|
3124
3095
|
}
|
|
3125
3096
|
}
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
if (wasChipEligible !== isChipEligible) {
|
|
3130
|
-
this.filter.filterValue = undefined;
|
|
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);
|
|
3131
3100
|
}
|
|
3101
|
+
this.state.addFilter(filter);
|
|
3132
3102
|
}
|
|
3133
3103
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3134
|
-
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: "<mat-card appearance=\"outlined\" class=\"filter-card\" *ngIf=\"filter\">\r\n <mat-card-content>\r\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n <div class=\"head-row\" >\r\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\r\n matTooltip=\"Close\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"filter-row\">\r\n <div class=\"inline\">\r\n <mat-form-field class=\"my-filter\" >\r\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [(ngModel)]=\"currentFilterType\" (selectionChange)=\"onFilterTypeChange($event.value)\" >\r\n <mat-option *ngFor=\"let kvp of filterTypes[filter.fieldType] | keyvalue \" [value]=\"$any(kvp.value)[0]\">\r\n {{ kvp.key }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <ng-container [ngSwitch]=\"true\">\r\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\r\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber\" >\r\n <ng-container *ngTemplateOutlet=\"String\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency\">\r\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" ></tb-number-filter>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Boolean\">\r\n <ng-container *ngTemplateOutlet=\"Boolean\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.Date\">\r\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-filter>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"filter.fieldType === FieldType.DateTime\">\r\n <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\"></tb-date-time-filter>\r\n </ng-container>\r\n <ng-container *ngSwitchCase='filter.fieldType === FieldType.Enum' >\r\n <ng-container *ngTemplateOutlet=\"Enum\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" *ngIf=\"currentFilterType === FilterType.IsNull\">\r\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\r\n Apply\r\n </button>\r\n \r\n \r\n <ng-template #String>\r\n @if (currentFilterType === FilterType.StringDoesNotContain) {\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n </mat-form-field>\r\n } @else if (currentFilterType !== FilterType.IsNull) {\r\n <tb-chip-filter-input [type]=\"filter.fieldType\" name='filterValue' [(ngModel)]=\"filter.filterValue\"></tb-chip-filter-input>\r\n }\r\n </ng-template>\r\n \r\n <ng-template #Boolean >\r\n <div class=\"switch\" [ngSwitch]=\"currentFilterType\">\r\n <div class=\"switch\" *ngSwitchCase=\"FilterType.BooleanEquals\">\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\r\n <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #Enum>\r\n <ng-container *ngIf='currentFilterType === FilterType.In' >\r\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n </ng-container>\r\n </ng-template>\r\n </form>\r\n </mat-card-content>\r\n</mat-card>\r\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.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: "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: "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: i2$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.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: 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: "component", type: ChipFilterInputComponent, selector: "tb-chip-filter-input", inputs: ["type"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
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 }); }
|
|
3135
3105
|
}
|
|
3136
3106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3137
3107
|
type: Component,
|
|
3138
|
-
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-card appearance=\"outlined\" class=\"filter-card\"
|
|
3108
|
+
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
|
|
3139
3109
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
|
|
3140
3110
|
type: Input
|
|
3141
3111
|
}], close: [{
|
|
@@ -3443,7 +3413,7 @@ class TableFilterDirective extends ComponentStore {
|
|
|
3443
3413
|
});
|
|
3444
3414
|
}
|
|
3445
3415
|
}
|
|
3446
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterDirective, deps: [{ token:
|
|
3416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterDirective, deps: [{ token: i2$1.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3447
3417
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableFilterDirective, isStandalone: false, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
|
|
3448
3418
|
}
|
|
3449
3419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterDirective, decorators: [{
|
|
@@ -3452,7 +3422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3452
3422
|
selector: "[tbFilter]",
|
|
3453
3423
|
standalone: false
|
|
3454
3424
|
}]
|
|
3455
|
-
}], ctorParameters: () => [{ type:
|
|
3425
|
+
}], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
|
|
3456
3426
|
type: Optional
|
|
3457
3427
|
}] }, { type: TableWrapperDirective, decorators: [{
|
|
3458
3428
|
type: Optional
|
|
@@ -3494,7 +3464,7 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
|
|
|
3494
3464
|
}
|
|
3495
3465
|
super.ngOnChanges(changes);
|
|
3496
3466
|
}
|
|
3497
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token:
|
|
3467
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterStringContainsDirective, deps: [{ token: i2$1.NgControl, optional: true }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3498
3468
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", type: TableFilterStringContainsDirective, isStandalone: false, selector: "[tbFilterStringContains]", inputs: { key: ["tbFilterStringContains", "key"], filterValue: "filterValue", filterId: "filterId", active: "active" }, providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
|
|
3499
3469
|
}
|
|
3500
3470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
|
|
@@ -3510,7 +3480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3510
3480
|
],
|
|
3511
3481
|
standalone: false
|
|
3512
3482
|
}]
|
|
3513
|
-
}], ctorParameters: () => [{ type:
|
|
3483
|
+
}], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
|
|
3514
3484
|
type: Optional
|
|
3515
3485
|
}] }, { type: TableWrapperDirective, decorators: [{
|
|
3516
3486
|
type: Optional
|
|
@@ -3601,7 +3571,7 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
|
|
|
3601
3571
|
}
|
|
3602
3572
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
|
|
3603
3573
|
type: Directive
|
|
3604
|
-
}], ctorParameters: () => [{ type: i3$
|
|
3574
|
+
}], ctorParameters: () => [{ type: i3$3.Observable }, { type: undefined }, { type: TableWrapperDirective, decorators: [{
|
|
3605
3575
|
type: Optional
|
|
3606
3576
|
}] }] });
|
|
3607
3577
|
// Checkbox
|
|
@@ -3736,7 +3706,7 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
|
|
|
3736
3706
|
ngOnInit() {
|
|
3737
3707
|
super.ngOnInit();
|
|
3738
3708
|
}
|
|
3739
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8$
|
|
3709
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [{ token: i8$3.MatButtonToggle }, { token: TableWrapperDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3740
3710
|
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 }); }
|
|
3741
3711
|
}
|
|
3742
3712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
|
|
@@ -3749,7 +3719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
3749
3719
|
providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }],
|
|
3750
3720
|
standalone: false
|
|
3751
3721
|
}]
|
|
3752
|
-
}], ctorParameters: () => [{ type: i8$
|
|
3722
|
+
}], ctorParameters: () => [{ type: i8$3.MatButtonToggle }, { type: TableWrapperDirective, decorators: [{
|
|
3753
3723
|
type: Optional
|
|
3754
3724
|
}] }] });
|
|
3755
3725
|
|
|
@@ -4398,8 +4368,8 @@ class TableContainerComponent {
|
|
|
4398
4368
|
this.disableSort = true;
|
|
4399
4369
|
return this.tbGroupBy(data, groupByKeys);
|
|
4400
4370
|
}
|
|
4401
|
-
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$
|
|
4402
|
-
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]\" >\r\n</ng-content>\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\r\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n\r\n\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n <ng-content select=\".tb-header-title\"\r\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\r\n\r\n </ng-content>\r\n <group-by-list></group-by-list>\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list></lib-filter-list>\r\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\r\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-template #allMenu>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n [compareWithKey]=\"compareWithKey\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\r\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n (paginatorChange)=\"paginatorChange.emit()\">\r\n </tb-generic-table-vs>\r\n </div>\r\n\r\n\r\n <ng-template #headerMenu>\r\n <ng-container>\r\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\r\n </tb-filter-displayer>\r\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\r\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\r\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n </ng-container>\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n <ng-container *ngFor='let key of stateKeys$ | async'>\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <div style='display: flex; align-items: center; justify-content: space-between;'>\r\n <span style='display:flex;'>{{key}}</span>\r\n <span style='display:flex;'>\r\n <span style=\"width: 120px;\"></span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input style='width:90%' matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\r\n [disabled]=\"!addedKey.value\">Add</button>\r\n </ng-container>\r\n </ng-template>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\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: i2$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: 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 }); }
|
|
4371
|
+
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 }); }
|
|
4372
|
+
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]\" >\r\n</ng-content>\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\">\r\n <ng-container *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n\r\n\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n <ng-content select=\".tb-header-title\"\r\n *ngIf=\"(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed\">\r\n\r\n </ng-content>\r\n <group-by-list></group-by-list>\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list></lib-filter-list>\r\n <ng-container *ngIf=\"!tableSettings.hideHeader\">\r\n <ng-container *ngIf=\"!(collapseHeader$ | async); else allMenu\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-container>\r\n <ng-template #allMenu>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\"\r\n [ngClass]=\"{'flat-menu':(collapseHeader$ | async)}\">\r\n <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"></ng-container>\r\n </mat-menu>\r\n </ng-template>\r\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div style=\"clear: both;\" *ngIf=\"!_isVs\">\r\n <tb-generic-table [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n [compareWithKey]=\"compareWithKey\">\r\n </tb-generic-table>\r\n </div>\r\n\r\n <div style=\"clear: both;\" *ngIf=\"_isVs\">\r\n <tb-generic-table-vs [rows]='customRows' [data$]=\"data\" [IndexColumn]='IndexColumn'\r\n [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'\r\n [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]=\"disableSort\" [groupHeaderTemplate]=\"groupHeaderTemplate\"\r\n (paginatorChange)=\"paginatorChange.emit()\">\r\n </tb-generic-table-vs>\r\n </div>\r\n\r\n\r\n <ng-template #headerMenu>\r\n <ng-container>\r\n <tb-filter-displayer *ngIf=\"!tableSettings.hideFilter\">\r\n </tb-filter-displayer>\r\n <tb-col-displayer *ngIf=\"!tableSettings.hideColumnSettings\"></tb-col-displayer>\r\n <tb-sort-menu *ngIf=\"!tableSettings.hideSort\"></tb-sort-menu>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #headerMenuExtra>\r\n <button mat-menu-item (click)=\"resetState()\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset table</span>\r\n </button>\r\n <button mat-menu-item (click)=\"exportToCsv()\" *ngIf=\"!tableSettings.hideExport\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n <ng-container *ngIf=\"currentStateKey$ | async as currentKey\">\r\n <button mat-menu-item *ngIf=\"tableId\" (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n </ng-container>\r\n\r\n <mat-menu #savedNames='matMenu' panelClass='wide-menu'>\r\n <button mat-menu-item clickEmitter #add='clickEmitter'>\r\n <mat-icon>add</mat-icon>\r\n <span>New</span>\r\n </button>\r\n <ng-container *ngFor='let key of stateKeys$ | async'>\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <div style='display: flex; align-items: center; justify-content: space-between;'>\r\n <span style='display:flex;'>{{key}}</span>\r\n <span style='display:flex;'>\r\n <span style=\"width: 120px;\"></span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </span>\r\n </div>\r\n </button>\r\n </ng-container>\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input style='width:90%' matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);'\r\n [disabled]=\"!addedKey.value\">Add</button>\r\n </ng-container>\r\n </ng-template>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\n", styles: [".wide-menu{width:200px!important}.header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.flat-menu{line-height:initial;height:initial}\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 }); }
|
|
4403
4373
|
}
|
|
4404
4374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
4405
4375
|
type: Component,
|
|
@@ -4407,7 +4377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4407
4377
|
}], ctorParameters: () => [{ type: TableStore }, { type: ExportToCsvService }, { type: undefined, decorators: [{
|
|
4408
4378
|
type: Inject,
|
|
4409
4379
|
args: [TableBuilderConfigToken]
|
|
4410
|
-
}] }, { type: i3$
|
|
4380
|
+
}] }, { type: i3$4.Store }, { type: TableWrapperDirective, decorators: [{
|
|
4411
4381
|
type: Optional
|
|
4412
4382
|
}] }], propDecorators: { genericTableComponent: [{
|
|
4413
4383
|
type: ViewChild,
|
|
@@ -4541,12 +4511,94 @@ class SaveTableEffects {
|
|
|
4541
4511
|
localStorage.setItem('global-state-storage', JSON.stringify(globalSavedState));
|
|
4542
4512
|
})), { dispatch: false });
|
|
4543
4513
|
}
|
|
4544
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects, deps: [{ token: i1$3.Actions }, { token: i3$
|
|
4514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects, deps: [{ token: i1$3.Actions }, { token: i3$4.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4545
4515
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects }); }
|
|
4546
4516
|
}
|
|
4547
4517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: SaveTableEffects, decorators: [{
|
|
4548
4518
|
type: Injectable
|
|
4549
|
-
}], ctorParameters: () => [{ type: i1$3.Actions }, { type: i3$
|
|
4519
|
+
}], ctorParameters: () => [{ type: i1$3.Actions }, { type: i3$4.Store }] });
|
|
4520
|
+
|
|
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
|
+
}] } });
|
|
4550
4602
|
|
|
4551
4603
|
class TableBuilderModule {
|
|
4552
4604
|
static forRoot(config) {
|
|
@@ -4579,6 +4631,7 @@ class TableBuilderModule {
|
|
|
4579
4631
|
FormatFilterValuePipe,
|
|
4580
4632
|
FormatFilterTypePipe,
|
|
4581
4633
|
ResizeColumnDirective,
|
|
4634
|
+
InFilterComponent,
|
|
4582
4635
|
InitializationComponent,
|
|
4583
4636
|
InListFilterComponent,
|
|
4584
4637
|
SortMenuComponent,
|
|
@@ -4594,7 +4647,7 @@ class TableBuilderModule {
|
|
|
4594
4647
|
GroupByListComponent,
|
|
4595
4648
|
DateTimeFilterComponent,
|
|
4596
4649
|
ChipFilterInputComponent], imports: [CommonModule,
|
|
4597
|
-
MaterialModule, i3$
|
|
4650
|
+
MaterialModule, i3$4.StoreFeatureModule, i1$3.EffectsFeatureModule, FormsModule,
|
|
4598
4651
|
RouterModule,
|
|
4599
4652
|
LetDirective,
|
|
4600
4653
|
DragDropModule,
|
|
@@ -4693,6 +4746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImpor
|
|
|
4693
4746
|
FormatFilterValuePipe,
|
|
4694
4747
|
FormatFilterTypePipe,
|
|
4695
4748
|
ResizeColumnDirective,
|
|
4749
|
+
InFilterComponent,
|
|
4696
4750
|
InitializationComponent,
|
|
4697
4751
|
InListFilterComponent,
|
|
4698
4752
|
SortMenuComponent,
|
|
@@ -4921,7 +4975,7 @@ function actionStatusReducer(state = initialState, action) {
|
|
|
4921
4975
|
|
|
4922
4976
|
class NgrxExtModule {
|
|
4923
4977
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4924
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i3$
|
|
4978
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i3$4.StoreFeatureModule] }); }
|
|
4925
4979
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
|
|
4926
4980
|
StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
|
|
4927
4981
|
}
|