@firestitch/filter 12.12.14 → 12.13.0

package/fesm2015/firestitch-filter.js

@@ -3,7 +3,7 @@ import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input
 import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, fromEvent, merge } from 'rxjs';
 import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, mapTo, startWith, map, delay, skip } from 'rxjs/operators';
 import { filter, isArrayEqual, list, isEmpty, getNormalizedPath, remove, FsCommonModule } from '@firestitch/common';
-import { isFunction, isObject, clone, isString, toString, pickBy } from 'lodash-es';
+import { isObject, isFunction, clone, isString, toString, pickBy } from 'lodash-es';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/router';
@@ -69,6 +69,43 @@ function filterFromQueryParam(param) {
     return [decodeURIComponent(parts[0]), decodeURIComponent(parts[1])];
 }
 
+function objectsAreEquals(obj1, obj2) {
+    const oldKeys = Object.keys(obj1);
+    const currKeys = Object.keys(obj2);
+    if (oldKeys.length !== currKeys.length) {
+        return false;
+    }
+    for (const key in obj1) {
+        if (obj1.hasOwnProperty(key)) {
+            const oldItem = obj1[key];
+            const currItem = obj2[key];
+            const isArrays = Array.isArray(oldItem) && Array.isArray(currItem);
+            const isObjects = isObject(oldItem) && isObject(currItem);
+            if (isArrays && !arraysAreEquals(oldItem, currItem)) {
+                return false;
+            }
+            else if (isObjects && !objectsAreEquals(oldItem, currItem)) {
+                return false;
+            }
+            else if (!isArrays && !isObjects && oldItem !== currItem) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+function arraysAreEquals(arr1, arr2) {
+    if (arr1.length !== arr2.length) {
+        return false;
+    }
+    for (const el of arr1) {
+        if (arr2.indexOf(el) === -1) {
+            return false;
+        }
+    }
+    return true;
+}
+
 var ItemType;
 (function (ItemType) {
     ItemType["Text"] = "text";
@@ -224,13 +261,13 @@ class BaseItem {
             this._pendingDefaultValue = false;
         }));
     }
-    initValues(persistedValue) {
+    initValues(filter, persistedValue) {
         // this._initialized = false;
         this.persistedValue = persistedValue;
         this._initDefaultModel();
         const isAutocomplete = this.type === ItemType.AutoComplete || this.type === ItemType.AutoCompleteChips;
         if (this._valuesFn && !isAutocomplete) {
-            const valuesResult = this._valuesFn();
+            const valuesResult = this._valuesFn(null, filter);
             if (isObservable(valuesResult)) {
                 this._pendingValues = true;
             }
@@ -246,10 +283,10 @@ class BaseItem {
             // this._initialized = true;
         }
     }
-    loadAsyncValues(reload = true) {
+    loadAsyncValues(filter, reload = true) {
         if (reload || (!this.loading && this.hasPendingValues)) {
             this.loading = true;
-            this._valuesFn()
+            this._valuesFn(null, filter)
                 .pipe(take(1), takeUntil(this._destroy$))
                 .subscribe((values) => {
                 this.values = values;
@@ -271,7 +308,6 @@ class BaseItem {
         this._clear$.next(defaultValue);
         this._clearValue(defaultValue);
     }
-    ;
     getChipsContent(type) {
         return '';
     }
@@ -306,7 +342,6 @@ class BaseItem {
             this.values = item.values;
         }
     }
-    ;
     _initDefaultModel() {
         var _a;
         const model = (_a = this.persistedValue) !== null && _a !== void 0 ? _a : this.defaultValue;
@@ -352,43 +387,6 @@ class BaseSelectItem extends BaseItem {
     }
 }
 
-function objectsAreEquals(obj1, obj2) {
-    const oldKeys = Object.keys(obj1);
-    const currKeys = Object.keys(obj2);
-    if (oldKeys.length !== currKeys.length) {
-        return false;
-    }
-    for (const key in obj1) {
-        if (obj1.hasOwnProperty(key)) {
-            const oldItem = obj1[key];
-            const currItem = obj2[key];
-            const isArrays = Array.isArray(oldItem) && Array.isArray(currItem);
-            const isObjects = isObject(oldItem) && isObject(currItem);
-            if (isArrays && !arraysAreEquals(oldItem, currItem)) {
-                return false;
-            }
-            else if (isObjects && !objectsAreEquals(oldItem, currItem)) {
-                return false;
-            }
-            else if (!isArrays && !isObjects && oldItem !== currItem) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-function arraysAreEquals(arr1, arr2) {
-    if (arr1.length !== arr2.length) {
-        return false;
-    }
-    for (const el of arr1) {
-        if (arr2.indexOf(el) === -1) {
-            return false;
-        }
-    }
-    return true;
-}
-
 class MultipleSelectItem extends BaseSelectItem {
     constructor(itemConfig, _persistedValues) {
         super(itemConfig, _persistedValues);
@@ -453,16 +451,14 @@ class MultipleSelectItem extends BaseSelectItem {
                 if (isNaN(val)) {
                     return val;
                 }
-                else {
-                    return +val;
-                }
+                return +val;
             });
         }
         super._setModel(value);
     }
     _validateModel() {
         const possibleValues = filter(this.model || [], (item) => {
-            return this.values.find(value => {
+            return this.values.find((value) => {
                 return value.value == item;
             });
         });
@@ -993,14 +989,12 @@ class SimpleSelectItem extends BaseSelectItem {
             const itemValue = findValue(this.values, this.model, this.children);
             return itemValue && itemValue.name;
         }
-        else {
-            const itemValue = this.values.find((val) => val.value === this.model);
-            if (itemValue) {
-                return itemValue.name;
-            }
-            else if (this.isolate) {
-                return this.isolate.label;
-            }
+        const itemValue = this.values.find((val) => val.value === this.model);
+        if (itemValue) {
+            return itemValue.name;
+        }
+        else if (this.isolate) {
+            return this.isolate.label;
         }
     }
     get isChipVisible() {
@@ -1026,7 +1020,7 @@ class SimpleSelectItem extends BaseSelectItem {
         super._setModel(value);
     }
     _validateModel() {
-        const item = this.values.find(value => {
+        const item = this.values.find((value) => {
             return value.value == this.model;
         });
         const value = item ? item.value : '__all';
@@ -1216,6 +1210,7 @@ class BaseAutocompleteItem extends BaseItem {
         return this._valuesFn;
     }
     _validateModel() {
+        //
     }
     _parseConfig(item) {
         var _a;
@@ -1555,12 +1550,12 @@ class FsFilterItemsStore {
     get visibleItems() {
         return this._visibleItems$.getValue();
     }
-    get visibleItems$() {
-        return this._visibleItems$.asObservable();
-    }
     set visibleItems(items) {
         this._visibleItems$.next(items);
     }
+    get visibleItems$() {
+        return this._visibleItems$.asObservable();
+    }
     get hasKeyword() {
         return this._hasKeyword;
     }
@@ -1623,7 +1618,7 @@ class FsFilterItemsStore {
     loadAsyncValues() {
         this.items
             .filter((item) => item.hasPendingValues)
-            .forEach((item) => item.loadAsyncValues());
+            .forEach((item) => item.loadAsyncValues(this.filter));
     }
     loadAsyncDefaults() {
         // default values can be asynchronous, and we must load them if there is no persisted value instead
@@ -1645,10 +1640,10 @@ class FsFilterItemsStore {
                     .map((item) => item.loadDefaultValue()),
                 ...valuesToBeLoaded
                     .map((item) => {
-                    item.loadAsyncValues();
+                    item.loadAsyncValues(this.filter);
                     return item.loading$
                         .pipe();
-                })
+                }),
             ])
                 .pipe(finalize(() => {
                 this._ready$.next(true);
@@ -1710,7 +1705,7 @@ class FsFilterItemsStore {
     init(p) {
         this.items
             .forEach((item) => {
-            item.initValues(p[item.name]);
+            item.initValues(this.filter, p[item.name]);
         });
         this._initSortingItems(p);
         this.loadAsyncDefaults();
@@ -1819,8 +1814,8 @@ class FsFilterItemsStore {
     }
     _initSortingItems(p) {
         if (this.sortByItem && this.sortDirectionItem) {
-            this.sortByItem.initValues(p[this.sortByItem.name]);
-            this.sortDirectionItem.initValues(p[this.sortDirectionItem.name]);
+            this.sortByItem.initValues(this.filter, p[this.sortByItem.name]);
+            this.sortDirectionItem.initValues(this.filter, p[this.sortDirectionItem.name]);
         }
     }
     _createSortingItems() {
@@ -1830,7 +1825,7 @@ class FsFilterItemsStore {
                 name: SORT_BY_FIELD,
                 type: ItemType.Select,
                 label: 'Sort By',
-                values: this._config.sortValues
+                values: this._config.sortValues,
             };
             if (this._config.sort && this._config.sort.value) {
                 sortByItem.default = this._config.sort.value;
@@ -1842,8 +1837,8 @@ class FsFilterItemsStore {
                 label: 'Sort Direction',
                 values: [
                     { name: 'Ascending', value: 'asc' },
-                    { name: 'Descending', value: 'desc' }
-                ]
+                    { name: 'Descending', value: 'desc' },
+                ],
             };
             if (this._config.sort && this._config.sort.direction) {
                 sortDirectionItem.default = this._config.sort.direction;
@@ -2658,7 +2653,7 @@ class FsFilterChipComponent {
         this.listenValueChangesForRanges();
         this._updateVisibility();
         if (this.item.hasPendingValues) {
-            this.item.loadAsyncValues(false);
+            this.item.loadAsyncValues(null, false);
             this.item.values$
                 .pipe(take(2), takeUntil(this._destroy$))
                 .subscribe(() => {
@@ -2700,7 +2695,7 @@ class FsFilterChipComponent {
     _initDelayRender() {
         this.chipDelayedRender$ = combineLatest([
             this.item.values$,
-            this._chipRenderTimer$.pipe(startWith(false))
+            this._chipRenderTimer$.pipe(startWith(false)),
         ])
             .pipe(map(([values, timerValue]) => {
             return !!values || timerValue;
@@ -2795,7 +2790,6 @@ class BaseItemComponent {
     set item(value) {
         this._item = value;
     }
-    ;
     get item() {
         return this._item;
     }
@@ -2809,12 +2803,7 @@ class BaseItemComponent {
     }
     ngOnChanges(changes) {
         if (changes.item) {
-            if (Array.isArray(this.item.label)) {
-                this.label = this.item.label[0];
-            }
-            else {
-                this.label = this.item.label;
-            }
+            this.label = Array.isArray(this.item.label) ? this.item.label[0] : this.item.label;
         }
     }
     ngOnDestroy() {
@@ -2833,7 +2822,7 @@ class BaseItemComponent {
     }
 }
 BaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BaseItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -2845,6 +2834,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], inline: [{
                 type: Input
+            }], filter: [{
+                type: Input
             }] } });
 
 class FocusToItemDirective {
@@ -3009,11 +3000,9 @@ class FsFilterIsolateValues {
         if (!isolate) {
             return values;
         }
-        else {
-            return values.filter((value) => {
-                return value.value !== isolate.value;
-            });
-        }
+        return values.filter((value) => {
+            return value.value !== isolate.value;
+        });
     }
 }
 FsFilterIsolateValues.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterIsolateValues, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -3021,7 +3010,7 @@ FsFilterIsolateValues.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", vers
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterIsolateValues, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'fsFilterIsolateValues'
+                    name: 'fsFilterIsolateValues',
                 }]
         }] });
 
@@ -3251,7 +3240,7 @@ class AutocompleteComponent extends BaseItemComponent {
             return data ? data.name : data;
         };
         this.fetch = (keyword) => {
-            return this.item.valuesFn(keyword);
+            return this.item.valuesFn(keyword, this.filter);
         };
     }
 }
@@ -3272,7 +3261,7 @@ class AutocompletechipsComponent extends BaseItemComponent {
         this._kvDiffers = _kvDiffers;
         this._cd = _cd;
         this.fetch = (keyword) => {
-            return this.item.valuesFn(keyword);
+            return this.item.valuesFn(keyword, this.filter);
         };
     }
     // SP-T1747
@@ -3413,8 +3402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class FilterItemComponent {
     constructor(_cdRef) {
         this._cdRef = _cdRef;
-        this._destroy$ = new Subject();
         this.itemType = ItemType;
+        this._destroy$ = new Subject();
     }
     get textItem() {
         return this.item;
@@ -3465,7 +3454,7 @@ class FilterItemComponent {
     }
 }
 FilterItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"textItem\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"baseSelectItem\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"chipsItem\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"rangeItem\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"autocompleteItem\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"autocompleteChipsItem\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"dateItem\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"dateTimeItem\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"dateRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"dateTimeRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"weekItem\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"checkboxItem\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item", filter: "filter" }, ngImport: i0, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Text\"\n      [item]=\"textItem\">\n    </filter-item-text>\n\n    <filter-item-select \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Select\"\n      [item]=\"baseSelectItem\">\n    </filter-item-select>\n\n    <filter-item-chips \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Chips\"\n      [item]=\"chipsItem\">\n    </filter-item-chips>\n\n    <filter-item-range \n      class=\"interface interface-range\"\n      *ngSwitchCase=\"itemType.Range\"\n      [item]=\"rangeItem\">\n    </filter-item-range>\n\n    <filter-item-autocomplete \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.AutoComplete\"\n      [item]=\"autocompleteItem\"\n      [filter]=\"filter\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.AutoCompleteChips\"\n      [item]=\"autocompleteChipsItem\"\n      [filter]=\"filter\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.Date\"\n      [item]=\"dateItem\">\n    </filter-item-date>\n\n    <filter-item-date \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateTime\"\n      [item]=\"dateTimeItem\">\n    </filter-item-date>\n\n    <filter-item-date-range \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateRange\"\n      [item]=\"dateRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-date-range \n      class=\"interface interface-date\"\n      *ngSwitchCase=\"itemType.DateTimeRange\"\n      [item]=\"dateTimeRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-week \n      class=\"interface\"\n      *ngSwitchCase=\"itemType.Week\"\n      [item]=\"weekItem\">\n    </filter-item-week>\n\n    <filter-item-checkbox \n      class=\"interface interface-checkbox\"\n      *ngSwitchCase=\"itemType.Checkbox\"\n      [item]=\"checkboxItem\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -3475,20 +3464,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
                 type: Input
+            }], filter: [{
+                type: Input
             }] } });
 
 class FilterDrawerComponent {
-    constructor(externalParams, _cd, _itemsStore, overlayRef, data) {
+    constructor(externalParams, _cd, _itemsStore, _overlayRef, _data) {
         this.externalParams = externalParams;
         this._cd = _cd;
         this._itemsStore = _itemsStore;
-        this.overlayRef = overlayRef;
-        this.data = data;
+        this._overlayRef = _overlayRef;
+        this._data = _data;
         this.inline = false;
         this.windowDesktop = false;
         this._itemsStore.prepareItems();
-        this._clear = data.clear;
-        this._done = data.done;
+        this._clear = _data.clear;
+        this._done = _data.done;
+        this.filter = _data.filter;
         this.updateWindowWidth();
     }
     updateWindowWidth() {
@@ -3509,19 +3501,19 @@ class FilterDrawerComponent {
     }
     done() {
         this._done();
-        this.overlayRef.detach();
+        this._overlayRef.detach();
     }
     backdropClick() {
         this.done();
     }
 }
 FilterDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, deps: [{ token: ExternalParamsController }, { token: i0.ChangeDetectorRef }, { token: FsFilterItemsStore }, { token: FILTER_DRAWER_OVERLAY }, { token: FILTER_DRAWER_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FilterDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDrawerComponent, selector: "ng-component", inputs: { inline: "inline" }, host: { listeners: { "window:resize": "updateWindowWidth()" } }, ngImport: i0, template: "<div class=\"filters\">\n  <div class=\"filters-wrap\">\n\n    <div class=\"filter-by\">\n      <mat-icon>tune</mat-icon>\n      <span class=\"text\">Filters</span>\n    </div>\n\n    <div class=\"overflow-shadow filter-items\">\n      <div class=\"overflow-shadow-content\">\n        <ng-container *fsSkeleton=\"(externalParams.pending$ | async) !== true\">\n          <filter-item \n            *ngFor=\"let filterItem of items$ | async\"\n            class=\"filter-group\"\n            [item]=\"filterItem\"\n            [filter]=\"filter\">\n          </filter-item>\n\n          <ng-container *ngIf=\"sortItem && sortItem.values && sortItem.values.length > 0\">\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortItem\"\n              [filter]=\"filter\">\n            </filter-item>\n            <filter-item \n              class=\"filter-group sort\"\n              [item]=\"sortDirectionItem\"\n              [filter]=\"filter\">\n            </filter-item>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <fs-filter-drawer-actions \n      class=\"filter-actions\"\n      *ngIf=\"(externalParams.pending$ | async) !== true\"\n      (clear)=\"clear()\"\n      (done)=\"done()\">\n    </fs-filter-drawer-actions>\n  </div>\n</div>\n<div class=\"backdrop\" *ngIf=\"!windowDesktop\" (click)=\"backdropClick()\"></div>\n", styles: [":host ::ng-deep mat-form-field{width:100%}.filter-by{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;padding:20px 25px}.filter-by mat-icon{margin-right:8px}.filter-by .text{font-weight:400;font-size:19px}.filter-actions{display:block;box-sizing:border-box;padding:13px}.filter-actions button{margin-right:6px}.filter-actions button:last-child{margin-right:0}.filters{position:fixed;display:block;top:0;right:0;z-index:1002;bottom:0}.filters .filters-wrap{background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;width:85vw;max-width:350px;display:flex;flex-direction:column;height:100%;padding-top:calc(env(safe-area-inset-top))}.filters .filters-wrap .filter-items{overflow-y:auto}.filters .filters-wrap .filter-items .overflow-shadow-content{padding:0 25px;box-sizing:border-box}.filters .filter-group{margin:10px 0 0}.filters .filter-group:first-child{margin:0}.filters .filter label{white-space:nowrap;color:#0000008a}.filters .filter .interface.interface-range input,.filters .filter .interface.interface-range .mat-input-wrapper{text-align:center}.filters .filter .interface.interface-range{text-align:center}.filters .filter .interface.interface-datetime fs-datetime.has-time .md-input{width:100%}.filters .filter .interface fs-datetime-range input{text-align:center}.filters .filter .filter-label{width:1%;white-space:nowrap;vertical-align:middle;padding-right:15px}.filters md-autocomplete-container md-input-container{margin:0}.filters .isolate{margin-top:-12px}.filters .isolate .interface{line-height:20px;padding-bottom:1.25em}.filters .isolate md-checkbox{margin:0 0 0 2px}.backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:900;outline:none}\n"], components: [{ type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: FilterItemComponent, selector: "filter-item", inputs: ["item", "filter"] }, { type: FsFilterDrawerActionsComponent, selector: "fs-filter-drawer-actions", outputs: ["clear", "done"] }], directives: [{ type: i6$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDrawerComponent, decorators: [{
             type: Component,
             args: [{
                     templateUrl: './filter-drawer.component.html',
-                    styleUrls: ['filter-drawer.component.scss'],
+                    styleUrls: ['./filter-drawer.component.scss'],
                     // Commented out because filter items are not updating with a delayed observable. Need to figure this out.
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
@@ -3531,11 +3523,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FILTER_DRAWER_DATA]
-                }] }]; }, propDecorators: { updateWindowWidth: [{
+                }] }]; }, propDecorators: { inline: [{
+                type: Input
+            }], updateWindowWidth: [{
                 type: HostListener,
                 args: ['window:resize']
-            }], inline: [{
-                type: Input
             }] } });
 
 class ActionsController {
@@ -3668,9 +3660,9 @@ const FS_FILTER_META = new InjectionToken('fs.filter.meta', {
 });
 
 class FsFilterOverlayService {
-    constructor(_injector, _filterMeta, _overlay, _focusController) {
-        this._injector = _injector;
+    constructor(_filterMeta, _injector, _overlay, _focusController) {
         this._filterMeta = _filterMeta;
+        this._injector = _injector;
         this._overlay = _overlay;
         this._focusController = _focusController;
         this.detach$ = new Subject();
@@ -3691,7 +3683,7 @@ class FsFilterOverlayService {
         if (this._overlayRef) {
             this._overlayRef.detach();
             this._overlayRef = null;
-            this.removeFilterClass();
+            this._removeFilterClass();
         }
     }
     open() {
@@ -3711,8 +3703,8 @@ class FsFilterOverlayService {
             .subscribe(() => {
             this.attach$.next();
         });
-        this.addFilterClass();
-        return this.openPortalPreview();
+        this._addFilterClass();
+        return this._openPortalPreview();
     }
     ngOnDestroy() {
         this._destroy$.next();
@@ -3721,12 +3713,16 @@ class FsFilterOverlayService {
     _createOverlay() {
         const overlayConfig = new OverlayConfig({
             hasBackdrop: true,
-            backdropClass: 'fs-filter-backdrop'
+            backdropClass: 'fs-filter-backdrop',
         });
         return this._overlay.create(overlayConfig);
     }
-    openPortalPreview() {
-        const data = { done: this._doneFn, clear: this._clearFn };
+    _openPortalPreview() {
+        const data = {
+            done: this._doneFn,
+            clear: this._clearFn,
+            filter: this.filter,
+        };
         const injector = this._createInjector(this._injector, data, this._overlayRef);
         const containerPortal = new ComponentPortal(FilterDrawerComponent, undefined, injector);
         const containerRef = this._overlayRef.attach(containerPortal);
@@ -3739,13 +3735,13 @@ class FsFilterOverlayService {
         ]);
         return new PortalInjector(parentInjector, injectionTokens);
     }
-    removeFilterClass() {
+    _removeFilterClass() {
         this._filterMeta.openedFilters--;
         if (this._filterMeta.openedFilters === 0) {
             window.document.body.classList.remove('fs-filter-open');
         }
     }
-    addFilterClass() {
+    _addFilterClass() {
         this._filterMeta.openedFilters++;
         if (this._filterMeta.openedFilters === 1) {
             window.document.body.classList.add('fs-filter-open');
@@ -3761,14 +3757,14 @@ class FsFilterOverlayService {
         });
     }
 }
-FsFilterOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterOverlayService, deps: [{ token: i0.Injector }, { token: FS_FILTER_META }, { token: i1$6.Overlay }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Injectable });
+FsFilterOverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterOverlayService, deps: [{ token: FS_FILTER_META }, { token: i0.Injector }, { token: i1$6.Overlay }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Injectable });
 FsFilterOverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterOverlayService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsFilterOverlayService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [FS_FILTER_META]
-                }] }, { type: i1$6.Overlay }, { type: FocusControllerService }]; } });
+                }] }, { type: i0.Injector }, { type: i1$6.Overlay }, { type: FocusControllerService }]; } });
 
 class FilterStatusBarDirective {
     constructor(templateRef) {
@@ -3810,6 +3806,8 @@ class FilterComponent {
         this._hasFilterChips$ = new BehaviorSubject(false);
         this._keyword$ = new Subject();
         this._destroy$ = new Subject();
+        this._filterItems.filter = this;
+        this._filterOverlay.filter = this;
         this._listenWhenFilterReady();
         this._updateWindowWidth();
         this._filterOverlay.attach$
@@ -4032,9 +4030,7 @@ class FilterComponent {
                 return item.model;
             }));
         }
-        else {
-            return null;
-        }
+        return null;
     }
     changeVisibility(state) {
         if (state === this.showFilterMenu) {
@@ -4119,6 +4115,7 @@ class FilterComponent {
     }
     /**
      * Update filter actions config
+     *
      * @param actions
      */
     updateActions(actions) {
@@ -4167,6 +4164,9 @@ class FilterComponent {
         this._externalParams.initItems();
         this._syncSearchInputWithKeyword();
     }
+    keywordChange(keyword) {
+        this._keyword$.next(keyword);
+    }
     _initFilterWithConfig(config) {
         if (this.config) {
             this._filterItems.destroyItems();
@@ -4209,9 +4209,6 @@ class FilterComponent {
             });
         });
     }
-    keywordChange(keyword) {
-        this._keyword$.next(keyword);
-    }
     _listenInputChanges() {
         this._keyword$
             .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this._destroy$))
@@ -4574,9 +4571,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FilterStatusBarDirective,
                         FsSavedFiltersMenuComponent,
                     ],
-                    entryComponents: [
-                        FilterDrawerComponent,
-                    ],
                 }]
         }] });