@firestitch/filter 9.8.4 → 9.8.8

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/config.interface.d.ts

@@ -1,3 +1,4 @@
+import { IFilterConfigBaseItem } from './items/base.interface';
 import { IFilterConfigAutocompleteItem } from './items/autocomplete.interface';
 import { IFilterConfigDateItem } from './items/date.interface';
 import { IFilterConfigDateRangeItem } from './items/date-range.interface';
@@ -31,7 +32,7 @@ export interface FilterConfig {
     savedFilters?: IFilterSavedFiltersConfig;
     actions?: FsFilterAction[];
 }
-export declare type IFilterConfigItem = (IFilterConfigCheckboxItem | IFilterConfigSelectItem | IFilterConfigChipsItem | IFilterConfigTextItem | IFilterConfigDateItem | IFilterConfigAutocompleteItem | IFilterConfigAutocompleteChipsItem | IFilterConfigRangeItem | IFilterConfigDateRangeItem);
+export declare type IFilterConfigItem = (IFilterConfigBaseItem | IFilterConfigCheckboxItem | IFilterConfigSelectItem | IFilterConfigChipsItem | IFilterConfigTextItem | IFilterConfigDateItem | IFilterConfigAutocompleteItem | IFilterConfigAutocompleteChipsItem | IFilterConfigRangeItem | IFilterConfigDateRangeItem);
 export interface SortItem {
     name: string;
     value: string;

package/bundles/firestitch-filter.umd.js

@@ -1051,15 +1051,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 +1196,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,
@@ -3985,7 +3983,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 +4321,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 },