@one-paragon/angular-utilities 1.2.9-beta.1 → 1.2.10-beta-1
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/README.md +24 -24
- package/esm2022/action-state/action-state-spinner/action-state-spinner.component.mjs +3 -3
- package/esm2022/action-state/action-state-ui/action-state-ui.module.mjs +1 -1
- package/esm2022/action-state/index.mjs +1 -1
- package/esm2022/action-state/ngrx-ext/ngrx-ext.module.mjs +1 -1
- package/esm2022/action-state/ngrx.mjs +1 -1
- package/esm2022/http-request-state/directives/index.mjs +1 -1
- package/esm2022/http-request-state/index.mjs +1 -1
- package/esm2022/http-request-state/rxjs/getRequestorBody.mjs +1 -1
- package/esm2022/http-request-state/rxjs/getRequestorState.mjs +1 -1
- package/esm2022/http-request-state/rxjs/index.mjs +1 -1
- package/esm2022/ngrx/actionable-selector.mjs +1 -1
- package/esm2022/public-api.mjs +1 -1
- package/esm2022/rxjs/defaultShareReplay.mjs +1 -1
- package/esm2022/rxjs/index.mjs +1 -1
- package/esm2022/rxjs/mapError.mjs +1 -1
- package/esm2022/rxjs/rxjs-operators.mjs +1 -1
- package/esm2022/rxjs/subjectifier.mjs +1 -1
- package/esm2022/rxjs/subscriber.directive.mjs +1 -1
- package/esm2022/table-builder/classes/DefaultSettings.mjs +1 -1
- package/esm2022/table-builder/classes/MatTableObservableDataSource.mjs +1 -1
- package/esm2022/table-builder/classes/TableBuilderConfig.mjs +1 -1
- package/esm2022/table-builder/classes/TableBuilderDataSource.mjs +1 -1
- package/esm2022/table-builder/classes/TableState.mjs +1 -1
- package/esm2022/table-builder/classes/data-store.mjs +1 -1
- package/esm2022/table-builder/classes/display-col.mjs +1 -1
- package/esm2022/table-builder/classes/filter-info.mjs +1 -1
- package/esm2022/table-builder/classes/table-builder-general-settings.mjs +4 -1
- package/esm2022/table-builder/classes/table-builder.mjs +1 -1
- package/esm2022/table-builder/classes/table-store.mjs +1 -1
- package/esm2022/table-builder/components/column-builder/column-builder.component.mjs +3 -3
- package/esm2022/table-builder/components/column-builder/column-helpers.mjs +1 -1
- package/esm2022/table-builder/components/date-filter/date-filter.component.mjs +3 -3
- package/esm2022/table-builder/components/date-time-filter/date-time-filter.component.mjs +3 -3
- package/esm2022/table-builder/components/filter/filter.component.mjs +3 -3
- package/esm2022/table-builder/components/filter/in-list/in-list-filter.component.mjs +19 -19
- package/esm2022/table-builder/components/gen-col-displayer/gen-col-displayer.component.mjs +3 -3
- package/esm2022/table-builder/components/generic-table/generic-table.component.mjs +10 -4
- package/esm2022/table-builder/components/generic-table/paginator.component.mjs +25 -25
- package/esm2022/table-builder/components/group-by-list/group-by-list.component.mjs +3 -3
- package/esm2022/table-builder/components/in-filter/in-filter.component.mjs +3 -3
- package/esm2022/table-builder/components/index.mjs +1 -1
- package/esm2022/table-builder/components/initialization-component/initialization-component.mjs +3 -3
- package/esm2022/table-builder/components/link-column.component.mjs +31 -31
- package/esm2022/table-builder/components/number-filter/number-filter.component.mjs +3 -3
- package/esm2022/table-builder/components/profiles-menu/profiles-menu.component.mjs +3 -3
- package/esm2022/table-builder/components/scroll-strategy.mjs +1 -1
- package/esm2022/table-builder/components/sort-menu/sort-menu.component-store.mjs +1 -1
- package/esm2022/table-builder/components/sort-menu/sort-menu.component.mjs +3 -3
- package/esm2022/table-builder/components/table-container/table-container-imports.mjs +1 -1
- package/esm2022/table-builder/components/table-container/table-container.helpers/data-state.helpers.mjs +1 -1
- package/esm2022/table-builder/components/table-container/table-container.helpers/filter-state.helpers.mjs +1 -1
- package/esm2022/table-builder/components/table-container/table-container.helpers/groupBy.helpers.mjs +1 -1
- package/esm2022/table-builder/components/table-container/table-container.helpers/sort-state.helpers.mjs +1 -1
- package/esm2022/table-builder/components/table-container/table-container.mjs +29 -22
- package/esm2022/table-builder/components/table-container/tableProps.mjs +2 -1
- package/esm2022/table-builder/components/table-container/virtual-scroll-container.mjs +35 -11
- package/esm2022/table-builder/components/table-container-filter/filter-list/filter-list.component.mjs +3 -3
- package/esm2022/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.mjs +3 -3
- package/esm2022/table-builder/components/table-container-filter/table-wrapper-filter-store.mjs +1 -1
- package/esm2022/table-builder/directives/custom-cell-directive.mjs +1 -1
- package/esm2022/table-builder/directives/index.mjs +1 -1
- package/esm2022/table-builder/directives/multi-sort.directive.mjs +1 -1
- package/esm2022/table-builder/directives/resize-column.directive.mjs +1 -1
- package/esm2022/table-builder/directives/table-wrapper.directive.mjs +1 -1
- package/esm2022/table-builder/directives/tb-filter.directive.mjs +1 -1
- package/esm2022/table-builder/enums/filterTypes.mjs +1 -1
- package/esm2022/table-builder/functions/boolean-filter-function.mjs +1 -1
- package/esm2022/table-builder/functions/date-filter-function.mjs +1 -1
- package/esm2022/table-builder/functions/download-data.mjs +1 -1
- package/esm2022/table-builder/functions/null-filter-function.mjs +1 -1
- package/esm2022/table-builder/functions/number-filter-function.mjs +1 -1
- package/esm2022/table-builder/functions/sort-data-function.mjs +1 -1
- package/esm2022/table-builder/functions/string-filter-function.mjs +1 -1
- package/esm2022/table-builder/interfaces/ColumnInfo.mjs +1 -1
- package/esm2022/table-builder/interfaces/report-def.mjs +1 -1
- package/esm2022/table-builder/ngrx/tableBuilderStateStore.mjs +1 -1
- package/esm2022/table-builder/pipes/column-total.pipe.mjs +1 -1
- package/esm2022/table-builder/pipes/format-filter-type.pipe.mjs +1 -1
- package/esm2022/table-builder/pipes/format-filter-value.pipe.mjs +1 -1
- package/esm2022/table-builder/services/export-to-csv.service.mjs +1 -1
- package/esm2022/table-builder/services/link-creator.service.mjs +1 -1
- package/esm2022/table-builder/services/table-template-service.mjs +1 -1
- package/esm2022/table-builder/services/transform-creator.mjs +1 -1
- package/esm2022/table-builder/table-builder.module.mjs +1 -1
- package/esm2022/utilities/array-helpers.mjs +1 -1
- package/esm2022/utilities/directives/auto-focus.directive.mjs +1 -1
- package/esm2022/utilities/directives/clickEmitterDirective.mjs +1 -1
- package/esm2022/utilities/directives/clickSubject.mjs +1 -1
- package/esm2022/utilities/directives/conditional-classes.directive.mjs +1 -1
- package/esm2022/utilities/directives/dialog-service.mjs +1 -1
- package/esm2022/utilities/directives/dialog.mjs +1 -1
- package/esm2022/utilities/directives/mat-toggle-group-directive.mjs +1 -1
- package/esm2022/utilities/directives/prevent-enter.directive.mjs +1 -1
- package/esm2022/utilities/directives/stop-propagation.directive.mjs +1 -1
- package/esm2022/utilities/directives/trim-whitespace.directive.mjs +1 -1
- package/esm2022/utilities/index.mjs +1 -1
- package/esm2022/utilities/module.mjs +1 -1
- package/esm2022/utilities/pipes/function.pipe.mjs +1 -1
- package/esm2022/utilities/pipes/phone.pipe.mjs +1 -1
- package/esm2022/utilities/pipes/space-case.pipes.mjs +1 -1
- package/fesm2022/one-paragon-angular-utilities.mjs +174 -134
- package/fesm2022/one-paragon-angular-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/table-builder/classes/table-builder-general-settings.d.ts +2 -0
- package/table-builder/components/generic-table/generic-table.component.d.ts +1 -0
- package/table-builder/components/table-container/table-container.d.ts +2 -1
- package/table-builder/components/table-container/tableProps.d.ts +1 -0
- package/table-builder/components/table-container/virtual-scroll-container.d.ts +8 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, isSignal, computed, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, forwardRef, contentChildren, ContentChild, APP_INITIALIZER } from '@angular/core';
|
|
2
|
+
import { Directive, Input, inject, Injector, TemplateRef, ViewContainerRef, NgModule, assertInInjectionContext, DestroyRef, isSignal, computed, Injectable, Pipe, Renderer2, ElementRef, booleanAttribute, signal, InjectionToken, makeEnvironmentProviders, HostListener, Component, ChangeDetectionStrategy, EventEmitter, untracked, Output, ContentChildren, ChangeDetectorRef, input, output, ViewChild, EnvironmentInjector, createComponent, viewChild, effect, contentChild, forwardRef, contentChildren, ContentChild, APP_INITIALIZER } from '@angular/core';
|
|
3
3
|
import { shareReplay, switchAll, map, filter, tap, catchError, startWith, switchMap, mergeMap, concatMap as concatMap$1, takeUntil, distinctUntilChanged, first as first$1, distinctUntilKeyChanged, delay as delay$1, observeOn, scan as scan$1, timestamp as timestamp$1, withLatestFrom, mergeAll } from 'rxjs/operators';
|
|
4
4
|
import * as i1 from 'rxjs';
|
|
5
5
|
import { Subject, isObservable, of, ReplaySubject, filter as filter$1, first, map as map$1, Observable, combineLatest, Subscription, startWith as startWith$1, pairwise, concatMap, merge, delay, fromEvent, tap as tap$1, BehaviorSubject, takeUntil as takeUntil$1, switchMap as switchMap$1, scan, asyncScheduler, animationFrameScheduler, distinctUntilChanged as distinctUntilChanged$1, timestamp, skip } from 'rxjs';
|
|
@@ -796,6 +796,7 @@ class TableSettings {
|
|
|
796
796
|
useVirtualScroll = null;
|
|
797
797
|
includeAllInPaginatorOptions = false;
|
|
798
798
|
rowHeight = undefined;
|
|
799
|
+
groupHeaderHeight = undefined;
|
|
799
800
|
}
|
|
800
801
|
class PersistedTableSettings {
|
|
801
802
|
constructor(tableSettings) {
|
|
@@ -823,6 +824,7 @@ class NotPersistedTableSettings {
|
|
|
823
824
|
this.includeAllInPaginatorOptions = tableSettings.tableSettings.includeAllInPaginatorOptions;
|
|
824
825
|
this.rowHeight = tableSettings.tableSettings.rowHeight;
|
|
825
826
|
this.headerHeight = tableSettings.headerSettings.headerHeight;
|
|
827
|
+
this.groupHeaderHeight = tableSettings.tableSettings.groupHeaderHeight;
|
|
826
828
|
}
|
|
827
829
|
}
|
|
828
830
|
hideExport = true;
|
|
@@ -836,6 +838,7 @@ class NotPersistedTableSettings {
|
|
|
836
838
|
usePaginator = true;
|
|
837
839
|
useVirtualScroll = null;
|
|
838
840
|
includeAllInPaginatorOptions = false;
|
|
841
|
+
groupHeaderHeight = undefined;
|
|
839
842
|
rowHeight;
|
|
840
843
|
headerHeight = undefined;
|
|
841
844
|
}
|
|
@@ -2663,13 +2666,13 @@ class DateFilterComponent {
|
|
|
2663
2666
|
info;
|
|
2664
2667
|
CurrentFilterType;
|
|
2665
2668
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\
|
|
2669
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\n <mat-form-field>\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\n <mat-datepicker #cal />\n </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.DateBetween){\n <ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\" >\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\n (click)=\"fromVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\n <mat-datepicker #fromVal></mat-datepicker>\n </mat-form-field>\n <mat-form-field>\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\n <mat-datepicker #toVal />\n </mat-form-field>\n </ng-container>\n}\n\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.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.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2667
2670
|
}
|
|
2668
2671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
2669
2672
|
type: Component,
|
|
2670
2673
|
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
|
|
2671
2674
|
MatInputModule, FormsModule, MatDatepickerModule, PreventEnterDirective
|
|
2672
|
-
], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\
|
|
2675
|
+
], template: "@if (CurrentFilterType !== FilterType.DateBetween && CurrentFilterType !== FilterType.IsNull) {\n <mat-form-field>\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix [for]=\"cal\" preventEnter />\n <mat-datepicker #cal />\n </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.DateBetween){\n <ng-container ngModelGroup=\"filterValue\">\n <mat-form-field class=\"my-filter\" >\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"From\" [matDatepicker]=\"fromVal\"\n (click)=\"fromVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"fromVal\" preventEnter />\n <mat-datepicker #fromVal></mat-datepicker>\n </mat-form-field>\n <mat-form-field>\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"To\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" [for]=\"toVal\" preventEnter />\n <mat-datepicker #toVal />\n </mat-form-field>\n </ng-container>\n}\n\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
2673
2676
|
}], propDecorators: { info: [{
|
|
2674
2677
|
type: Input
|
|
2675
2678
|
}], CurrentFilterType: [{
|
|
@@ -2720,7 +2723,7 @@ class InFilterComponent {
|
|
|
2720
2723
|
provide: NG_VALUE_ACCESSOR,
|
|
2721
2724
|
useExisting: InFilterComponent,
|
|
2722
2725
|
multi: true
|
|
2723
|
-
}], ngImport: i0, template: "<div class=inline>\
|
|
2726
|
+
}], ngImport: i0, template: "<div class=inline>\n @for (val of value; track $index) {\n <div>\n @if(type === FieldType.Number || type === FieldType.Currency){\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\n [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\n }\n @else {\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\n [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n #input [autoFocus]=\"$index === value.length - 1\" />\n }\n </div>\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\n @if ($index === value.length - 1) {\n <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n }\n \n }\n</div>\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 });
|
|
2724
2727
|
}
|
|
2725
2728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
2726
2729
|
type: Component,
|
|
@@ -2730,7 +2733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
2730
2733
|
multi: true
|
|
2731
2734
|
}], standalone: true, imports: [
|
|
2732
2735
|
FormsModule, AutoFocusDirective
|
|
2733
|
-
], template: "<div class=inline>\
|
|
2736
|
+
], template: "<div class=inline>\n @for (val of value; track $index) {\n <div>\n @if(type === FieldType.Number || type === FieldType.Currency){\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index, $event)\"\n [readonly]=\"$index + 1 < value.length\" type=\"number\" [ngModelOptions]=\"{standalone:true}\" [autoFocus]=\"$index === value.length - 1\"/>\n }\n @else {\n <input [ngModel]=\"val\" (ngModelChange)=\"onValueChange($index ,$event)\"\n [readonly]=\"$index + 1 < value.length\" type=\"string\" [ngModelOptions]=\"{standalone:true}\"\n #input [autoFocus]=\"$index === value.length - 1\" />\n }\n </div>\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\n @if ($index === value.length - 1) {\n <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\n }\n \n }\n</div>\n", styles: [".inline{display:inline-block}\n"] }]
|
|
2734
2737
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
2735
2738
|
type: Input
|
|
2736
2739
|
}] } });
|
|
@@ -2741,13 +2744,13 @@ class NumberFilterComponent {
|
|
|
2741
2744
|
CurrentFilterType;
|
|
2742
2745
|
info;
|
|
2743
2746
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2744
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\
|
|
2747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { CurrentFilterType: "CurrentFilterType", info: "info" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.NumberBetween){\n <ng-container ngModelGroup=\"filterValue\" >\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n </mat-form-field>\n </ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\n}\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$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.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 });
|
|
2745
2748
|
}
|
|
2746
2749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
2747
2750
|
type: Component,
|
|
2748
2751
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
|
|
2749
2752
|
MatInputModule, FormsModule, InFilterComponent
|
|
2750
|
-
], template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\
|
|
2753
|
+
], template: "@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In){\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" type=\"number\"/>\n </mat-form-field>\n}\n@if(CurrentFilterType === FilterType.NumberBetween){\n <ng-container ngModelGroup=\"filterValue\" >\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"Start\" [ngModel]=\"info.filterValue?.Start\" placeholder=\"Start\" type=\"number\"/>\n </mat-form-field>\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"End\" [ngModel]=\"info.filterValue?.End\" placeholder=\"End\" type=\"number\"/>\n </mat-form-field>\n </ng-container>\n}\n\n@if (CurrentFilterType === FilterType.In) {\n <lib-in-filter name='filterValue' [type]=\"FieldType.Number\" [(ngModel)]='info.filterValue' />\n}\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"] }]
|
|
2751
2754
|
}], propDecorators: { CurrentFilterType: [{
|
|
2752
2755
|
type: Input
|
|
2753
2756
|
}], info: [{
|
|
@@ -2759,13 +2762,13 @@ class DateTimeFilterComponent {
|
|
|
2759
2762
|
info;
|
|
2760
2763
|
CurrentFilterType;
|
|
2761
2764
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2762
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\
|
|
2765
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { info: "info", CurrentFilterType: "CurrentFilterType" }, ngImport: i0, template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n}\n@if(CurrentFilterType === FilterType.DateTimeBetween){\n <ng-container ngModelGroup=\"filterValue\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n </ng-container>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "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 });
|
|
2763
2766
|
}
|
|
2764
2767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
2765
2768
|
type: Component,
|
|
2766
2769
|
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], standalone: true, imports: [
|
|
2767
2770
|
FormsModule, PreventEnterDirective
|
|
2768
|
-
], template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\
|
|
2771
|
+
], template: "@if(CurrentFilterType !== FilterType.DateTimeBetween && CurrentFilterType !== FilterType.IsNull){\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue\" preventEnter name=\"filterValue\" class=\"op-date-time-input\"/>\n}\n@if(CurrentFilterType === FilterType.DateTimeBetween){\n <ng-container ngModelGroup=\"filterValue\">\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.Start\" preventEnter name=\"Start\" class=\"op-date-time-input\"/>\n <input type=\"datetime-local\" [ngModel]=\"info.filterValue?.End\" preventEnter name=\"End\" class=\"op-date-time-input\"/>\n </ng-container>\n}", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
2769
2772
|
}], propDecorators: { info: [{
|
|
2770
2773
|
type: Input
|
|
2771
2774
|
}], CurrentFilterType: [{
|
|
@@ -2824,30 +2827,30 @@ class InListFilterComponent {
|
|
|
2824
2827
|
provide: NG_VALUE_ACCESSOR,
|
|
2825
2828
|
useExisting: InListFilterComponent,
|
|
2826
2829
|
multi: true
|
|
2827
|
-
}], ngImport: i0, template: `
|
|
2828
|
-
@for (item of keyValues$ | async| keyvalue; track item.key) {
|
|
2829
|
-
<div>
|
|
2830
|
-
<mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
|
|
2831
|
-
{{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
|
|
2832
|
-
</mat-checkbox>
|
|
2833
|
-
</div>
|
|
2834
|
-
}
|
|
2835
|
-
|
|
2830
|
+
}], ngImport: i0, template: `
|
|
2831
|
+
@for (item of keyValues$ | async| keyvalue; track item.key) {
|
|
2832
|
+
<div>
|
|
2833
|
+
<mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
|
|
2834
|
+
{{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
|
|
2835
|
+
</mat-checkbox>
|
|
2836
|
+
</div>
|
|
2837
|
+
}
|
|
2838
|
+
|
|
2836
2839
|
`, isInline: true, dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "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 });
|
|
2837
2840
|
}
|
|
2838
2841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InListFilterComponent, decorators: [{
|
|
2839
2842
|
type: Component,
|
|
2840
2843
|
args: [{
|
|
2841
2844
|
selector: 'tb-in-list-filter , [tb-in-list-filter]',
|
|
2842
|
-
template: `
|
|
2843
|
-
@for (item of keyValues$ | async| keyvalue; track item.key) {
|
|
2844
|
-
<div>
|
|
2845
|
-
<mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
|
|
2846
|
-
{{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
|
|
2847
|
-
</mat-checkbox>
|
|
2848
|
-
</div>
|
|
2849
|
-
}
|
|
2850
|
-
|
|
2845
|
+
template: `
|
|
2846
|
+
@for (item of keyValues$ | async| keyvalue; track item.key) {
|
|
2847
|
+
<div>
|
|
2848
|
+
<mat-checkbox [checked]='selectedKeys.includes(item.key)' stop-propagation (change)='selectFilterChanged($event, item.key)' >
|
|
2849
|
+
{{metaData.fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
|
|
2850
|
+
</mat-checkbox>
|
|
2851
|
+
</div>
|
|
2852
|
+
}
|
|
2853
|
+
|
|
2851
2854
|
`,
|
|
2852
2855
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2853
2856
|
providers: [{
|
|
@@ -2885,7 +2888,7 @@ class FilterComponent {
|
|
|
2885
2888
|
}
|
|
2886
2889
|
}
|
|
2887
2890
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2888
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@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()\" (ngModelChange)=\"$enteredFilterType.set($event)\" [panelWidth]=\"null\">\r\n @for (kvp of filterTypes[filter.fieldType]; track kvp) {\r\n <mat-option [value]=\"kvp\">\r\n {{ kvp }}\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 if(currentFilterType === FilterType.In) {\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: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: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.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: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: 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 });
|
|
2891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@let filter = $filter();\n@let currentFilterType = $currentFilterType();\n\n@if (filter) {\n<mat-card appearance=\"outlined\" class=\"filter-card\">\n <mat-card-content>\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n <div class=\"head-row\" >\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n matTooltip=\"Close\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\" >\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [ngModel]=\"$currentFilterType()\" (ngModelChange)=\"$enteredFilterType.set($event)\" [panelWidth]=\"null\">\n @for (kvp of filterTypes[filter.fieldType]; track kvp) {\n <mat-option [value]=\"kvp\">\n {{ kvp }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @if(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n <ng-container *ngTemplateOutlet=\"String\" />\n }\n @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n }\n @else if(filter.fieldType === FieldType.Boolean){\n <ng-container *ngTemplateOutlet=\"Boolean\" />\n }\n @else if(filter.fieldType === FieldType.Date){\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n }\n @else if(filter.fieldType === FieldType.DateTime){\n <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n }\n @else if(filter.fieldType === FieldType.Enum){\n <ng-container *ngTemplateOutlet=\"Enum\" />\n }\n\n @if(currentFilterType === FilterType.IsNull){\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n }\n </div>\n <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n Apply\n </button>\n \n \n <ng-template #String>\n @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n </mat-form-field>\n } @else if(currentFilterType === FilterType.In) {\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\n }\n </ng-template>\n \n <ng-template #Boolean >\n @if(currentFilterType === FilterType.BooleanEquals){\n <div class=\"switch\">\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if(currentFilterType === FilterType.In){\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.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: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: i10.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i10.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: 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 });
|
|
2889
2892
|
}
|
|
2890
2893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterComponent, decorators: [{
|
|
2891
2894
|
type: Component,
|
|
@@ -2894,7 +2897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
2894
2897
|
MatInputModule, MatSelectModule, KeyValuePipe, NumberFilterComponent,
|
|
2895
2898
|
DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
|
|
2896
2899
|
PreventEnterDirective, NgTemplateOutlet
|
|
2897
|
-
], template: "@let filter = $filter();\
|
|
2900
|
+
], template: "@let filter = $filter();\n@let currentFilterType = $currentFilterType();\n\n@if (filter) {\n<mat-card appearance=\"outlined\" class=\"filter-card\">\n <mat-card-content>\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close.emit()\">\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\n <div class=\"head-row\" >\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\n <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button (click)=\"close.emit();\" type=\"button\"\n matTooltip=\"Close\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n </div>\n <div class=\"filter-row\">\n <div class=\"inline\">\n <mat-form-field class=\"my-filter\" >\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [ngModel]=\"$currentFilterType()\" (ngModelChange)=\"$enteredFilterType.set($event)\" [panelWidth]=\"null\">\n @for (kvp of filterTypes[filter.fieldType]; track kvp) {\n <mat-option [value]=\"kvp\">\n {{ kvp }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n @if(filter.fieldType === FieldType.String || filter.fieldType === FieldType.Array || filter.fieldType === FieldType.Link ||\n filter.fieldType === FieldType.Unknown || filter.fieldType === FieldType.PhoneNumber) {\n <ng-container *ngTemplateOutlet=\"String\" />\n }\n @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency){\n <tb-number-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n }\n @else if(filter.fieldType === FieldType.Boolean){\n <ng-container *ngTemplateOutlet=\"Boolean\" />\n }\n @else if(filter.fieldType === FieldType.Date){\n <tb-date-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n }\n @else if(filter.fieldType === FieldType.DateTime){\n <tb-date-time-filter [info]=\"filter\" [CurrentFilterType]=\"currentFilterType!\" />\n }\n @else if(filter.fieldType === FieldType.Enum){\n <ng-container *ngTemplateOutlet=\"Enum\" />\n }\n\n @if(currentFilterType === FilterType.IsNull){\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\n </mat-radio-group>\n }\n </div>\n <button mat-button (click)=\"state.addFilter(form.value)\" disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\">\n Apply\n </button>\n \n \n <ng-template #String>\n @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In){\n <mat-form-field class=\"my-filter\">\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\n </mat-form-field>\n } @else if(currentFilterType === FilterType.In) {\n <lib-in-filter [type]=\"FieldType.String\" name='filterValue' [(ngModel)]=\"filter.filterValue\" />\n }\n </ng-template>\n \n <ng-template #Boolean >\n @if(currentFilterType === FilterType.BooleanEquals){\n <div class=\"switch\">\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\n <mat-radio-button [value]=\"true\" preventEnter>True</mat-radio-button>\n <mat-radio-button [value]=\"false\" preventEnter>False</mat-radio-button>\n </mat-radio-group>\n </div>\n }\n </ng-template>\n <ng-template #Enum>\n @if(currentFilterType === FilterType.In){\n <tb-in-list-filter [key]='filter.key' name='filterValue' [(ngModel)]='filter.filterValue' ></tb-in-list-filter>\n\n }\n </ng-template>\n </form>\n </mat-card-content>\n</mat-card>\n}\n", styles: [".filter-name{color:#6495ed;margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.my-filter{margin-right:15px}.cancel-button{float:right}.head-row{width:100%}.filter-row{width:fit-content}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{float:right;font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
2898
2901
|
}] });
|
|
2899
2902
|
|
|
2900
2903
|
class GenColDisplayerComponent {
|
|
@@ -2923,14 +2926,14 @@ class GenColDisplayerComponent {
|
|
|
2923
2926
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
2924
2927
|
}
|
|
2925
2928
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2926
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\
|
|
2929
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if(columns$ | async; as displayCols){\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">visibility_off</mat-icon>\n </button>\n </span>\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n <button mat-menu-item>\n <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </button>\n\n <button mat-menu-item stop-propagation>\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon color=\"primary\">done_all</mat-icon>\n </button>\n </span>\n\n <span matTooltip=\"Hide all columns\">\n <button mat-icon-button (click)=\"unset(displayCols)\">\n <mat-icon color=\"primary\">cancel</mat-icon>\n </button>\n </span>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\n @for (col of displayCols; track col.key) {\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\n @if(col.isVisible){\n <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\n <mat-icon color=\"primary\">check_box</mat-icon>\n </button>\n } @else {\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n <mat-icon>indeterminate_check_box</mat-icon>\n </button>\n }\n \n <p class=\"label\">\n {{col.displayName || (col.key | spaceCase) }}\n </p>\n\n </div>\n </button>\n }\n\n </div>\n </mat-menu>\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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2927
2930
|
}
|
|
2928
2931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
2929
2932
|
type: Component,
|
|
2930
2933
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2931
2934
|
AsyncPipe, MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
2932
2935
|
DragDropModule, SpaceCasePipe
|
|
2933
|
-
], template: "@if(columns$ | async; as displayCols){\
|
|
2936
|
+
], template: "@if(columns$ | async; as displayCols){\n <span matTooltip=\"Show/hide columns\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">visibility_off</mat-icon>\n </button>\n </span>\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\n\n <button mat-menu-item>\n <span matTooltip=\"Close\">\n <button class=\"filter-button\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </button>\n\n <button mat-menu-item stop-propagation>\n <span matTooltip=\"Show all columns\">\n <button mat-icon-button (click)=\"reset(displayCols)\">\n <mat-icon color=\"primary\">done_all</mat-icon>\n </button>\n </span>\n\n <span matTooltip=\"Hide all columns\">\n <button mat-icon-button (click)=\"unset(displayCols)\">\n <mat-icon color=\"primary\">cancel</mat-icon>\n </button>\n </span>\n </button>\n\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" stop-propagation [cdkDropListLockAxis]=\"'y'\">\n @for (col of displayCols; track col.key) {\n <button [class.isHidden]=\"!col.isVisible\" stop-propagation mat-menu-item cdkDrag [cdkDragData]=\"col\">\n <div (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\" style=\"display: flex; align-items: center;\">\n @if(col.isVisible){\n <button mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\n <mat-icon color=\"primary\">check_box</mat-icon>\n </button>\n } @else {\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\n <mat-icon>indeterminate_check_box</mat-icon>\n </button>\n }\n \n <p class=\"label\">\n {{col.displayName || (col.key | spaceCase) }}\n </p>\n\n </div>\n </button>\n }\n\n </div>\n </mat-menu>\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"] }]
|
|
2934
2937
|
}], ctorParameters: () => [] });
|
|
2935
2938
|
|
|
2936
2939
|
class WrapperFilterStore extends ComponentStore {
|
|
@@ -2965,14 +2968,14 @@ class GenFilterDisplayerComponent {
|
|
|
2965
2968
|
this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
|
|
2966
2969
|
}
|
|
2967
2970
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2968
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", 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\">\
|
|
2971
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", 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\">\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @for (md of $filterCols(); track md.key) {\n <button (click)=\"addFilter(md)\" mat-menu-item>\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n </button>\n }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i4$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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2969
2972
|
}
|
|
2970
2973
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
2971
2974
|
type: Component,
|
|
2972
2975
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2973
2976
|
MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
|
|
2974
2977
|
AsyncPipe, SpaceCasePipe
|
|
2975
|
-
], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\
|
|
2978
|
+
], template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n @for (md of $filterCols(); track md.key) {\n <button (click)=\"addFilter(md)\" mat-menu-item>\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\n </button>\n }\n</mat-menu>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
2976
2979
|
}] });
|
|
2977
2980
|
|
|
2978
2981
|
class KeyDisplayPipe {
|
|
@@ -3052,14 +3055,14 @@ class FilterChipsComponent {
|
|
|
3052
3055
|
}
|
|
3053
3056
|
currentFilters$ = this.filterStore.currentFilters$;
|
|
3054
3057
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3055
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\
|
|
3058
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n @if (currentFilters.length) {\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n <div class=\"float\">\n @for (filter of currentFilters; track filter.key) {\n <div class=\"filter\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n </div>\n }\n </div>\n }\n\n <mat-chip-set>\n @for (filter of $filters(); track filter.key) {\n <mat-chip (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n }\n @if ($filters().length > 1) {\n <mat-chip (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n }\n </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.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: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.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: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3056
3059
|
}
|
|
3057
3060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
3058
3061
|
type: Component,
|
|
3059
3062
|
args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3060
3063
|
LetDirective, MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
3061
3064
|
MatChipsModule, AsyncPipe, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
|
|
3062
|
-
], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\
|
|
3065
|
+
], template: "<div class=\"d-w\" *ngrxLet=\"currentFilters$ as currentFilters\" >\n\n @if (currentFilters.length) {\n <button class=\"cancel-button\" mat-icon-button (click)=\"clearAll()\" matTooltip=\"Close all Filters Cards\">\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\n </button>\n <div class=\"float\">\n @for (filter of currentFilters; track filter.key) {\n <div class=\"filter\">\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\n </div>\n }\n </div>\n }\n\n <mat-chip-set>\n @for (filter of $filters(); track filter.key) {\n <mat-chip (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n }\n @if ($filters().length > 1) {\n <mat-chip (removed)=\"tableState.clearFilters()\">\n Clear All\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n }\n </mat-chip-set>\n\n</div>\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
3063
3066
|
}] });
|
|
3064
3067
|
|
|
3065
3068
|
function isPipe(o) {
|
|
@@ -3162,16 +3165,16 @@ class RouterLinkColumnComponent {
|
|
|
3162
3165
|
queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()));
|
|
3163
3166
|
routerLinkOptions = computed(() => this.additional().routerLinkOptions);
|
|
3164
3167
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: RouterLinkColumnComponent, isStandalone: true, selector: "tb-router-link-column", inputs: { additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
3166
|
-
<a target="{{additional().target}}"
|
|
3167
|
-
[routerLink]=" [link()]"
|
|
3168
|
-
[queryParams]="queryParams()"
|
|
3169
|
-
[fragment]="routerLinkOptions().fragment"
|
|
3170
|
-
[preserveFragment]="routerLinkOptions().preserveFragment"
|
|
3171
|
-
[queryParamsHandling]="routerLinkOptions().queryParamsHandling"
|
|
3172
|
-
>
|
|
3173
|
-
{{value()}}
|
|
3174
|
-
</a>
|
|
3168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: RouterLinkColumnComponent, isStandalone: true, selector: "tb-router-link-column", inputs: { additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
3169
|
+
<a target="{{additional().target}}"
|
|
3170
|
+
[routerLink]=" [link()]"
|
|
3171
|
+
[queryParams]="queryParams()"
|
|
3172
|
+
[fragment]="routerLinkOptions().fragment"
|
|
3173
|
+
[preserveFragment]="routerLinkOptions().preserveFragment"
|
|
3174
|
+
[queryParamsHandling]="routerLinkOptions().queryParamsHandling"
|
|
3175
|
+
>
|
|
3176
|
+
{{value()}}
|
|
3177
|
+
</a>
|
|
3175
3178
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3176
3179
|
}
|
|
3177
3180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
|
|
@@ -3183,16 +3186,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
3183
3186
|
imports: [
|
|
3184
3187
|
RouterModule
|
|
3185
3188
|
],
|
|
3186
|
-
template: `
|
|
3187
|
-
<a target="{{additional().target}}"
|
|
3188
|
-
[routerLink]=" [link()]"
|
|
3189
|
-
[queryParams]="queryParams()"
|
|
3190
|
-
[fragment]="routerLinkOptions().fragment"
|
|
3191
|
-
[preserveFragment]="routerLinkOptions().preserveFragment"
|
|
3192
|
-
[queryParamsHandling]="routerLinkOptions().queryParamsHandling"
|
|
3193
|
-
>
|
|
3194
|
-
{{value()}}
|
|
3195
|
-
</a>
|
|
3189
|
+
template: `
|
|
3190
|
+
<a target="{{additional().target}}"
|
|
3191
|
+
[routerLink]=" [link()]"
|
|
3192
|
+
[queryParams]="queryParams()"
|
|
3193
|
+
[fragment]="routerLinkOptions().fragment"
|
|
3194
|
+
[preserveFragment]="routerLinkOptions().preserveFragment"
|
|
3195
|
+
[queryParamsHandling]="routerLinkOptions().queryParamsHandling"
|
|
3196
|
+
>
|
|
3197
|
+
{{value()}}
|
|
3198
|
+
</a>
|
|
3196
3199
|
`
|
|
3197
3200
|
}]
|
|
3198
3201
|
}] });
|
|
@@ -3202,11 +3205,11 @@ class LinkColumnComponent {
|
|
|
3202
3205
|
additional = input.required();
|
|
3203
3206
|
link = computed(() => this.additional().link(this.element()));
|
|
3204
3207
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3205
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
3206
|
-
<a target="{{additional().target}}"
|
|
3207
|
-
href="{{link()}}">
|
|
3208
|
-
{{value()}}
|
|
3209
|
-
</a>
|
|
3208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.2", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
3209
|
+
<a target="{{additional().target}}"
|
|
3210
|
+
href="{{link()}}">
|
|
3211
|
+
{{value()}}
|
|
3212
|
+
</a>
|
|
3210
3213
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3211
3214
|
}
|
|
3212
3215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
@@ -3215,11 +3218,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
3215
3218
|
selector: "tb-link-column",
|
|
3216
3219
|
standalone: true,
|
|
3217
3220
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3218
|
-
template: `
|
|
3219
|
-
<a target="{{additional().target}}"
|
|
3220
|
-
href="{{link()}}">
|
|
3221
|
-
{{value()}}
|
|
3222
|
-
</a>
|
|
3221
|
+
template: `
|
|
3222
|
+
<a target="{{additional().target}}"
|
|
3223
|
+
href="{{link()}}">
|
|
3224
|
+
{{value()}}
|
|
3225
|
+
</a>
|
|
3223
3226
|
`
|
|
3224
3227
|
}]
|
|
3225
3228
|
}] });
|
|
@@ -3284,14 +3287,14 @@ class InitializationComponent {
|
|
|
3284
3287
|
defaultTemplate;
|
|
3285
3288
|
defaultWithIcon;
|
|
3286
3289
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3287
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\">\
|
|
3290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "linkTemplate", first: true, predicate: ["link"], descendants: true, static: true }, { propertyName: "routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, static: true }, { propertyName: "imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, static: true }, { propertyName: "arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, static: true }, { propertyName: "arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, static: true }, { propertyName: "defaultTemplate", first: true, predicate: ["default"], descendants: true, static: true }, { propertyName: "defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\">\n <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\n</ng-template>\n\n<ng-template #routerLink let-value='value' let-element='element' let-additional=\"additional\">\n <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\n</ng-template>\n\n<ng-template #imageUrl let-value='value'>\n <span>\n <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\n </span>\n</ng-template>\n\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\n <tb-new-line-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\n <tb-comma-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #default let-value='value'>\n <span>{{ value }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-value='value'>\n <mat-icon>{{ value}}</mat-icon>\n</ng-template>\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["value", "element", "additional"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "value"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }] });
|
|
3288
3291
|
}
|
|
3289
3292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
3290
3293
|
type: Component,
|
|
3291
3294
|
args: [{ selector: 'initialization', standalone: true, imports: [
|
|
3292
3295
|
LinkColumnComponent, ArrayCommaColumnComponent, MatIconModule, FunctionPipe,
|
|
3293
3296
|
RouterLinkColumnComponent, ArrayNewLineColumnComponent
|
|
3294
|
-
], template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\">\
|
|
3297
|
+
], template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\">\n <tb-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\" />\n</ng-template>\n\n<ng-template #routerLink let-value='value' let-element='element' let-additional=\"additional\">\n <tb-router-link-column [element]=\"element\" [value]=\"value\" [additional]=\"additional\"/>\n</ng-template>\n\n<ng-template #imageUrl let-value='value'>\n <span>\n <img src=\"{{value}}\" height=\"75px\" width=\"75px\" />\n </span>\n</ng-template>\n\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\">\n <tb-new-line-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\">\n <tb-comma-array-column [value]='value' [additional]='additional'/>\n</ng-template>\n\n<ng-template #default let-value='value'>\n <span>{{ value }}</span>\n</ng-template>\n\n<ng-template #defaultWithIcon let-value='value'>\n <mat-icon>{{ value}}</mat-icon>\n</ng-template>\n" }]
|
|
3295
3298
|
}], propDecorators: { linkTemplate: [{
|
|
3296
3299
|
type: ViewChild,
|
|
3297
3300
|
args: ['link', { static: true }]
|
|
@@ -3601,7 +3604,7 @@ class ColumnBuilderComponent {
|
|
|
3601
3604
|
};
|
|
3602
3605
|
additional;
|
|
3603
3606
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3604
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", 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\" >\
|
|
3607
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles() as styles\" >\n\n <!-- header -->\n <ng-template matHeaderCellDef #myHeader>\n <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\n [class]='metaData.additional?.columnPartClasses?.header'>\n <div class=\"header-container\" cdkDragHandle>\n @if(!customCell?.columnDef?.headerCell)\n {\n @if(metaData.fieldType !== FieldType.NotMapped){\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n } @else if(metaData.fieldType === FieldType.NotMapped){\n <div style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n }\n @if((showFilters$ | async)){\n <tb-header-menu #menu [metaData]='metaData' />\n }\n }\n @else\n {\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles: styles.header} \">\n </ng-container>\n }\n </div>\n </mat-header-cell>\n </ng-template>\n\n <!-- body -->\n <ng-container *matCellDef=\"let element;\">\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\n </ng-container>\n <ng-template #body let-element='element' >\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\n <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\n </mat-cell>\n </ng-template>\n\n <!-- footer -->\n <ng-template matFooterCellDef>\n @if(customCell?.columnDef?.footerCell){\n <ng-container\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\n } @else {\n <mat-footer-cell [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\n @if(!!data?.length && metaData.additional?.footer){\n <span class=\"bold\">\n @switch (metaData.fieldType) {\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\n }\n </span>\n }\n\n </mat-footer-cell>\n }\n </ng-template>\n</ng-container>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;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: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "component", type: HeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$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: [
|
|
3605
3608
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
3606
3609
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3607
3610
|
}
|
|
@@ -3613,7 +3616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
3613
3616
|
MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
|
|
3614
3617
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, HeaderMenuComponent,
|
|
3615
3618
|
AsyncPipe, MatTooltipModule, LetDirective, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
3616
|
-
], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles() as styles\" >\
|
|
3619
|
+
], template: "<ng-container [matColumnDef]=\"metaData.key\" *ngrxLet=\"styles() as styles\" >\n\n <!-- header -->\n <ng-template matHeaderCellDef #myHeader>\n <mat-header-cell cdkDrag [style]='styles.header' resizeColumn [key]=\"metaData.key\" class=\"column-head\"\n [class]='metaData.additional?.columnPartClasses?.header'>\n <div class=\"header-container\" cdkDragHandle>\n @if(!customCell?.columnDef?.headerCell)\n {\n @if(metaData.fieldType !== FieldType.NotMapped){\n <div mat-sort-header [disabled]=\"metaData.noSort\" style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n } @else if(metaData.fieldType === FieldType.NotMapped){\n <div style=\"width: 100%\">\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\n </div>\n }\n @if((showFilters$ | async)){\n <tb-header-menu #menu [metaData]='metaData' />\n }\n }\n @else\n {\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles: styles.header} \">\n </ng-container>\n }\n </div>\n </mat-header-cell>\n </ng-template>\n\n <!-- body -->\n <ng-container *matCellDef=\"let element;\">\n <ng-container *ngTemplateOutlet=\"outerTemplate; context: { metaData: metaData, element: element , styles: styles.body, $implicit: element }\"/>\n </ng-container>\n <ng-template #body let-element='element' >\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body' (click)='cellClicked(element, metaData.key)' >\n <ng-container *ngTemplateOutlet=\"innerTemplate; context: { value: (transform | func : element), element: element, additional: additional, $implicit: element }; Injector: injector\" />\n </mat-cell>\n </ng-template>\n\n <!-- footer -->\n <ng-template matFooterCellDef>\n @if(customCell?.columnDef?.footerCell){\n <ng-container\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template; context: {metaData: metaData, data: data$, styles : styles.footer }\"/>\n } @else {\n <mat-footer-cell [style]='styles.footer' *ngrxLet=\"data$ as data\" [class]='metaData.additional?.columnPartClasses?.footer'>\n @if(!!data?.length && metaData.additional?.footer){\n <span class=\"bold\">\n @switch (metaData.fieldType) {\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\n }\n </span>\n }\n\n </mat-footer-cell>\n }\n </ng-template>\n</ng-container>\n", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;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"] }]
|
|
3617
3620
|
}], propDecorators: { columnDef: [{
|
|
3618
3621
|
type: ViewChild,
|
|
3619
3622
|
args: [MatColumnDef]
|
|
@@ -3831,7 +3834,7 @@ class GenericTableComponent {
|
|
|
3831
3834
|
this.rowDefArr.forEach(r => table.removeRowDef(r));
|
|
3832
3835
|
this.rowDefArr = defs;
|
|
3833
3836
|
defs.forEach(r => {
|
|
3834
|
-
r.columns = this.$keys().concat(Object.values(this.myColumns).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
|
|
3837
|
+
r.columns = this.$keys().concat(Object.values(this.myColumns()).filter(c => c.metaData.fieldType !== FieldType.Hidden).map(c => c.metaData.key));
|
|
3835
3838
|
table.addRowDef(r);
|
|
3836
3839
|
});
|
|
3837
3840
|
};
|
|
@@ -3913,16 +3916,22 @@ class GenericTableComponent {
|
|
|
3913
3916
|
}
|
|
3914
3917
|
return s.notPersistedTableSettings.headerHeight;
|
|
3915
3918
|
});
|
|
3919
|
+
$groupHeaderHeight = this.state.selectSignal(s => {
|
|
3920
|
+
if (s.notPersistedTableSettings.groupHeaderHeight) {
|
|
3921
|
+
return s.notPersistedTableSettings.groupHeaderHeight + 'px';
|
|
3922
|
+
}
|
|
3923
|
+
return this.$rowHeight();
|
|
3924
|
+
});
|
|
3916
3925
|
$stickyFooter = computed(() => this.state.props().stickyFooter || this.state.$isVirtual());
|
|
3917
3926
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3918
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\
|
|
3927
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, columnBuilders: { classPropertyName: "columnBuilders", publicName: "columnBuilders", isSignal: false, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selection$: "selection$" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n [class]=\"($footerRowStyle())\"\n #table\n [dataSource]=\"state.props().dataSource!\"\n [trackBy]=\"trackByFunction\"\n [style]=\"tableWidth | async \"\n>\n\n <!-- select column -->\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"/>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n\n <!-- index column -->\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n </mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n {{ 1 + i + offsetIndex }}\n </mat-cell>\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n </ng-container>\n\n <!-- Grouping -->\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n @if (!expanded()) {\n <mat-icon>chevron_right</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: $keys(); let i = index\"/>\n <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n</mat-table>\n\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-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}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3919
3928
|
}
|
|
3920
3929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
3921
3930
|
type: Component,
|
|
3922
3931
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3923
3932
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
3924
3933
|
MatTooltipModule, AsyncPipe, FunctionPipe,
|
|
3925
|
-
], template: "<mat-table\
|
|
3934
|
+
], template: "<mat-table\n cdkDropList\n cdkDropListLockAxis='x'\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"table-drag-list\"\n [class]=\"($footerRowStyle())\"\n #table\n [dataSource]=\"state.props().dataSource!\"\n [trackBy]=\"trackByFunction\"\n [style]=\"tableWidth | async \"\n>\n\n <!-- select column -->\n <ng-container matColumnDef=\"select\">\n\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\n <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n [checked]=\"!!(masterToggleChecked$ | async)\"\n [indeterminate]=\"masterToggleIndeterminate$ | async\">\n </mat-checkbox>\n </mat-header-cell>\n\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selection.toggle(row) : null\"\n [checked]=\"selection.isSelected(row)\"/>\n </mat-cell>\n\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\n {{ selection.selected.length }}\n </mat-footer-cell>\n </ng-container>\n\n\n <!-- index column -->\n <ng-container matColumnDef=\"index\">\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\n </mat-header-cell>\n <mat-cell *matCellDef=\"let i = index;\" class=\"index-column\">\n {{ 1 + i + offsetIndex }}\n </mat-cell>\n <mat-footer-cell *matFooterCellDef class=\"index-column\"></mat-footer-cell>\n </ng-container>\n\n <!-- Grouping -->\n <ng-container matColumnDef=\"groupHeader\">\n <mat-cell *matCellDef=\"let row\">\n @let expanded = (state.getIsExpanded | func : row.key : row.groupName );\n <div [style.paddingLeft]=\"row.padding + 'px !important'\">\n <button mat-icon-button (click)=\"setExpanded(row.key, row.groupName, !expanded());\">\n @if (!expanded()) {\n <mat-icon>chevron_right</mat-icon>\n } @else {\n <mat-icon>expand_more</mat-icon>\n }\n </button>\n {{ getTransform | func : row.key : row.groupHeaderDisplay }} ({{ row.length }})\n </div>\n <div style=\"flex-grow: 1\">\n <ng-container *ngTemplateOutlet=\"state.props().groupHeaderTemplate!; context: { element: row }\"></ng-container>\n </div>\n </mat-cell>\n </ng-container>\n\n <mat-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matRowDef=\"let row; columns: $keys(); let i = index\"/>\n <mat-row [style.height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n [style.min-height]=\"state.props().groupHeaderHeight ? state.props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\n *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\" style=\"background-color: white;\"/>\n</mat-table>\n\n<mat-header-row [style.height]=\"$headerHeight()\" [style.min-height]=\"$headerHeight()\"\n *matHeaderRowDef=\"$keys(); sticky: state.props().isSticky\" [style.top.px]=\"((offset$ | async)! * -1)\"/>\n<mat-footer-row [style.height]=\"$rowHeight()\" [style.min-height]=\"$rowHeight()\"\n *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \"\n [style.bottom.px]=\"$stickyFooter() ? (offset$ | async) : undefined\"/>", styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-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}\n"] }]
|
|
3926
3935
|
}], ctorParameters: () => [], propDecorators: { trackBy: [{
|
|
3927
3936
|
type: Input
|
|
3928
3937
|
}], rows: [{
|
|
@@ -4245,13 +4254,13 @@ const defaultStorageState = {
|
|
|
4245
4254
|
class GroupByListComponent {
|
|
4246
4255
|
tableStore = inject(TableStore);
|
|
4247
4256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4248
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\
|
|
4257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n <span class=\"tb-group-label\">Group By:</span>\n @for (groupByKey of groupByKeys; track groupByKey) {\n @if($index > 0){\n <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\n }\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n {{groupByKey | spaceCase}}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n }\n</mat-chip-set>\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: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4249
4258
|
}
|
|
4250
4259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
4251
4260
|
type: Component,
|
|
4252
4261
|
args: [{ selector: 'group-by-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4253
4262
|
MatChipsModule, LetDirective, MatIconModule, SpaceCasePipe
|
|
4254
|
-
], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\
|
|
4263
|
+
], template: "<mat-chip-set *ngrxLet=\"tableStore.groupByKeys$ as groupByKeys\">\n <span class=\"tb-group-label\">Group By:</span>\n @for (groupByKey of groupByKeys; track groupByKey) {\n @if($index > 0){\n <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\n }\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupByKey)\">\n {{groupByKey | spaceCase}}\n <mat-icon matChipRemove>cancel</mat-icon>\n </mat-chip>\n }\n</mat-chip-set>\n", styles: [".tb-group-label{padding-right:5px}.nested-arrow{margin-right:-8px;margin-left:-8px}\n"] }]
|
|
4255
4264
|
}] });
|
|
4256
4265
|
|
|
4257
4266
|
class SortMenuComponentStore extends ComponentStore {
|
|
@@ -4343,14 +4352,14 @@ class SortMenuComponent {
|
|
|
4343
4352
|
this.store.setDirection(sort);
|
|
4344
4353
|
}
|
|
4345
4354
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4346
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\
|
|
4355
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n @if(sorted$ | async; as sorted){\n @if (notSorted$ | async; as notSorted) {\n <!-- Menu Trigger -->\n <span matTooltip=\"Sort\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">swap_vert</mat-icon>\n </button>\n </span>\n\n <!-- Menu -->\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\n <div mat-menu-item class=\"menu-button\">\n <div class=\"close-button-wrapper\">\n <span matTooltip=\"Close\">\n <mat-icon>close</mat-icon>\n </span>\n @if(dirty){\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n <mat-icon>undo</mat-icon>\n </span>\n }\n \n </div>\n </div>\n\n <!-- Apply Button -->\n <div class=\"apply-button-wrapper\">\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\n stop-propagation [class.apply-border]=\"dirty\"\n [disabled]=\"!dirty\">\n Apply @if (dirty) { Unsaved Changes }\n </button>\n </div>\n\n <!-- Default Sorting Text -->\n @if (!sorted.length) {\n <div class=\"tip\" >\n Sorting List\n </div>\n }\n\n <!-- Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #sortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n [cdkDropListData]=\"sorted\"\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n <!-- Menu Item Wrapper -->\n @for (sort of sorted; track sort.active) {\n <!-- Menu Item Headers -->\n @if (sorted.length > 1) {\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\n }\n \n <!-- Menu Item -->\n <div mat-menu-item cdkDrag class=\"menu-item\">\n <div class=\"sort-item\">\n <span class=\"sorted-name\">\n {{sort.displayName || (sort.active | spaceCase)}}\n <span class=\"direction-text\">{{sort.direction}}</span>\n </span>\n \n <!-- Sort Direction Buttons -->\n <div class=\"up-down-buttons-wrapper\">\n <button class=\"up-down-button up-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_upward\n </mat-icon>\n </button>\n \n <button class=\"up-down-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_downward\n </mat-icon>\n </button>\n </div>\n </div>\n </div>\n }\n\n </div>\n\n <!-- Default Not Sorted Text -->\n @if(!notSorted.length){\n <div class=\"tip\" >\n Not Sorted List\n </div>\n }\n\n <!-- Not Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #notSortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\n [cdkDropListData]=\"notSorted\"\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n @for (sort of notSorted; track sort.active) {\n <div mat-menu-item class=\"menu-item\" cdkDrag>\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n </div>\n }\n </div>\n </mat-menu>\n }\n }\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4347
4356
|
}
|
|
4348
4357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
4349
4358
|
type: Component,
|
|
4350
4359
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
4351
4360
|
LetDirective, MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
|
|
4352
4361
|
SpaceCasePipe, NgClass, AsyncPipe
|
|
4353
|
-
], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\
|
|
4362
|
+
], template: "<ng-container *ngrxLet=\"dirty$ as dirty\">\n @if(sorted$ | async; as sorted){\n @if (notSorted$ | async; as notSorted) {\n <!-- Menu Trigger -->\n <span matTooltip=\"Sort\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n <mat-icon color=\"primary\">swap_vert</mat-icon>\n </button>\n </span>\n\n <!-- Menu -->\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\n <div mat-menu-item class=\"menu-button\">\n <div class=\"close-button-wrapper\">\n <span matTooltip=\"Close\">\n <mat-icon>close</mat-icon>\n </span>\n @if(dirty){\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\n <mat-icon>undo</mat-icon>\n </span>\n }\n \n </div>\n </div>\n\n <!-- Apply Button -->\n <div class=\"apply-button-wrapper\">\n <button mat-button color=\"primary\" (click)=\"apply(null)\"\n stop-propagation [class.apply-border]=\"dirty\"\n [disabled]=\"!dirty\">\n Apply @if (dirty) { Unsaved Changes }\n </button>\n </div>\n\n <!-- Default Sorting Text -->\n @if (!sorted.length) {\n <div class=\"tip\" >\n Sorting List\n </div>\n }\n\n <!-- Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #sortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\n [cdkDropListData]=\"sorted\"\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\n\n <!-- Menu Item Wrapper -->\n @for (sort of sorted; track sort.active) {\n <!-- Menu Item Headers -->\n @if (sorted.length > 1) {\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\n }\n \n <!-- Menu Item -->\n <div mat-menu-item cdkDrag class=\"menu-item\">\n <div class=\"sort-item\">\n <span class=\"sorted-name\">\n {{sort.displayName || (sort.active | spaceCase)}}\n <span class=\"direction-text\">{{sort.direction}}</span>\n </span>\n \n <!-- Sort Direction Buttons -->\n <div class=\"up-down-buttons-wrapper\">\n <button class=\"up-down-button up-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_upward\n </mat-icon>\n </button>\n \n <button class=\"up-down-button\" stop-propagation\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\n <mat-icon [ngClass]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\" class=\"up-down-icon\">\n arrow_downward\n </mat-icon>\n </button>\n </div>\n </div>\n </div>\n }\n\n </div>\n\n <!-- Default Not Sorted Text -->\n @if(!notSorted.length){\n <div class=\"tip\" >\n Not Sorted List\n </div>\n }\n\n <!-- Not Sorted Menu List -->\n <div class=\"list\"\n cdkDropList\n #notSortedGroup=\"cdkDropList\"\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\n [cdkDropListData]=\"notSorted\"\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\n @for (sort of notSorted; track sort.active) {\n <div mat-menu-item class=\"menu-item\" cdkDrag>\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\n </div>\n }\n </div>\n </mat-menu>\n }\n }\n</ng-container>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"] }]
|
|
4354
4363
|
}], ctorParameters: () => [] });
|
|
4355
4364
|
|
|
4356
4365
|
class PaginatorComponent {
|
|
@@ -4389,34 +4398,34 @@ class PaginatorComponent {
|
|
|
4389
4398
|
this.updatePaginator();
|
|
4390
4399
|
}
|
|
4391
4400
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$", tableElRef: "tableElRef" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
|
|
4393
|
-
<div class="paginator-row">
|
|
4394
|
-
@if(currentPageData$ | async; as pageData){
|
|
4395
|
-
<div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
|
|
4396
|
-
@if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
|
|
4397
|
-
</div>
|
|
4398
|
-
}
|
|
4399
|
-
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4400
|
-
[class]="{ 'hide' : $collapseFooter() }">
|
|
4401
|
-
</mat-paginator>
|
|
4402
|
-
@if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
|
|
4403
|
-
</div>
|
|
4401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", inputs: { data$: "data$", tableElRef: "tableElRef" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], ngImport: i0, template: `
|
|
4402
|
+
<div class="paginator-row">
|
|
4403
|
+
@if(currentPageData$ | async; as pageData){
|
|
4404
|
+
<div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
|
|
4405
|
+
@if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
|
|
4406
|
+
</div>
|
|
4407
|
+
}
|
|
4408
|
+
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4409
|
+
[class]="{ 'hide' : $collapseFooter() }">
|
|
4410
|
+
</mat-paginator>
|
|
4411
|
+
@if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
|
|
4412
|
+
</div>
|
|
4404
4413
|
`, isInline: true, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-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}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$6.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4405
4414
|
}
|
|
4406
4415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
4407
4416
|
type: Component,
|
|
4408
|
-
args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass, MatButtonModule], template: `
|
|
4409
|
-
<div class="paginator-row">
|
|
4410
|
-
@if(currentPageData$ | async; as pageData){
|
|
4411
|
-
<div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
|
|
4412
|
-
@if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
|
|
4413
|
-
</div>
|
|
4414
|
-
}
|
|
4415
|
-
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4416
|
-
[class]="{ 'hide' : $collapseFooter() }">
|
|
4417
|
-
</mat-paginator>
|
|
4418
|
-
@if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
|
|
4419
|
-
</div>
|
|
4417
|
+
args: [{ selector: 'tb-paginator', standalone: true, imports: [AsyncPipe, MatPaginatorModule, NgClass, MatButtonModule], template: `
|
|
4418
|
+
<div class="paginator-row">
|
|
4419
|
+
@if(currentPageData$ | async; as pageData){
|
|
4420
|
+
<div [class]="{ 'hide' : ! $collapseFooter(), 'page-amounts':true}">
|
|
4421
|
+
@if(!$showAll()){{{pageData.currentStart}} - {{pageData.currentEnd}} of }{{pageData.total}}
|
|
4422
|
+
</div>
|
|
4423
|
+
}
|
|
4424
|
+
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100, 500]" showFirstLastButtons (page)="paginatorChange()"
|
|
4425
|
+
[class]="{ 'hide' : $collapseFooter() }">
|
|
4426
|
+
</mat-paginator>
|
|
4427
|
+
@if ($showAllOption()) {<button mat-button (click)="updatePaginator()"><span [style.text-decoration]="$showAll() ? 'line-through' : ''" >All</span></button>}
|
|
4428
|
+
</div>
|
|
4420
4429
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--mat-paginator-container-size: initial}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.mat-mdc-row:nth-child(odd){background-color:var(--tb-odd-row-background-color, #cdeefe)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}: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:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-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}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
|
|
4421
4430
|
}], propDecorators: { paginator: [{
|
|
4422
4431
|
type: ViewChild,
|
|
@@ -4500,6 +4509,9 @@ class TableVirtualScrollStrategy {
|
|
|
4500
4509
|
class VirtualScrollContainer {
|
|
4501
4510
|
state = inject(TableStore);
|
|
4502
4511
|
dataStore = inject(DataStore);
|
|
4512
|
+
genericTable = contentChild(GenericTableComponent);
|
|
4513
|
+
sub;
|
|
4514
|
+
footerStyle = 'regular-footer';
|
|
4503
4515
|
viewport = viewChild(CdkVirtualScrollViewport);
|
|
4504
4516
|
defaultOptions = new VirtualScrollOptions();
|
|
4505
4517
|
scrollStrategy = new TableVirtualScrollStrategy(this.computedRowHeight(), this.computedHeaderHeight());
|
|
@@ -4544,8 +4556,15 @@ class VirtualScrollContainer {
|
|
|
4544
4556
|
;
|
|
4545
4557
|
});
|
|
4546
4558
|
});
|
|
4559
|
+
ngAfterViewInit() {
|
|
4560
|
+
const footerRowStyle$ = this.genericTable()?.$footerRowStyle();
|
|
4561
|
+
if (footerRowStyle$) {
|
|
4562
|
+
this.footerStyle = footerRowStyle$;
|
|
4563
|
+
}
|
|
4564
|
+
}
|
|
4547
4565
|
ngOnDestroy() {
|
|
4548
4566
|
removeEventListener('resize', this.resizeHandler);
|
|
4567
|
+
this.sub?.unsubscribe();
|
|
4549
4568
|
}
|
|
4550
4569
|
setSize(el) {
|
|
4551
4570
|
const vsViewport = el.nativeElement;
|
|
@@ -4553,7 +4572,20 @@ class VirtualScrollContainer {
|
|
|
4553
4572
|
const rowHeight = this.computedRowHeight();
|
|
4554
4573
|
let amountOfVisibleItems = virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
|
|
4555
4574
|
virtualScrollOptions?.amountOfVisibleItems || this.defaultOptions.amountOfVisibleItems;
|
|
4556
|
-
let height =
|
|
4575
|
+
let height = 0;
|
|
4576
|
+
var sub = this.dataLength$.subscribe(dataLength => {
|
|
4577
|
+
if (dataLength < amountOfVisibleItems) {
|
|
4578
|
+
height = +(this.computedRowHeight() * dataLength);
|
|
4579
|
+
}
|
|
4580
|
+
else {
|
|
4581
|
+
height = (rowHeight * amountOfVisibleItems);
|
|
4582
|
+
}
|
|
4583
|
+
});
|
|
4584
|
+
if (this.footerStyle !== 'no-footer') {
|
|
4585
|
+
height += rowHeight;
|
|
4586
|
+
console.log(height);
|
|
4587
|
+
console.log('regular-footer');
|
|
4588
|
+
}
|
|
4557
4589
|
if (!this.state.tableSettings().hideHeader) {
|
|
4558
4590
|
const headerHeight = this.computedHeaderHeight();
|
|
4559
4591
|
height += headerHeight;
|
|
@@ -4581,10 +4613,10 @@ class VirtualScrollContainer {
|
|
|
4581
4613
|
return headerHeight;
|
|
4582
4614
|
}
|
|
4583
4615
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4584
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
4585
|
-
<cdk-virtual-scroll-viewport>
|
|
4586
|
-
<ng-content/>
|
|
4587
|
-
</cdk-virtual-scroll-viewport>
|
|
4616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
4617
|
+
<cdk-virtual-scroll-viewport>
|
|
4618
|
+
<ng-content/>
|
|
4619
|
+
</cdk-virtual-scroll-viewport>
|
|
4588
4620
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i1$7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], viewProviders: [
|
|
4589
4621
|
{
|
|
4590
4622
|
provide: VIRTUAL_SCROLL_STRATEGY,
|
|
@@ -4597,10 +4629,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
4597
4629
|
type: Component,
|
|
4598
4630
|
args: [{
|
|
4599
4631
|
selector: 'tb-virtual-scroll-container',
|
|
4600
|
-
template: `
|
|
4601
|
-
<cdk-virtual-scroll-viewport>
|
|
4602
|
-
<ng-content/>
|
|
4603
|
-
</cdk-virtual-scroll-viewport>
|
|
4632
|
+
template: `
|
|
4633
|
+
<cdk-virtual-scroll-viewport>
|
|
4634
|
+
<ng-content/>
|
|
4635
|
+
</cdk-virtual-scroll-viewport>
|
|
4604
4636
|
`,
|
|
4605
4637
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4606
4638
|
standalone: true,
|
|
@@ -4654,13 +4686,13 @@ class ProfilesMenuComponent {
|
|
|
4654
4686
|
return a;
|
|
4655
4687
|
};
|
|
4656
4688
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4657
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\
|
|
4689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "$tableId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSaveState: "onSaveState" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\n <mat-icon color=\"primary\">people</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\n @if(!!$currentProfile())\n {\n <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>{{$currentProfile()}}</span>\n </div>\n }\n @else\n {\n <div class=\"profile-line\">\n <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\n <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\n <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\n </button>\n <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\n <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\n </button>\n <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\n </div>\n }\n @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\n <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\n <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\n @for (key of $keys() ; track key) {\n <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\n <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\n <span>{{key}}</span>\n </button>\n @if(key !== $defaultProfile())\n {\n <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\n <mat-icon style=\"color: green;\">star_border</mat-icon>\n </button>\n }\n @else\n {\n <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\n <mat-icon style=\"color: green;\">star</mat-icon>\n </button>\n }\n <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\n <mat-icon color='warn'>delete_forever</mat-icon>\n </button>\n </div>\n }\n <hr class=\"divider\"/>\n </div>\n @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\n <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\n <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\n <div class=\"profile-line\" stop-propagation>\n <div class=\"new-name-input\">\n <i class=\"input-hint\">Enter New Name</i>\n <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\n </div>\n <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\n <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\n </button>\n <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\n </div>\n <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\n Add\n </button>\n </div>\n</mat-menu>\n\n<ng-template #line let-key>\n\n\n</ng-template>\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: 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: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
|
|
4658
4690
|
}
|
|
4659
4691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
|
|
4660
4692
|
type: Component,
|
|
4661
4693
|
args: [{ selector: 'tb-profiles-menu', standalone: true, imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput, DialogDirective, ClickEmitterDirective, NgTemplateOutlet,
|
|
4662
4694
|
MatCheckbox, StopPropagationDirective, FunctionPipe, MatInputModule, AsyncPipe, FormsModule
|
|
4663
|
-
], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\
|
|
4695
|
+
], template: "<button mat-icon-button [matMenuTriggerFor]=\"menu\" #trigger=\"matMenuTrigger\" [matTooltip]=\"'Profiles'\">\n <mat-icon color=\"primary\">people</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\n @if(!!$currentProfile())\n {\n <div mat-menu-item [matTooltip]=\"'Save Profile'\" mat-stroked-button (click)=\"saveState($currentProfile()!)\">\n <mat-icon color=\"primary\">save</mat-icon>\n <span>{{$currentProfile()}}</span>\n </div>\n }\n @else\n {\n <div class=\"profile-line\">\n <button class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\n <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\n <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\n </button>\n <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m.toggle()\" >\n <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\n </button>\n <mat-checkbox class=\"display-none\" [checked]=\"true\" #m />\n </div>\n }\n @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\n <div [class]=\"{ hide: !$keys().length }\" mat-menu-item stop-propagation (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">All Profiles</div>\n <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\n @for (key of $keys() ; track key) {\n <div class=\"profile-line\" [class.current-in-list]=\"key === $currentProfile()\">\n <button [matTooltip]=\"'Select Profile'\" class=\"menu-item first-in-line\" mat-stroked-button (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\n <span>{{key}}</span>\n </button>\n @if(key !== $defaultProfile())\n {\n <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"setDefault(key)\">\n <mat-icon style=\"color: green;\">star_border</mat-icon>\n </button>\n }\n @else\n {\n <button [matTooltip]=\"'Toggle Profile Being Default'\" stop-propagation mat-icon-button (click)=\"unsetDefault()\">\n <mat-icon style=\"color: green;\">star</mat-icon>\n </button>\n }\n <button [matTooltip]=\"'Delete Profile'\" class=\"last-in-line\" stop-propagation mat-icon-button (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\n <mat-icon color='warn'>delete_forever</mat-icon>\n </button>\n </div>\n }\n <hr class=\"divider\"/>\n </div>\n @if (newProfilePanelOpened() && !allProfilesPanelOpened()){<hr class=\"divider\"/>}\n <div mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\n <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\n <div class=\"profile-line\" stop-propagation>\n <div class=\"new-name-input\">\n <i class=\"input-hint\">Enter New Name</i>\n <input matInput #addedKey=\"matInput\" [name]=\"'key'\" />\n </div>\n <button [matTooltip]=\"'Toggle Profile Being Created As Default'\" stop-propagation mat-icon-button (click)=\"m2.toggle()\" >\n <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\n </button>\n <mat-checkbox class=\"display-none\" [ngModel]=\"!$defaultProfile()\" #m2 />\n </div>\n <button class=\"add-button\" color=\"primary\" [matTooltip]=\"'Create New Profile'\" mat-raised-button (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\" [disabled]=\"!addedKey.value\">\n Add\n </button>\n </div>\n</mat-menu>\n\n<ng-template #line let-key>\n\n\n</ng-template>\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:#00f}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
|
|
4664
4696
|
}] });
|
|
4665
4697
|
|
|
4666
4698
|
const containerImports = [
|
|
@@ -4957,6 +4989,7 @@ const defaultProps = {
|
|
|
4957
4989
|
selectionColumn: false,
|
|
4958
4990
|
isSticky: true,
|
|
4959
4991
|
stickyFooter: false,
|
|
4992
|
+
groupHeaderHeight: undefined,
|
|
4960
4993
|
};
|
|
4961
4994
|
|
|
4962
4995
|
class TableBuilderDataSource extends MatTableDataSource {
|
|
@@ -5033,26 +5066,28 @@ class TableContainerComponent {
|
|
|
5033
5066
|
tableState = toSignal(this.state.state$.pipe(filter(stateIs(InitializationState.LoadedFromStore))));
|
|
5034
5067
|
allFilterDirectivesEffect = effect(() => {
|
|
5035
5068
|
const state = this.tableState();
|
|
5036
|
-
|
|
5037
|
-
|
|
5038
|
-
f.used
|
|
5039
|
-
|
|
5040
|
-
|
|
5041
|
-
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
|
|
5045
|
-
|
|
5046
|
-
|
|
5047
|
-
|
|
5048
|
-
|
|
5049
|
-
|
|
5050
|
-
|
|
5069
|
+
untracked(() => {
|
|
5070
|
+
if (state) {
|
|
5071
|
+
this.allFilterDirectives().filter(f => !f.used).forEach(f => {
|
|
5072
|
+
f.used = true;
|
|
5073
|
+
if (f.savable) {
|
|
5074
|
+
var filter = state.filters[f.filterId];
|
|
5075
|
+
if (isFilterInfo(filter)) {
|
|
5076
|
+
const filterDirective = f;
|
|
5077
|
+
filterDirective.fieldType = filter.fieldType;
|
|
5078
|
+
filterDirective.filterType = filter.filterType;
|
|
5079
|
+
filterDirective.setFilterValue(filter.filterValue);
|
|
5080
|
+
filterDirective.key = filter.key;
|
|
5081
|
+
filterDirective.update();
|
|
5082
|
+
}
|
|
5083
|
+
if (isCustomFilter(filter)) {
|
|
5084
|
+
f.active = filter.active ?? false;
|
|
5085
|
+
}
|
|
5086
|
+
this.state.addFilter(f.filter$);
|
|
5051
5087
|
}
|
|
5052
|
-
|
|
5053
|
-
|
|
5054
|
-
|
|
5055
|
-
}
|
|
5088
|
+
});
|
|
5089
|
+
}
|
|
5090
|
+
});
|
|
5056
5091
|
});
|
|
5057
5092
|
paginatorComponent;
|
|
5058
5093
|
genericTable;
|
|
@@ -5082,6 +5117,9 @@ class TableContainerComponent {
|
|
|
5082
5117
|
set groupHeaderTemplate(template) {
|
|
5083
5118
|
this.props.groupHeaderTemplate = template;
|
|
5084
5119
|
}
|
|
5120
|
+
set groupHeaderHeight(value) {
|
|
5121
|
+
this.props.groupHeaderHeight = value;
|
|
5122
|
+
}
|
|
5085
5123
|
trackBy;
|
|
5086
5124
|
inputFilters;
|
|
5087
5125
|
selection$ = new EventEmitter();
|
|
@@ -5227,11 +5265,11 @@ class TableContainerComponent {
|
|
|
5227
5265
|
};
|
|
5228
5266
|
$useVirtual = this.state.$isVirtual;
|
|
5229
5267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5230
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customRows", predicate: MatRowDef }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\
|
|
5268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { tableBuilder: "tableBuilder", tableId: "tableId", indexColumn: "indexColumn", selectionColumn: "selectionColumn", isSticky: "isSticky", stickyFooter: "stickyFooter", pageSize: "pageSize", groupHeaderTemplate: "groupHeaderTemplate", groupHeaderHeight: "groupHeaderHeight", trackBy: "trackBy", inputFilters: "inputFilters" }, outputs: { selection$: "selection$", data: "data", onStateReset: "onStateReset", onSaveState: "onSaveState", state$: "state$" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "tableElRef", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "customRows", predicate: MatRowDef }], viewQueries: [{ propertyName: "paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true }, { propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n <div class=\"header-wrapper\">\n <div class=\"title\">\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n <ng-content select=\".tb-header-title\"/>\n }\n @if((state.groupByKeys$ | async)?.length){\n <group-by-list />\n }\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list />\n @if (!tableSettings.hideHeader) {\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n @else {\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n }\n\n </div>\n </div>\n <div class=\"table-wrapper\">\n @if($useVirtual())\n {\n <tb-virtual-scroll-container>\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n </tb-virtual-scroll-container>\n }\n @else\n {\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n }\n\n </div>\n @if(tableSettings.usePaginator)\n {\n <div class=\"paginator\">\n <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n }\n\n <ng-template #headerMenu>\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n </ng-template>\n\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (tableId) {\n <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n <mat-icon color=\"primary\">people</mat-icon>\n <span>Profiles</span>\n </button>\n <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n }\n </ng-template>\n</ng-container>\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.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%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "pipe", type: i1$8.AsyncPipe, name: "async" }, { kind: "directive", type: i1$8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator", inputs: ["data$", "tableElRef"] }, { kind: "directive", type: i3$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: ["trackBy", "displayData", "data", "rows", "columnBuilders", "columnInfos"], outputs: ["selection$"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["$tableId"], outputs: ["onSaveState"] }, { kind: "ngmodule", type: i3$1.MatButtonModule }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: i4$2.MatMenuModule }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.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: i2.MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i4$1.MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5231
5269
|
}
|
|
5232
5270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
5233
5271
|
type: Component,
|
|
5234
|
-
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\
|
|
5272
|
+
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], standalone: true, imports: containerImports, template: "<ng-content select=\"[before]\" />\n\n<ng-container multiSort *ngrxLet=\"state.tableSettings$ as tableSettings\">\n <div class=\"header-wrapper\">\n <div class=\"title\">\n @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {\n <ng-content select=\".tb-header-title\"/>\n }\n @if((state.groupByKeys$ | async)?.length){\n <group-by-list />\n }\n </div>\n <div class=\"flx-row-end\">\n <lib-filter-list />\n @if (!tableSettings.hideHeader) {\n @if (!(collapseHeader$ | async)) {\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #mainMenu='matMenu'>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n @else {\n <mat-icon color=\"primary\" [matMenuTriggerFor]=\"mainMenu\" class=\"flat-menu-button pointer\">more_horiz</mat-icon>\n <mat-menu #mainMenu='matMenu'>\n <div class=\"flex-column\">\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\n </div>\n <ng-container *ngTemplateOutlet=\"headerMenuExtra\"/>\n </mat-menu>\n }\n <mat-icon [matTooltip]=\"(collapseHeader$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon header\"\n (click)=\"state.toggleCollapseHeader()\">\n {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}\n </mat-icon>\n }\n\n </div>\n </div>\n <div class=\"table-wrapper\">\n @if($useVirtual())\n {\n <tb-virtual-scroll-container>\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n </tb-virtual-scroll-container>\n }\n @else\n {\n <tb-generic-table [rows]='customRows' [data]=\"(data | async)!\" [displayData]=\"$displayData()\"\n (selection$)='selection$.emit($event)' [columnInfos]='$myColumns()' [trackBy]=\"trackBy\" />\n }\n\n </div>\n @if(tableSettings.usePaginator)\n {\n <div class=\"paginator\">\n <tb-paginator #tbPaginator [data$]=\"data\" [tableElRef]=\"tableElRef\" />\n\n <mat-icon [matTooltip]=\"(collapseFooter$ | async) ? 'expand' : 'collapse'\" class=\"collapse-icon footer\"\n (click)=\"state.toggleCollapseFooter()\">\n {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}\n </mat-icon>\n </div>\n }\n\n <ng-template #headerMenu>\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\n @if (!!tableId) {<tb-profiles-menu [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>}\n </ng-template>\n\n <ng-template #headerMenuExtra>\n <button mat-menu-item (click)=\"resetState()\">\n <mat-icon color=\"primary\">autorenew</mat-icon>\n <span>Reset table</span>\n </button>\n @if (!tableSettings.hideExport) {\n <button mat-menu-item (click)=\"exportToCsv()\">\n <mat-icon color=\"primary\">file_download</mat-icon>\n <span>Export Table</span>\n </button>\n }\n @if (tableId) {\n <button stop-propagation mat-menu-item (click)=\"pm.trigger()?.toggleMenu()\">\n <mat-icon color=\"primary\">people</mat-icon>\n <span>Profiles</span>\n </button>\n <tb-profiles-menu class=\"profiles-menu\" #pm [$tableId]=\"tableId\" (onSaveState)=\"onSaveState.emit($event)\"/>\n }\n </ng-template>\n</ng-container>\n", styles: [".header-wrapper{display:flex;flex-direction:row;justify-content:space-between;width:100%}.table-wrapper{overflow-x:auto}.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%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
|
|
5235
5273
|
}], propDecorators: { paginatorComponent: [{
|
|
5236
5274
|
type: ViewChild,
|
|
5237
5275
|
args: [PaginatorComponent]
|
|
@@ -5261,6 +5299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
5261
5299
|
type: Input
|
|
5262
5300
|
}], groupHeaderTemplate: [{
|
|
5263
5301
|
type: Input
|
|
5302
|
+
}], groupHeaderHeight: [{
|
|
5303
|
+
type: Input
|
|
5264
5304
|
}], trackBy: [{
|
|
5265
5305
|
type: Input
|
|
5266
5306
|
}], inputFilters: [{
|
|
@@ -5546,11 +5586,11 @@ class ActionStateSpinnerComponent {
|
|
|
5546
5586
|
this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
|
|
5547
5587
|
}
|
|
5548
5588
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5549
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\
|
|
5589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.2", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\n <div id=\"blocker\">\n <mat-spinner class=\"spinner\" [diameter]=\"200\" />\n </div>\n}\n\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$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
|
|
5550
5590
|
}
|
|
5551
5591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
|
|
5552
5592
|
type: Component,
|
|
5553
|
-
args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\
|
|
5593
|
+
args: [{ selector: 'lib-action-state-spinner', standalone: true, imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress){\n <div id=\"blocker\">\n <mat-spinner class=\"spinner\" [diameter]=\"200\" />\n </div>\n}\n\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"] }]
|
|
5554
5594
|
}], propDecorators: { status$: [{
|
|
5555
5595
|
type: Input
|
|
5556
5596
|
}] } });
|