@firestitch/filter 9.8.8 → 9.9.4

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/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;
@@ -15,8 +16,8 @@ export declare abstract class BaseItem<T extends IFilterConfigBaseItem> {
     change: (item: BaseItem<T>) => void;
     protected readonly _type: T['type'];
     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 +42,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);
@@ -53,9 +55,11 @@ export declare abstract class BaseItem<T extends IFilterConfigBaseItem> {
     get loading$(): Observable<boolean>;
     get loading(): boolean;
     set loading(value: boolean);
+    protected get _initialized(): boolean;
     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

@@ -254,8 +254,9 @@
     var BaseItem = /** @class */ (function () {
         function BaseItem(itemConfig, _additionalConfig) {
             this._additionalConfig = _additionalConfig;
-            this._initialized = false;
+            // protected _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;
@@ -445,6 +453,13 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(BaseItem.prototype, "_initialized", {
+            get: function () {
+                return !this._pendingDefaultValue && !this._pendingValues;
+            },
+            enumerable: true,
+            configurable: true
+        });
         BaseItem.prototype.valueChanged = function () {
             this._value$.next(this.value);
             if (this.change) {
@@ -477,8 +492,19 @@
             enumerable: true,
             configurable: true
         });
+        BaseItem.prototype.loadDefaultValue = function () {
+            var _this = this;
+            this._pendingDefaultValue = true;
+            return this.defaultValueFn()
+                .pipe(operators.tap(function (value) {
+                _this.defaultValue = value;
+                _this._initDefaultModel();
+            }), operators.finalize(function () {
+                _this._pendingDefaultValue = false;
+            }));
+        };
         BaseItem.prototype.initValues = function (persistedValue) {
-            this._initialized = false;
+            // this._initialized = false;
             this.persistedValue = persistedValue;
             this._initDefaultModel();
             var isAutocomplete = this.type === exports.ItemType.AutoComplete || this.type === exports.ItemType.AutoCompleteChips;
@@ -491,12 +517,12 @@
                     this.values = valuesResult;
                     // Move to some other place
                     this._init();
-                    this._initialized = true;
+                    // this._initialized = true;
                 }
             }
             else {
                 this._init();
-                this._initialized = true;
+                // this._initialized = true;
             }
         };
         BaseItem.prototype.loadAsyncValues = function (reload) {
@@ -512,7 +538,7 @@
                     _this.loading = false;
                     _this._init();
                     _this._validateModel();
-                    _this._initialized = true;
+                    // this._initialized = true;
                 });
             }
         };
@@ -540,7 +566,12 @@
             this.name = item.name;
             this.label = item.label;
             this.chipLabel = item.chipLabel;
-            this.defaultValue = item.default;
+            if (typeof item.default === 'function') {
+                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;
@@ -1724,12 +1755,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 () {
@@ -1769,8 +1803,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();
@@ -1784,8 +1827,6 @@
             this._itemsValuesLoaded = false;
             if (Array.isArray(items)) {
                 this._createItems(items);
-                this.updateVisibleItems();
-                this._setKeywordItem();
             }
         };
         FsFilterItemsStore.prototype.filtersClear = function () {
@@ -1824,6 +1865,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.defaultValueFn
+                    && (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;
@@ -1880,6 +1940,7 @@
                 item.initValues(p[item.name]);
             });
             this._createSortingItems(p);
+            this.loadAsyncDefaults();
             this._subscribeToItemsChanges();
         };
         FsFilterItemsStore.prototype.updateItemsWithValues = function (values) {
@@ -1968,6 +2029,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) {
@@ -2622,6 +2692,12 @@
         };
         ExternalParamsController.prototype._listenItemsChange = function () {
             var _this = this;
+            this._itemsStore.ready$
+                .pipe(operators.filter(function (v) { return v; }), operators.take(1), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._saveQueryParams();
+                _this._savePersistedParams();
+            });
             this._itemsStore
                 .itemsChange$
                 .pipe(operators.takeUntil(this._destroy$))
@@ -3425,6 +3501,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();
@@ -3489,21 +3572,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();
         };
@@ -3904,10 +3972,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();
             });
         };
@@ -3983,7 +4059,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            #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",
+                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,