@firestitch/filter 13.0.14 → 13.1.0
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 +6 -1
- package/app/fs-filter.module.d.ts +18 -17
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/app/interfaces/config.interface.d.ts +4 -0
- package/app/models/filter-config.d.ts +2 -1
- package/esm2020/app/components/actions/actions.component.mjs +3 -3
- package/esm2020/app/components/filter/filter.component.mjs +38 -9
- package/esm2020/app/components/filters-item/base-item/base-item.component.mjs +1 -1
- package/esm2020/app/fs-filter.module.mjs +5 -1
- package/esm2020/app/interfaces/config.interface.mjs +1 -1
- package/esm2020/app/models/action-menu-item.model.mjs +2 -2
- package/esm2020/app/models/filter-config.mjs +2 -1
- package/esm2020/app/services/items-store.service.mjs +5 -3
- package/fesm2015/firestitch-filter.mjs +48 -11
- package/fesm2015/firestitch-filter.mjs.map +1 -1
- package/fesm2020/firestitch-filter.mjs +47 -11
- package/fesm2020/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, Pipe, ViewChild, HostListener, ViewEncapsulation, ContentChild, HostBinding, NgModule } from '@angular/core';
|
|
3
|
-
import { BehaviorSubject, Subject, isObservable, forkJoin, of, timer, combineLatest, fromEvent, merge } from 'rxjs';
|
|
2
|
+
import { Injectable, Optional, Component, ChangeDetectionStrategy, Inject, Input, EventEmitter, Output, InjectionToken, Directive, Self, Pipe, ViewChild, HostListener, ElementRef, ViewEncapsulation, ContentChild, HostBinding, NgModule } from '@angular/core';
|
|
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';
|
|
6
6
|
import { isObject, isFunction, clone, isString, toString, pickBy } from 'lodash-es';
|
|
@@ -36,6 +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 i15 from '@angular/material/tooltip';
|
|
40
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
39
41
|
import * as i4$1 from '@firestitch/autocomplete';
|
|
40
42
|
import { FsAutocompleteModule } from '@firestitch/autocomplete';
|
|
41
43
|
import * as i5 from '@firestitch/autocomplete-chips';
|
|
@@ -1491,6 +1493,7 @@ class FsFilterConfig {
|
|
|
1491
1493
|
this.init = data.init;
|
|
1492
1494
|
this.change = data.change;
|
|
1493
1495
|
this.reload = data.reload;
|
|
1496
|
+
this.autoReload = data.autoReload;
|
|
1494
1497
|
this.clear = data.clear;
|
|
1495
1498
|
this.sortChange = data.sortChange;
|
|
1496
1499
|
this.case = data.case ?? 'camel';
|
|
@@ -1676,7 +1679,8 @@ class FsFilterItemsStore {
|
|
|
1676
1679
|
}
|
|
1677
1680
|
}
|
|
1678
1681
|
values(onlyPresented = false) {
|
|
1679
|
-
return this.items
|
|
1682
|
+
return this.items
|
|
1683
|
+
.reduce((acc, item) => {
|
|
1680
1684
|
const value = item.value;
|
|
1681
1685
|
if (!onlyPresented || value !== null) {
|
|
1682
1686
|
acc[item.name] = value;
|
|
@@ -1686,7 +1690,8 @@ class FsFilterItemsStore {
|
|
|
1686
1690
|
}
|
|
1687
1691
|
valuesAsQuery({ onlyPresented = true, items = null, persisted = false, } = {}) {
|
|
1688
1692
|
const params = {};
|
|
1689
|
-
(items || this.items)
|
|
1693
|
+
(items || this.items)
|
|
1694
|
+
.forEach((filterItem) => {
|
|
1690
1695
|
const values = persisted
|
|
1691
1696
|
? filterItem.persistanceObject
|
|
1692
1697
|
: filterItem.queryObject;
|
|
@@ -2319,7 +2324,7 @@ class ActionMenuItem {
|
|
|
2319
2324
|
return this._disabled$.asObservable();
|
|
2320
2325
|
}
|
|
2321
2326
|
updateVisibility() {
|
|
2322
|
-
const visible =
|
|
2327
|
+
const visible = this._showFn ? this._showFn() : true;
|
|
2323
2328
|
if (!visible || !this.isGroup) {
|
|
2324
2329
|
this._visible$.next(visible);
|
|
2325
2330
|
return;
|
|
@@ -2509,10 +2514,10 @@ class FsFilterActionsComponent {
|
|
|
2509
2514
|
}
|
|
2510
2515
|
}
|
|
2511
2516
|
FsFilterActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2512
|
-
FsFilterActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"
|
|
2517
|
+
FsFilterActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: { kebabActions: "kebabActions", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"(subAction.visible$ | async) === false\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template\n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"(childAction.visible$ | async) === false\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{childAction.label}}\n </ng-template>\n </ng-template>\n </ng-container>\n </fs-menu>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n <mat-select \n class=\"action\"\n [ngClass]=\"{ \n 'mat-stroked-button': action.type === ActionType.Stroked,\n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-flat-button': action.type === ActionType.Flat,\n 'mat-basic-button': action.type === ActionType.Basic\n }\"\n [placeholder]=\"action.label\"\n [(ngModel)]=\"action.value\" \n (ngModelChange)=\"actionChange(action, $event)\"\n fsSelectButton>\n <mat-option \n *ngFor=\"let item of action.values\" \n [value]=\"item.value\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.File\">\n <fs-file\n class=\"action action-button\"\n [accept]=\"action.accept || '*'\"\n [multiple]=\"action.multiple\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (select)=\"action.fileSelected($event)\"\n (error)=\"action.fileError($event)\"\n (clicked)=\"action.click($event)\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n <fs-filter-action-button \n [action]=\"action\">\n </fs-filter-action-button>\n </fs-file>\n </ng-container>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n <fs-filter-action-kebab-actions\n [kebabActions]=\"kebabActions\">\n </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex}.action-button{display:block}.action+.action{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"], components: [{ type: FsFilterActionButtonComponent, selector: "fs-filter-action-button", inputs: ["action"] }, { type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i6$1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "selectPreviews", "error", "clicked", "declined"] }, { type: FsFilterActionKebabActionsComponent, selector: "fs-filter-action-kebab-actions", inputs: ["kebabActions"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.FsPopoverDirective, selector: "[fsPopover]", inputs: ["text", "template", "data", "leaveDelay", "showDelay", "maxWidth", "wrapperClass", "autoShow", "autoClose", "loadingDiameter", "loading", "indication", "position", "theme", "size", "trigger", "enabled"] }, { type: i3$3.FsMenuTriggerDirective, selector: "[fsMenuTriggerFor]", inputs: ["fsMenuTriggerFor"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i10.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "width", "buttonType"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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])" }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2513
2518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterActionsComponent, decorators: [{
|
|
2514
2519
|
type: Component,
|
|
2515
|
-
args: [{ selector: 'fs-filter-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"
|
|
2520
|
+
args: [{ selector: 'fs-filter-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let action of actions\">\n <ng-container [ngSwitch]=\"action.mode\">\n <ng-container *ngSwitchCase=\"ActionMode.Button\">\n <fs-filter-action-button\n [action]=\"action\"\n class=\"action\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.Menu\">\n <fs-filter-action-button\n class=\"action\"\n [action]=\"action\"\n [fsMenuTriggerFor]=\"someRef\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n </fs-filter-action-button>\n\n <fs-menu #someRef class=\"action\">\n <ng-container *ngFor=\"let childAction of action.items\">\n <ng-container *ngIf=\"childAction.isGroup else simpleMenuItem\">\n <fs-menu-group [label]=\"childAction.label\">\n <ng-container *ngFor=\"let subAction of childAction.items\">\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [hidden]=\"(subAction.visible$ | async) === false\"\n (click)=\"subAction.click($event)\">\n <mat-icon *ngIf=\"subAction.icon\">{{subAction.icon}}</mat-icon>\n {{subAction.label}}\n </ng-template>\n </ng-container>\n </fs-menu-group>\n </ng-container>\n <ng-template #simpleMenuItem>\n <ng-template\n fs-menu-item\n [link]=\"childAction.routerLink?.link\"\n [queryParams]=\"childAction.routerLink?.queryParams\"\n [hidden]=\"(childAction.visible$ | async) === false\"\n (click)=\"childAction.click($event);\">\n <mat-icon *ngIf=\"childAction.icon\">{{childAction.icon}}</mat-icon>\n {{childAction.label}}\n </ng-template>\n </ng-template>\n </ng-container>\n </fs-menu>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.SelectButton\">\n <mat-select \n class=\"action\"\n [ngClass]=\"{ \n 'mat-stroked-button': action.type === ActionType.Stroked,\n 'mat-raised-button': action.type === ActionType.Raised,\n 'mat-flat-button': action.type === ActionType.Flat,\n 'mat-basic-button': action.type === ActionType.Basic\n }\"\n [placeholder]=\"action.label\"\n [(ngModel)]=\"action.value\" \n (ngModelChange)=\"actionChange(action, $event)\"\n fsSelectButton>\n <mat-option \n *ngFor=\"let item of action.values\" \n [value]=\"item.value\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"ActionMode.File\">\n <fs-file\n class=\"action action-button\"\n [accept]=\"action.accept || '*'\"\n [multiple]=\"action.multiple\"\n [minWidth]=\"action.minWidth\"\n [minHeight]=\"action.minHeight\"\n [imageWidth]=\"action.maxWidth\"\n [imageHeight]=\"action.maxHeight\"\n (select)=\"action.fileSelected($event)\"\n (error)=\"action.fileError($event)\"\n (clicked)=\"action.click($event)\"\n fsPopover\n [enabled]=\"!!action.tooltip\"\n [text]=\"action.tooltip\">\n <fs-filter-action-button \n [action]=\"action\">\n </fs-filter-action-button>\n </fs-file>\n </ng-container>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"kebabActions?.length\">\n <fs-filter-action-kebab-actions\n [kebabActions]=\"kebabActions\">\n </fs-filter-action-kebab-actions>\n</ng-container>\n", styles: [":host{display:inline-flex}.action-button{display:block}.action+.action{margin-left:5px}.menu-button{width:36px;height:36px;line-height:36px}\n"] }]
|
|
2516
2521
|
}], propDecorators: { kebabActions: [{
|
|
2517
2522
|
type: Input
|
|
2518
2523
|
}], actions: [{
|
|
@@ -3735,6 +3740,9 @@ class FilterComponent {
|
|
|
3735
3740
|
get visibleItems() {
|
|
3736
3741
|
return this._filterItems.visibleItems;
|
|
3737
3742
|
}
|
|
3743
|
+
get keywordItem() {
|
|
3744
|
+
return this._filterItems.keywordItem;
|
|
3745
|
+
}
|
|
3738
3746
|
get itemsReady$() {
|
|
3739
3747
|
return this._filterItems.ready$;
|
|
3740
3748
|
}
|
|
@@ -3766,6 +3774,7 @@ class FilterComponent {
|
|
|
3766
3774
|
this.focus();
|
|
3767
3775
|
}
|
|
3768
3776
|
});
|
|
3777
|
+
this._initAutoReload();
|
|
3769
3778
|
this._listenInputChanges();
|
|
3770
3779
|
this._listenInternalItemsChange();
|
|
3771
3780
|
this._initOverlay();
|
|
@@ -3875,7 +3884,7 @@ class FilterComponent {
|
|
|
3875
3884
|
}
|
|
3876
3885
|
getItemValue(name) {
|
|
3877
3886
|
const item = this.items
|
|
3878
|
-
.find((
|
|
3887
|
+
.find((_item) => _item.name === name);
|
|
3879
3888
|
return item?.value;
|
|
3880
3889
|
}
|
|
3881
3890
|
showItem(name) {
|
|
@@ -3962,6 +3971,18 @@ class FilterComponent {
|
|
|
3962
3971
|
search(event) {
|
|
3963
3972
|
this.changeVisibilityClick(false, event);
|
|
3964
3973
|
}
|
|
3974
|
+
autoReload(event) {
|
|
3975
|
+
const el = this.autoReloadEl?.nativeElement;
|
|
3976
|
+
this.reload(event);
|
|
3977
|
+
if (el) {
|
|
3978
|
+
el.style.transition = 'all 0.75s 0.25s';
|
|
3979
|
+
el.style.transform = 'rotate(360deg)';
|
|
3980
|
+
setTimeout(() => {
|
|
3981
|
+
el.style.transition = null;
|
|
3982
|
+
el.style.transform = null;
|
|
3983
|
+
}, 1000);
|
|
3984
|
+
}
|
|
3985
|
+
}
|
|
3965
3986
|
reload(event = null) {
|
|
3966
3987
|
if (event) {
|
|
3967
3988
|
event.preventDefault();
|
|
@@ -4067,7 +4088,7 @@ class FilterComponent {
|
|
|
4067
4088
|
this._filterItems.setConfig(this._config);
|
|
4068
4089
|
this._externalParams.setConfig(this._config);
|
|
4069
4090
|
this._syncSearchInputWithKeyword();
|
|
4070
|
-
if (
|
|
4091
|
+
if (this.config.reloadWhenConfigChanged) {
|
|
4071
4092
|
this.change();
|
|
4072
4093
|
}
|
|
4073
4094
|
}
|
|
@@ -4099,6 +4120,15 @@ class FilterComponent {
|
|
|
4099
4120
|
});
|
|
4100
4121
|
});
|
|
4101
4122
|
}
|
|
4123
|
+
_initAutoReload() {
|
|
4124
|
+
if (this.config.autoReload) {
|
|
4125
|
+
interval(this.config.autoReload.seconds * 1000)
|
|
4126
|
+
.pipe(takeUntil(this._destroy$))
|
|
4127
|
+
.subscribe(() => {
|
|
4128
|
+
this.autoReload(null);
|
|
4129
|
+
});
|
|
4130
|
+
}
|
|
4131
|
+
}
|
|
4102
4132
|
_listenInputChanges() {
|
|
4103
4133
|
this._keyword$
|
|
4104
4134
|
.pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this._destroy$))
|
|
@@ -4158,7 +4188,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
4158
4188
|
FsFilterItemsStore,
|
|
4159
4189
|
SavedFiltersController,
|
|
4160
4190
|
ActionsController,
|
|
4161
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }], 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
|
|
4191
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordMatInput", first: true, predicate: ["keywordMatInput"], descendants: true, read: MatInput }, { propertyName: "autoReloadEl", first: true, predicate: ["autoReloadEl"], 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.autoReload\">\n <a \n #autoReloadEl\n mat-icon-button\n [matTooltip]=\"'Auto reload every ' + config.autoReload.seconds + ' seconds'\"\n (click)=\"autoReload($event)\"\n class=\"reload\">\n <mat-icon \n class=\"auto-reload-icon\">\n autorenew\n </mat-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!config.autoReload\">\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 </ng-container>\n </div>\n</ng-template>\n", styles: [".fs-filter{margin-bottom:20px;display:block}.fs-filter.has-keyword .filter-status-container.has-status{margin-top:4px}.fs-filter:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}.fs-filter:not(.has-keyword) .filter-inner-container{display:flex}.fs-filter:not(.has-keyword) .filter-toobar{justify-content:flex-end}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-container{width:100%}.fs-filter .filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.fs-filter .filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.fs-filter .filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-wrapper{margin-bottom:0}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix .mat-icon{font-size:22px;color:#626262}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-infix{width:250px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix,.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-suffix{top:.45em}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter .filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.fs-filter .filter-toobar .reload{margin-left:-6px}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter 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}\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"] }], 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"] }, { type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4162
4192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
4163
4193
|
type: Component,
|
|
4164
4194
|
args: [{ selector: 'fs-filter', encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -4170,7 +4200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4170
4200
|
FsFilterItemsStore,
|
|
4171
4201
|
SavedFiltersController,
|
|
4172
4202
|
ActionsController,
|
|
4173
|
-
], 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
|
|
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.autoReload\">\n <a \n #autoReloadEl\n mat-icon-button\n [matTooltip]=\"'Auto reload every ' + config.autoReload.seconds + ' seconds'\"\n (click)=\"autoReload($event)\"\n class=\"reload\">\n <mat-icon \n class=\"auto-reload-icon\">\n autorenew\n </mat-icon>\n </a>\n </ng-container>\n <ng-container *ngIf=\"!config.autoReload\">\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 </ng-container>\n </div>\n</ng-template>\n", styles: [".fs-filter{margin-bottom:20px;display:block}.fs-filter.has-keyword .filter-status-container.has-status{margin-top:4px}.fs-filter:not(.has-keyword) .filter-status-container:not(.has-status)+fs-filter-chips{margin-top:0}.fs-filter:not(.has-keyword) .filter-inner-container{display:flex}.fs-filter:not(.has-keyword) .filter-toobar{justify-content:flex-end}.fs-filter .filter-status-container{flex-grow:1;display:flex;justify-content:center;flex-direction:column;align-self:flex-end}.fs-filter .filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis;line-height:17px}.fs-filter .filter-container{width:100%}.fs-filter .filter-inner-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.fs-filter .filter-inner-container .filter-keyword{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.fs-filter .filter-inner-container .filter-keyword mat-form-field{max-width:100%;min-width:100px;margin-right:6px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-wrapper{margin-bottom:0}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix .mat-icon{font-size:22px;color:#626262}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-infix{width:250px}.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-prefix,.fs-filter .filter-inner-container .filter-keyword mat-form-field .mat-form-field-suffix{top:.45em}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix{display:flex}.fs-filter .filter-inner-container .filter-keyword .mat-form-field-suffix .mat-icon-button{height:24px;width:24px}.fs-filter .filter-actions{display:flex;align-items:center}.fs-filter .filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.fs-filter .filter-toobar .reload{margin-left:-6px}.fs-filter .results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}.fs-filter 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}\n"] }]
|
|
4174
4204
|
}], ctorParameters: function () { return [{ type: FsFilterConfig, decorators: [{
|
|
4175
4205
|
type: Optional
|
|
4176
4206
|
}, {
|
|
@@ -4198,6 +4228,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4198
4228
|
}], keywordMatInput: [{
|
|
4199
4229
|
type: ViewChild,
|
|
4200
4230
|
args: ['keywordMatInput', { read: MatInput }]
|
|
4231
|
+
}], autoReloadEl: [{
|
|
4232
|
+
type: ViewChild,
|
|
4233
|
+
args: ['autoReloadEl', { read: ElementRef }]
|
|
4201
4234
|
}], showFilterMenu: [{
|
|
4202
4235
|
type: HostBinding,
|
|
4203
4236
|
args: ['class.filters-open']
|
|
@@ -4324,6 +4357,7 @@ FsFilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
|
|
|
4324
4357
|
MatAutocompleteModule,
|
|
4325
4358
|
MatButtonModule,
|
|
4326
4359
|
MatDialogModule,
|
|
4360
|
+
MatTooltipModule,
|
|
4327
4361
|
FsChipModule,
|
|
4328
4362
|
FsCommonModule,
|
|
4329
4363
|
FsStoreModule,
|
|
@@ -4357,6 +4391,7 @@ FsFilterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
|
|
|
4357
4391
|
MatAutocompleteModule,
|
|
4358
4392
|
MatButtonModule,
|
|
4359
4393
|
MatDialogModule,
|
|
4394
|
+
MatTooltipModule,
|
|
4360
4395
|
FsChipModule,
|
|
4361
4396
|
FsCommonModule,
|
|
4362
4397
|
FsStoreModule,
|
|
@@ -4390,6 +4425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4390
4425
|
MatAutocompleteModule,
|
|
4391
4426
|
MatButtonModule,
|
|
4392
4427
|
MatDialogModule,
|
|
4428
|
+
MatTooltipModule,
|
|
4393
4429
|
FsChipModule,
|
|
4394
4430
|
FsCommonModule,
|
|
4395
4431
|
FsStoreModule,
|