@firestitch/filter 12.10.7 → 12.10.9

package/app/fs-filter.module.d.ts

@@ -51,14 +51,13 @@ import * as i47 from "@firestitch/autocomplete";
 import * as i48 from "@firestitch/autocomplete-chips";
 import * as i49 from "@firestitch/scroll";
 import * as i50 from "@angular/cdk/portal";
-import * as i51 from "@firestitch/mask";
-import * as i52 from "@firestitch/menu";
-import * as i53 from "@firestitch/skeleton";
-import * as i54 from "@firestitch/form";
-import * as i55 from "@firestitch/file";
+import * as i51 from "@firestitch/menu";
+import * as i52 from "@firestitch/skeleton";
+import * as i53 from "@firestitch/form";
+import * as i54 from "@firestitch/file";
 export declare class FsFilterModule {
     static forRoot(config?: FilterConfig): ModuleWithProviders<FsFilterModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FsFilterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FsFilterModule, [typeof i1.BaseItemComponent, typeof i2.FilterComponent, typeof i3.FilterItemComponent, typeof i4.FsFilterChipsComponent, typeof i5.SelectComponent, typeof i6.SelectGroupsComponent, typeof i7.SelectSimpleComponent, typeof i8.SelectMultipleComponent, typeof i9.ChipsComponent, typeof i10.TextComponent, typeof i11.WeekComponent, typeof i12.RangeComponent, typeof i13.AutocompleteComponent, typeof i14.AutocompletechipsComponent, typeof i15.DateComponent, typeof i16.DateRangeComponent, typeof i17.CheckboxComponent, typeof i18.FilterDrawerComponent, typeof i19.SelectBackdropComponent, typeof i20.FsFilterChipComponent, typeof i21.FsFilterChipContentComponent, typeof i22.FsFilterDrawerActionsComponent, typeof i23.FsFilterSavedFilterEditComponent, typeof i24.FsSavedFiltersMenuComponent, typeof i25.FsFilterActionsComponent, typeof i26.FsFilterActionButtonComponent, typeof i27.FsFilterActionKebabActionsComponent, typeof i28.FilterStatusBarDirective, typeof i29.FocusToItemDirective, typeof i30.FsFilterIsolateValues], [typeof i31.CommonModule, typeof i32.RouterModule, typeof i33.FormsModule, typeof i33.ReactiveFormsModule, typeof i34.MatIconModule, typeof i35.MatInputModule, typeof i36.MatSelectModule, typeof i37.MatChipsModule, typeof i38.MatCheckboxModule, typeof i39.MatAutocompleteModule, typeof i40.MatButtonModule, typeof i41.MatDialogModule, typeof i42.FsChipModule, typeof i43.FsCommonModule, typeof i44.FsStoreModule, typeof i45.FsDatePickerModule, typeof i46.FsLabelModule, typeof i47.FsAutocompleteModule, typeof i48.FsAutocompleteChipsModule, typeof i49.FsScrollModule, typeof i50.PortalModule, typeof i51.FsMaskModule, typeof i52.FsMenuModule, typeof i53.FsSkeletonModule, typeof i54.FsFormModule, typeof i55.FsFileModule], [typeof i2.FilterComponent, typeof i28.FilterStatusBarDirective, typeof i24.FsSavedFiltersMenuComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FsFilterModule, [typeof i1.BaseItemComponent, typeof i2.FilterComponent, typeof i3.FilterItemComponent, typeof i4.FsFilterChipsComponent, typeof i5.SelectComponent, typeof i6.SelectGroupsComponent, typeof i7.SelectSimpleComponent, typeof i8.SelectMultipleComponent, typeof i9.ChipsComponent, typeof i10.TextComponent, typeof i11.WeekComponent, typeof i12.RangeComponent, typeof i13.AutocompleteComponent, typeof i14.AutocompletechipsComponent, typeof i15.DateComponent, typeof i16.DateRangeComponent, typeof i17.CheckboxComponent, typeof i18.FilterDrawerComponent, typeof i19.SelectBackdropComponent, typeof i20.FsFilterChipComponent, typeof i21.FsFilterChipContentComponent, typeof i22.FsFilterDrawerActionsComponent, typeof i23.FsFilterSavedFilterEditComponent, typeof i24.FsSavedFiltersMenuComponent, typeof i25.FsFilterActionsComponent, typeof i26.FsFilterActionButtonComponent, typeof i27.FsFilterActionKebabActionsComponent, typeof i28.FilterStatusBarDirective, typeof i29.FocusToItemDirective, typeof i30.FsFilterIsolateValues], [typeof i31.CommonModule, typeof i32.RouterModule, typeof i33.FormsModule, typeof i33.ReactiveFormsModule, typeof i34.MatIconModule, typeof i35.MatInputModule, typeof i36.MatSelectModule, typeof i37.MatChipsModule, typeof i38.MatCheckboxModule, typeof i39.MatAutocompleteModule, typeof i40.MatButtonModule, typeof i41.MatDialogModule, typeof i42.FsChipModule, typeof i43.FsCommonModule, typeof i44.FsStoreModule, typeof i45.FsDatePickerModule, typeof i46.FsLabelModule, typeof i47.FsAutocompleteModule, typeof i48.FsAutocompleteChipsModule, typeof i49.FsScrollModule, typeof i50.PortalModule, typeof i51.FsMenuModule, typeof i52.FsSkeletonModule, typeof i53.FsFormModule, typeof i54.FsFileModule], [typeof i2.FilterComponent, typeof i28.FilterStatusBarDirective, typeof i24.FsSavedFiltersMenuComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FsFilterModule>;
 }

package/bundles/firestitch-filter.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('lodash-es'), require('@firestitch/date'), require('date-fns'), require('@firestitch/datepicker'), require('@firestitch/store'), require('@angular/router'), require('@angular/common'), require('@angular/material/dialog'), require('@firestitch/drawer'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/forms'), require('@firestitch/form'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/cdk/portal'), require('@firestitch/chip'), require('@firestitch/label'), require('@firestitch/scroll'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/mask'), require('@firestitch/menu'), require('@firestitch/skeleton'), require('@firestitch/file'), require('@angular/cdk/overlay'), require('@angular/cdk/layout')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/filter', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@firestitch/common', 'lodash-es', '@firestitch/date', 'date-fns', '@firestitch/datepicker', '@firestitch/store', '@angular/router', '@angular/common', '@angular/material/dialog', '@firestitch/drawer', '@angular/material/form-field', '@angular/material/select', '@angular/material/core', '@angular/material/button', '@angular/forms', '@firestitch/form', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/icon', '@angular/cdk/portal', '@firestitch/chip', '@firestitch/label', '@firestitch/scroll', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/mask', '@firestitch/menu', '@firestitch/skeleton', '@firestitch/file', '@angular/cdk/overlay', '@angular/cdk/layout'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.filter = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.common, global.lodashEs, global.date, global.dateFns, global.i3, global.i1, global.ng.router, global.ng.common, global.ng.material.dialog, global.i6, global.ng.material.formField, global.ng.material.select, global.ng.material.core, global.ng.material.button, global.ng.forms, global.i7, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.ng.cdk.portal, global.i2$1, global.i1$5, global.scroll, global.i4$1, global.i5, global.i5$1, global.i3$4, global.i6$1, global.i4$3, global.ng.cdk.overlay, global.ng.cdk.layout));
-})(this, (function (exports, i0, rxjs, operators, common, lodashEs, date, dateFns, i3, i1, i1$1, i3$1, i1$2, i6, i1$3, i2, i3$2, i1$4, i4, i7, i3$3, autocomplete, i4$2, chips, i2$2, portal, i2$1, i1$5, scroll, i4$1, i5, i5$1, i3$4, i6$1, i4$3, i1$6, i1$7) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('lodash-es'), require('@firestitch/date'), require('date-fns'), require('@firestitch/datepicker'), require('@firestitch/store'), require('@angular/router'), require('@angular/common'), require('@angular/material/dialog'), require('@firestitch/drawer'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/forms'), require('@firestitch/form'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/cdk/portal'), require('@firestitch/chip'), require('@firestitch/label'), require('@firestitch/scroll'), require('@firestitch/autocomplete'), require('@firestitch/autocomplete-chips'), require('@firestitch/menu'), require('@firestitch/skeleton'), require('@firestitch/file'), require('@angular/cdk/overlay'), require('@angular/cdk/layout')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/filter', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@firestitch/common', 'lodash-es', '@firestitch/date', 'date-fns', '@firestitch/datepicker', '@firestitch/store', '@angular/router', '@angular/common', '@angular/material/dialog', '@firestitch/drawer', '@angular/material/form-field', '@angular/material/select', '@angular/material/core', '@angular/material/button', '@angular/forms', '@firestitch/form', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/icon', '@angular/cdk/portal', '@firestitch/chip', '@firestitch/label', '@firestitch/scroll', '@firestitch/autocomplete', '@firestitch/autocomplete-chips', '@firestitch/menu', '@firestitch/skeleton', '@firestitch/file', '@angular/cdk/overlay', '@angular/cdk/layout'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.filter = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.common, global.lodashEs, global.date, global.dateFns, global.i3, global.i1, global.ng.router, global.ng.common, global.ng.material.dialog, global.i6, global.ng.material.formField, global.ng.material.select, global.ng.material.core, global.ng.material.button, global.ng.forms, global.i7, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.icon, global.ng.cdk.portal, global.i2$1, global.i1$5, global.scroll, global.i4$1, global.i5, global.i3$4, global.i6$1, global.i4$3, global.ng.cdk.overlay, global.ng.cdk.layout));
+})(this, (function (exports, i0, rxjs, operators, common, lodashEs, date, dateFns, i3, i1, i1$1, i3$1, i1$2, i6, i1$3, i2, i3$2, i1$4, i4, i7, i3$3, autocomplete, i4$2, chips, i2$2, portal, i2$1, i1$5, scroll, i4$1, i5, i3$4, i6$1, i4$3, i1$6, i1$7) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -42,7 +42,6 @@
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i3__namespace$4 = /*#__PURE__*/_interopNamespace(i3$4);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i4__namespace$3 = /*#__PURE__*/_interopNamespace(i4$3);
@@ -3597,7 +3596,7 @@
         return RangeComponent;
     }(BaseItemComponent));
     RangeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RangeComponent, deps: [{ token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"fs-row form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>{{item.label[0]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'from'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.min\"\n           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #from\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>{{item.label[1]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'to'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.max\"\n           fsMaskNumber\n           [scale]=\"item.options?.scale || 2\"\n           #to\n    >\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</div>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.FsMaskNumberDirective, selector: "[fsMaskNumber]" }, { 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: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    RangeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"fs-row form-field\">\n  <mat-form-field class=\"filter-range-min\">\n    <mat-label>{{item.label[0]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'from'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.min\"\n           #from>\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n\n  <mat-form-field class=\"filter-range-max\">\n    <mat-label>{{item.label[1]}}</mat-label>\n    <span matPrefix *ngIf=\"item.prefix\" [innerHtml]=\"item.prefix\"></span>\n    <input matInput\n           [fsFilterFocusTrigger]=\"item\"\n           [focusTargetType]=\"'to'\"\n           type=\"text\"\n           inputmode=\"decimal\"\n           [(ngModel)]=\"item.model.max\"\n           #to>\n    <span matSuffix *ngIf=\"item.suffix\" [innerHtml]=\"item.suffix\"></span>\n  </mat-form-field>\n</div>\n", components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1__namespace$3.MatLabel, selector: "mat-label" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RangeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5416,7 +5415,7 @@
             FsFilterItemsStore,
             SavedFiltersController,
             ActionsController,
-        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: i3$3.MatInput }], ngImport: i0__namespace, template: "<ng-container>\n  <div class=\"filter-container\">\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\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            <ng-container *ngIf=\"searchText.value && showFilterInput && config.clear\">\n              <div matSuffix>\n                <a\n                  mat-icon-button                \n                  (click)=\"clearSearchText($event)\"\n                  class=\"clear\">\n                  <mat-icon>clear</mat-icon>\n                </a>\n              </div>\n            </ng-container>\n            <div matSuffix>\n              <a \n                  mat-icon-button\n                  (click)=\"reload($event)\"\n                  class=\"reload\"\n                  *ngIf=\"config.reload\">\n                <mat-icon>refresh</mat-icon>\n              </a>\n            </div>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\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  </div>\n  <div class=\"filter-status-container\">\n    <div class=\"filter-status\" *ngIf=\"statusBar\">\n      <ng-container *ngTemplateOutlet=\"statusBar\"></ng-container>\n    </div>\n    <fs-filter-chips\n      *ngIf=\"config.chips && hasFilterChips$ | async\"\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </div>\n</ng-container>", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword){display:flex;flex-direction:row-reverse}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;margin:4px 0}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-status-container .filter-status+fs-filter-chips{margin-top:4px}.fs-filter .filter-status-container fs-filter-chips{display:block}.fs-filter .filter-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative}.fs-filter .filter-container form{width:100%;height:100%}.fs-filter .filter-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-container .filter-keyword .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon{display:flex}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix div[matsuffix]+div[matsuffix]{margin-left:2px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon{font-size:22px}.fs-filter .filter-container .filter-keyword .mat-form-field-infix{width:auto}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter button.reload{margin-left:-40px;right:-9px}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i1__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true, read: i0.TemplateRef }], viewQueries: [{ propertyName: "searchTextInput", first: true, predicate: ["searchTextInput"], descendants: true }, { propertyName: "searchTextMatInput", first: true, predicate: ["searchTextInput"], descendants: true, read: i3$3.MatInput }], ngImport: i0__namespace, template: "<ng-container>\n  <div class=\"filter-container\">\n    <ng-container *ngIf=\"hasKeyword\">\n      <div class=\"filter-keyword\">\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            <div matSuffix *ngIf=\"searchText.value && showFilterInput && config.clear\">\n              <a\n                mat-icon-button                \n                (click)=\"clearSearchText($event)\"\n                class=\"clear\">\n                <mat-icon>clear</mat-icon>\n              </a>\n            </div>\n            <div matSuffix>\n              <a \n                  mat-icon-button\n                  (click)=\"reload($event)\"\n                  class=\"reload\"\n                  *ngIf=\"config.reload\">\n                <mat-icon>refresh</mat-icon>\n              </a>\n            </div>\n          </mat-form-field>\n        </form>\n      </div>\n    </ng-container>\n\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  </div>\n  <div class=\"filter-status-container\">\n    <div class=\"filter-status\" *ngIf=\"statusBar\">\n      <ng-container *ngTemplateOutlet=\"statusBar\"></ng-container>\n    </div>\n    <fs-filter-chips\n      *ngIf=\"config.chips && hasFilterChips$ | async\"\n      class=\"filter-chips\"\n      [filters]=\"items\">\n    </fs-filter-chips>\n  </div>\n</ng-container>", styles: ["fs-filter{display:block}.fs-filter{margin-bottom:20px;display:block}.fs-filter:not(.has-keyword){display:flex;flex-direction:row-reverse}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;margin:4px 0}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-status-container .filter-status+fs-filter-chips{margin-top:4px}.fs-filter .filter-status-container fs-filter-chips{display:block}.fs-filter .filter-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative}.fs-filter .filter-container form{width:100%;height:100%}.fs-filter .filter-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;flex:1}.fs-filter .filter-container .filter-keyword .mat-form-field{width:100%;height:100%;font-size:103%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-underline{bottom:auto}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-infix{border-top:0}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-wrapper{padding-bottom:0;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field .mat-form-field-flex{align-items:center;height:100%}.fs-filter .filter-container .filter-keyword .mat-form-field-prefix .mat-icon{font-size:22px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix{display:flex;margin-top:3px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-container .filter-keyword .mat-form-field-suffix .mat-icon{font-size:22px}.fs-filter .filter-container .filter-keyword .mat-form-field-infix{width:auto}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter button.reload{margin-left:-40px;right:-9px}@media screen and (min-width: 599px){.filter-actions{margin-left:10px}.filters-button+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.filter-actions{margin-left:5px}.filter-actions .filters-button{font-size:0;padding:0;min-width:unset;width:36px;height:36px;border-radius:50%;box-shadow:unset!important}}@media screen and (min-width: 1200px){body.fs-filter-open{margin-right:350px}.fs-filter-backdrop{display:none}}body.fs-filter-open::-webkit-scrollbar{width:0;background:transparent}\n"], components: [{ type: i1__namespace$3.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1__namespace$4.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i1__namespace$4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatPrefix, selector: "[matPrefix]" }, { type: i3__namespace$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1__namespace$3.MatSuffix, selector: "[matSuffix]" }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FilterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5622,7 +5621,6 @@
             i5.FsAutocompleteChipsModule,
             scroll.FsScrollModule,
             portal.PortalModule,
-            i5$1.FsMaskModule,
             i3$4.FsMenuModule,
             i6$1.FsSkeletonModule,
             i7.FsFormModule,
@@ -5653,7 +5651,6 @@
                 i5.FsAutocompleteChipsModule,
                 scroll.FsScrollModule,
                 portal.PortalModule,
-                i5$1.FsMaskModule,
                 i3$4.FsMenuModule,
                 i6$1.FsSkeletonModule,
                 i7.FsFormModule,
@@ -5684,7 +5681,6 @@
                             i5.FsAutocompleteChipsModule,
                             scroll.FsScrollModule,
                             portal.PortalModule,
-                            i5$1.FsMaskModule,
                             i3$4.FsMenuModule,
                             i6$1.FsSkeletonModule,
                             i7.FsFormModule,