@firestitch/filter 12.10.0 → 12.10.2

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

@@ -123,6 +123,9 @@ export declare class FilterComponent implements OnInit, AfterViewInit, OnDestroy
     show(): void;
     changeVisibilityClick(value: any, event?: any): void;
     filterInputEvent(event: any): void;
+    get itemValues(): any[];
+    get nonEmptyItemValues(): any[];
+    get hasItemValues(): boolean;
     getItemValue(name: string): any;
     showItem(name: string): void;
     hideItem(name: string): void;

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

@@ -1,13 +1,14 @@
-import { ChangeDetectorRef, DoCheck, KeyValueDiffer, KeyValueDiffers, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, DoCheck, KeyValueDiffer, KeyValueDiffers, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs';
 import { BaseItem } from '../../../models/items/base-item';
 import { IFilterConfigItem } from '../../../interfaces/config.interface';
 import * as i0 from "@angular/core";
-export declare class BaseItemComponent<T extends BaseItem<IFilterConfigItem>> implements DoCheck, OnDestroy {
+export declare class BaseItemComponent<T extends BaseItem<IFilterConfigItem>> implements DoCheck, OnChanges, OnDestroy {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
     set item(value: T);
     inline: boolean;
+    label: string;
     protected _item: T;
     protected _kvDiffer: KeyValueDiffer<string, any>;
     protected _destroy$: Subject<unknown>;
@@ -15,6 +16,7 @@ export declare class BaseItemComponent<T extends BaseItem<IFilterConfigItem>> im
     constructor(_kvDiffers: KeyValueDiffers, _cd: ChangeDetectorRef);
     get item(): T;
     ngDoCheck(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     listenWithDebounce(): void;
     itemChange(): void;

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

@@ -3,11 +3,12 @@ import { BaseItemComponent } from '../base-item/base-item.component';
 import { ItemDateMode } from '../../../enums/item-date-mode.enum';
 import { DateItem } from '../../../models/items/date-item';
 import { DateTimeItem } from '../../../models/items/date-time-item';
+import { PickerViewType } from '../../../enums/picker-view-type.enum';
 import * as i0 from "@angular/core";
 export declare class DateComponent extends BaseItemComponent<DateItem | DateTimeItem> implements OnInit {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
-    viewType: string;
+    viewType: PickerViewType;
     itemDateMode: typeof ItemDateMode;
     showYear: boolean;
     showMonth: boolean;

package/app/components/filters-item/date-range/date-range.component.d.ts

@@ -2,11 +2,12 @@ import { ChangeDetectorRef, KeyValueDiffers, OnInit } from '@angular/core';
 import { BaseItemComponent } from '../base-item/base-item.component';
 import { DateRangeItem } from '../../../models/items/date-range-item';
 import { DateTimeRangeItem } from '../../../models/items/date-time-range-item';
+import { PickerViewType } from '../../../enums/picker-view-type.enum';
 import * as i0 from "@angular/core";
 export declare class DateRangeComponent extends BaseItemComponent<DateRangeItem | DateTimeRangeItem> implements OnInit {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
-    viewType: string;
+    viewType: PickerViewType;
     constructor(_kvDiffers: KeyValueDiffers, _cd: ChangeDetectorRef);
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateRangeComponent, never>;

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

@@ -1,10 +1,34 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { ItemType } from '../../enums/item-type.enum';
 import { BaseItem } from '../../models/items/base-item';
+import { ChipsItem } from '../../models/items/chips-item';
+import { RangeItem } from '../../models/items/range-item';
+import { TextItem } from '../../models/items/text-item';
+import { AutocompleteItem } from '../../models/items/autocomplete-item';
+import { AutocompleteChipsItem } from '../../models/items/autocomplete-chips-item';
+import { DateItem } from '../../models/items/date-item';
+import { DateTimeItem } from '../../models/items/date-time-item';
+import { DateRangeItem } from '../../models/items/date-range-item';
+import { DateTimeRangeItem } from '../../models/items/date-time-range-item';
+import { WeekItem } from '../../models/items/week-item';
+import { CheckboxItem } from '../../models/items/checkbox-item';
+import { BaseSelectItem } from '../../models/items/select/base-select-item';
 import * as i0 from "@angular/core";
 export declare class FilterItemComponent implements OnInit, OnDestroy {
     private _cdRef;
     item: BaseItem<any>;
+    get textItem(): TextItem;
+    get chipsItem(): ChipsItem;
+    get baseSelectItem(): BaseSelectItem;
+    get rangeItem(): RangeItem;
+    get autocompleteItem(): AutocompleteItem;
+    get autocompleteChipsItem(): AutocompleteChipsItem;
+    get dateItem(): DateItem;
+    get dateRangeItem(): DateRangeItem;
+    get dateTimeItem(): DateTimeItem;
+    get dateTimeRangeItem(): DateTimeRangeItem;
+    get weekItem(): WeekItem;
+    get checkboxItem(): CheckboxItem;
     private _destroy$;
     constructor(_cdRef: ChangeDetectorRef);
     ngOnInit(): void;

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

@@ -1,15 +1,22 @@
-import { ChangeDetectorRef, KeyValueDiffers, DoCheck } from '@angular/core';
+import { ChangeDetectorRef, KeyValueDiffers, DoCheck, SimpleChanges } from '@angular/core';
+import { Observable } from 'rxjs';
 import { BaseItemComponent } from '../base-item/base-item.component';
 import { SelectSimpleComponent } from './simple/simple.component';
 import { SelectMultipleComponent } from './multiple/multiple.component';
 import { BaseSelectItem } from '../../../models/items/select/base-select-item';
+import { MultipleSelectItem } from '../../../models/items/select/multiple-select-item';
+import { SimpleSelectItem } from '../../../models/items/select/simple-select-item';
 import * as i0 from "@angular/core";
 export declare class SelectComponent extends BaseItemComponent<BaseSelectItem> implements DoCheck {
     protected _kvDiffers: KeyValueDiffers;
     protected _cd: ChangeDetectorRef;
     selectedItem: SelectSimpleComponent | SelectMultipleComponent;
     allItemsOptionSelected: boolean;
+    get multipleSelectItem(): MultipleSelectItem;
+    get simpleSelectItem(): SimpleSelectItem;
+    values$: Observable<unknown[]>;
     constructor(_kvDiffers: KeyValueDiffers, _cd: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
     ngDoCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "filter-item-select", never, {}, {}, never, never>;

package/app/enums/picker-view-type.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum PickerViewType {
+    Date = "date",
+    DateTime = "datetime",
+    Time = "time",
+    Week = "week",
+    MonthRange = "monthrange"
+}

package/app/models/items/select/simple-select-item.d.ts

@@ -6,6 +6,7 @@ export declare class SimpleSelectItem extends BaseSelectItem {
     getChipsContent(type?: any): string;
     get isChipVisible(): boolean;
     protected _init(): void;
+    protected get isolateOptionNotSelected(): boolean;
     protected _setModel(value: any): void;
     protected _validateModel(): void;
     protected _clearValue(defaultValue?: unknown): void;

package/bundles/firestitch-filter.umd.js

@@ -1021,6 +1021,15 @@
                 this._model = '__all';
             }
         };
+        Object.defineProperty(SimpleSelectItem.prototype, "isolateOptionNotSelected", {
+            get: function () {
+                var modelValue = this.model;
+                var isolate = this.isolate;
+                return isolate && !isolate.enabled && (modelValue === null || modelValue === void 0 ? void 0 : modelValue.length) === 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         SimpleSelectItem.prototype._setModel = function (value) {
             if (value) {
                 if (!isNaN(value)) {
@@ -3099,6 +3108,16 @@
                 }
             }
         };
+        BaseItemComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.item) {
+                if (Array.isArray(this.item.label)) {
+                    this.label = this.item.label[0];
+                }
+                else {
+                    this.label = this.item.label;
+                }
+            }
+        };
         BaseItemComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
             this._destroy$.complete();
@@ -3117,7 +3136,7 @@
         return BaseItemComponent;
     }());
     BaseItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    BaseItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: BaseItemComponent, selector: "base-item", inputs: { item: "item", inline: "inline" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: BaseItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3478,6 +3497,25 @@
             _this.allItemsOptionSelected = false;
             return _this;
         }
+        Object.defineProperty(SelectComponent.prototype, "multipleSelectItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(SelectComponent.prototype, "simpleSelectItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SelectComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.item) {
+                this.values$ = this.item.values$;
+            }
+        };
         SelectComponent.prototype.ngDoCheck = function () {
             if (this._kvDiffer) {
                 var changes = this._kvDiffer.diff(this.item);
@@ -3492,7 +3530,7 @@
         return SelectComponent;
     }(BaseItemComponent));
     SelectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(item.values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SelectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SelectComponent, selector: "filter-item-select", viewQueries: [{ propertyName: "selectedItem", first: true, predicate: ["selectItem"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"(item.loading$ | async) else itemSelect\">\n  <mat-form-field>\n    <mat-label>{{item.label}}</mat-label>\n    <mat-select disabled></mat-select>\n  </mat-form-field>\n</ng-container>\n\n<ng-template #itemSelect>\n  <ng-container *ngIf=\"(values$ | async)?.length\">\n    <ng-container *ngIf=\"item.multiple && !item.children\">\n      <filter-item-select-multiple\n        [item]=\"multipleSelectItem\"\n        #selectItem>\n      </filter-item-select-multiple>\n    </ng-container>\n\n    <ng-container *ngIf=\"!item.multiple && !item.children\">\n      <filter-item-select-simple\n        [item]=\"simpleSelectItem\"\n        #selectItem>\n      </filter-item-select-simple>\n    </ng-container>\n\n    <ng-container *ngIf=\"item.children\">\n      <filter-item-select-groups\n        [item]=\"item\"\n        #selectItem>\n      </filter-item-select-groups>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SelectMultipleComponent, selector: "filter-item-select-multiple", inputs: ["item"] }, { type: SelectSimpleComponent, selector: "filter-item-select-simple", inputs: ["item"] }, { type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: ["item"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatLabel, selector: "mat-label" }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SelectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3592,7 +3630,7 @@
         return AutocompleteComponent;
     }(BaseItemComponent));
     AutocompleteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AutocompleteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"item.label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4__namespace$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    AutocompleteComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompleteComponent, selector: "filter-item-autocomplete", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [displayWith]=\"displayWith\"\n  [(ngModel)]=\"item.model\"\n  [placeholder]=\"label\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [showClear]=\"item.clearAllowed\"\n  name=\"item.name\">\n  <ng-template fsAutocompleteTemplate let-data=\"data\">\n    {{data.name}}\n  </ng-template>\n</fs-autocomplete>\n", components: [{ type: i4__namespace$1.FsAutocompleteComponent, selector: "fs-autocomplete", inputs: ["fetch", "placeholder", "displayWith", "fetchOnFocus", "readonly", "required", "disabled", "hint", "panelWidth", "panelClass", "showClear"], outputs: ["cleared"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4__namespace$1.FsAutocompleteTemplateDirective, selector: "[fsAutocompleteTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompleteComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3640,7 +3678,7 @@
         return AutocompletechipsComponent;
     }(BaseItemComponent));
     AutocompletechipsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AutocompletechipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"item.label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5__namespace.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    AutocompletechipsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AutocompletechipsComponent, selector: "filter-item-autocompletechips", usesInheritance: true, ngImport: i0__namespace, template: "<fs-autocomplete-chips\n  [fsFilterFocusTrigger]=\"item\"\n  [fetch]=\"fetch\"\n  [ngModel]=\"item.model\"\n  (selected)=\"addAutocompleteChipItem($event)\"\n  (removed)=\"removeAutocompleteChipItem($event)\"\n  (clear)=\"clearAutocompleteChipItem()\"\n  (click)=\"clicked()\"\n  [allowText]=\"false\"\n  [fetchOnFocus]=\"item.fetchOnFocus\"\n  [placeholder]=\"label\"\n  [chipImage]=\"item.chipImage\"\n  [chipColor]=\"chipColor\"\n  [chipIconColor]=\"chipIcon\"\n  [chipBackground]=\"chipBackground\"\n  [chipIcon]=\"item.chipIcon\"\n  [chipClass]=\"item.chipClass\"\n  [allowClear]=\"item.clearAllowed\"\n  [removable]=\"item.clearAllowed\"\n  [compareWith]=\"compareItems\"\n  [panelWidth]=\"300\"\n  name=\"model\">\n  <ng-template fsAutocompleteObject let-object=\"object\">\n    {{ object.name }}\n  </ng-template>\n</fs-autocomplete-chips>\n\n<!--<mat-form-field floatLabel=\"auto\">\n  <mat-label>{{item.label}}</mat-label>\n  <mat-chip-list #chipList>\n    <mat-chip *ngFor=\"let item of item.model\"\n              (removed)=\"removeAutocompleteChipItem(item)\">\n      {{ item.name }}\n      <mat-icon matChipRemove>cancel</mat-icon>\n    </mat-chip>\n\n    <input #chipsInput\n           type=\"text\"\n           matInput\n           [(ngModel)]=\"item.selectedValue\"\n           (ngModelChange)=\"onAutocompleteChipsChange(chipsInput)\"\n           [name]=\"item.name\"\n           [matChipInputFor]=\"chipList\"\n           [matAutocomplete]=\"autocompleteChipsInput\">\n  </mat-chip-list>\n\n  <mat-autocomplete #autocompleteChipsInput=\"matAutocomplete\"\n                    (optionSelected)=\"addAutocompleteChipItem( $event)\"\n  >\n    <mat-option *ngFor=\"let item of item.values$ | async\" [value]=\"item\">\n      {{ item.name }}\n    </mat-option>\n  </mat-autocomplete>\n  <mat-placeholder *ngIf=\"inline\">{{ item.label }}</mat-placeholder>\n</mat-form-field>-->\n", components: [{ type: i5__namespace.FsAutocompleteChipsComponent, selector: "fs-autocomplete-chips", inputs: ["fetch", "readonly", "size", "placeholder", "chipImage", "chipBackground", "chipColor", "chipIcon", "chipIconColor", "chipClass", "hint", "allowText", "allowObject", "delay", "validateText", "removable", "allowClear", "color", "background", "orderable", "limit", "initOnClick", "fetchOnFocus", "multiple", "confirm", "panelClass", "compareWith", "disabled", "panelWidth"], outputs: ["selected", "removed", "reordered", "clear"] }], directives: [{ type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsAutocompleteObjectDirective, selector: "[fsAutocompleteObject],[fsAutocompleteChipsTemplate]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AutocompletechipsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3650,13 +3688,22 @@
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.KeyValueDiffers }, { type: i0__namespace.ChangeDetectorRef }]; } });
 
+    var PickerViewType;
+    (function (PickerViewType) {
+        PickerViewType["Date"] = "date";
+        PickerViewType["DateTime"] = "datetime";
+        PickerViewType["Time"] = "time";
+        PickerViewType["Week"] = "week";
+        PickerViewType["MonthRange"] = "monthrange";
+    })(PickerViewType || (PickerViewType = {}));
+
     var DateComponent = /** @class */ (function (_super) {
         __extends(DateComponent, _super);
         function DateComponent(_kvDiffers, _cd) {
             var _this = _super.call(this, _kvDiffers, _cd) || this;
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
-            _this.viewType = 'date';
+            _this.viewType = PickerViewType.Date;
             _this.itemDateMode = exports.ItemDateMode;
             _this.showYear = true;
             _this.showMonth = true;
@@ -3665,10 +3712,10 @@
         }
         DateComponent.prototype.ngOnInit = function () {
             if (this.item.type === exports.ItemType.DateTime) {
-                this.viewType = 'datetime';
+                this.viewType = PickerViewType.DateTime;
             }
             else {
-                this.viewType = 'date';
+                this.viewType = PickerViewType.Date;
             }
             if (this.item.mode === exports.ItemDateMode.ScrollMonthYear) {
                 this.showDay = false;
@@ -3693,15 +3740,15 @@
             var _this = _super.call(this, _kvDiffers, _cd) || this;
             _this._kvDiffers = _kvDiffers;
             _this._cd = _cd;
-            _this.viewType = 'date';
+            _this.viewType = PickerViewType.Date;
             return _this;
         }
         DateRangeComponent.prototype.ngOnInit = function () {
             if (this.item.type === exports.ItemType.DateTimeRange) {
-                this.viewType = 'datetime';
+                this.viewType = PickerViewType.DateTime;
             }
             else {
-                this.viewType = 'date';
+                this.viewType = PickerViewType.Date;
             }
         };
         return DateRangeComponent;
@@ -3767,6 +3814,90 @@
             this._destroy$ = new rxjs.Subject();
             this.itemType = exports.ItemType;
         }
+        Object.defineProperty(FilterItemComponent.prototype, "textItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "chipsItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "baseSelectItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "rangeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "autocompleteItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "autocompleteChipsItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateRangeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateTimeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "dateTimeRangeItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "weekItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterItemComponent.prototype, "checkboxItem", {
+            get: function () {
+                return this.item;
+            },
+            enumerable: false,
+            configurable: true
+        });
         FilterItemComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.item.value$
@@ -3782,7 +3913,7 @@
         return FilterItemComponent;
     }());
     FilterItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"item\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"item\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"item\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"item\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"item\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"item\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"item\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"item\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"item\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"item\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FilterItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterItemComponent, selector: "filter-item", inputs: { item: "item" }, ngImport: i0__namespace, template: "<div class=\"filter filter-{{ item.type }}\">\n\n  <ng-container [ngSwitch]=\"item.type\">\n    <filter-item-text class=\"interface\"\n                      *ngSwitchCase=\"itemType.Text\"\n                      [item]=\"textItem\">\n    </filter-item-text>\n\n    <filter-item-select class=\"interface\"\n                        *ngSwitchCase=\"itemType.Select\"\n                        [item]=\"baseSelectItem\">\n    </filter-item-select>\n\n    <filter-item-chips class=\"interface\"\n                       *ngSwitchCase=\"itemType.Chips\"\n                       [item]=\"chipsItem\">\n    </filter-item-chips>\n\n    <filter-item-range class=\"interface interface-range\"\n                       *ngSwitchCase=\"itemType.Range\"\n                       [item]=\"rangeItem\">\n    </filter-item-range>\n\n    <filter-item-autocomplete class=\"interface\"\n                              *ngSwitchCase=\"itemType.AutoComplete\"\n                              [item]=\"autocompleteItem\">\n    </filter-item-autocomplete>\n\n    <filter-item-autocompletechips class=\"interface\"\n                                   *ngSwitchCase=\"itemType.AutoCompleteChips\"\n                                   [item]=\"autocompleteChipsItem\">\n    </filter-item-autocompletechips>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.Date\"\n                      [item]=\"dateItem\">\n    </filter-item-date>\n\n    <filter-item-date class=\"interface interface-date\"\n                      *ngSwitchCase=\"itemType.DateTime\"\n                      [item]=\"dateTimeItem\">\n    </filter-item-date>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateRange\"\n                            [item]=\"dateRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-date-range class=\"interface interface-date\"\n                            *ngSwitchCase=\"itemType.DateTimeRange\"\n                            [item]=\"dateTimeRangeItem\">\n    </filter-item-date-range>\n\n    <filter-item-week class=\"interface\"\n                      *ngSwitchCase=\"itemType.Week\"\n                      [item]=\"weekItem\">\n    </filter-item-week>\n\n    <filter-item-checkbox class=\"interface interface-checkbox\"\n                          *ngSwitchCase=\"itemType.Checkbox\"\n                          [item]=\"checkboxItem\">\n    </filter-item-checkbox>\n  </ng-container>\n\n</div>\n", components: [{ type: TextComponent, selector: "filter-item-text" }, { type: SelectComponent, selector: "filter-item-select" }, { type: ChipsComponent, selector: "filter-item-chips" }, { type: RangeComponent, selector: "filter-item-range" }, { type: AutocompleteComponent, selector: "filter-item-autocomplete" }, { type: AutocompletechipsComponent, selector: "filter-item-autocompletechips" }, { type: DateComponent, selector: "filter-item-date" }, { type: DateRangeComponent, selector: "filter-item-date-range" }, { type: WeekComponent, selector: "filter-item-week" }, { type: CheckboxComponent, selector: "filter-item-checkbox" }], directives: [{ type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4933,6 +5064,31 @@
                 }
             }
         };
+        Object.defineProperty(FilterComponent.prototype, "itemValues", {
+            get: function () {
+                return this.items
+                    .map(function (item) { return item.model; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterComponent.prototype, "nonEmptyItemValues", {
+            get: function () {
+                return this.items
+                    .filter(function (item) { return item.model !== undefined; })
+                    .map(function (item) { return item.model; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FilterComponent.prototype, "hasItemValues", {
+            get: function () {
+                return this.itemValues
+                    .some(function (item) { return item.model !== undefined; });
+            },
+            enumerable: false,
+            configurable: true
+        });
         FilterComponent.prototype.getItemValue = function (name) {
             var item = this.items
                 .find(function (item) { return item.name === name; });