@firestitch/filter 9.8.7 → 9.9.3

package/fesm5/firestitch-filter.js

@@ -1,8 +1,8 @@
 import { __extends, __assign, __decorate, __metadata, __spread, __param, __values, __read } from 'tslib';
 import { Injectable, Optional, Inject, Component, ChangeDetectionStrategy, InjectionToken, ChangeDetectorRef, HostListener, Input, Injector, Directive, EventEmitter, NgZone, Output, ContentChild, TemplateRef, ViewChild, ElementRef, HostBinding, ViewEncapsulation, KeyValueDiffers, Pipe, Self, NgModule } from '@angular/core';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { BehaviorSubject, Subject, isObservable, of, fromEvent, merge, timer, combineLatest } from 'rxjs';
-import { take, takeUntil, debounceTime, tap, distinctUntilChanged, filter as filter$1, switchMap, skip, map, mapTo, startWith, delay } from 'rxjs/operators';
+import { BehaviorSubject, Subject, isObservable, forkJoin, combineLatest, of, fromEvent, merge, timer } from 'rxjs';
+import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, skip, map, mapTo, startWith, delay } from 'rxjs/operators';
 import { isFunction, clone, isObject, isString, toString, pickBy } from 'lodash-es';
 import { Alias, Model } from 'tsmodels';
 import { filter, isEmpty, getNormalizedPath, list, remove, FsCommonModule } from '@firestitch/common';
@@ -68,8 +68,9 @@ function findValue(values, value, children) {
 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 BehaviorSubject(false);
         this._value$ = new BehaviorSubject(null);
         this._valueChange$ = new Subject();
@@ -186,6 +187,13 @@ var BaseItem = /** @class */ (function () {
         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;
@@ -259,6 +267,13 @@ var BaseItem = /** @class */ (function () {
         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) {
@@ -291,8 +306,19 @@ var BaseItem = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    BaseItem.prototype.loadDefaultValue = function () {
+        var _this = this;
+        this._pendingDefaultValue = true;
+        return this.defaultValueFn()
+            .pipe(tap(function (value) {
+            _this.defaultValue = value;
+            _this._initDefaultModel();
+        }), 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 === ItemType.AutoComplete || this.type === ItemType.AutoCompleteChips;
@@ -305,12 +331,12 @@ var BaseItem = /** @class */ (function () {
                 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) {
@@ -326,7 +352,7 @@ var BaseItem = /** @class */ (function () {
                 _this.loading = false;
                 _this._init();
                 _this._validateModel();
-                _this._initialized = true;
+                // this._initialized = true;
             });
         }
     };
@@ -354,7 +380,12 @@ var BaseItem = /** @class */ (function () {
         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;
@@ -1538,12 +1569,15 @@ var FsFilterItemsStore = /** @class */ (function () {
         this.sortByItem = null;
         this.sortDirectionItem = null;
         this.keywordItem = null;
+        this._ready$ = new BehaviorSubject(false);
         this._items = [];
         this._visibleItems$ = new BehaviorSubject([]);
         this._itemsByName = new Map();
         this._itemsValuesLoaded = false;
         this._hasKeyword = false;
         this._itemsChange$ = new Subject();
+        this._destroy$ = new Subject();
+        this._lazyInit();
     }
     Object.defineProperty(FsFilterItemsStore.prototype, "items", {
         get: function () {
@@ -1583,8 +1617,17 @@ var FsFilterItemsStore = /** @class */ (function () {
         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();
@@ -1598,8 +1641,6 @@ var FsFilterItemsStore = /** @class */ (function () {
         this._itemsValuesLoaded = false;
         if (Array.isArray(items)) {
             this._createItems(items);
-            this.updateVisibleItems();
-            this._setKeywordItem();
         }
     };
     FsFilterItemsStore.prototype.filtersClear = function () {
@@ -1638,6 +1679,25 @@ var FsFilterItemsStore = /** @class */ (function () {
             .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) {
+            forkJoin(pendingItems
+                .map(function (item) { return item.loadDefaultValue(); }))
+                .pipe(finalize(function () {
+                _this._ready$.next(true);
+            }), takeUntil(this._destroy$))
+                .subscribe();
+        }
+        else {
+            this._ready$.next(true);
+        }
+    };
     FsFilterItemsStore.prototype.getSort = function () {
         var sortBy = this.getSortByValue();
         sortBy = sortBy === '__all' ? null : sortBy;
@@ -1694,6 +1754,7 @@ var FsFilterItemsStore = /** @class */ (function () {
             item.initValues(p[item.name]);
         });
         this._createSortingItems(p);
+        this.loadAsyncDefaults();
         this._subscribeToItemsChanges();
     };
     FsFilterItemsStore.prototype.updateItemsWithValues = function (values) {
@@ -1782,6 +1843,15 @@ var FsFilterItemsStore = /** @class */ (function () {
             });
         }
     };
+    FsFilterItemsStore.prototype._lazyInit = function () {
+        var _this = this;
+        this.ready$
+            .pipe(filter$1(function (state) { return state; }), 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) {
@@ -2391,8 +2461,10 @@ var ExternalParamsController = /** @class */ (function () {
         this._initSavedFilters();
         this._pending$.next(true);
         if (this._savedFilters.enabled) {
-            this._savedFilters
-                .load()
+            combineLatest([
+                this._itemsStore.ready$,
+                this._savedFilters.load(),
+            ])
                 .pipe(takeUntil(this._destroy$))
                 .subscribe(function () {
                 _this._savedFilters.updateActiveFilter();
@@ -2402,8 +2474,12 @@ var ExternalParamsController = /** @class */ (function () {
             });
         }
         else {
-            this._initItemsValues();
-            this._pending$.next(false);
+            this._itemsStore.ready$
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this._initItemsValues();
+                _this._pending$.next(false);
+            });
         }
         this._listenItemsChange();
     };
@@ -3239,6 +3315,13 @@ var FilterComponent = /** @class */ (function () {
         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();
@@ -3303,21 +3386,6 @@ var FilterComponent = /** @class */ (function () {
                 _this.focus();
             }
         });
-        if (this.config.init) {
-            if (this._externalParams.pending) {
-                this._externalParams
-                    .pending$
-                    .pipe(filter$1(function (pending) {
-                    return !pending;
-                }), takeUntil(this._destroy$))
-                    .subscribe(function () {
-                    _this.init();
-                });
-            }
-            else {
-                this.init();
-            }
-        }
         this._listenInternalItemsChange();
         this._initOverlay();
     };
@@ -3718,10 +3786,18 @@ var FilterComponent = /** @class */ (function () {
     // 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(filter$1(function (value) { return !value; }), takeUntil(this._destroy$))
+        combineLatest([
+            this._externalParams.pending$,
+            this.itemsReady$,
+        ])
+            .pipe(filter$1(function (_a) {
+            var _b = __read(_a, 2), pendingParams = _b[0], itemsReady = _b[1];
+            return !pendingParams && itemsReady;
+        }), takeUntil(this._destroy$))
             .subscribe(function () {
+            if (_this.config.init) {
+                _this.init();
+            }
             _this.ready.emit();
         });
     };
@@ -3797,7 +3873,7 @@ var FilterComponent = /** @class */ (function () {
     FilterComponent = __decorate([
         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: ViewEncapsulation.None,
             providers: [
                 FsFilterOverlayService,