@firestitch/filter 13.1.0 → 13.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/components/filter/filter.component.d.ts +2 -2
- package/app/fs-filter.module.d.ts +18 -17
- package/app/interfaces/config.interface.d.ts +2 -2
- package/app/interfaces/index.d.ts +6 -0
- package/app/models/filter-config.d.ts +2 -2
- package/esm2020/app/components/filter/filter.component.mjs +23 -25
- package/esm2020/app/fs-filter.module.mjs +5 -1
- package/esm2020/app/interfaces/config.interface.mjs +1 -1
- package/esm2020/app/interfaces/index.mjs +7 -0
- package/esm2020/app/models/filter-config.mjs +1 -1
- package/esm2020/public_api.mjs +1 -2
- package/fesm2015/firestitch-filter.mjs +22 -22
- package/fesm2015/firestitch-filter.mjs.map +1 -1
- package/fesm2020/firestitch-filter.mjs +22 -22
- package/fesm2020/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, Pipe, ViewChild, HostListener, ElementRef,
|
|
2
|
+
import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, Pipe, ViewChild, HostListener, ElementRef, ContentChild, HostBinding, NgModule } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, fromEvent, merge, interval } from 'rxjs';
|
|
4
4
|
import { tap, finalize, take, takeUntil, debounceTime, filter as filter$1, distinctUntilChanged, switchMap, mapTo, startWith, map, delay, skip } from 'rxjs/operators';
|
|
5
5
|
import { filter, isArrayEqual, list, isEmpty, getNormalizedPath, remove, FsCommonModule } from '@firestitch/common';
|
|
@@ -36,7 +36,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
|
36
36
|
import { MatChipsModule } from '@angular/material/chips';
|
|
37
37
|
import * as i2$2 from '@angular/material/icon';
|
|
38
38
|
import { MatIconModule } from '@angular/material/icon';
|
|
39
|
-
import * as
|
|
39
|
+
import * as i11 from '@angular/material/slide-toggle';
|
|
40
|
+
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
40
41
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
41
42
|
import * as i4$1 from '@firestitch/autocomplete';
|
|
42
43
|
import { FsAutocompleteModule } from '@firestitch/autocomplete';
|
|
@@ -3695,6 +3696,7 @@ class FilterComponent {
|
|
|
3695
3696
|
this.fsFilterClass = true;
|
|
3696
3697
|
this.searchPlaceholder = 'Search';
|
|
3697
3698
|
this.keyword = '';
|
|
3699
|
+
this.autoReload = true;
|
|
3698
3700
|
this._config = null;
|
|
3699
3701
|
this._filtersBtnVisible$ = new BehaviorSubject(true);
|
|
3700
3702
|
this._keywordVisible$ = new BehaviorSubject(true);
|
|
@@ -3971,24 +3973,21 @@ class FilterComponent {
|
|
|
3971
3973
|
search(event) {
|
|
3972
3974
|
this.changeVisibilityClick(false, event);
|
|
3973
3975
|
}
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
3976
|
+
reload(event = null) {
|
|
3977
|
+
if (event) {
|
|
3978
|
+
event.preventDefault();
|
|
3979
|
+
event.stopPropagation();
|
|
3980
|
+
}
|
|
3981
|
+
const data = this._filterItems.valuesAsQuery();
|
|
3982
|
+
const el = this.reloadEl?.nativeElement;
|
|
3977
3983
|
if (el) {
|
|
3978
|
-
el.style.transition = 'all 0.75s 0.
|
|
3984
|
+
el.style.transition = 'all 0.75s 0.0s';
|
|
3979
3985
|
el.style.transform = 'rotate(360deg)';
|
|
3980
3986
|
setTimeout(() => {
|
|
3981
3987
|
el.style.transition = null;
|
|
3982
3988
|
el.style.transform = null;
|
|
3983
3989
|
}, 1000);
|
|
3984
3990
|
}
|
|
3985
|
-
}
|
|
3986
|
-
reload(event = null) {
|
|
3987
|
-
if (event) {
|
|
3988
|
-
event.preventDefault();
|
|
3989
|
-
event.stopPropagation();
|
|
3990
|
-
}
|
|
3991
|
-
const data = this._filterItems.valuesAsQuery();
|
|
3992
3991
|
if (this.config.reload) {
|
|
3993
3992
|
this.config.reload(data, this._filterItems.getSort());
|
|
3994
3993
|
}
|
|
@@ -4123,9 +4122,9 @@ class FilterComponent {
|
|
|
4123
4122
|
_initAutoReload() {
|
|
4124
4123
|
if (this.config.autoReload) {
|
|
4125
4124
|
interval(this.config.autoReload.seconds * 1000)
|
|
4126
|
-
.pipe(takeUntil(this._destroy$))
|
|
4125
|
+
.pipe(filter$1(() => this.autoReload), takeUntil(this._destroy$))
|
|
4127
4126
|
.subscribe(() => {
|
|
4128
|
-
this.
|
|
4127
|
+
this.reload(null);
|
|
4129
4128
|
});
|
|
4130
4129
|
}
|
|
4131
4130
|
}
|
|
@@ -4188,10 +4187,10 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
4188
4187
|
FsFilterItemsStore,
|
|
4189
4188
|
SavedFiltersController,
|
|
4190
4189
|
ActionsController,
|
|
4191
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "
|
|
4190
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n [floatLabel]=\"'never'\"\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix>\n <mat-icon matPrefix>search</mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (ngModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #filterActions>\n <div class=\"filter-actions\">\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 #filterToolbar>\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-button\n class=\"filters-button\"\n [ngClass]=\"{\n 'mat-raised-button': config.button.style === 'raised' && config.button.label,\n 'mat-flat-button': config.button.style === 'flat' && config.button.label,\n 'mat-stroked-button': config.button.style === 'stroked' && config.button.label,\n 'mat-button': config.button.style === 'basic' && config.button.label,\n 'mat-icon-button': config.button.style === 'icon' || !config.button.label\n }\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n {{ config.button.label }}\n </a>\n </ng-container>\n </ng-container> \n <ng-container *ngIf=\"config.reload\">\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"reload\">\n <mat-icon #reloadEl>refresh</mat-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"config.autoReload\">\n <mat-slide-toggle \n name=\"autoReload\" \n class=\"auto-reload\"\n [(ngModel)]=\"autoReload\">\n Auto refresh\n </mat-slide-toggle>\n </ng-container>\n </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-wrapper{margin-bottom:0}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix .mat-icon{font-size:22px;color:#626262}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-infix{width:250px}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix,.filter-inner-container .filter-keyword mat-form-field .mat-form-field-suffix{top:.45em}.filter-inner-container .filter-keyword .mat-form-field-suffix{display:flex}.filter-inner-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .reload{margin-left:-6px}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@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){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate(12px)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"], components: [{ type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { type: i1$3.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: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i7.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4192
4191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
4193
4192
|
type: Component,
|
|
4194
|
-
args: [{ selector: 'fs-filter',
|
|
4193
|
+
args: [{ selector: 'fs-filter', providers: [
|
|
4195
4194
|
FsFilterOverlayService,
|
|
4196
4195
|
ExternalParamsController,
|
|
4197
4196
|
PersistanceParamsController,
|
|
@@ -4200,7 +4199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4200
4199
|
FsFilterItemsStore,
|
|
4201
4200
|
SavedFiltersController,
|
|
4202
4201
|
ActionsController,
|
|
4203
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n [floatLabel]=\"'never'\"\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix>\n <mat-icon matPrefix>search</mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (ngModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #filterActions>\n <div class=\"filter-actions\">\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 #filterToolbar>\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-button\n class=\"filters-button\"\n [ngClass]=\"{\n 'mat-raised-button': config.button.style === 'raised' && config.button.label,\n 'mat-flat-button': config.button.style === 'flat' && config.button.label,\n 'mat-stroked-button': config.button.style === 'stroked' && config.button.label,\n 'mat-button': config.button.style === 'basic' && config.button.label,\n 'mat-icon-button': config.button.style === 'icon' || !config.button.label\n }\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n {{ config.button.label }}\n </a>\n </ng-container>\n </ng-container> \n <ng-container *ngIf=\"config.
|
|
4202
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n [floatLabel]=\"'never'\"\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix>\n <mat-icon matPrefix>search</mat-icon>\n </span>\n <input\n #keywordMatInput\n matInput\n [(ngModel)]=\"keyword\"\n (ngModelChange)=\"keywordChange($event)\"\n name=\"filter-input\"\n [fsClear]=\"true\"\n [placeholder]=\"searchPlaceholder\">\n </mat-form-field>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #filterActions>\n <div class=\"filter-actions\">\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 #filterToolbar>\n <div class=\"filter-toobar\">\n <ng-container *ngIf=\"filtersBtnVisible$ | async\">\n <ng-container *ngIf=\"hasVisibleItemOrSorting\">\n <a\n mat-button\n class=\"filters-button\"\n [ngClass]=\"{\n 'mat-raised-button': config.button.style === 'raised' && config.button.label,\n 'mat-flat-button': config.button.style === 'flat' && config.button.label,\n 'mat-stroked-button': config.button.style === 'stroked' && config.button.label,\n 'mat-button': config.button.style === 'basic' && config.button.label,\n 'mat-icon-button': config.button.style === 'icon' || !config.button.label\n }\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n <mat-icon *ngIf=\"config.button.icon\">{{config.button.icon}}</mat-icon>\n {{ config.button.label }}\n </a>\n </ng-container>\n </ng-container> \n <ng-container *ngIf=\"config.reload\">\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"reload\">\n <mat-icon #reloadEl>refresh</mat-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"config.autoReload\">\n <mat-slide-toggle \n name=\"autoReload\" \n class=\"auto-reload\"\n [(ngModel)]=\"autoReload\">\n Auto refresh\n </mat-slide-toggle>\n </ng-container>\n </div>\n</ng-template>\n", styles: [":host{margin-bottom:20px;display:block}:host.has-keyword .filter-status-container.has-status{margin-top:4px}:host:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}:host:not(.has-keyword) .filter-inner-container{display:flex}:host:not(.has-keyword) .filter-toobar{justify-content:flex-end}.filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.filter-container{width:100%}.filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-wrapper{margin-bottom:0}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix .mat-icon{font-size:22px;color:#626262}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-infix{width:250px}.filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix,.filter-inner-container .filter-keyword mat-form-field .mat-form-field-suffix{top:.45em}.filter-inner-container .filter-keyword .mat-form-field-suffix{display:flex}.filter-inner-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .reload{margin-left:-6px}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin-top:4px;display:block}@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){html.fs-filter-open body{margin-right:350px}.fs-filter-backdrop{display:none}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate(12px)}:host ::ng-deep .auto-reload:not(.mat-checked) .mat-slide-toggle-content{color:#ccc}:host ::ng-deep .auto-reload .mat-slide-toggle-thumb,:host ::ng-deep .auto-reload .mat-slide-toggle-thumb-container{height:15px;width:15px}:host ::ng-deep .auto-reload .mat-slide-toggle-content{font-size:90%}:host ::ng-deep .auto-reload .mat-slide-toggle-bar{width:26px;height:10px;border-radius:10px}\n"] }]
|
|
4204
4203
|
}], ctorParameters: function () { return [{ type: FsFilterConfig, decorators: [{
|
|
4205
4204
|
type: Optional
|
|
4206
4205
|
}, {
|
|
@@ -4228,9 +4227,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4228
4227
|
}], keywordMatInput: [{
|
|
4229
4228
|
type: ViewChild,
|
|
4230
4229
|
args: ['keywordMatInput', { read: MatInput }]
|
|
4231
|
-
}],
|
|
4230
|
+
}], reloadEl: [{
|
|
4232
4231
|
type: ViewChild,
|
|
4233
|
-
args: ['
|
|
4232
|
+
args: ['reloadEl', { read: ElementRef }]
|
|
4234
4233
|
}], showFilterMenu: [{
|
|
4235
4234
|
type: HostBinding,
|
|
4236
4235
|
args: ['class.filters-open']
|
|
@@ -4358,6 +4357,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
4358
4357
|
MatButtonModule,
|
|
4359
4358
|
MatDialogModule,
|
|
4360
4359
|
MatTooltipModule,
|
|
4360
|
+
MatSlideToggleModule,
|
|
4361
4361
|
FsChipModule,
|
|
4362
4362
|
FsCommonModule,
|
|
4363
4363
|
FsStoreModule,
|
|
@@ -4392,6 +4392,7 @@ FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
4392
4392
|
MatButtonModule,
|
|
4393
4393
|
MatDialogModule,
|
|
4394
4394
|
MatTooltipModule,
|
|
4395
|
+
MatSlideToggleModule,
|
|
4395
4396
|
FsChipModule,
|
|
4396
4397
|
FsCommonModule,
|
|
4397
4398
|
FsStoreModule,
|
|
@@ -4426,6 +4427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4426
4427
|
MatButtonModule,
|
|
4427
4428
|
MatDialogModule,
|
|
4428
4429
|
MatTooltipModule,
|
|
4430
|
+
MatSlideToggleModule,
|
|
4429
4431
|
FsChipModule,
|
|
4430
4432
|
FsCommonModule,
|
|
4431
4433
|
FsStoreModule,
|
|
@@ -4487,8 +4489,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4487
4489
|
}]
|
|
4488
4490
|
}] });
|
|
4489
4491
|
|
|
4490
|
-
// Controllers
|
|
4491
|
-
|
|
4492
4492
|
/**
|
|
4493
4493
|
* Generated bundle index. Do not edit.
|
|
4494
4494
|
*/
|