@firestitch/filter 9.8.5 → 9.9.0

package/app/components/filter/filter.component.d.ts

@@ -45,6 +45,7 @@ export declare class FilterComponent implements OnInit, AfterViewInit, OnDestroy
     get filterParamsQuery(): Record<string, unknown>;
     get items(): BaseItem<import("../../interfaces/config.interface").IFilterConfigItem>[];
     get visibleItems(): BaseItem<import("../../interfaces/config.interface").IFilterConfigItem>[];
+    get itemsReady$(): Observable<boolean>;
     get hasFilterChips$(): Observable<boolean>;
     get hasVisibleItemOrSorting(): boolean;
     get hasKeyword(): boolean;

package/app/components/filters-item/text/text.component.d.ts

@@ -11,4 +11,6 @@ export declare class TextComponent extends BaseItemComponent<TextItem> implement
     constructor(_kvDiffers: KeyValueDiffers, _cd: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    private _listenControlValueChanges;
+    private _listenModelChanges;
 }

package/app/interfaces/items/base.interface.d.ts

@@ -1,7 +1,9 @@
+import { Observable } from 'rxjs';
 import { ItemType } from '../../enums/item-type.enum';
 import { BaseItem } from '../../models/items/base-item';
 export declare type FilterConfigDateType = ItemType.Date | ItemType.DateTime | ItemType.DateRange | ItemType.DateTimeRange;
 export declare type FilterDateRangeType = ItemType.DateRange | ItemType.DateTimeRange;
+export declare type IFilterDefaultFn = () => Observable<unknown>;
 export interface IFilterConfigBaseItem<T = ItemType, U = string> {
     name: string;
     type: T;
@@ -11,7 +13,7 @@ export interface IFilterConfigBaseItem<T = ItemType, U = string> {
     disable?: boolean;
     values?: any;
     primary?: boolean;
-    default?: unknown;
+    default?: IFilterDefaultFn | any;
     change?: (item: BaseItem<any>) => void;
     clear?: boolean;
     disablePersist?: boolean;

package/app/models/items/base-item.d.ts

@@ -1,5 +1,5 @@
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { IFilterConfigBaseItem } from '../../interfaces/items/base.interface';
+import { IFilterConfigBaseItem, IFilterDefaultFn } from '../../interfaces/items/base.interface';
 import { IFilterItemDefaultRange } from '../../interfaces/items/range.interface';
 export declare abstract class BaseItem<T extends IFilterConfigBaseItem> {
     protected _additionalConfig: unknown;
@@ -8,6 +8,7 @@ export declare abstract class BaseItem<T extends IFilterConfigBaseItem> {
     chipLabel: string | string[];
     hide: boolean;
     defaultValue: any | IFilterItemDefaultRange;
+    defaultValueFn: IFilterDefaultFn;
     persistedValue: unknown;
     clearAllowed: boolean;
     persistanceDisabled: boolean;
@@ -17,6 +18,7 @@ export declare abstract class BaseItem<T extends IFilterConfigBaseItem> {
     protected _model: any;
     protected _initialized: boolean;
     protected _pendingValues: boolean;
+    protected _pendingDefaultValue: boolean;
     protected _loading$: BehaviorSubject<boolean>;
     protected _value$: BehaviorSubject<any>;
     protected _valueChange$: Subject<void>;
@@ -41,6 +43,7 @@ export declare abstract class BaseItem<T extends IFilterConfigBaseItem> {
     get destroy$(): Observable<void>;
     get type(): T['type'];
     get hasPendingValues(): boolean;
+    get hasPendingDefaultValue(): boolean;
     get model(): any;
     set model(value: any);
     set values(values: any);
@@ -56,6 +59,7 @@ export declare abstract class BaseItem<T extends IFilterConfigBaseItem> {
     valueChanged(): void;
     get queryObject(): Record<string, unknown>;
     get persistanceObject(): Record<string, unknown>;
+    loadDefaultValue(): Observable<any>;
     initValues(persistedValue: unknown): void;
     loadAsyncValues(reload?: boolean): void;
     clear(defaultValue?: unknown): void;

package/app/services/items-store.service.d.ts

@@ -15,6 +15,7 @@ export declare class FsFilterItemsStore implements OnDestroy {
     sortByItem: BaseItem<IFilterConfigItem>;
     sortDirectionItem: BaseItem<IFilterConfigItem>;
     keywordItem: TextItem;
+    private _ready$;
     private _items;
     private _visibleItems$;
     private _itemsByName;
@@ -22,6 +23,7 @@ export declare class FsFilterItemsStore implements OnDestroy {
     private _hasKeyword;
     private _config;
     private _itemsChange$;
+    private _destroy$;
     constructor();
     get items(): BaseItem<IFilterConfigItem>[];
     get visibleItems(): BaseItem<IFilterConfigItem>[];
@@ -29,12 +31,14 @@ export declare class FsFilterItemsStore implements OnDestroy {
     set visibleItems(items: BaseItem<IFilterConfigItem>[]);
     get hasKeyword(): boolean;
     get itemsChange$(): Observable<unknown>;
+    get ready$(): Observable<boolean>;
     ngOnDestroy(): void;
     setConfig(config: any): void;
     getItemByName(name: string): BaseItem<IFilterConfigBaseItem>;
     initItems(items: IFilterConfigItem[]): void;
     filtersClear(): void;
     loadAsyncValues(): void;
+    loadAsyncDefaults(): void;
     getSort(): FilterSort;
     getSortByValue(): any;
     getSortDirectionValue(): any;
@@ -51,6 +55,7 @@ export declare class FsFilterItemsStore implements OnDestroy {
     updateVisibleItems(): void;
     private _createItems;
     private _subscribeToItemsChanges;
+    private _lazyInit;
     private _createSortingItems;
     private _setKeywordItem;
 }

package/bundles/firestitch-filter.umd.js

@@ -256,6 +256,7 @@
             this._additionalConfig = _additionalConfig;
             this._initialized = false;
             this._pendingValues = false;
+            this._pendingDefaultValue = false;
             this._loading$ = new rxjs.BehaviorSubject(false);
             this._value$ = new rxjs.BehaviorSubject(null);
             this._valueChange$ = new rxjs.Subject();
@@ -372,6 +373,13 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(BaseItem.prototype, "hasPendingDefaultValue", {
+            get: function () {
+                return this._pendingDefaultValue;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(BaseItem.prototype, "model", {
             get: function () {
                 return this._model;
@@ -477,6 +485,15 @@
             enumerable: true,
             configurable: true
         });
+        BaseItem.prototype.loadDefaultValue = function () {
+            var _this = this;
+            return this.defaultValueFn()
+                .pipe(operators.tap(function (value) {
+                _this.defaultValue = value;
+            }), operators.finalize(function () {
+                _this._pendingDefaultValue = false;
+            }));
+        };
         BaseItem.prototype.initValues = function (persistedValue) {
             this._initialized = false;
             this.persistedValue = persistedValue;
@@ -540,7 +557,13 @@
             this.name = item.name;
             this.label = item.label;
             this.chipLabel = item.chipLabel;
-            this.defaultValue = item.default;
+            if (typeof item.default === 'function') {
+                this._pendingDefaultValue = true;
+                this.defaultValueFn = item.default;
+            }
+            else {
+                this.defaultValue = item.default;
+            }
             this.change = item.change;
             this.hide = item.hide;
             this.clearAllowed = (_a = item.clear) !== null && _a !== void 0 ? _a : true;
@@ -1051,15 +1074,14 @@
         });
         Object.defineProperty(RangeItem.prototype, "queryObject", {
             get: function () {
-                var _a, _b;
                 var value = this.value;
                 var name = this.name;
                 var params = {};
                 var paramMinName = getRangeName(this.case, name, 'min');
                 var paramMaxName = getRangeName(this.case, name, 'max');
                 if (lodashEs.isObject(value)) {
-                    params[paramMinName] = (_a = value.min) !== null && _a !== void 0 ? _a : null;
-                    params[paramMaxName] = (_b = value.max) !== null && _b !== void 0 ? _b : null;
+                    params[paramMinName] = value.min || null;
+                    params[paramMaxName] = value.max || null;
                 }
                 else {
                     params[paramMinName] = null;
@@ -1197,14 +1219,13 @@
         Object.defineProperty(BaseDateRangeItem.prototype, "queryObject", {
             get: function () {
                 var _a;
-                var _b, _c;
                 var value = this.value || {};
                 var name = this.name;
                 var paramFromName = getRangeName(this.case, name, 'from');
                 var paramToName = getRangeName(this.case, name, 'to');
                 return _a = {},
-                    _a[paramFromName] = (_b = value.from) !== null && _b !== void 0 ? _b : null,
-                    _a[paramToName] = (_c = value.to) !== null && _c !== void 0 ? _c : null,
+                    _a[paramFromName] = value.from || null,
+                    _a[paramToName] = value.to || null,
                     _a;
             },
             enumerable: true,
@@ -1726,12 +1747,15 @@
             this.sortByItem = null;
             this.sortDirectionItem = null;
             this.keywordItem = null;
+            this._ready$ = new rxjs.BehaviorSubject(false);
             this._items = [];
             this._visibleItems$ = new rxjs.BehaviorSubject([]);
             this._itemsByName = new Map();
             this._itemsValuesLoaded = false;
             this._hasKeyword = false;
             this._itemsChange$ = new rxjs.Subject();
+            this._destroy$ = new rxjs.Subject();
+            this._lazyInit();
         }
         Object.defineProperty(FsFilterItemsStore.prototype, "items", {
             get: function () {
@@ -1771,8 +1795,17 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(FsFilterItemsStore.prototype, "ready$", {
+            get: function () {
+                return this._ready$.asObservable();
+            },
+            enumerable: true,
+            configurable: true
+        });
         FsFilterItemsStore.prototype.ngOnDestroy = function () {
             this.destroyItems();
+            this._destroy$.next();
+            this._destroy$.complete();
         };
         FsFilterItemsStore.prototype.setConfig = function (config) {
             this._itemsByName.clear();
@@ -1786,8 +1819,6 @@
             this._itemsValuesLoaded = false;
             if (Array.isArray(items)) {
                 this._createItems(items);
-                this.updateVisibleItems();
-                this._setKeywordItem();
             }
         };
         FsFilterItemsStore.prototype.filtersClear = function () {
@@ -1826,6 +1857,25 @@
                 .filter(function (item) { return item.hasPendingValues; })
                 .forEach(function (item) { return item.loadAsyncValues(); });
         };
+        FsFilterItemsStore.prototype.loadAsyncDefaults = function () {
+            var _this = this;
+            var pendingItems = this.items
+                .filter(function (item) {
+                return item.hasPendingDefaultValue
+                    && (item.persistedValue === null || item.persistedValue === undefined);
+            });
+            if (pendingItems.length > 0) {
+                rxjs.forkJoin(pendingItems
+                    .map(function (item) { return item.loadDefaultValue(); }))
+                    .pipe(operators.finalize(function () {
+                    _this._ready$.next(true);
+                }), operators.takeUntil(this._destroy$))
+                    .subscribe();
+            }
+            else {
+                this._ready$.next(true);
+            }
+        };
         FsFilterItemsStore.prototype.getSort = function () {
             var sortBy = this.getSortByValue();
             sortBy = sortBy === '__all' ? null : sortBy;
@@ -1882,6 +1932,7 @@
                 item.initValues(p[item.name]);
             });
             this._createSortingItems(p);
+            this.loadAsyncDefaults();
             this._subscribeToItemsChanges();
         };
         FsFilterItemsStore.prototype.updateItemsWithValues = function (values) {
@@ -1970,6 +2021,15 @@
                 });
             }
         };
+        FsFilterItemsStore.prototype._lazyInit = function () {
+            var _this = this;
+            this.ready$
+                .pipe(operators.filter(function (state) { return state; }), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.updateVisibleItems();
+                _this._setKeywordItem();
+            });
+        };
         FsFilterItemsStore.prototype._createSortingItems = function (p) {
             var _a;
             if (((_a = this._config.sortValues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -3427,6 +3487,13 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(FilterComponent.prototype, "itemsReady$", {
+            get: function () {
+                return this._filterItems.ready$;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(FilterComponent.prototype, "hasFilterChips$", {
             get: function () {
                 return this._hasFilterChips$.asObservable();
@@ -3491,21 +3558,6 @@
                     _this.focus();
                 }
             });
-            if (this.config.init) {
-                if (this._externalParams.pending) {
-                    this._externalParams
-                        .pending$
-                        .pipe(operators.filter(function (pending) {
-                        return !pending;
-                    }), operators.takeUntil(this._destroy$))
-                        .subscribe(function () {
-                        _this.init();
-                    });
-                }
-                else {
-                    this.init();
-                }
-            }
             this._listenInternalItemsChange();
             this._initOverlay();
         };
@@ -3906,10 +3958,18 @@
         // We may need some time to recieve external params and after that ready can be emitted
         FilterComponent.prototype._listenWhenFilterReady = function () {
             var _this = this;
-            this._externalParams
-                .pending$
-                .pipe(operators.filter(function (value) { return !value; }), operators.takeUntil(this._destroy$))
+            rxjs.combineLatest([
+                this._externalParams.pending$,
+                this.itemsReady$,
+            ])
+                .pipe(operators.filter(function (_a) {
+                var _b = __read(_a, 2), pendingParams = _b[0], itemsReady = _b[1];
+                return !pendingParams && itemsReady;
+            }), operators.takeUntil(this._destroy$))
                 .subscribe(function () {
+                if (_this.config.init) {
+                    _this.init();
+                }
                 _this.ready.emit();
             });
         };
@@ -3985,7 +4045,7 @@
         FilterComponent = __decorate([
             core.Component({
                 selector: 'fs-filter',
-                template: "<ng-container *ngIf=\"hasKeyword; else noKeywordFilter\">\n  <div class=\"filter-search-container\">\n    <div class=\"filter-input-field\">\n      <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n        <mat-form-field floatLabel=\"never\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n\n          <input\n            matInput\n            [formControl]=\"searchText\"\n            [placeholder]=\"searchPlaceholder\"\n            name=\"filter-input\"\n            (click)=\"filterInputEvent($event)\"\n            class=\"filter-input\">\n\n          <a matSuffix\n             *ngIf=\"searchText.value && showFilterInput && config.clear\"\n             (click)=\"clearSearchText($event)\"\n             href=\"javascript:void(0)\"\n             class=\"clear\">\n            <mat-icon>clear</mat-icon>\n          </a>\n\n          <a matSuffix\n             (click)=\"reload($event)\"\n             class=\"reload\"\n             *ngIf=\"config.reload\">\n            <mat-icon>refresh</mat-icon>\n          </a>\n        </mat-form-field>\n      </form>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n  <div class=\"status-actions\" *ngIf=\"keywordVisible$ | async\">\n    <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noKeywordFilter>\n  <div class=\"filter-searchless-container\">\n    <div class=\"status-actions\">\n      <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n</ng-template>\n\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async \">\n      <button\n        mat-button\n        class=\"filters-button\"\n        [ngClass]=\"{\n          'mat-raised-button': config.button.style == 'raised',\n          'mat-button': config.button.style == 'basic',\n          'mat-icon-button': config.button.style == 'icon'\n        }\"\n        (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n        type=\"button\"\n        [color]=\"config.button.color\">\n        <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n        {{ config.button.label }}\n      </button>\n    </ng-container>\n\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterChips>\n  <fs-filter-chips\n    *ngIf=\"config.chips && hasFilterChips$ | async\"\n    class=\"filter-chips\"\n    [filters]=\"items\">\n  </fs-filter-chips>\n</ng-template>\n\n<ng-template #statusBarContainer>\n  <div class=\"status-bar\" *ngIf=\"statusBar\">\n    <small><ng-container *ngTemplateOutlet=\"statusBar\"></ng-container></small>\n  </div>\n</ng-template>\n",
+                template: "<ng-container *ngIf=\"hasKeyword; else noKeywordFilter\">\n  <div class=\"filter-search-container\">\n    <div class=\"filter-input-field\">\n      <form autocomplete=\"off\" role=\"presentation\" *ngIf=\"keywordVisible$ | async\">\n        <mat-form-field floatLabel=\"never\">\n            <span matPrefix>\n              <mat-icon matPrefix>search</mat-icon>\n            </span>\n\n          <input\n            #searchTextInput\n            matInput\n            [formControl]=\"searchText\"\n            [placeholder]=\"searchPlaceholder\"\n            name=\"filter-input\"\n            (click)=\"filterInputEvent($event)\"\n            class=\"filter-input\">\n\n          <a matSuffix\n             *ngIf=\"searchText.value && showFilterInput && config.clear\"\n             (click)=\"clearSearchText($event)\"\n             href=\"javascript:void(0)\"\n             class=\"clear\">\n            <mat-icon>clear</mat-icon>\n          </a>\n\n          <a matSuffix\n             (click)=\"reload($event)\"\n             class=\"reload\"\n             *ngIf=\"config.reload\">\n            <mat-icon>refresh</mat-icon>\n          </a>\n        </mat-form-field>\n      </form>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n  <div class=\"status-actions\" *ngIf=\"keywordVisible$ | async\">\n    <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #noKeywordFilter>\n  <div class=\"filter-searchless-container\">\n    <div class=\"status-actions\">\n      <ng-container *ngTemplateOutlet=\"statusBarContainer\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"filterChips\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"filterActions\"></ng-container>\n  </div>\n</ng-template>\n\n\n<ng-template #filterActions>\n  <div class=\"filter-actions\">\n    <ng-container *ngIf=\"hasVisibleItemOrSorting && filtersBtnVisible$ | async\">\n      <button\n        mat-button\n        class=\"filters-button\"\n        [ngClass]=\"{\n          'mat-raised-button': config.button.style == 'raised',\n          'mat-button': config.button.style == 'basic',\n          'mat-icon-button': config.button.style == 'icon'\n        }\"\n        (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n        type=\"button\"\n        [color]=\"config.button.color\">\n        <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n        {{ config.button.label }}\n      </button>\n    </ng-container>\n\n    <fs-filter-actions\n      *ngIf=\"actionsVisible$ | async\"\n      [actions]=\"actions$ | async\"\n      [kebabActions]=\"menuActions$ | async\">\n    </fs-filter-actions>\n  </div>\n</ng-template>\n\n<ng-template #filterChips>\n  <fs-filter-chips\n    *ngIf=\"config.chips && hasFilterChips$ | async\"\n    class=\"filter-chips\"\n    [filters]=\"items\">\n  </fs-filter-chips>\n</ng-template>\n\n<ng-template #statusBarContainer>\n  <div class=\"status-bar\" *ngIf=\"statusBar\">\n    <small><ng-container *ngTemplateOutlet=\"statusBar\"></ng-container></small>\n  </div>\n</ng-template>\n",
                 encapsulation: core.ViewEncapsulation.None,
                 providers: [
                     FsFilterOverlayService,
@@ -4323,17 +4383,28 @@
             return _this;
         }
         TextComponent.prototype.ngOnInit = function () {
+            this._listenControlValueChanges();
+            this._listenModelChanges();
+        };
+        TextComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        TextComponent.prototype._listenControlValueChanges = function () {
             var _this = this;
-            this.textControl.setValue(this.item.model);
             this.textControl.valueChanges
                 .pipe(operators.distinctUntilChanged(), operators.debounceTime(200), operators.takeUntil(this.destroy$))
                 .subscribe(function (value) {
                 _this.item.model = value;
             });
         };
-        TextComponent.prototype.ngOnDestroy = function () {
-            this.destroy$.next();
-            this.destroy$.complete();
+        TextComponent.prototype._listenModelChanges = function () {
+            var _this = this;
+            this._item.value$
+                .pipe(operators.takeUntil(this.destroy$))
+                .subscribe(function () {
+                _this.textControl.setValue(_this.item.model, { emitEvent: false });
+            });
         };
         TextComponent.ctorParameters = function () { return [
             { type: core.KeyValueDiffers },