@firestitch/filter 13.2.0 → 13.3.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 +8 -3
- package/app/components/saved-filter-edit/saved-filter-edit.component.d.ts +1 -1
- package/app/components/saved-filters-menu/saved-filters-menu.component.d.ts +3 -5
- package/app/services/external-params/saved-filters-controller.service.d.ts +7 -7
- package/esm2020/app/components/filter/filter.component.mjs +29 -18
- package/esm2020/app/components/filter-chip/filter-chip.component.mjs +2 -2
- package/esm2020/app/components/saved-filter-edit/saved-filter-edit.component.mjs +9 -14
- package/esm2020/app/components/saved-filters-menu/saved-filters-menu.component.mjs +6 -13
- package/esm2020/app/interfaces/saved-filters.interface.mjs +1 -1
- package/esm2020/app/services/external-params/saved-filters-controller.service.mjs +8 -9
- package/fesm2015/firestitch-filter.mjs +32 -35
- package/fesm2015/firestitch-filter.mjs.map +1 -1
- package/fesm2020/firestitch-filter.mjs +35 -38
- package/fesm2020/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -36,7 +36,7 @@ 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 i12 from '@angular/material/slide-toggle';
|
|
40
40
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
41
41
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
42
42
|
import * as i4$1 from '@firestitch/autocomplete';
|
|
@@ -45,7 +45,7 @@ import * as i5 from '@firestitch/autocomplete-chips';
|
|
|
45
45
|
import { FsAutocompleteChipsModule } from '@firestitch/autocomplete-chips';
|
|
46
46
|
import * as i2$3 from '@firestitch/chip';
|
|
47
47
|
import { FsChipModule } from '@firestitch/chip';
|
|
48
|
-
import * as
|
|
48
|
+
import * as i9$1 from '@firestitch/clear';
|
|
49
49
|
import { FsClearModule } from '@firestitch/clear';
|
|
50
50
|
import * as i6$1 from '@firestitch/file';
|
|
51
51
|
import { FsFileModule } from '@firestitch/file';
|
|
@@ -1965,20 +1965,15 @@ class FsFilterSavedFilterEditComponent {
|
|
|
1965
1965
|
this.savedFilterName = '';
|
|
1966
1966
|
this._destroy$ = new Subject();
|
|
1967
1967
|
this.save = () => {
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
savedFilter = {
|
|
1968
|
+
const savedFilter = this.saveAsFilter === 'new' ?
|
|
1969
|
+
{
|
|
1971
1970
|
name: this.savedFilterName,
|
|
1972
1971
|
active: true,
|
|
1973
1972
|
filters: this.data.params,
|
|
1974
|
-
}
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
...this.saveAsFilter,
|
|
1979
|
-
filters: this.data.params,
|
|
1980
|
-
};
|
|
1981
|
-
}
|
|
1973
|
+
} : {
|
|
1974
|
+
...this.saveAsFilter,
|
|
1975
|
+
filters: this.data.params,
|
|
1976
|
+
};
|
|
1982
1977
|
return this._saveCallback(savedFilter)
|
|
1983
1978
|
.pipe(tap((filter) => {
|
|
1984
1979
|
this._dialogRef.close(filter);
|
|
@@ -1989,10 +1984,10 @@ class FsFilterSavedFilterEditComponent {
|
|
|
1989
1984
|
}
|
|
1990
1985
|
}
|
|
1991
1986
|
FsFilterSavedFilterEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterSavedFilterEditComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1992
|
-
FsFilterSavedFilterEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsFilterSavedFilterEditComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n <h1 mat-dialog-title>\n Save filter\n </h1>\n <div mat-dialog-content>\n <mat-form-field>\n <mat-label>Save as</mat-label>\n <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n <mat-option value=\"new\">New filter</mat-option>\n <mat-optgroup label=\"Saved filters
|
|
1987
|
+
FsFilterSavedFilterEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsFilterSavedFilterEditComponent, selector: "ng-component", ngImport: i0, template: "<form fsForm [submit]=\"save\">\n <h1 mat-dialog-title>\n Save filter\n </h1>\n <div mat-dialog-content>\n <mat-form-field>\n <mat-label>Save as</mat-label>\n <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n <mat-option value=\"new\">New filter</mat-option>\n <ng-container *ngIf=\"savedFilters.length\">\n <mat-optgroup label=\"Saved filters\">\n <ng-container *ngFor=\"let filter of savedFilters\">\n <mat-option [value]=\"filter\">{{ filter.name }}</mat-option>\n </ng-container>\n </mat-optgroup>\n </ng-container>\n </mat-select>\n </mat-form-field>\n <br>\n <mat-form-field *ngIf=\"saveAsFilter === 'new'\">\n <mat-label>Name</mat-label>\n <input matInput name=\"filter-name\" [(ngModel)]=\"savedFilterName\" required>\n </mat-form-field>\n </div>\n <div mat-dialog-actions>\n <button \n mat-button\n type=\"submit\"\n color=\"primary\">\n {{ saveAsFilter === 'new' ? 'Create' : 'Save' }}\n </button>\n\n <button \n mat-button\n type=\"button\"\n [mat-dialog-close]=\"null\">\n Cancel\n </button>\n </div>\n</form>\n", components: [{ type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i1$3.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"] }], directives: [{ type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$2.MatLabel, selector: "mat-label" }, { 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i7.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1993
1988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterSavedFilterEditComponent, decorators: [{
|
|
1994
1989
|
type: Component,
|
|
1995
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"save\">\n <h1 mat-dialog-title>\n Save filter\n </h1>\n <div mat-dialog-content>\n <mat-form-field>\n <mat-label>Save as</mat-label>\n <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n <mat-option value=\"new\">New filter</mat-option>\n <mat-optgroup label=\"Saved filters
|
|
1990
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"save\">\n <h1 mat-dialog-title>\n Save filter\n </h1>\n <div mat-dialog-content>\n <mat-form-field>\n <mat-label>Save as</mat-label>\n <mat-select [(ngModel)]=\"saveAsFilter\" name=\"saveAs\">\n <mat-option value=\"new\">New filter</mat-option>\n <ng-container *ngIf=\"savedFilters.length\">\n <mat-optgroup label=\"Saved filters\">\n <ng-container *ngFor=\"let filter of savedFilters\">\n <mat-option [value]=\"filter\">{{ filter.name }}</mat-option>\n </ng-container>\n </mat-optgroup>\n </ng-container>\n </mat-select>\n </mat-form-field>\n <br>\n <mat-form-field *ngIf=\"saveAsFilter === 'new'\">\n <mat-label>Name</mat-label>\n <input matInput name=\"filter-name\" [(ngModel)]=\"savedFilterName\" required>\n </mat-form-field>\n </div>\n <div mat-dialog-actions>\n <button \n mat-button\n type=\"submit\"\n color=\"primary\">\n {{ saveAsFilter === 'new' ? 'Create' : 'Save' }}\n </button>\n\n <button \n mat-button\n type=\"button\"\n [mat-dialog-close]=\"null\">\n Cancel\n </button>\n </div>\n</form>\n" }]
|
|
1996
1991
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1997
1992
|
type: Inject,
|
|
1998
1993
|
args: [MAT_DIALOG_DATA]
|
|
@@ -2017,6 +2012,9 @@ class SavedFiltersController {
|
|
|
2017
2012
|
get savedFilters() {
|
|
2018
2013
|
return this._savedFilters$.getValue();
|
|
2019
2014
|
}
|
|
2015
|
+
set savedFilters(filters) {
|
|
2016
|
+
this._savedFilters$.next(filters);
|
|
2017
|
+
}
|
|
2020
2018
|
get savedFilters$() {
|
|
2021
2019
|
return this._savedFilters$
|
|
2022
2020
|
.pipe(distinctUntilChanged());
|
|
@@ -2031,9 +2029,6 @@ class SavedFiltersController {
|
|
|
2031
2029
|
get activeFilterData() {
|
|
2032
2030
|
return this._activeFilter$.getValue()?.filters;
|
|
2033
2031
|
}
|
|
2034
|
-
set savedFilters(filters) {
|
|
2035
|
-
this._savedFilters$.next(filters);
|
|
2036
|
-
}
|
|
2037
2032
|
ngOnDestroy() {
|
|
2038
2033
|
this._destroy$.next();
|
|
2039
2034
|
this._destroy$.complete();
|
|
@@ -2083,7 +2078,7 @@ class SavedFiltersController {
|
|
|
2083
2078
|
const existingFilter = this.savedFilters
|
|
2084
2079
|
.find((f) => f.id === savedFilter.id);
|
|
2085
2080
|
if (!existingFilter) {
|
|
2086
|
-
throw new Error(
|
|
2081
|
+
throw new Error(`Saved filter cannot be activated, because it does not exists. Filter ID = ${savedFilter.id}`);
|
|
2087
2082
|
}
|
|
2088
2083
|
this._activeFilter$.next(existingFilter);
|
|
2089
2084
|
}
|
|
@@ -2093,7 +2088,6 @@ class SavedFiltersController {
|
|
|
2093
2088
|
}
|
|
2094
2089
|
openSavedFilterEditDialog() {
|
|
2095
2090
|
const params = buildQueryParams(this._itemsStore.valuesAsQuery(), this._itemsStore.items);
|
|
2096
|
-
const values = this._itemsStore.values(true);
|
|
2097
2091
|
const dialogConfig = {
|
|
2098
2092
|
data: {
|
|
2099
2093
|
params: params,
|
|
@@ -2119,7 +2113,7 @@ class SavedFiltersController {
|
|
|
2119
2113
|
this.resetActiveFilter();
|
|
2120
2114
|
this.savedFilters = [
|
|
2121
2115
|
...this.savedFilters,
|
|
2122
|
-
updatedFilter
|
|
2116
|
+
updatedFilter,
|
|
2123
2117
|
];
|
|
2124
2118
|
}
|
|
2125
2119
|
this.updateActiveFilter();
|
|
@@ -2709,10 +2703,10 @@ class FsFilterChipComponent {
|
|
|
2709
2703
|
}
|
|
2710
2704
|
}
|
|
2711
2705
|
FsFilterChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2712
|
-
FsFilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n <ng-container *ngIf=\"rangeItem; else defaultChip\">\n <fs-chip\n *ngIf=\"item.model?.min || item.model?.from\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('from')\"\n (removed)=\"removeItem($event, 'from')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n </ng-template>\n </fs-chip>\n\n <fs-chip\n *ngIf=\"item.model?.max || item.model?.to\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('to')\"\n (removed)=\"removeItem($event, 'to')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n </ng-template>\n </fs-chip>\n\n </ng-container>\n\n <ng-template #defaultChip>\n <fs-chip\n *ngIf=\"itemVisible\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem()\"\n (removed)=\"removeItem($event)\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </fs-chip>\n </ng-template>\n\n <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n </ng-container>\n\n <ng-template #lodaingValues>\n Loading...\n </ng-template>\n </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f;margin-right:
|
|
2706
|
+
FsFilterChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: { item: "item" }, ngImport: i0, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n <ng-container *ngIf=\"rangeItem; else defaultChip\">\n <fs-chip\n *ngIf=\"item.model?.min || item.model?.from\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('from')\"\n (removed)=\"removeItem($event, 'from')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n </ng-template>\n </fs-chip>\n\n <fs-chip\n *ngIf=\"item.model?.max || item.model?.to\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('to')\"\n (removed)=\"removeItem($event, 'to')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n </ng-template>\n </fs-chip>\n\n </ng-container>\n\n <ng-template #defaultChip>\n <fs-chip\n *ngIf=\"itemVisible\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem()\"\n (removed)=\"removeItem($event)\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </fs-chip>\n </ng-template>\n\n <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n </ng-container>\n\n <ng-template #lodaingValues>\n Loading...\n </ng-template>\n </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f;margin-right:4px;margin-bottom:4px}\n"], components: [{ type: i2$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2713
2707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsFilterChipComponent, decorators: [{
|
|
2714
2708
|
type: Component,
|
|
2715
|
-
args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n <ng-container *ngIf=\"rangeItem; else defaultChip\">\n <fs-chip\n *ngIf=\"item.model?.min || item.model?.from\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('from')\"\n (removed)=\"removeItem($event, 'from')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n </ng-template>\n </fs-chip>\n\n <fs-chip\n *ngIf=\"item.model?.max || item.model?.to\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('to')\"\n (removed)=\"removeItem($event, 'to')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n </ng-template>\n </fs-chip>\n\n </ng-container>\n\n <ng-template #defaultChip>\n <fs-chip\n *ngIf=\"itemVisible\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem()\"\n (removed)=\"removeItem($event)\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </fs-chip>\n </ng-template>\n\n <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n </ng-container>\n\n <ng-template #lodaingValues>\n Loading...\n </ng-template>\n </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f;margin-right:
|
|
2709
|
+
args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!item.hasPendingValues || (chipDelayedRender$ | async)\">\n <ng-container *ngIf=\"rangeItem; else defaultChip\">\n <fs-chip\n *ngIf=\"item.model?.min || item.model?.from\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('from')\"\n (removed)=\"removeItem($event, 'from')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'from' }\">\n </ng-template>\n </fs-chip>\n\n <fs-chip\n *ngIf=\"item.model?.max || item.model?.to\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem('to')\"\n (removed)=\"removeItem($event, 'to')\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item, type: 'to' }\">\n </ng-template>\n </fs-chip>\n\n </ng-container>\n\n <ng-template #defaultChip>\n <fs-chip\n *ngIf=\"itemVisible\"\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"focusOnItem()\"\n (removed)=\"removeItem($event)\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </fs-chip>\n </ng-template>\n\n <ng-template #chipContent let-item=\"item\" let-type=\"type\">\n <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n <fs-filter-chip-content [item]=\"item\" [type]=\"type\"></fs-filter-chip-content>\n </ng-container>\n\n <ng-template #lodaingValues>\n Loading...\n </ng-template>\n </ng-template>\n</ng-container>\n\n", styles: ["fs-chip{cursor:pointer;color:#6f6f6f;margin-right:4px;margin-bottom:4px}\n"] }]
|
|
2716
2710
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FocusControllerService }]; }, propDecorators: { item: [{
|
|
2717
2711
|
type: Input
|
|
2718
2712
|
}] } });
|
|
@@ -3697,13 +3691,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
3697
3691
|
const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
|
|
3698
3692
|
|
|
3699
3693
|
class FilterComponent {
|
|
3700
|
-
constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions) {
|
|
3694
|
+
constructor(_defaultConfig, _filterOverlay, _zone, _externalParams, _filterItems, _actions, _savedFiltersController) {
|
|
3701
3695
|
this._defaultConfig = _defaultConfig;
|
|
3702
3696
|
this._filterOverlay = _filterOverlay;
|
|
3703
3697
|
this._zone = _zone;
|
|
3704
3698
|
this._externalParams = _externalParams;
|
|
3705
3699
|
this._filterItems = _filterItems;
|
|
3706
3700
|
this._actions = _actions;
|
|
3701
|
+
this._savedFiltersController = _savedFiltersController;
|
|
3707
3702
|
this.showSortBy = true;
|
|
3708
3703
|
this.showFilterInput = true;
|
|
3709
3704
|
this.closed = new EventEmitter();
|
|
@@ -3787,6 +3782,15 @@ class FilterComponent {
|
|
|
3787
3782
|
get menuActions$() {
|
|
3788
3783
|
return this._actions.menuActions$;
|
|
3789
3784
|
}
|
|
3785
|
+
set activeSavedFilter(saveFilter) {
|
|
3786
|
+
this._savedFiltersController.setActiveFilter(saveFilter);
|
|
3787
|
+
}
|
|
3788
|
+
get activeSavedFilter() {
|
|
3789
|
+
return this._savedFiltersController.activeFilter;
|
|
3790
|
+
}
|
|
3791
|
+
get savedFilters() {
|
|
3792
|
+
return this._savedFiltersController.savedFilters;
|
|
3793
|
+
}
|
|
3790
3794
|
ngOnInit() {
|
|
3791
3795
|
// Avoid ngChanges error
|
|
3792
3796
|
setTimeout(() => {
|
|
@@ -4198,7 +4202,7 @@ class FilterComponent {
|
|
|
4198
4202
|
this._hasFilterChips$.next(hasFilterChips);
|
|
4199
4203
|
}
|
|
4200
4204
|
}
|
|
4201
|
-
FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }], target: i0.ɵɵFactoryTarget.Component });
|
|
4205
|
+
FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterComponent, deps: [{ token: FS_FILTER_CONFIG, optional: true }, { token: FsFilterOverlayService }, { token: i0.NgZone }, { token: ExternalParamsController }, { token: FsFilterItemsStore }, { token: ActionsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
|
|
4202
4206
|
FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FilterComponent, selector: "fs-filter", inputs: { setConfig: ["config", "setConfig"], setFilter: ["filter", "setFilter"], showSortBy: "showSortBy", showFilterInput: "showFilterInput" }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass", "class.has-keyword": "this.hasKeyword" } }, providers: [
|
|
4203
4207
|
FsFilterOverlayService,
|
|
4204
4208
|
ExternalParamsController,
|
|
@@ -4208,7 +4212,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
4208
4212
|
FsFilterItemsStore,
|
|
4209
4213
|
SavedFiltersController,
|
|
4210
4214
|
ActionsController,
|
|
4211
|
-
], 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 });
|
|
4215
|
+
], 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: i9$1.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: i12.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 });
|
|
4212
4216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
4213
4217
|
type: Component,
|
|
4214
4218
|
args: [{ selector: 'fs-filter', providers: [
|
|
@@ -4226,7 +4230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
4226
4230
|
}, {
|
|
4227
4231
|
type: Inject,
|
|
4228
4232
|
args: [FS_FILTER_CONFIG]
|
|
4229
|
-
}] }, { type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }]; }, propDecorators: { setConfig: [{
|
|
4233
|
+
}] }, { type: FsFilterOverlayService }, { type: i0.NgZone }, { type: ExternalParamsController }, { type: FsFilterItemsStore }, { type: ActionsController }, { type: SavedFiltersController }]; }, propDecorators: { setConfig: [{
|
|
4230
4234
|
type: Input,
|
|
4231
4235
|
args: ['config']
|
|
4232
4236
|
}], setFilter: [{
|
|
@@ -4280,9 +4284,7 @@ class FsSavedFiltersMenuComponent {
|
|
|
4280
4284
|
this._itemsStore = _itemsStore;
|
|
4281
4285
|
this._externalParams = _externalParams;
|
|
4282
4286
|
this._savedFilters = _savedFilters;
|
|
4283
|
-
this.select = new EventEmitter();
|
|
4284
4287
|
this.clear = new EventEmitter();
|
|
4285
|
-
this.manage = new EventEmitter();
|
|
4286
4288
|
}
|
|
4287
4289
|
get filters$() {
|
|
4288
4290
|
return this._savedFilters.savedFilters$;
|
|
@@ -4292,7 +4294,6 @@ class FsSavedFiltersMenuComponent {
|
|
|
4292
4294
|
}
|
|
4293
4295
|
selectFilter(savedFilter) {
|
|
4294
4296
|
this._externalParams.setActiveSavedFilter(savedFilter);
|
|
4295
|
-
this.select.emit(savedFilter);
|
|
4296
4297
|
}
|
|
4297
4298
|
removeActiveFilter() {
|
|
4298
4299
|
this._itemsStore.filtersClear();
|
|
@@ -4300,19 +4301,15 @@ class FsSavedFiltersMenuComponent {
|
|
|
4300
4301
|
this.clear.emit();
|
|
4301
4302
|
}
|
|
4302
4303
|
manageFilters() {
|
|
4303
|
-
|
|
4304
|
+
// TODO: Implement
|
|
4304
4305
|
}
|
|
4305
4306
|
}
|
|
4306
4307
|
FsSavedFiltersMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSavedFiltersMenuComponent, deps: [{ token: FsFilterItemsStore }, { token: ExternalParamsController }, { token: SavedFiltersController }], target: i0.ɵɵFactoryTarget.Component });
|
|
4307
|
-
FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: {
|
|
4308
|
+
FsSavedFiltersMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsSavedFiltersMenuComponent, selector: "fs-filter-saved-filters-menu", outputs: { clear: "clear" }, ngImport: i0, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n <ng-container *ngIf=\"activeFilter$ | async\">\n <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n None\n </ng-template>\n </ng-container>\n <ng-container *ngFor=\"let filter of filters$ | async\">\n <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n {{ filter.name }}\n </ng-template>\n </ng-container>\n <!-- TODO: Implement -->\n <!-- <ng-template \n fs-menu-item \n class=\"saved-filter-last-item\" \n (click)=\"manageFilters()\">\n Manage\n </ng-template> -->\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"], components: [{ type: i3$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }], directives: [{ 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4308
4309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsSavedFiltersMenuComponent, decorators: [{
|
|
4309
4310
|
type: Component,
|
|
4310
|
-
args: [{ selector: 'fs-filter-saved-filters-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n <ng-container *ngIf=\"activeFilter$ | async\">\n <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n None\n </ng-template>\n </ng-container>\n <ng-container *ngFor=\"let filter of filters$ | async\">\n <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n {{ filter.name }}\n </ng-template>\n </ng-container>\n <ng-template fs-menu-item class=\"saved-filter-last-item\" (click)=\"manageFilters()\">\n Manage\n </ng-template
|
|
4311
|
-
}], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: ExternalParamsController }, { type: SavedFiltersController }]; }, propDecorators: {
|
|
4312
|
-
type: Output
|
|
4313
|
-
}], clear: [{
|
|
4314
|
-
type: Output
|
|
4315
|
-
}], manage: [{
|
|
4311
|
+
args: [{ selector: 'fs-filter-saved-filters-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a [fsMenuTriggerFor]=\"menu\" class=\"selector\">{{ (activeFilter$ | async)?.name || 'Not selected' }}</a>\n\n<fs-menu #menu>\n <ng-container *ngIf=\"activeFilter$ | async\">\n <ng-template fs-menu-item (click)=\"removeActiveFilter()\">\n None\n </ng-template>\n </ng-container>\n <ng-container *ngFor=\"let filter of filters$ | async\">\n <ng-template fs-menu-item (click)=\"selectFilter(filter)\">\n {{ filter.name }}\n </ng-template>\n </ng-container>\n <!-- TODO: Implement -->\n <!-- <ng-template \n fs-menu-item \n class=\"saved-filter-last-item\" \n (click)=\"manageFilters()\">\n Manage\n </ng-template> -->\n</fs-menu>\n", styles: [":host ::ng-deep .selector{cursor:pointer}\n"] }]
|
|
4312
|
+
}], ctorParameters: function () { return [{ type: FsFilterItemsStore }, { type: ExternalParamsController }, { type: SavedFiltersController }]; }, propDecorators: { clear: [{
|
|
4316
4313
|
type: Output
|
|
4317
4314
|
}] } });
|
|
4318
4315
|
|