@firestitch/filter 9.8.6 → 9.9.1

package/fesm2015/firestitch-filter.js

@@ -1,8 +1,8 @@
 import { __decorate, __metadata, __param } 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, of, fromEvent, combineLatest, 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 { Model, Alias } from 'tsmodels';
 import { filter, isEmpty, getNormalizedPath, list, remove, FsCommonModule } from '@firestitch/common';
@@ -68,8 +68,9 @@ function findValue(values, value, children) {
 class BaseItem {
     constructor(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();
@@ -126,6 +127,9 @@ class BaseItem {
     get hasPendingValues() {
         return this._pendingValues;
     }
+    get hasPendingDefaultValue() {
+        return this._pendingDefaultValue;
+    }
     get model() {
         return this._model;
     }
@@ -163,6 +167,9 @@ class BaseItem {
     set loading(value) {
         this._loading$.next(value);
     }
+    get _initialized() {
+        return !this._pendingDefaultValue && !this._pendingValues;
+    }
     valueChanged() {
         this._value$.next(this.value);
         if (this.change) {
@@ -187,8 +194,17 @@ class BaseItem {
     get persistanceObject() {
         return this.queryObject;
     }
+    loadDefaultValue() {
+        return this.defaultValueFn()
+            .pipe(tap((value) => {
+            this.defaultValue = value;
+            this._initDefaultModel();
+        }), finalize(() => {
+            this._pendingDefaultValue = false;
+        }));
+    }
     initValues(persistedValue) {
-        this._initialized = false;
+        // this._initialized = false;
         this.persistedValue = persistedValue;
         this._initDefaultModel();
         const isAutocomplete = this.type === ItemType.AutoComplete || this.type === ItemType.AutoCompleteChips;
@@ -201,12 +217,12 @@ class BaseItem {
                 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;
         }
     }
     loadAsyncValues(reload = true) {
@@ -220,7 +236,7 @@ class BaseItem {
                 this.loading = false;
                 this._init();
                 this._validateModel();
-                this._initialized = true;
+                // this._initialized = true;
             });
         }
     }
@@ -250,7 +266,13 @@ class BaseItem {
         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;
@@ -1190,12 +1212,15 @@ let FsFilterItemsStore = class FsFilterItemsStore {
         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();
     }
     get items() {
         return this._items;
@@ -1215,8 +1240,13 @@ let FsFilterItemsStore = class FsFilterItemsStore {
     get itemsChange$() {
         return this._itemsChange$.pipe(debounceTime(30));
     }
+    get ready$() {
+        return this._ready$.asObservable();
+    }
     ngOnDestroy() {
         this.destroyItems();
+        this._destroy$.next();
+        this._destroy$.complete();
     }
     setConfig(config) {
         this._itemsByName.clear();
@@ -1230,8 +1260,6 @@ let FsFilterItemsStore = class FsFilterItemsStore {
         this._itemsValuesLoaded = false;
         if (Array.isArray(items)) {
             this._createItems(items);
-            this.updateVisibleItems();
-            this._setKeywordItem();
         }
     }
     filtersClear() {
@@ -1270,6 +1298,24 @@ let FsFilterItemsStore = class FsFilterItemsStore {
             .filter((item) => item.hasPendingValues)
             .forEach((item) => item.loadAsyncValues());
     }
+    loadAsyncDefaults() {
+        const pendingItems = this.items
+            .filter((item) => {
+            return item.hasPendingDefaultValue
+                && (item.persistedValue === null || item.persistedValue === undefined);
+        });
+        if (pendingItems.length > 0) {
+            forkJoin(pendingItems
+                .map((item) => item.loadDefaultValue()))
+                .pipe(finalize(() => {
+                this._ready$.next(true);
+            }), takeUntil(this._destroy$))
+                .subscribe();
+        }
+        else {
+            this._ready$.next(true);
+        }
+    }
     getSort() {
         let sortBy = this.getSortByValue();
         sortBy = sortBy === '__all' ? null : sortBy;
@@ -1324,6 +1370,7 @@ let FsFilterItemsStore = class FsFilterItemsStore {
             item.initValues(p[item.name]);
         });
         this._createSortingItems(p);
+        this.loadAsyncDefaults();
         this._subscribeToItemsChanges();
     }
     updateItemsWithValues(values) {
@@ -1410,6 +1457,14 @@ let FsFilterItemsStore = class FsFilterItemsStore {
             });
         }
     }
+    _lazyInit() {
+        this.ready$
+            .pipe(filter$1((state) => state), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.updateVisibleItems();
+            this._setKeywordItem();
+        });
+    }
     _createSortingItems(p) {
         var _a;
         if (((_a = this._config.sortValues) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -2654,6 +2709,9 @@ let FilterComponent = class FilterComponent {
     get visibleItems() {
         return this._filterItems.visibleItems;
     }
+    get itemsReady$() {
+        return this._filterItems.ready$;
+    }
     get hasFilterChips$() {
         return this._hasFilterChips$.asObservable();
     }
@@ -2685,21 +2743,6 @@ let FilterComponent = class FilterComponent {
                 this.focus();
             }
         });
-        if (this.config.init) {
-            if (this._externalParams.pending) {
-                this._externalParams
-                    .pending$
-                    .pipe(filter$1((pending) => {
-                    return !pending;
-                }), takeUntil(this._destroy$))
-                    .subscribe(() => {
-                    this.init();
-                });
-            }
-            else {
-                this.init();
-            }
-        }
         this._listenInternalItemsChange();
         this._initOverlay();
     }
@@ -3088,10 +3131,15 @@ let FilterComponent = class FilterComponent {
     }
     // We may need some time to recieve external params and after that ready can be emitted
     _listenWhenFilterReady() {
-        this._externalParams
-            .pending$
-            .pipe(filter$1((value) => !value), takeUntil(this._destroy$))
+        combineLatest([
+            this._externalParams.pending$,
+            this.itemsReady$,
+        ])
+            .pipe(filter$1(([pendingParams, itemsReady]) => !pendingParams && itemsReady), takeUntil(this._destroy$))
             .subscribe(() => {
+            if (this.config.init) {
+                this.init();
+            }
             this.ready.emit();
         });
     }
@@ -3168,7 +3216,7 @@ __decorate([
 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            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,