@one-paragon/angular-utilities 2.2.2 → 2.2.3

package/fesm2022/one-paragon-angular-utilities.mjs

@@ -19,7 +19,7 @@ import * as i3 from '@angular/forms';
 import { NgControl, NgForm, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i9 from '@angular/material/core';
 import { MatOption } from '@angular/material/core';
-import { DatePipe, CurrencyPipe, KeyValuePipe, NgTemplateOutlet, formatDate, formatCurrency, DecimalPipe, formatNumber, CommonModule, AsyncPipe } from '@angular/common';
+import { DatePipe, CurrencyPipe, NgTemplateOutlet, formatDate, formatCurrency, DecimalPipe, formatNumber, CommonModule, AsyncPipe } from '@angular/common';
 import { ComponentStore } from '@ngrx/component-store';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule, CdkDropList, CDK_DROP_LIST, transferArrayItem } from '@angular/cdk/drag-drop';
@@ -1701,7 +1701,10 @@ const stringEndsWithFunc = (filterInfo) => {
 };
 const multipleStringValuesEqualsFunc = (filterInfo) => {
     const filterVals = filterInfo.filterValue.map((v) => prepareForStringCompare(v));
-    return ((val) => filterVals.some((s) => prepareForStringCompare(val) === s));
+    return ((val) => {
+        const v = prepareForStringCompare(val);
+        return filterVals.some((s) => v === s);
+    });
 };
 const StringFilterFuncs = {
     [FilterType.StringEquals]: stringEqualFunc,
@@ -1768,6 +1771,14 @@ const dateIsOnOrBeforeFunc = (filterInfo) => {
     const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
     return ((val) => clean(filterInfo, val).getTime() <= beforeVal);
 };
+const dateIsInFunc = (filterInfo) => {
+    const filterVals = filterInfo.filterValue.map(v => new Date(v).getTime());
+    const clean = filterInfo.fieldType === FieldType.Date ? (a, b) => b : cleanDateTime;
+    return ((val) => {
+        const d = clean(filterInfo, val).getTime();
+        return filterVals.some((f) => f === d);
+    });
+};
 const dateBetweenFunc = (filterInfo) => {
     const startVal = new Date(filterInfo.filterValue.Start);
     const endVal = new Date(filterInfo.filterValue.End);
@@ -1791,6 +1802,7 @@ const DateFilterFuncs = {
     [FilterType.DateOnOrAfter]: dateIsOnOrAfterFunc,
     [FilterType.DateOnOrBefore]: dateIsOnOrBeforeFunc,
     [FilterType.DateBetween]: dateBetweenFunc,
+    [FilterType.In]: dateIsInFunc,
     [FilterType.IsNull]: isNull,
 };
 const DateTimeFilterFuncs = {
@@ -1800,6 +1812,7 @@ const DateTimeFilterFuncs = {
     [FilterType.DateTimeAtOrAfter]: dateIsOnOrAfterFunc,
     [FilterType.DateTimeAtOrBefore]: dateIsOnOrBeforeFunc,
     [FilterType.DateTimeBetween]: dateBetweenFunc,
+    [FilterType.In]: dateIsInFunc,
     [FilterType.IsNull]: isNull,
 };
 
@@ -3115,14 +3128,12 @@ class InListFilterComponent {
         this.$keyValues = computed(() => {
             const metaData = this.$metaData();
             if (metaData?.additional?.filterOptions?.filterableValues) {
-                return metaData.additional.filterOptions.filterableValues.reduce((prev, cur) => { prev[cur] = cur; return prev; }, {});
+                return metaData.additional.filterOptions.filterableValues.map(value => ({ key: value, value }));
             }
-            else {
-                if (metaData?.fieldType === FieldType.Enum) {
-                    return metaData.additional.enumMap;
-                }
+            else if (metaData?.fieldType === FieldType.Enum) {
+                return Object.entries(metaData.additional.enumMap).map(([key, value]) => ({ key: value, value: +key }));
             }
-            return {};
+            return [];
         });
     }
     writeValue(obj) {
@@ -3154,25 +3165,69 @@ class InListFilterComponent {
                 useExisting: InListFilterComponent,
                 multi: true
             }], ngImport: i0, template: `
-  @for (item of $keyValues() | keyvalue; track item.key) {
+  @for (item of $keyValues(); track item.key) {
     <div>
-      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.key)' >
-        {{$metaData().fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.value)' >
+        @switch ($metaData().fieldType)
+        {
+          @case (FieldType.Enum)
+          {
+            {{(item.key | spaceCase)}}
+          }
+          @case (FieldType.Date)
+          {
+            {{item.value | date: 'shortDate'}}
+          }
+          @case (FieldType.DateTime)
+          {
+            {{item.value | date: 'short'}}
+          }
+          @case (FieldType.Currency)
+          {
+            {{item.value | currency }}
+          }
+          @default
+          {
+            {{item.key}}
+          }
+        }
       </mat-checkbox>
     </div>
   }
 
-  `, isInline: true, dependencies: [{ 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", "aria-expanded", "aria-controls", "aria-owns", "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" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "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" }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: InListFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tb-in-list-filter , [tb-in-list-filter]',
                     template: `
-  @for (item of $keyValues() | keyvalue; track item.key) {
+  @for (item of $keyValues(); track item.key) {
     <div>
-      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.key)' >
-        {{$metaData().fieldType === FieldType.Enum ? (item.value | spaceCase) : item.value}}
+      <mat-checkbox [checked]="'includes' | func : $selectedKeys() : item.key" stop-propagation (change)='selectFilterChanged($event, item.value)' >
+        @switch ($metaData().fieldType)
+        {
+          @case (FieldType.Enum)
+          {
+            {{(item.key | spaceCase)}}
+          }
+          @case (FieldType.Date)
+          {
+            {{item.value | date: 'shortDate'}}
+          }
+          @case (FieldType.DateTime)
+          {
+            {{item.value | date: 'short'}}
+          }
+          @case (FieldType.Currency)
+          {
+            {{item.value | currency }}
+          }
+          @default
+          {
+            {{item.key}}
+          }
+        }
       </mat-checkbox>
     </div>
   }
@@ -3185,7 +3240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                             multi: true
                         }],
                     imports: [
-                        KeyValuePipe, MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe
+                        MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe, DatePipe, CurrencyPipe
                     ]
                 }]
         }] });
@@ -3339,70 +3394,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             args: [{ name: 'formatFilterType' }]
         }] });
 
-class FormatFilterValuePipe {
-    constructor() {
-        this.tableState = inject(TableStore);
-        this.datePipe = inject(DatePipe);
-    }
-    transform(value, key, filterType) {
-        return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'formatFilterValue' }]
-        }] });
-const transform = (value, meta, filterType) => {
-    if (filterType === FilterType.IsNull) {
-        return '';
-    }
-    if (value && (filterType === FilterType.In)) {
-        if (meta.fieldType === FieldType.Enum) {
-            return value.map((v) => spaceCase(meta.additional.enumMap[v])).join(', ') ?? value;
-        }
-        return value.join(', ') ?? value;
-    }
-    if (filterType === FilterType.NumberBetween) {
-        return value.Start + ' - ' + value.End;
-    }
-    if (meta.fieldType === FieldType.Date) {
-        return new DatePipe('en-US').transform(value, 'MM/dd/yy') || '';
-    }
-    if (meta.fieldType === FieldType.DateTime) {
-        return (!!DateTimeFilterFuncs[filterType] ? new DatePipe('en-US').transform(value, 'short') : new DatePipe('en-US').transform(value, 'MM/dd/yy')) || '';
-    }
-    return value;
-};
-
-class FilterChipsComponent {
-    constructor() {
-        this.tableState = inject(TableStore);
-        this.filterStore = inject(WrapperFilterStore);
-        this.$filters = computed(() => Object.values(this.tableState.$filters()).filter(f => isFilterInfo(f) && !f._isExternallyManaged));
-        this.$currentFilters = this.filterStore.$currentFilters;
-    }
-    deleteByIndex(index) {
-        this.filterStore.deleteByIndex(index);
-    }
-    addFilter(filter) {
-        this.filterStore.addFilter(filter);
-    }
-    clearAll() {
-        this.filterStore.clearAll();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key)\r\n      {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1)\r\n    {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{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{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: 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$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FilterChipsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
-                        MatChipsModule, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
-                    ], template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key)\r\n      {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1)\r\n    {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{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{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"] }]
-        }] });
-
 function isPipe(o) {
     return typeof (o.transform) === 'function';
 }
@@ -3492,6 +3483,94 @@ function currencyFormatter(amt) {
     return formatCurrency(amt, 'en-US', '$');
 }
 
+class FormatFilterValuePipe {
+    constructor() {
+        this.tableState = inject(TableStore);
+        this.datePipe = inject(DatePipe);
+    }
+    transform(value, key, filterType) {
+        return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'formatFilterValue' }]
+        }] });
+const transform = (value, meta, filterType) => {
+    if (filterType === FilterType.IsNull) {
+        return '';
+    }
+    if (value && (filterType === FilterType.In)) {
+        if (meta.fieldType === FieldType.Enum) {
+            return value.map((v) => spaceCase(meta.additional.enumMap[v])).join(', ') ?? value;
+        }
+        if (meta.fieldType === FieldType.Date || meta.fieldType === FieldType.DateTime) {
+            return value.map((v) => mapDate(v, meta, filterType)).join(', ') ?? value;
+        }
+        if (meta.fieldType === FieldType.Number || meta.fieldType === FieldType.Currency) {
+            return value.map((v) => mapNumber(v, meta)).join(', ') ?? value;
+        }
+        return value.join(', ') ?? value;
+    }
+    if (filterType === FilterType.NumberBetween && (meta.fieldType === FieldType.Number || meta.fieldType === FieldType.Currency)) {
+        return mapNumber(value.Start, meta) + ' - ' + mapNumber(value.End, meta);
+    }
+    if (filterType === FilterType.DateBetween) {
+        return mapDate(value.Start, meta, filterType) + ' - ' + mapDate(value.End, meta, filterType);
+    }
+    if (meta.fieldType === FieldType.Date || meta.fieldType === FieldType.DateTime) {
+        return mapDate(value, meta, filterType);
+    }
+    if (meta.fieldType === FieldType.Currency) {
+        return mapNumber(value, meta);
+    }
+    return value;
+};
+function mapDate(value, meta, filterType) {
+    if (meta.fieldType === FieldType.Date) {
+        return dateFormatter(value, 'shortDate');
+    }
+    if (meta.fieldType === FieldType.DateTime) {
+        return (!!DateTimeFilterFuncs[filterType] ? dateFormatter(value, 'shortDate') : dateFormatter(value, 'short')) || '';
+    }
+    return value;
+}
+function mapNumber(value, meta) {
+    if (meta.fieldType === FieldType.Currency) {
+        return currencyFormatter(value);
+    }
+    return value;
+}
+
+class FilterChipsComponent {
+    constructor() {
+        this.tableState = inject(TableStore);
+        this.filterStore = inject(WrapperFilterStore);
+        this.$filters = computed(() => Object.values(this.tableState.$filters()).filter(f => isFilterInfo(f) && !f._isExternallyManaged));
+        this.$currentFilters = this.filterStore.$currentFilters;
+    }
+    deleteByIndex(index) {
+        this.filterStore.deleteByIndex(index);
+    }
+    addFilter(filter) {
+        this.filterStore.addFilter(filter);
+    }
+    clearAll() {
+        this.filterStore.clearAll();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key)\r\n      {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1)\r\n    {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{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{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: 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$2.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$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: FilterChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
+                        MatChipsModule, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
+                    ], template: "<div class=\"d-w\">\r\n\r\n  @if ($currentFilters().length)\r\n  {\r\n    <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\r\n      <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n    </button>\r\n    <div class=\"float\">\r\n      @for (filter of $currentFilters(); track filter.key)\r\n      {\r\n        <div class=\"filter\">\r\n          <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <mat-chip-set>\r\n    @for (filter of $filters(); track filter.key)\r\n    {\r\n      <mat-chip (dblclick)=\"addFilter(filter)\"  (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n        {{ (filter.key | keyDisplay)()  }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n    @if ($filters().length > 1)\r\n    {\r\n      <mat-chip  (removed)=\"tableState.clearFilters()\">\r\n        Clear All\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{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{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"] }]
+        }] });
+
 class RouterLinkColumnComponent {
     constructor() {
         this.additional = input.required();