@one-paragon/angular-utilities 0.3.2 → 0.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/action-state/action-state-spinner/action-state-spinner.component.mjs +4 -4
- package/esm2022/table-builder/classes/filter-info.mjs +1 -1
- package/esm2022/table-builder/components/array-column.component.mjs +37 -29
- package/esm2022/table-builder/components/column-builder/column-builder.component.mjs +7 -6
- package/esm2022/table-builder/components/date-filter/date-filter.component.mjs +4 -5
- package/esm2022/table-builder/components/date-time-filter/date-time-filter.component.mjs +4 -5
- package/esm2022/table-builder/components/filter/filter.component.mjs +7 -8
- package/esm2022/table-builder/components/filter/in-list/in-list-filter.component.mjs +21 -15
- package/esm2022/table-builder/components/gen-col-displayer/gen-col-displayer.component.mjs +5 -5
- package/esm2022/table-builder/components/generic-table/generic-table.component.mjs +5 -5
- package/esm2022/table-builder/components/generic-table/paginator.component.mjs +15 -11
- package/esm2022/table-builder/components/group-by-list/group-by-list.component.mjs +4 -5
- package/esm2022/table-builder/components/header-menu/header-menu.component.mjs +5 -5
- package/esm2022/table-builder/components/in-filter/in-filter.component.mjs +5 -6
- package/esm2022/table-builder/components/link-column.component.mjs +20 -19
- package/esm2022/table-builder/components/number-filter/number-filter.component.mjs +4 -5
- package/esm2022/table-builder/components/sort-menu/sort-menu.component.mjs +6 -6
- package/esm2022/table-builder/components/table-container/table-container-imports.mjs +4 -3
- package/esm2022/table-builder/components/table-container/table-container.mjs +3 -3
- package/esm2022/table-builder/components/table-container-filter/filter-list/filter-list.component.mjs +6 -6
- package/esm2022/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.mjs +5 -5
- package/esm2022/table-builder/enums/filterTypes.mjs +30 -30
- package/esm2022/utilities/pipes/function.pipe.mjs +1 -1
- package/fesm2022/one-paragon-angular-utilities.mjs +169 -147
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/classes/filter-info.d.ts +94 -7
- package/table-builder/components/array-column.component.d.ts +1 -1
- package/table-builder/components/column-builder/column-builder.component.d.ts +1 -1
- package/table-builder/components/filter/filter.component.d.ts +93 -352
- package/table-builder/components/in-filter/in-filter.component.d.ts +1 -1
- package/table-builder/components/table-container/table-container-imports.d.ts +3 -2
- package/table-builder/enums/filterTypes.d.ts +47 -7
- package/utilities/pipes/function.pipe.d.ts +1 -1
|
@@ -5,7 +5,7 @@ import * as i3$1 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, delay, merge as merge$1, concatMap as concatMap$1, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, from } from 'rxjs';
|
|
6
6
|
import { ComponentStore } from '@ngrx/component-store';
|
|
7
7
|
import * as i1$3 from '@angular/common';
|
|
8
|
-
import { DatePipe, CurrencyPipe,
|
|
8
|
+
import { DatePipe, CurrencyPipe, AsyncPipe, KeyValuePipe, NgTemplateOutlet, NgClass, DecimalPipe, CommonModule } from '@angular/common';
|
|
9
9
|
import * as i1$4 from '@angular/material/sort';
|
|
10
10
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
11
11
|
import { v4 } from 'uuid';
|
|
@@ -931,46 +931,46 @@ var FilterType;
|
|
|
931
931
|
FilterType["Custom"] = "Custom";
|
|
932
932
|
})(FilterType || (FilterType = {}));
|
|
933
933
|
const NumberFilterMap = {
|
|
934
|
-
[FilterType.NumberEquals]:
|
|
935
|
-
[FilterType.NumberNotEqual]:
|
|
936
|
-
[FilterType.NumberGreaterThan]:
|
|
937
|
-
[FilterType.NumberLessThan]:
|
|
938
|
-
[FilterType.NumberBetween]:
|
|
939
|
-
[FilterType.IsNull]:
|
|
940
|
-
[FilterType.In]:
|
|
934
|
+
[FilterType.NumberEquals]: FilterType.NumberEquals,
|
|
935
|
+
[FilterType.NumberNotEqual]: FilterType.NumberNotEqual,
|
|
936
|
+
[FilterType.NumberGreaterThan]: FilterType.NumberGreaterThan,
|
|
937
|
+
[FilterType.NumberLessThan]: FilterType.NumberLessThan,
|
|
938
|
+
[FilterType.NumberBetween]: FilterType.NumberBetween,
|
|
939
|
+
[FilterType.IsNull]: FilterType.IsNull,
|
|
940
|
+
[FilterType.In]: FilterType.In,
|
|
941
941
|
};
|
|
942
942
|
const StringFilterMap = {
|
|
943
|
-
[FilterType.StringEquals]:
|
|
944
|
-
[FilterType.StringContains]:
|
|
945
|
-
[FilterType.StringDoesNotContain]:
|
|
946
|
-
[FilterType.StringStartWith]:
|
|
947
|
-
[FilterType.StringEndsWith]:
|
|
948
|
-
[FilterType.IsNull]:
|
|
949
|
-
[FilterType.In]:
|
|
943
|
+
[FilterType.StringEquals]: FilterType.StringEquals,
|
|
944
|
+
[FilterType.StringContains]: FilterType.StringContains,
|
|
945
|
+
[FilterType.StringDoesNotContain]: FilterType.StringDoesNotContain,
|
|
946
|
+
[FilterType.StringStartWith]: FilterType.StringStartWith,
|
|
947
|
+
[FilterType.StringEndsWith]: FilterType.StringEndsWith,
|
|
948
|
+
[FilterType.IsNull]: FilterType.IsNull,
|
|
949
|
+
[FilterType.In]: FilterType.In,
|
|
950
950
|
};
|
|
951
951
|
const DateFilterMap = {
|
|
952
|
-
[FilterType.DateIsOn]:
|
|
953
|
-
[FilterType.DateIsNotOn]:
|
|
954
|
-
[FilterType.DateOnOrAfter]:
|
|
955
|
-
[FilterType.DateOnOrBefore]:
|
|
956
|
-
[FilterType.DateBetween]:
|
|
957
|
-
[FilterType.IsNull]:
|
|
952
|
+
[FilterType.DateIsOn]: FilterType.DateIsOn,
|
|
953
|
+
[FilterType.DateIsNotOn]: FilterType.DateIsNotOn,
|
|
954
|
+
[FilterType.DateOnOrAfter]: FilterType.DateOnOrAfter,
|
|
955
|
+
[FilterType.DateOnOrBefore]: FilterType.DateOnOrBefore,
|
|
956
|
+
[FilterType.DateBetween]: FilterType.DateBetween,
|
|
957
|
+
[FilterType.IsNull]: FilterType.IsNull,
|
|
958
958
|
};
|
|
959
959
|
const DateTimeFilterMap = {
|
|
960
960
|
...DateFilterMap,
|
|
961
|
-
[FilterType.DateTimeIsAt]:
|
|
962
|
-
[FilterType.DateTimeIsNotAt]:
|
|
963
|
-
[FilterType.DateTimeAtOrAfter]:
|
|
964
|
-
[FilterType.DateTimeAtOrBefore]:
|
|
965
|
-
[FilterType.DateTimeBetween]:
|
|
961
|
+
[FilterType.DateTimeIsAt]: FilterType.DateTimeIsAt,
|
|
962
|
+
[FilterType.DateTimeIsNotAt]: FilterType.DateTimeIsNotAt,
|
|
963
|
+
[FilterType.DateTimeAtOrAfter]: FilterType.DateTimeAtOrAfter,
|
|
964
|
+
[FilterType.DateTimeAtOrBefore]: FilterType.DateTimeAtOrBefore,
|
|
965
|
+
[FilterType.DateTimeBetween]: FilterType.DateTimeBetween,
|
|
966
966
|
};
|
|
967
967
|
const BooleanFilterMap = {
|
|
968
|
-
[FilterType.BooleanEquals]:
|
|
969
|
-
[FilterType.IsNull]:
|
|
968
|
+
[FilterType.BooleanEquals]: FilterType.BooleanEquals,
|
|
969
|
+
[FilterType.IsNull]: FilterType.IsNull,
|
|
970
970
|
};
|
|
971
971
|
const EnumFilterMap = {
|
|
972
|
-
[FilterType.IsNull]:
|
|
973
|
-
[FilterType.In]:
|
|
972
|
+
[FilterType.IsNull]: FilterType.IsNull,
|
|
973
|
+
[FilterType.In]: FilterType.In
|
|
974
974
|
};
|
|
975
975
|
|
|
976
976
|
const inputs = [
|
|
@@ -2465,13 +2465,13 @@ class DateFilterComponent {
|
|
|
2465
2465
|
this.FilterType = FilterType;
|
|
2466
2466
|
}
|
|
2467
2467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2468
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (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 />\r\n <mat-datepicker #cal />\r\n </mat-form-field>\r\n}\r\n@if(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 />\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 />\r\n <mat-datepicker #toVal />\r\n </mat-form-field>\r\n </ng-container>\r\n}\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:-moz-fit-content;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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2469
2469
|
}
|
|
2470
2470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
2471
2471
|
type: Component,
|
|
2472
2472
|
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
|
|
2473
|
-
|
|
2474
|
-
], template: "
|
|
2473
|
+
MatInputModule, FormsModule, MatDatepickerModule, PreventEnterDirective
|
|
2474
|
+
], template: "@if (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 />\r\n <mat-datepicker #cal />\r\n </mat-form-field>\r\n}\r\n@if(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 />\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 />\r\n <mat-datepicker #toVal />\r\n </mat-form-field>\r\n </ng-container>\r\n}\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:-moz-fit-content;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"] }]
|
|
2475
2475
|
}], propDecorators: { info: [{
|
|
2476
2476
|
type: Input
|
|
2477
2477
|
}], CurrentFilterType: [{
|
|
@@ -2517,11 +2517,11 @@ class InFilterComponent {
|
|
|
2517
2517
|
this.onChange(this.value);
|
|
2518
2518
|
}
|
|
2519
2519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: InFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { type: "type" }, providers: [{
|
|
2521
2521
|
provide: NG_VALUE_ACCESSOR,
|
|
2522
2522
|
useExisting: InFilterComponent,
|
|
2523
2523
|
multi: true
|
|
2524
|
-
}], ngImport: i0, template: "<div class=inline>\n
|
|
2524
|
+
}], ngImport: i0, template: "<div class=inline>\r\n @for (val of value; track $index) {\r\n <div>\r\n @if(type === FieldType.Number || type === FieldType.Currency){\r\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n }\r\n @else {\r\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n #input [autoFocus]=\"$index === value.length - 1\" />\r\n }\r\n </div>\r\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n @if ($index === value.length - 1) {\r\n <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n }\r\n \r\n }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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 }); }
|
|
2525
2525
|
}
|
|
2526
2526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
2527
2527
|
type: Component,
|
|
@@ -2530,8 +2530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
2530
2530
|
useExisting: InFilterComponent,
|
|
2531
2531
|
multi: true
|
|
2532
2532
|
}], standalone: true, imports: [
|
|
2533
|
-
|
|
2534
|
-
], template: "<div class=inline>\n
|
|
2533
|
+
FormsModule, AutoFocusDirective
|
|
2534
|
+
], template: "<div class=inline>\r\n @for (val of value; track $index) {\r\n <div>\r\n @if(type === FieldType.Number || type === FieldType.Currency){\r\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\r\n [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\r\n }\r\n @else {\r\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\r\n [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\r\n #input [autoFocus]=\"$index === value.length - 1\" />\r\n }\r\n </div>\r\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n @if ($index === value.length - 1) {\r\n <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n }\r\n \r\n }\r\n</div>\r\n", styles: [".inline{display:inline-block}\n"] }]
|
|
2535
2535
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
2536
2536
|
type: Input
|
|
2537
2537
|
}] } });
|
|
@@ -2542,13 +2542,13 @@ class NumberFilterComponent {
|
|
|
2542
2542
|
this.FieldType = FieldType;
|
|
2543
2543
|
}
|
|
2544
2544
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2545
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween){\r\n @if(CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n </mat-form-field>\r\n }\r\n <ng-container ngModelGroup=\"filterValue\" >\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n </mat-form-field>\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n </mat-form-field>\r\n </ng-container>\r\n}\r\n@if (CurrentFilterType === FilterType.In) {\r\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2546
2546
|
}
|
|
2547
2547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
2548
2548
|
type: Component,
|
|
2549
2549
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
|
|
2550
|
-
|
|
2551
|
-
], template: "
|
|
2550
|
+
MatInputModule, FormsModule, InFilterComponent
|
|
2551
|
+
], template: "@if(CurrentFilterType !== FilterType.NumberBetween){\r\n @if(CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\r\n </mat-form-field>\r\n }\r\n <ng-container ngModelGroup=\"filterValue\" >\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\r\n </mat-form-field>\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\r\n </mat-form-field>\r\n </ng-container>\r\n}\r\n@if (CurrentFilterType === FilterType.In) {\r\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
|
|
2552
2552
|
}], propDecorators: { CurrentFilterType: [{
|
|
2553
2553
|
type: Input
|
|
2554
2554
|
}], info: [{
|
|
@@ -2560,13 +2560,13 @@ class DateTimeFilterComponent {
|
|
|
2560
2560
|
this.FilterType = FilterType;
|
|
2561
2561
|
}
|
|
2562
2562
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2563
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2563
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if(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}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween){\r\n <ng-container 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>\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:-moz-fit-content;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: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2564
2564
|
}
|
|
2565
2565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
2566
2566
|
type: Component,
|
|
2567
2567
|
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
|
|
2568
|
-
|
|
2569
|
-
], template: "
|
|
2568
|
+
FormsModule, PreventEnterDirective
|
|
2569
|
+
], template: "@if(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}\r\n@if(CurrentFilterType === FilterType.DateTimeBetween){\r\n <ng-container 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>\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:-moz-fit-content;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"] }]
|
|
2570
2570
|
}], propDecorators: { info: [{
|
|
2571
2571
|
type: Input
|
|
2572
2572
|
}], CurrentFilterType: [{
|
|
@@ -2620,28 +2620,34 @@ class InListFilterComponent {
|
|
|
2620
2620
|
this.onChange(this.value);
|
|
2621
2621
|
}
|
|
2622
2622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: InListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2623
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: InListFilterComponent, isStandalone: true, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: { key: "key" }, providers: [{
|
|
2624
2624
|
provide: NG_VALUE_ACCESSOR,
|
|
2625
2625
|
useExisting: InListFilterComponent,
|
|
2626
2626
|
multi: true
|
|
2627
2627
|
}], ngImport: i0, template: `
|
|
2628
|
-
|
|
2629
|
-
<
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2628
|
+
@for (item of keyValues$ | async| keyvalue; track item.key) {
|
|
2629
|
+
<div>
|
|
2630
|
+
<mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
|
|
2631
|
+
{{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
|
|
2632
|
+
</mat-checkbox>
|
|
2633
|
+
</div>
|
|
2634
|
+
}
|
|
2635
|
+
|
|
2636
|
+
`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2634
2637
|
}
|
|
2635
2638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: InListFilterComponent, decorators: [{
|
|
2636
2639
|
type: Component,
|
|
2637
2640
|
args: [{
|
|
2638
2641
|
selector: 'tb-in-list-filter , [tb-in-list-filter]',
|
|
2639
2642
|
template: `
|
|
2640
|
-
|
|
2641
|
-
<
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2643
|
+
@for (item of keyValues$ | async| keyvalue; track item.key) {
|
|
2644
|
+
<div>
|
|
2645
|
+
<mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
|
|
2646
|
+
{{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
|
|
2647
|
+
</mat-checkbox>
|
|
2648
|
+
</div>
|
|
2649
|
+
}
|
|
2650
|
+
|
|
2645
2651
|
`,
|
|
2646
2652
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2647
2653
|
providers: [{
|
|
@@ -2651,7 +2657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
2651
2657
|
}],
|
|
2652
2658
|
standalone: true,
|
|
2653
2659
|
imports: [
|
|
2654
|
-
|
|
2660
|
+
AsyncPipe, KeyValuePipe, MatCheckboxModule, StopPropagationDirective, SpaceCasePipe
|
|
2655
2661
|
]
|
|
2656
2662
|
}]
|
|
2657
2663
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TableStore }], propDecorators: { key: [{
|
|
@@ -2659,7 +2665,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
2659
2665
|
}] } });
|
|
2660
2666
|
|
|
2661
2667
|
class FilterComponent {
|
|
2662
|
-
;
|
|
2663
2668
|
constructor(state) {
|
|
2664
2669
|
this.state = state;
|
|
2665
2670
|
this.filterTypes = filterTypeMap;
|
|
@@ -2678,16 +2683,16 @@ class FilterComponent {
|
|
|
2678
2683
|
}
|
|
2679
2684
|
}
|
|
2680
2685
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: FilterComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: FilterComponent, isStandalone: true, 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\" [panelWidth]=\"null\">\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 <mat-form-field class=\"my-filter\" *ngIf=\"currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n </mat-form-field>\r\n <ng-container *ngIf=\"currentFilterType === FilterType.In\">\r\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\r\n </ng-container>\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:-moz-fit-content;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: "ngmodule", type: MatCardModule }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2686
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { filter: "filter" }, outputs: { close: "close" }, ngImport: i0, template: "@if (filter) {\r\n<mat-card appearance=\"outlined\" class=\"filter-card\">\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\" [panelWidth]=\"null\">\r\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\r\n <mat-option [value]=\"kvp.value\">\r\n {{ kvp.key }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n @if(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\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\r\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Boolean){\r\n <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Date){\r\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.DateTime){\r\n <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Enum){\r\n <ng-container *ngTemplateOutlet=\"Enum\" />\r\n }\r\n\r\n @if(currentFilterType === FilterType.IsNull){\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\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 }\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.IsNull && currentFilterType !== FilterType.In){\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 {\r\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n </ng-template>\r\n \r\n <ng-template #Boolean >\r\n @if(currentFilterType === FilterType.BooleanEquals){\r\n <div class=\"switch\">\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 }\r\n </ng-template>\r\n <ng-template #Enum>\r\n @if(currentFilterType === FilterType.In){\r\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n\r\n }\r\n </ng-template>\r\n </form>\r\n </mat-card-content>\r\n</mat-card>\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:-moz-fit-content;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: "ngmodule", type: MatCardModule }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["CurrentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "CurrentFilterType"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2682
2687
|
}
|
|
2683
2688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: FilterComponent, decorators: [{
|
|
2684
2689
|
type: Component,
|
|
2685
2690
|
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2686
|
-
MatCardModule,
|
|
2687
|
-
MatInputModule, MatSelectModule, KeyValuePipe,
|
|
2691
|
+
MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
|
|
2692
|
+
MatInputModule, MatSelectModule, KeyValuePipe, NumberFilterComponent,
|
|
2688
2693
|
DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
|
|
2689
|
-
PreventEnterDirective,
|
|
2690
|
-
], template: "<mat-card appearance=\"outlined\" class=\"filter-card\"
|
|
2694
|
+
PreventEnterDirective, NgTemplateOutlet
|
|
2695
|
+
], template: "@if (filter) {\r\n<mat-card appearance=\"outlined\" class=\"filter-card\">\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\" [panelWidth]=\"null\">\r\n @for (kvp of filterTypes[filter.fieldType] | keyvalue; track kvp.key) {\r\n <mat-option [value]=\"kvp.value\">\r\n {{ kvp.key }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n @if(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\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\r\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Boolean){\r\n <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Date){\r\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.DateTime){\r\n <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Enum){\r\n <ng-container *ngTemplateOutlet=\"Enum\" />\r\n }\r\n\r\n @if(currentFilterType === FilterType.IsNull){\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\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 }\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.IsNull && currentFilterType !== FilterType.In){\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 {\r\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n </ng-template>\r\n \r\n <ng-template #Boolean >\r\n @if(currentFilterType === FilterType.BooleanEquals){\r\n <div class=\"switch\">\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 }\r\n </ng-template>\r\n <ng-template #Enum>\r\n @if(currentFilterType === FilterType.In){\r\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\r\n\r\n }\r\n </ng-template>\r\n </form>\r\n </mat-card-content>\r\n</mat-card>\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:-moz-fit-content;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"] }]
|
|
2691
2696
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
|
|
2692
2697
|
type: Input
|
|
2693
2698
|
}], close: [{
|
|
@@ -2719,14 +2724,14 @@ class GenColDisplayerComponent {
|
|
|
2719
2724
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
2720
2725
|
}
|
|
2721
2726
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenColDisplayerComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2722
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2727
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\r\n <span matTooltip=\"Show/hide columns\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n </button>\r\n </span>\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n <button mat-menu-item>\r\n <span matTooltip=\"Close\">\r\n <button class=\"filter-button\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <button mat-menu-item stop-propagation>\r\n <span matTooltip=\"Show all columns\">\r\n <button mat-icon-button (click)=\"reset(displayCols)\">\r\n <mat-icon color=\"primary\">done_all</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <span matTooltip=\"Hide all columns\">\r\n <button mat-icon-button (click)=\"unset(displayCols)\">\r\n <mat-icon color=\"primary\">cancel</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n @for (col of displayCols; track col.key) {\r\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n @if(col.isVisible){\r\n <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n <mat-icon color=\"primary\">check_box</mat-icon>\r\n </button>\r\n } @else {\r\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n <mat-icon>indeterminate_check_box</mat-icon>\r\n </button>\r\n }\r\n \r\n <p class=\"label\">\r\n {{col.displayName || (col.key | spaceCase) }}\r\n </p>\r\n\r\n </div>\r\n </button>\r\n }\r\n\r\n </div>\r\n </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2723
2728
|
}
|
|
2724
2729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
2725
2730
|
type: Component,
|
|
2726
2731
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2727
|
-
|
|
2732
|
+
AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
2728
2733
|
DragDropModule, SpaceCasePipe
|
|
2729
|
-
], template: "
|
|
2734
|
+
], template: "@if(columns$ | async; as displayCols){\r\n <span matTooltip=\"Show/hide columns\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n </button>\r\n </span>\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n <button mat-menu-item>\r\n <span matTooltip=\"Close\">\r\n <button class=\"filter-button\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <button mat-menu-item stop-propagation>\r\n <span matTooltip=\"Show all columns\">\r\n <button mat-icon-button (click)=\"reset(displayCols)\">\r\n <mat-icon color=\"primary\">done_all</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <span matTooltip=\"Hide all columns\">\r\n <button mat-icon-button (click)=\"unset(displayCols)\">\r\n <mat-icon color=\"primary\">cancel</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\r\n @for (col of displayCols; track col.key) {\r\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\r\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\r\n @if(col.isVisible){\r\n <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n <mat-icon color=\"primary\">check_box</mat-icon>\r\n </button>\r\n } @else {\r\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n <mat-icon>indeterminate_check_box</mat-icon>\r\n </button>\r\n }\r\n \r\n <p class=\"label\">\r\n {{col.displayName || (col.key | spaceCase) }}\r\n </p>\r\n\r\n </div>\r\n </button>\r\n }\r\n\r\n </div>\r\n </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:#6495ed;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"] }]
|
|
2730
2735
|
}], ctorParameters: () => [{ type: TableStore }] });
|
|
2731
2736
|
|
|
2732
2737
|
class WrapperFilterStore extends ComponentStore {
|
|
@@ -2760,14 +2765,14 @@ class GenFilterDisplayerComponent {
|
|
|
2760
2765
|
this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
|
|
2761
2766
|
}
|
|
2762
2767
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2763
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2768
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n @for (md of filterCols$ | async; track md.key) {\r\n <button (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2764
2769
|
}
|
|
2765
2770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
2766
2771
|
type: Component,
|
|
2767
2772
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2768
2773
|
MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
|
|
2769
|
-
|
|
2770
|
-
], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n
|
|
2774
|
+
AsyncPipe, SpaceCasePipe
|
|
2775
|
+
], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n @for (md of filterCols$ | async; track md.key) {\r\n <button (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
2771
2776
|
}], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
|
|
2772
2777
|
|
|
2773
2778
|
class KeyDisplayPipe {
|
|
@@ -2853,14 +2858,14 @@ class FilterChipsComponent {
|
|
|
2853
2858
|
this.filterStore.clearAll();
|
|
2854
2859
|
}
|
|
2855
2860
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n @if (currentFilters.length) {\r\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n <div class=\"float\">\r\n @for (filter of currentFilters$ | async; track filter.key) {\r\n <div class=\"filter\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n @for (filter of filters; track filter.key) {\r\n <mat-chip (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n @if (filters.length > 1) {\r\n <mat-chip (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }] }); }
|
|
2857
2862
|
}
|
|
2858
2863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
2859
2864
|
type: Component,
|
|
2860
2865
|
args: [{ selector: 'lib-filter-list', standalone: true, imports: [
|
|
2861
|
-
LetDirective,
|
|
2862
|
-
MatChipsModule,
|
|
2863
|
-
], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n <button class=\"cancel-button\"
|
|
2866
|
+
LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
2867
|
+
MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
|
|
2868
|
+
], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n @if (currentFilters.length) {\r\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n <div class=\"float\">\r\n @for (filter of currentFilters$ | async; track filter.key) {\r\n <div class=\"filter\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n @for (filter of filters; track filter.key) {\r\n <mat-chip (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n @if (filters.length > 1) {\r\n <mat-chip (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:-moz-fit-content;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
2864
2869
|
}] });
|
|
2865
2870
|
|
|
2866
2871
|
class HeaderMenuComponent {
|
|
@@ -2922,14 +2927,14 @@ class HeaderMenuComponent {
|
|
|
2922
2927
|
}
|
|
2923
2928
|
}
|
|
2924
2929
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2925
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.3", type: HeaderMenuComponent, isStandalone: true, 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 </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;-webkit-text-decoration:underline .1px solid;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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2930
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: HeaderMenuComponent, isStandalone: true, 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\" (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 @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n }\r\n @else if(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 }\r\n @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\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\">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\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (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 }\r\n @else if (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 }\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;-webkit-text-decoration:underline .1px solid;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: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter , [tb-in-list-filter]", inputs: ["key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex", "id", "name", "aria-label", "aria-labelledby", "aria-describedby", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2926
2931
|
}
|
|
2927
2932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
2928
2933
|
type: Component,
|
|
2929
2934
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2930
|
-
MatMenuModule, MatIconModule, MatButtonModule, FormsModule,
|
|
2935
|
+
MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
|
|
2931
2936
|
MatInputModule, MatTooltipModule, NgClass, StopPropagationDirective, MatRadioModule, MatDatepickerModule
|
|
2932
|
-
], 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\"
|
|
2937
|
+
], 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\" (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 @if(myFilterType === FilterType.Or || myFilterType === FilterType.In){\r\n <tb-in-list-filter name='filterValue' [key]='metaData.key' [(ngModel)]='myFilterValue'/>\r\n }\r\n @else if(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 }\r\n @else if (metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\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\">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\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (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 }\r\n @else if (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 }\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;-webkit-text-decoration:underline .1px solid;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"] }]
|
|
2933
2938
|
}], ctorParameters: () => [{ type: TableStore }], propDecorators: { filter: [{
|
|
2934
2939
|
type: Input
|
|
2935
2940
|
}], metaData: [{
|
|
@@ -3033,25 +3038,26 @@ class LinkColumnComponent {
|
|
|
3033
3038
|
this.link = (metaData) => this.store.getLinkMap(metaData);
|
|
3034
3039
|
}
|
|
3035
3040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: LinkColumnComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3036
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3037
|
-
<ng-container *ngrxLet="(link | func :
|
|
3038
|
-
|
|
3041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { metaData: "metaData", element: "element", transform: "transform" }, ngImport: i0, template: `
|
|
3042
|
+
<ng-container *ngrxLet="(link | func : metaData) as linkInfo">
|
|
3043
|
+
@if(linkInfo.useRouterLink){
|
|
3044
|
+
<a target="{{$any(linkInfo).target}}"
|
|
3039
3045
|
[routerLink]=" [($any(linkInfo).link | func : element)]"
|
|
3040
3046
|
[queryParams]="$any(linkInfo).routerLinkOptions.queryParams | func : element"
|
|
3041
3047
|
[fragment]="$any(linkInfo).routerLinkOptions.fragment"
|
|
3042
3048
|
[preserveFragment]="$any(linkInfo).routerLinkOptions.preserveFragment"
|
|
3043
3049
|
[queryParamsHandling]="$any(linkInfo).routerLinkOptions.queryParamsHandling"
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
|
-
|
|
3050
|
+
>
|
|
3051
|
+
{{transform | func : element}}
|
|
3052
|
+
</a>
|
|
3053
|
+
} @else {
|
|
3048
3054
|
<a target="{{$any(linkInfo).target}}"
|
|
3049
3055
|
href="{{($any(linkInfo).link | func : element)}}">
|
|
3050
3056
|
{{transform | func : element}}
|
|
3051
3057
|
</a>
|
|
3052
|
-
|
|
3058
|
+
}
|
|
3053
3059
|
</ng-container>
|
|
3054
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "
|
|
3060
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
3055
3061
|
}
|
|
3056
3062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
3057
3063
|
type: Component,
|
|
@@ -3059,25 +3065,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
3059
3065
|
selector: "tb-link-column",
|
|
3060
3066
|
standalone: true,
|
|
3061
3067
|
imports: [
|
|
3062
|
-
LetDirective, FunctionPipe,
|
|
3068
|
+
LetDirective, FunctionPipe, RouterModule
|
|
3063
3069
|
],
|
|
3064
3070
|
template: `
|
|
3065
|
-
<ng-container *ngrxLet="(link | func :
|
|
3066
|
-
|
|
3071
|
+
<ng-container *ngrxLet="(link | func : metaData) as linkInfo">
|
|
3072
|
+
@if(linkInfo.useRouterLink){
|
|
3073
|
+
<a target="{{$any(linkInfo).target}}"
|
|
3067
3074
|
[routerLink]=" [($any(linkInfo).link | func : element)]"
|
|
3068
3075
|
[queryParams]="$any(linkInfo).routerLinkOptions.queryParams | func : element"
|
|
3069
3076
|
[fragment]="$any(linkInfo).routerLinkOptions.fragment"
|
|
3070
3077
|
[preserveFragment]="$any(linkInfo).routerLinkOptions.preserveFragment"
|
|
3071
3078
|
[queryParamsHandling]="$any(linkInfo).routerLinkOptions.queryParamsHandling"
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3079
|
+
>
|
|
3080
|
+
{{transform | func : element}}
|
|
3081
|
+
</a>
|
|
3082
|
+
} @else {
|
|
3076
3083
|
<a target="{{$any(linkInfo).target}}"
|
|
3077
3084
|
href="{{($any(linkInfo).link | func : element)}}">
|
|
3078
3085
|
{{transform | func : element}}
|
|
3079
3086
|
</a>
|
|
3080
|
-
|
|
3087
|
+
}
|
|
3081
3088
|
</ng-container>
|
|
3082
3089
|
`
|
|
3083
3090
|
}]
|
|
@@ -3099,40 +3106,49 @@ class ArrayColumnComponent {
|
|
|
3099
3106
|
this.array = (this.array ?? []).slice(0, this.additional.limit);
|
|
3100
3107
|
}
|
|
3101
3108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ArrayColumnComponent, deps: [{ token: TableBuilderConfigToken }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3102
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ArrayColumnComponent, isStandalone: true, selector: "tb-array-column", inputs: { array: "array", metaData: "metaData" }, ngImport: i0, template: `
|
|
3110
|
+
@if(!array.length){
|
|
3111
|
+
-
|
|
3112
|
+
} @else {
|
|
3113
|
+
@switch (additional.arrayStyle) {
|
|
3114
|
+
@case (ArrayStyle.CommaDelimited) {
|
|
3115
|
+
@for(val of array; track $index){
|
|
3116
|
+
{{val + (!$last ? ',' : '')}}
|
|
3117
|
+
}
|
|
3118
|
+
}
|
|
3119
|
+
@case(ArrayStyle.NewLine){
|
|
3120
|
+
@for(val of array; track $index){
|
|
3121
|
+
{{val}}
|
|
3122
|
+
@if(!$last){ <br/> }
|
|
3123
|
+
}
|
|
3124
|
+
}
|
|
3125
|
+
}
|
|
3126
|
+
}
|
|
3127
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3115
3128
|
}
|
|
3116
3129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ArrayColumnComponent, decorators: [{
|
|
3117
3130
|
type: Component,
|
|
3118
3131
|
args: [{
|
|
3119
3132
|
selector: 'tb-array-column',
|
|
3120
3133
|
standalone: true,
|
|
3121
|
-
imports: [
|
|
3122
|
-
NgIf, NgSwitch, NgSwitchCase, NgFor
|
|
3123
|
-
],
|
|
3124
3134
|
template: `
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
3128
|
-
|
|
3129
|
-
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3135
|
+
@if(!array.length){
|
|
3136
|
+
-
|
|
3137
|
+
} @else {
|
|
3138
|
+
@switch (additional.arrayStyle) {
|
|
3139
|
+
@case (ArrayStyle.CommaDelimited) {
|
|
3140
|
+
@for(val of array; track $index){
|
|
3141
|
+
{{val + (!$last ? ',' : '')}}
|
|
3142
|
+
}
|
|
3143
|
+
}
|
|
3144
|
+
@case(ArrayStyle.NewLine){
|
|
3145
|
+
@for(val of array; track $index){
|
|
3146
|
+
{{val}}
|
|
3147
|
+
@if(!$last){ <br/> }
|
|
3148
|
+
}
|
|
3149
|
+
}
|
|
3150
|
+
}
|
|
3151
|
+
}
|
|
3136
3152
|
`,
|
|
3137
3153
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
3138
3154
|
}]
|
|
@@ -3222,6 +3238,7 @@ class ColumnBuilderComponent {
|
|
|
3222
3238
|
this.templateService = templateService;
|
|
3223
3239
|
this.injector = injector;
|
|
3224
3240
|
this.FieldType = FieldType;
|
|
3241
|
+
this.customCell = undefined;
|
|
3225
3242
|
this.mapWidth = ([previousUserDefinedWidth, currentUserDefinedWidth]) => {
|
|
3226
3243
|
const baseWidth = !!this.metaData.width ? { flex: `0 0 ${this.metaData.width}`, maxWidth: 'none' } : { flex: '1' };
|
|
3227
3244
|
if (currentUserDefinedWidth) {
|
|
@@ -3281,7 +3298,7 @@ class ColumnBuilderComponent {
|
|
|
3281
3298
|
}
|
|
3282
3299
|
}
|
|
3283
3300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ColumnBuilderComponent, deps: [{ token: TransformCreator }, { token: i3$3.MatTable }, { token: TableStore }, { token: TableTemplateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ColumnBuilderComponent, isStandalone: true, selector: "tb-column-builder", inputs: { metaData: "metaData", customCell: "customCell", data$: "data$" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n <!-- header -->\r\n <ng-template matHeaderCellDef #myHeader>\r\n @if(customCell?.columnDef?.headerCell){\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \"/>\r\n } @else {\r\n <mat-header-cell cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref \r\n [conditionalClasses]='metaData.additional?.columnPartClasses?.header' >\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData._internalNotUserDefined) {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async)){\r\n <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n }\r\n \r\n </div>\r\n </mat-header-cell>\r\n }\r\n </ng-template>\r\n\r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell){\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n } @else {\r\n <mat-footer-cell [styler]='styles.footer' *ngrxLet=\"data$ as data\" [conditionalClasses]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer){\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType) {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:white;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i1$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["filter", "metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
|
|
3285
3302
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3286
3303
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3287
3304
|
}
|
|
@@ -3290,10 +3307,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImpor
|
|
|
3290
3307
|
args: [{ selector: 'tb-column-builder', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
3291
3308
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3292
3309
|
], standalone: true, imports: [
|
|
3293
|
-
MatTableModule,
|
|
3310
|
+
MatTableModule, NgTemplateOutlet, StylerDirective, ResizeColumnDirective,
|
|
3294
3311
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
|
|
3295
|
-
AsyncPipe, MatTooltipModule, LetDirective,
|
|
3296
|
-
], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n <!-- header -->\r\n <ng-template matHeaderCellDef #myHeader>\r\n
|
|
3312
|
+
AsyncPipe, MatTooltipModule, LetDirective, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
3313
|
+
], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles$ as styles\" >\r\n\r\n <!-- header -->\r\n <ng-template matHeaderCellDef #myHeader>\r\n @if(customCell?.columnDef?.headerCell){\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef.headerCell.template; context: {metaData: metaData, styles: styles.header} \"/>\r\n } @else {\r\n <mat-header-cell cdkDrag [styler]='styles.header' [resizeColumn]=\"true\" [key]=\"metaData.key\" class=\"column-head drag-header\" #headref \r\n [conditionalClasses]='metaData.additional?.columnPartClasses?.header' >\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!metaData._internalNotUserDefined || !customCell?.columnDef?.cell){\r\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n } @else if(metaData._internalNotUserDefined) {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if((!metaData._internalNotUserDefined || !customCell?.columnDef?.cell) && (showfilters$ | async)){\r\n <tb-header-menu #menu [metaData]='metaData' [filter]='filter' />\r\n }\r\n \r\n </div>\r\n </mat-header-cell>\r\n }\r\n </ng-template>\r\n\r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: {metaData: metaData, element: element , styles: styles.body }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ?? ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' [class.group-footer]=\"element.isGroupFooter\" (click)='cellClicked(element, metaData.key)' >\r\n <ng-container *ngTemplateOutlet=\"innerTemplate;context: {metaData: metaData, element: element, transform: transform }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell){\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef.footerCell.template;context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\r\n } @else {\r\n <mat-footer-cell [styler]='styles.footer' *ngrxLet=\"data$ as data\" [conditionalClasses]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer){\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType) {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n</ng-container>\r\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:white;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"] }]
|
|
3297
3314
|
}], ctorParameters: () => [{ type: TransformCreator }, { type: i3$3.MatTable }, { type: TableStore }, { type: TableTemplateService }, { type: i0.Injector }], propDecorators: { metaData: [{
|
|
3298
3315
|
type: Input
|
|
3299
3316
|
}], customCell: [{
|
|
@@ -3364,21 +3381,25 @@ class PaginatorComponent {
|
|
|
3364
3381
|
}
|
|
3365
3382
|
}
|
|
3366
3383
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: PaginatorComponent, deps: [{ token: TableStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3368
|
-
|
|
3369
|
-
{
|
|
3370
|
-
|
|
3384
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { dataSource: "dataSource", tableElRef: "tableElRef", data$: "data$" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
|
|
3385
|
+
@if(currentPageData$ | async; as pageData){
|
|
3386
|
+
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
|
|
3387
|
+
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
3388
|
+
</div>
|
|
3389
|
+
}
|
|
3371
3390
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
3372
3391
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
3373
3392
|
</mat-paginator>
|
|
3374
|
-
`, 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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "
|
|
3393
|
+
`, 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}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3375
3394
|
}
|
|
3376
3395
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
3377
3396
|
type: Component,
|
|
3378
|
-
args: [{ selector: 'tb-paginator', standalone: true, imports: [
|
|
3379
|
-
|
|
3380
|
-
{
|
|
3381
|
-
|
|
3397
|
+
args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass], template: `
|
|
3398
|
+
@if(currentPageData$ | async; as pageData){
|
|
3399
|
+
<div [ngClass]="{'hide' : !(collapseFooter$ | async), 'page-amounts':true}">
|
|
3400
|
+
{{pageData.currentStart}} - {{pageData.currentEnd}} of {{pageData.total}}
|
|
3401
|
+
</div>
|
|
3402
|
+
}
|
|
3382
3403
|
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
3383
3404
|
[ngClass]="{'hide' : (collapseFooter$ | async)}">
|
|
3384
3405
|
</mat-paginator>
|
|
@@ -3553,14 +3574,14 @@ class GenericTableComponent {
|
|
|
3553
3574
|
this.selection.select(...this.dataSource.data);
|
|
3554
3575
|
}
|
|
3555
3576
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, deps: [{ token: i1$4.MatSort }, { token: TableStore }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3556
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3577
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { data$: "data$", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", rows: "rows", isSticky: "isSticky", columnBuilders: "columnBuilders", columnInfos: "columnInfos", groupHeaderTemplate: "groupHeaderTemplate", disableSort: "disableSort" }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n [trackBy]='trackByFunction'\r\n [styler]=\"tableWidth | async\"\r\n>\r\n\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n @if(row.isGroupFooter){\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n }\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n <button mat-icon-button (click)=\"updateGroup(row);\">\r\n @if(!row.isExpanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{row.groupHeaderName}}\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n <tb-paginator #tbPaginator\r\n [dataSource]=\"dataSource\"\r\n [tableElRef]=\"tableElRef\"\r\n [data$]=\"data$\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3$3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3$3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3$3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["styler"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["dataSource", "tableElRef", "data$"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3557
3578
|
}
|
|
3558
3579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
3559
3580
|
type: Component,
|
|
3560
3581
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3561
3582
|
MatTableModule, DragDropModule, StylerDirective, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
3562
|
-
|
|
3563
|
-
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n [trackBy]='trackByFunction'\r\n [styler]=\"tableWidth | async\"\r\n>\r\n\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n <mat-checkbox
|
|
3583
|
+
PaginatorComponent, MatTooltipModule, AsyncPipe
|
|
3584
|
+
], template: "<mat-table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n class=\"table-drag-list\"\r\n [class]=\"(showFooterRow$ | async)\"\r\n #table\r\n [dataSource]=\"dataSource\"\r\n [trackBy]='trackByFunction'\r\n [styler]=\"tableWidth | async\"\r\n>\r\n\r\n <ng-container matColumnDef=\"select\">\r\n\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\">\r\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n [checked]=\"!!(masterToggleChecked$ | async)\"\r\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\r\n </mat-checkbox>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\">\r\n @if(row.isGroupFooter){\r\n <mat-checkbox\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"\r\n [checked]=\"selection.isSelected(row)\"/>\r\n }\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef>\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" >#</mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index;\"> {{ (tbPaginator.paginator.pageIndex * tbPaginator.paginator.pageSize) + i + 1 }} </mat-cell>\r\n <mat-footer-cell *matFooterCellDef></mat-footer-cell>\r\n </ng-container>\r\n\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" >\r\n <button mat-icon-button (click)=\"updateGroup(row);\">\r\n @if(!row.isExpanded){\r\n <mat-icon>chevron_right</mat-icon>\r\n } @else {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{row.groupHeaderName}}\r\n </div>\r\n <div style=\"flex-grow: 1\">\r\n <ng-container *ngTemplateOutlet=\"groupHeaderTemplate; context: { element: row }\"></ng-container>\r\n </div>\r\n </mat-cell>\r\n </ng-container>\r\n\r\n @if(showHeader$ | async){\r\n <mat-header-row *matHeaderRowDef=\"keys; sticky: isSticky\" />\r\n }\r\n <mat-row *matRowDef=\"let row; columns: keys; let i = index\" />\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\" />\r\n <mat-row *matRowDef=\"let row; columns: keys; when: isGroupFooter\" style=\"background-color: whitesmoke;\" />\r\n <mat-footer-row *matFooterRowDef=\"(showFooterRow$ | async) === 'regular-footer' ? keys : []\" />\r\n\r\n</mat-table>\r\n\r\n<div class=\"flx-row-end sticky\">\r\n <tb-paginator #tbPaginator\r\n [dataSource]=\"dataSource\"\r\n [tableElRef]=\"tableElRef\"\r\n [data$]=\"data$\" />\r\n\r\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\" (click)=\"state.toggleCollapseFooter()\">\r\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n</div>\r\n", styles: [".mat-mdc-row:nth-child(odd){background-color:#cdeefe}.sticky{bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff}:host::ng-deep .mat-mdc-paginator-container{min-height:initial!important}.group-header{display:flex}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:0 0 0 .2rem;line-height:normal}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.small-footer mat-footer-row{min-height:1rem;height:1rem}.no-footer mat-footer-row{display:none}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
3564
3585
|
}], ctorParameters: () => [{ type: i1$4.MatSort }, { type: TableStore }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { data$: [{
|
|
3565
3586
|
type: Input
|
|
3566
3587
|
}], indexColumn: [{
|
|
@@ -3758,13 +3779,13 @@ class GroupByListComponent {
|
|
|
3758
3779
|
this.tableStore = inject(TableStore);
|
|
3759
3780
|
}
|
|
3760
3781
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3761
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3782
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n <span class=\"tb-group-label\">Group By:</span>\r\n @for (groupByKey of groupByKeys; track groupByKey) {\r\n @if($index > 0){\r\n <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n }\r\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n {{groupByKey | spaceCase}}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }] }); }
|
|
3762
3783
|
}
|
|
3763
3784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
3764
3785
|
type: Component,
|
|
3765
3786
|
args: [{ selector: 'group-by-list', standalone: true, imports: [
|
|
3766
|
-
MatChipsModule, LetDirective,
|
|
3767
|
-
], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n <span
|
|
3787
|
+
MatChipsModule, LetDirective, MatIconModule, SpaceCasePipe
|
|
3788
|
+
], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\r\n <span class=\"tb-group-label\">Group By:</span>\r\n @for (groupByKey of groupByKeys; track groupByKey) {\r\n @if($index > 0){\r\n <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n }\r\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\r\n {{groupByKey | spaceCase}}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
|
|
3768
3789
|
}] });
|
|
3769
3790
|
|
|
3770
3791
|
class SortMenuComponentStore extends ComponentStore {
|
|
@@ -3853,18 +3874,19 @@ class SortMenuComponent {
|
|
|
3853
3874
|
this.store.setDirection(sort);
|
|
3854
3875
|
}
|
|
3855
3876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: SortMenuComponent, deps: [{ token: TableStore }, { token: SortMenuComponentStore }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3856
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n @if(sorted$ | async; as sorted){\r\n @if (notSorted$ | async; as notSorted) {\r\n <!-- Menu Trigger -->\r\n <span matTooltip=\"Sort\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <!-- Menu -->\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\r\n <div mat-menu-item class=\"menu-button\">\r\n <div class=\"close-button-wrapper\">\r\n <span matTooltip=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </span>\r\n @if(dirty){\r\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n <mat-icon>undo</mat-icon>\r\n </span>\r\n }\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"apply-button-wrapper\">\r\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n stop-propagation [class.apply-border]=\"dirty\"\r\n [disabled]=\"!dirty\">\r\n Apply @if (dirty) { Unsaved Changes }\r\n </button>\r\n </div>\r\n\r\n <!-- Default Sorting Text -->\r\n @if (!sorted.length) {\r\n <div class=\"tip\" >\r\n Sorting List\r\n </div>\r\n }\r\n\r\n <!-- Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #sortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n [cdkDropListData]=\"sorted\"\r\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n <!-- Menu Item Wrapper -->\r\n @for (sort of sorted; track sort.active) {\r\n <!-- Menu Item Headers -->\r\n @if (sorted.length > 1) {\r\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n }\r\n \r\n <!-- Menu Item -->\r\n <div mat-menu-item cdkDrag class=\"menu-item\">\r\n <div class=\"sort-item\">\r\n <span class=\"sorted-name\">\r\n {{sort.displayName || (sort.active | spaceCase)}}\r\n <span class=\"direction-text\">{{sort.direction}}</span>\r\n </span>\r\n \r\n <!-- Sort Direction Buttons -->\r\n <div class=\"up-down-buttons-wrapper\">\r\n <button class=\"up-down-button up-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_upward\r\n </mat-icon>\r\n </button>\r\n \r\n <button class=\"up-down-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_downward\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Default Not Sorted Text -->\r\n @if(!notSorted.length){\r\n <div class=\"tip\" >\r\n Not Sorted List\r\n </div>\r\n }\r\n\r\n <!-- Not Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #notSortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n [cdkDropListData]=\"notSorted\"\r\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n @for (sort of notSorted; track sort.active) {\r\n <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n </div>\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n }\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
3857
3878
|
}
|
|
3858
3879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
3859
3880
|
type: Component,
|
|
3860
3881
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], standalone: true, imports: [
|
|
3861
|
-
LetDirective,
|
|
3862
|
-
|
|
3863
|
-
], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n
|
|
3882
|
+
LetDirective, MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
|
|
3883
|
+
SpaceCasePipe, NgClass, AsyncPipe
|
|
3884
|
+
], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\r\n @if(sorted$ | async; as sorted){\r\n @if (notSorted$ | async; as notSorted) {\r\n <!-- Menu Trigger -->\r\n <span matTooltip=\"Sort\">\r\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <!-- Menu -->\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\r\n <div mat-menu-item class=\"menu-button\">\r\n <div class=\"close-button-wrapper\">\r\n <span matTooltip=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </span>\r\n @if(dirty){\r\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n <mat-icon>undo</mat-icon>\r\n </span>\r\n }\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"apply-button-wrapper\">\r\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\r\n stop-propagation [class.apply-border]=\"dirty\"\r\n [disabled]=\"!dirty\">\r\n Apply @if (dirty) { Unsaved Changes }\r\n </button>\r\n </div>\r\n\r\n <!-- Default Sorting Text -->\r\n @if (!sorted.length) {\r\n <div class=\"tip\" >\r\n Sorting List\r\n </div>\r\n }\r\n\r\n <!-- Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #sortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n [cdkDropListData]=\"sorted\"\r\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n <!-- Menu Item Wrapper -->\r\n @for (sort of sorted; track sort.active) {\r\n <!-- Menu Item Headers -->\r\n @if (sorted.length > 1) {\r\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n }\r\n \r\n <!-- Menu Item -->\r\n <div mat-menu-item cdkDrag class=\"menu-item\">\r\n <div class=\"sort-item\">\r\n <span class=\"sorted-name\">\r\n {{sort.displayName || (sort.active | spaceCase)}}\r\n <span class=\"direction-text\">{{sort.direction}}</span>\r\n </span>\r\n \r\n <!-- Sort Direction Buttons -->\r\n <div class=\"up-down-buttons-wrapper\">\r\n <button class=\"up-down-button up-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_upward\r\n </mat-icon>\r\n </button>\r\n \r\n <button class=\"up-down-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\r\n arrow_downward\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Default Not Sorted Text -->\r\n @if(!notSorted.length){\r\n <div class=\"tip\" >\r\n Not Sorted List\r\n </div>\r\n }\r\n\r\n <!-- Not Sorted Menu List -->\r\n <div class=\"list\"\r\n cdkDropList\r\n #notSortedGroup=\"cdkDropList\"\r\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n [cdkDropListData]=\"notSorted\"\r\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n @for (sort of notSorted; track sort.active) {\r\n <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n </div>\r\n }\r\n </div>\r\n </mat-menu>\r\n }\r\n }\r\n</ng-container>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:white}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
|
|
3864
3885
|
}], ctorParameters: () => [{ type: TableStore }, { type: SortMenuComponentStore }] });
|
|
3865
3886
|
|
|
3866
3887
|
const i = [
|
|
3867
|
-
|
|
3888
|
+
AsyncPipe, NgTemplateOutlet,
|
|
3889
|
+
LetDirective,
|
|
3868
3890
|
MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
|
|
3869
3891
|
SortMenuComponent, GenericTableComponent, StopPropagationDirective, ClickEmitterDirective, DialogDirective,
|
|
3870
3892
|
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, MatInputModule
|
|
@@ -4200,11 +4222,11 @@ class TableContainerComponent {
|
|
|
4200
4222
|
return this.tbGroupBy(data, groupByKeys);
|
|
4201
4223
|
}
|
|
4202
4224
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4225
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableId: "tableId", tableBuilder: "tableBuilder", indexColumn: "indexColumn", selectionColumn: "selectionColumn", trackBy: "trackBy", isSticky: "isSticky", pageSize: "pageSize", inputFilters: "inputFilters", groupHeaderTemplate: "groupHeaderTemplate" }, outputs: { selection$: "selection$", data: "data", 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\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\" *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\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 }\r\n\r\n </div>\r\n </div>\r\n\r\n <div>\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 </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\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 @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\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 @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\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}.pointer{cursor:pointer}.add-key{width:90%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"], dependencies: [{ kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["data$", "indexColumn", "selectionColumn", "trackBy", "rows", "isSticky", "columnBuilders", "columnInfos", "groupHeaderTemplate", "disableSort"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "directive", type: ClickEmitterDirective, selector: "[clickEmitter]", exportAs: ["clickEmitter"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin"], outputs: ["opDialogClosed"] }, { kind: "ngmodule", type: i4$2.MatButtonModule }, { kind: "component", type: i4$2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i14.MatMenuModule }, { kind: "component", type: i14.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: i14.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i3$2.MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i5$1.MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i1$2.MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4204
4226
|
}
|
|
4205
4227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
4206
4228
|
type: Component,
|
|
4207
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: i, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\" *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n <ng-content select=\".tb-header-title\"
|
|
4229
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore], standalone: true, imports: i, template: "<ng-content select=\"[before]\" />\r\n\r\n<ng-container multiSort [matSortDisabled]=\"disableSort\" *ngrxLet=\"state.tableSettings$ as tableSettings\">\r\n <div class=\"header-wrapper\">\r\n <div class=\"title\">\r\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\r\n <ng-content select=\".tb-header-title\"/>\r\n }\r\n @if((state.groupByKeys$ | async)?.length){\r\n <group-by-list />\r\n }\r\n </div>\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader) {\r\n @if (!(collapseHeader$ | async)) {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu'>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\r\n @else {\r\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"flex-column\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\r\n </mat-menu>\r\n }\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 }\r\n\r\n </div>\r\n </div>\r\n\r\n <div>\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 </tb-generic-table>\r\n </div>\r\n\r\n\r\n\r\n <ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n </ng-template>\r\n\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 @if (!tableSettings.hideExport) {\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n }\r\n @if (currentStateKey$ | async; as currentKey) {\r\n @if (tableId) {\r\n <button mat-menu-item (click)=\"saveState()\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>Save to {{currentKey}}</span>\r\n </button>\r\n <button mat-menu-item [matMenuTriggerFor]=\"savedNames\">\r\n <span>Choose Profile</span>\r\n </button>\r\n }\r\n }\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 @for (key of stateKeys$ | async; track key) {\r\n <button mat-menu-item (click)='setProfileState(key)'>\r\n <span>{{key}}</span>\r\n <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>\r\n </button>\r\n }\r\n </mat-menu>\r\n <ng-container *opDialog='add'>\r\n <mat-form-field>\r\n <input class=\"add-key\" matInput #addedKey />\r\n </mat-form-field>\r\n <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]=\"!addedKey.value\">\r\n Add\r\n </button>\r\n </ng-container>\r\n </ng-template>\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}.pointer{cursor:pointer}.add-key{width:90%}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}\n"] }]
|
|
4208
4230
|
}], propDecorators: { genericTableComponent: [{
|
|
4209
4231
|
type: ViewChild,
|
|
4210
4232
|
args: [GenericTableComponent]
|
|
@@ -4494,11 +4516,11 @@ class ActionStateSpinnerComponent {
|
|
|
4494
4516
|
this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
|
|
4495
4517
|
}
|
|
4496
4518
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4497
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.3", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n <div id=\"blocker\">\r\n <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
4498
4520
|
}
|
|
4499
4521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.3", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
|
|
4500
4522
|
type: Component,
|
|
4501
|
-
args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [
|
|
4523
|
+
args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\r\n <div id=\"blocker\">\r\n <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
|
|
4502
4524
|
}], propDecorators: { status$: [{
|
|
4503
4525
|
type: Input
|
|
4504
4526
|
}] } });
|