@saydar/table-builder 1.0.9-beta.4 → 1.0.9-beta.5

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.
@@ -2935,11 +2935,11 @@ class GenFilterDisplayerComponent {
2935
2935
  this.filterStore.addFilter({ key: metaData.key, fieldType: metaData.fieldType });
2936
2936
  }
2937
2937
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
2938
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenFilterDisplayerComponent, isStandalone: false, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2938
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: GenFilterDisplayerComponent, isStandalone: false, selector: "tb-filter-displayer", ngImport: i0, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2939
2939
  }
2940
2940
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
2941
2941
  type: Component,
2942
- args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
2942
+ args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" matTooltip=\"Add Filter\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n <button *ngFor=\"let md of filterCols$ | async\" (click)=\"addFilter(md)\" mat-menu-item>\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"] }]
2943
2943
  }], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
2944
2944
 
2945
2945
  class DateFilterComponent {
@@ -4073,6 +4073,7 @@ class FilterChipsComponent {
4073
4073
  constructor(tableState, filterStore) {
4074
4074
  this.tableState = tableState;
4075
4075
  this.filterStore = filterStore;
4076
+ this.isArray = Array.isArray;
4076
4077
  this.filters$ = this.tableState.filters$.pipe(map(filters => Object.values(filters)
4077
4078
  .filter(isFilterInfo)
4078
4079
  .filter(f => !f._isExternalyManaged)));
@@ -4088,11 +4089,11 @@ class FilterChipsComponent {
4088
4089
  this.filterStore.clearAll();
4089
4090
  }
4090
4091
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, deps: [{ token: TableStore }, { token: WrapperFilterStore }], target: i0.ɵɵFactoryTarget.Component }); }
4091
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n\r\n\r\n <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n </div>\r\n </div>\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
4092
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FilterChipsComponent, isStandalone: false, selector: "lib-filter-list", ngImport: i0, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n\r\n\r\n <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n </div>\r\n </div>\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}}\r\n @if (isArray(filter.filterValue)) {\r\n @for (v of filter.filterValue; track $index) {\r\n <span class=\"filter-value-pill\">{{ v }}</span>\r\n }\r\n } @else {\r\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n }\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$3.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i7$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$3.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: i8.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }] }); }
4092
4093
  }
4093
4094
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
4094
4095
  type: Component,
4095
- args: [{ selector: 'lib-filter-list', standalone: false, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n\r\n\r\n <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n </div>\r\n </div>\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}\n"] }]
4096
+ args: [{ selector: 'lib-filter-list', standalone: false, template: "<div style=\"display: flex; flex-direction: row;justify-content: flex-end;\" *ngrxLet=\"currentFilters$ as currentFilters\" >\r\n\r\n <button class=\"cancel-button\" *ngIf=\"currentFilters.length\" mat-icon-button (click)=\"clearAll()\"\r\n matTooltip=\"Close all Filters Cards\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n\r\n\r\n <div *ngIf=\"currentFilters.length\" class=\"float\">\r\n <div class=\"filter\" *ngFor=\"let filter of (currentFilters$ | async); index as i;\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex(i)\" > </tb-filter>\r\n </div>\r\n </div>\r\n\r\n <mat-chip-set *ngrxLet=\"filters$ as filters\">\r\n <mat-chip *ngFor=\"let filter of filters\" (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ filter.key | keyDisplay | async }} {{filter.filterType | formatFilterType : filter.filterValue}}\r\n @if (isArray(filter.filterValue)) {\r\n @for (v of filter.filterValue; track $index) {\r\n <span class=\"filter-value-pill\">{{ v }}</span>\r\n }\r\n } @else {\r\n {{ filter.filterValue | formatFilterValue: filter.key : filter.filterType | async }}\r\n }\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n <mat-chip *ngIf=\"filters.length >= 2\" (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{color:#6495ed;font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{color:#6495ed;font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.filter-value-pill{display:inline-block;background:#3f51b526;padding:1px 8px;border-radius:10px;margin:0 2px;font-size:.85em;line-height:1.4;font-weight:500}\n"] }]
4096
4097
  }], ctorParameters: () => [{ type: TableStore }, { type: WrapperFilterStore }] });
4097
4098
 
4098
4099
  class GroupByListComponent {