@firestitch/filter 18.2.13 → 18.2.15
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 -5
- package/app/components/filter-chips/filter-chips.component.d.ts +1 -0
- package/app/components/saved-filter/saved-filter-manage/saved-filter-manage.component.d.ts +1 -1
- package/app/fs-filter.module.d.ts +8 -10
- package/app/models/items/base-item.d.ts +5 -2
- package/app/models/items/chips-item.d.ts +0 -2
- package/app/services/focus-controller.service.d.ts +0 -1
- package/esm2022/app/components/filter/filter.component.mjs +5 -14
- package/esm2022/app/components/filter-chips/filter-chips.component.mjs +7 -7
- package/esm2022/app/components/saved-filter/saved-filter-manage/components/saved-filter-chips/saved-filter-chips.component.mjs +9 -7
- package/esm2022/app/components/saved-filter/saved-filter-manage/saved-filter-manage.component.mjs +3 -3
- package/esm2022/app/fs-filter.module.mjs +1 -8
- package/esm2022/app/models/items/base-item.mjs +21 -12
- package/esm2022/app/models/items/chips-item.mjs +1 -20
- package/esm2022/app/services/filter-controller.service.mjs +2 -2
- package/esm2022/app/services/focus-controller.service.mjs +2 -3
- package/fesm2022/firestitch-filter.mjs +64 -227
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
- package/app/components/filter-chip/filter-chip.component.d.ts +0 -37
- package/app/components/filter-chip-content/filter-chip-content.component.d.ts +0 -18
- package/esm2022/app/components/filter-chip/filter-chip.component.mjs +0 -84
- package/esm2022/app/components/filter-chip-content/filter-chip-content.component.mjs +0 -71
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, Component, ChangeDetectionStrategy, Input,
|
|
2
|
+
import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, Injector, EventEmitter, Output, InjectionToken, Directive, Optional, Self, ChangeDetectorRef, ViewChild, NgZone, ElementRef, ContentChild, HostBinding, Pipe, HostListener, NgModule } from '@angular/core';
|
|
3
3
|
import { FsPrompt } from '@firestitch/prompt';
|
|
4
|
-
import { BehaviorSubject, Subject, of, forkJoin, Observable,
|
|
5
|
-
import { distinctUntilChanged, tap, switchMap, map,
|
|
4
|
+
import { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter as filter$1, map as map$1, combineLatest, fromEvent, interval, takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs';
|
|
5
|
+
import { distinctUntilChanged, tap, switchMap, map, filter, debounceTime, finalize, takeUntil, delay, skip } from 'rxjs/operators';
|
|
6
6
|
import { FsStore } from '@firestitch/store';
|
|
7
7
|
import { NgSwitch, NgSwitchCase, NgClass, NgTemplateOutlet, NgSwitchDefault, NgIf, AsyncPipe, Location } from '@angular/common';
|
|
8
8
|
import { MatIconButton, MatFabButton, MatMiniFabButton, MatButton, MatIconAnchor } from '@angular/material/button';
|
|
@@ -22,9 +22,9 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
|
22
22
|
import { MatOption, MatOptgroup } from '@angular/material/core';
|
|
23
23
|
import * as i6 from '@firestitch/file';
|
|
24
24
|
import { FsFileModule } from '@firestitch/file';
|
|
25
|
-
import { isFunction, clone, toString, isObject, isString } from 'lodash-es';
|
|
26
25
|
import * as i1$2 from '@firestitch/chip';
|
|
27
26
|
import { FsChipModule } from '@firestitch/chip';
|
|
27
|
+
import { isFunction, clone, toString, isObject, isString } from 'lodash-es';
|
|
28
28
|
import { iso8601, format } from '@firestitch/date';
|
|
29
29
|
import { isDate, isValid, parseISO } from 'date-fns';
|
|
30
30
|
import { isEmpty, getNormalizedPath } from '@firestitch/common';
|
|
@@ -655,9 +655,10 @@ class BaseItem {
|
|
|
655
655
|
_type;
|
|
656
656
|
_valuesFn;
|
|
657
657
|
_hidden$ = new BehaviorSubject(false);
|
|
658
|
-
_value$ = new BehaviorSubject(undefined);
|
|
658
|
+
_value$ = new BehaviorSubject({ value: undefined, emitChange: true });
|
|
659
659
|
_values$ = new BehaviorSubject(null);
|
|
660
660
|
_destroy$ = new Subject();
|
|
661
|
+
_emitChange = true;
|
|
661
662
|
constructor(itemConfig, _additionalConfig, _filter) {
|
|
662
663
|
this._additionalConfig = _additionalConfig;
|
|
663
664
|
this._filter = _filter;
|
|
@@ -723,11 +724,11 @@ class BaseItem {
|
|
|
723
724
|
return this.value !== null && this.value !== undefined;
|
|
724
725
|
}
|
|
725
726
|
get hasValue$() {
|
|
726
|
-
return this.
|
|
727
|
+
return this.value$
|
|
727
728
|
.pipe(map(() => this.hasValue));
|
|
728
729
|
}
|
|
729
730
|
get chips$() {
|
|
730
|
-
return this.
|
|
731
|
+
return this.value$
|
|
731
732
|
.pipe(map(() => this.chips));
|
|
732
733
|
}
|
|
733
734
|
set values(values) {
|
|
@@ -737,10 +738,21 @@ class BaseItem {
|
|
|
737
738
|
return this._values$.getValue();
|
|
738
739
|
}
|
|
739
740
|
get values$() {
|
|
740
|
-
return this._values$.asObservable()
|
|
741
|
+
return this._values$.asObservable()
|
|
742
|
+
.pipe(filter(() => this._emitChange));
|
|
741
743
|
}
|
|
742
744
|
get value$() {
|
|
743
|
-
return this._value$.asObservable()
|
|
745
|
+
return this._value$.asObservable()
|
|
746
|
+
.pipe(filter((event) => event.emitChange), map((event) => event.value));
|
|
747
|
+
}
|
|
748
|
+
get value() {
|
|
749
|
+
return this._value$.getValue().value;
|
|
750
|
+
}
|
|
751
|
+
set value(value) {
|
|
752
|
+
this.setValue(value);
|
|
753
|
+
}
|
|
754
|
+
setValue(value, emitChange = true) {
|
|
755
|
+
this._value$.next({ value, emitChange });
|
|
744
756
|
}
|
|
745
757
|
get queryParam() {
|
|
746
758
|
return this.query;
|
|
@@ -798,11 +810,8 @@ class BaseItem {
|
|
|
798
810
|
this._destroy$.next(null);
|
|
799
811
|
this._destroy$.complete();
|
|
800
812
|
}
|
|
801
|
-
|
|
802
|
-
return
|
|
803
|
-
}
|
|
804
|
-
set value(value) {
|
|
805
|
-
this._value$.next(value);
|
|
813
|
+
clone() {
|
|
814
|
+
return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
|
|
806
815
|
}
|
|
807
816
|
_initConfig(item) {
|
|
808
817
|
this.name = item.name;
|
|
@@ -829,171 +838,6 @@ class BaseItem {
|
|
|
829
838
|
}
|
|
830
839
|
}
|
|
831
840
|
|
|
832
|
-
class FsFilterChipContentComponent {
|
|
833
|
-
_cdRef;
|
|
834
|
-
item;
|
|
835
|
-
type;
|
|
836
|
-
content;
|
|
837
|
-
_destroy$ = new Subject();
|
|
838
|
-
constructor(_cdRef) {
|
|
839
|
-
this._cdRef = _cdRef;
|
|
840
|
-
}
|
|
841
|
-
ngOnInit() {
|
|
842
|
-
this.listenValueChangesForRanges();
|
|
843
|
-
}
|
|
844
|
-
ngOnDestroy() {
|
|
845
|
-
this._destroy$.next(null);
|
|
846
|
-
this._destroy$.complete();
|
|
847
|
-
}
|
|
848
|
-
listenValueChangesForRanges() {
|
|
849
|
-
this.item.value$
|
|
850
|
-
.pipe(takeUntil(this._destroy$))
|
|
851
|
-
.subscribe(() => {
|
|
852
|
-
this.content = this._getContent();
|
|
853
|
-
this._cdRef.detectChanges();
|
|
854
|
-
});
|
|
855
|
-
}
|
|
856
|
-
_getContent() {
|
|
857
|
-
const result = this.item.chips;
|
|
858
|
-
if (this.item.chipLabel !== undefined) {
|
|
859
|
-
if (this.item.chipLabel === '') {
|
|
860
|
-
return `${result}`;
|
|
861
|
-
}
|
|
862
|
-
if (Array.isArray(this.item.chipLabel)) {
|
|
863
|
-
const label = getLabelFromArray(this.item.chipLabel, this.type);
|
|
864
|
-
return `${label}: ${result}`;
|
|
865
|
-
}
|
|
866
|
-
return `${this.item.chipLabel}: ${result}`;
|
|
867
|
-
}
|
|
868
|
-
if (Array.isArray(this.item.label)) {
|
|
869
|
-
const label = getLabelFromArray(this.item.label, this.type);
|
|
870
|
-
return `${label}: ${result}`;
|
|
871
|
-
}
|
|
872
|
-
if (this.item.isTypeCheckbox) {
|
|
873
|
-
return result;
|
|
874
|
-
}
|
|
875
|
-
return `${this.item.label}: ${result}`;
|
|
876
|
-
}
|
|
877
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipContentComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
878
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FsFilterChipContentComponent, isStandalone: true, selector: "fs-filter-chip-content", inputs: { item: "item", type: "type" }, ngImport: i0, template: "{{ content }}\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
879
|
-
}
|
|
880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipContentComponent, decorators: [{
|
|
881
|
-
type: Component,
|
|
882
|
-
args: [{ selector: 'fs-filter-chip-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "{{ content }}\n" }]
|
|
883
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { item: [{
|
|
884
|
-
type: Input
|
|
885
|
-
}], type: [{
|
|
886
|
-
type: Input
|
|
887
|
-
}] } });
|
|
888
|
-
function getLabelFromArray(labelArr, type) {
|
|
889
|
-
if (type === 'from' && labelArr[0]) {
|
|
890
|
-
return `${labelArr[0]}`;
|
|
891
|
-
}
|
|
892
|
-
else if (type === 'to' && labelArr[1]) {
|
|
893
|
-
return `${labelArr[1]}`;
|
|
894
|
-
}
|
|
895
|
-
return '';
|
|
896
|
-
}
|
|
897
|
-
|
|
898
|
-
class FocusControllerService {
|
|
899
|
-
_focusOn = new BehaviorSubject(null);
|
|
900
|
-
constructor() { }
|
|
901
|
-
get focusOn$() {
|
|
902
|
-
return this._focusOn.asObservable();
|
|
903
|
-
}
|
|
904
|
-
click(item, type) {
|
|
905
|
-
this._focusOn.next({ item, type });
|
|
906
|
-
}
|
|
907
|
-
listenFocusFor$(targetItem, targetType) {
|
|
908
|
-
return this._focusOn
|
|
909
|
-
.pipe(filter((event) => !!event), filter(({ item, type }) => {
|
|
910
|
-
return targetItem === item && targetType === type;
|
|
911
|
-
}), tap(() => this.clearFocus()));
|
|
912
|
-
}
|
|
913
|
-
clearFocus() {
|
|
914
|
-
this._focusOn.next(null);
|
|
915
|
-
}
|
|
916
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
917
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService });
|
|
918
|
-
}
|
|
919
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, decorators: [{
|
|
920
|
-
type: Injectable
|
|
921
|
-
}], ctorParameters: () => [] });
|
|
922
|
-
|
|
923
|
-
class FsFilterChipComponent {
|
|
924
|
-
item;
|
|
925
|
-
removable = false;
|
|
926
|
-
chips;
|
|
927
|
-
clickable = false;
|
|
928
|
-
rangeItem;
|
|
929
|
-
chipDelayedRender$;
|
|
930
|
-
_chipRenderTimer$ = timer(500)
|
|
931
|
-
.pipe(mapTo(true));
|
|
932
|
-
_destroy$ = new Subject();
|
|
933
|
-
_cdRef = inject(ChangeDetectorRef);
|
|
934
|
-
_focusController = inject(FocusControllerService);
|
|
935
|
-
ngOnInit() {
|
|
936
|
-
// this.rangeItem = this.item.isTypeDateRange
|
|
937
|
-
// || this.item.isTypeRange
|
|
938
|
-
// || this.item.isTypeDateTimeRange;
|
|
939
|
-
// this.listenValueChangesForRanges();
|
|
940
|
-
// this._initDelayRender();
|
|
941
|
-
// }
|
|
942
|
-
}
|
|
943
|
-
ngOnDestroy() {
|
|
944
|
-
this._destroy$.next(null);
|
|
945
|
-
this._destroy$.complete();
|
|
946
|
-
}
|
|
947
|
-
click(chip) {
|
|
948
|
-
if (this.clickable) {
|
|
949
|
-
this._focusController.click(this.item, chip.name);
|
|
950
|
-
}
|
|
951
|
-
}
|
|
952
|
-
remove(chip) {
|
|
953
|
-
this.item.clear(chip.name);
|
|
954
|
-
}
|
|
955
|
-
listenValueChangesForRanges() {
|
|
956
|
-
// this.item.valueChange$
|
|
957
|
-
// .pipe(
|
|
958
|
-
// takeUntil(this._destroy$),
|
|
959
|
-
// )
|
|
960
|
-
// .subscribe(() => {
|
|
961
|
-
// this._cdRef.markForCheck();
|
|
962
|
-
// });
|
|
963
|
-
}
|
|
964
|
-
_initDelayRender() {
|
|
965
|
-
this.chipDelayedRender$ = combineLatest([
|
|
966
|
-
this.item.values$,
|
|
967
|
-
this._chipRenderTimer$.pipe(startWith(false)),
|
|
968
|
-
])
|
|
969
|
-
.pipe(map(([values, timerValue]) => {
|
|
970
|
-
return !!values || timerValue;
|
|
971
|
-
}));
|
|
972
|
-
}
|
|
973
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
974
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipComponent, isStandalone: true, selector: "fs-filter-chip", inputs: { item: "item", removable: "removable", chips: "chips", clickable: "clickable" }, host: { properties: { "class.clickable": "this.clickable" } }, ngImport: i0, template: "@for (chip of chips; track chip) {\n <fs-chip\n [selectable]=\"false\"\n [removable]=\"item.showClear && removable\"\n size=\"small\"\n (click)=\"click(chip)\"\n (removed)=\"remove(chip)\">\n {{ chip.label }}: {{ chip.value }}\n </fs-chip>\n}\n<!-- {{ item.name }}\n@if ((chipDelayedRender$ | async)) {\n @if (rangeItem) {\n @if (item.value?.min || item.value?.from) {\n <fs-chip\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n [removable]=\"removable\"\n (click)=\"click('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 @if (item.value?.max || item.value?.to) {\n <fs-chip\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear && removable\"\n size=\"small\"\n (click)=\"click('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 } @else {\n <fs-chip\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear && removable\"\n size=\"small\"\n (click)=\"click()\"\n (removed)=\"removeItem($event)\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </fs-chip>\n }\n <ng-template\n #chipContent\n let-item=\"item\"\n let-type=\"type\">\n @if (!item.hasPendingValues && !item.loading) {\n <fs-filter-chip-content\n [item]=\"item\"\n [type]=\"type\">\n </fs-filter-chip-content>\n } @else {\n Loading...\n }\n </ng-template>\n} -->", styles: [":host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}:host.clickable fs-chip{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
975
|
-
}
|
|
976
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipComponent, decorators: [{
|
|
977
|
-
type: Component,
|
|
978
|
-
args: [{ selector: 'fs-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
979
|
-
FsChipModule,
|
|
980
|
-
NgTemplateOutlet,
|
|
981
|
-
FsFilterChipContentComponent,
|
|
982
|
-
AsyncPipe,
|
|
983
|
-
], template: "@for (chip of chips; track chip) {\n <fs-chip\n [selectable]=\"false\"\n [removable]=\"item.showClear && removable\"\n size=\"small\"\n (click)=\"click(chip)\"\n (removed)=\"remove(chip)\">\n {{ chip.label }}: {{ chip.value }}\n </fs-chip>\n}\n<!-- {{ item.name }}\n@if ((chipDelayedRender$ | async)) {\n @if (rangeItem) {\n @if (item.value?.min || item.value?.from) {\n <fs-chip\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear\"\n size=\"small\"\n [removable]=\"removable\"\n (click)=\"click('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 @if (item.value?.max || item.value?.to) {\n <fs-chip\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear && removable\"\n size=\"small\"\n (click)=\"click('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 } @else {\n <fs-chip\n [value]=\"item\"\n [selectable]=\"false\"\n [removable]=\"item.showClear && removable\"\n size=\"small\"\n (click)=\"click()\"\n (removed)=\"removeItem($event)\">\n <ng-template\n [ngTemplateOutlet]=\"chipContent\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </fs-chip>\n }\n <ng-template\n #chipContent\n let-item=\"item\"\n let-type=\"type\">\n @if (!item.hasPendingValues && !item.loading) {\n <fs-filter-chip-content\n [item]=\"item\"\n [type]=\"type\">\n </fs-filter-chip-content>\n } @else {\n Loading...\n }\n </ng-template>\n} -->", styles: [":host{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}:host.clickable fs-chip{cursor:pointer}\n"] }]
|
|
984
|
-
}], propDecorators: { item: [{
|
|
985
|
-
type: Input
|
|
986
|
-
}], removable: [{
|
|
987
|
-
type: Input
|
|
988
|
-
}], chips: [{
|
|
989
|
-
type: Input
|
|
990
|
-
}], clickable: [{
|
|
991
|
-
type: Input
|
|
992
|
-
}, {
|
|
993
|
-
type: HostBinding,
|
|
994
|
-
args: ['class.clickable']
|
|
995
|
-
}] } });
|
|
996
|
-
|
|
997
841
|
class BaseAutocompleteItem extends BaseItem {
|
|
998
842
|
_additionalConfig;
|
|
999
843
|
_filter;
|
|
@@ -1223,24 +1067,6 @@ class ChipsItem extends BaseItem {
|
|
|
1223
1067
|
clear() {
|
|
1224
1068
|
this.value = [];
|
|
1225
1069
|
}
|
|
1226
|
-
init(value) {
|
|
1227
|
-
return super.init(value)
|
|
1228
|
-
.pipe(tap$1(() => {
|
|
1229
|
-
if (!Array.isArray(this.values)) {
|
|
1230
|
-
this.values = [];
|
|
1231
|
-
}
|
|
1232
|
-
if (super.value && Array.isArray(super.value) && this.values.length) {
|
|
1233
|
-
if (Number.isInteger(super.value[0])) {
|
|
1234
|
-
super.value = super.value.map((id) => {
|
|
1235
|
-
return this.values.find((item) => item.value === id);
|
|
1236
|
-
});
|
|
1237
|
-
}
|
|
1238
|
-
}
|
|
1239
|
-
if (super.value === undefined) {
|
|
1240
|
-
super.value = [];
|
|
1241
|
-
}
|
|
1242
|
-
}));
|
|
1243
|
-
}
|
|
1244
1070
|
}
|
|
1245
1071
|
|
|
1246
1072
|
class BaseDateItem extends BaseItem {
|
|
@@ -2320,7 +2146,7 @@ class FilterController {
|
|
|
2320
2146
|
_initChanges() {
|
|
2321
2147
|
merge(...this.items
|
|
2322
2148
|
.map((item) => item.value$
|
|
2323
|
-
.pipe(map((
|
|
2149
|
+
.pipe(map(() => item))))
|
|
2324
2150
|
.pipe(tap((item) => this._change$.next([item])), takeUntil(this._destroy$))
|
|
2325
2151
|
.subscribe();
|
|
2326
2152
|
this._change$
|
|
@@ -2343,28 +2169,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2343
2169
|
type: Injectable
|
|
2344
2170
|
}] });
|
|
2345
2171
|
|
|
2172
|
+
class FocusControllerService {
|
|
2173
|
+
_focusOn = new BehaviorSubject(null);
|
|
2174
|
+
get focusOn$() {
|
|
2175
|
+
return this._focusOn.asObservable();
|
|
2176
|
+
}
|
|
2177
|
+
click(item, type) {
|
|
2178
|
+
this._focusOn.next({ item, type });
|
|
2179
|
+
}
|
|
2180
|
+
listenFocusFor$(targetItem, targetType) {
|
|
2181
|
+
return this._focusOn
|
|
2182
|
+
.pipe(filter((event) => !!event), filter(({ item, type }) => {
|
|
2183
|
+
return targetItem === item && targetType === type;
|
|
2184
|
+
}), tap(() => this.clearFocus()));
|
|
2185
|
+
}
|
|
2186
|
+
clearFocus() {
|
|
2187
|
+
this._focusOn.next(null);
|
|
2188
|
+
}
|
|
2189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2190
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService });
|
|
2191
|
+
}
|
|
2192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FocusControllerService, decorators: [{
|
|
2193
|
+
type: Injectable
|
|
2194
|
+
}] });
|
|
2195
|
+
|
|
2346
2196
|
class FsFilterChipsComponent {
|
|
2347
2197
|
ItemType = ItemType;
|
|
2348
2198
|
_filterController = inject(FilterController);
|
|
2199
|
+
_injector = inject(Injector);
|
|
2349
2200
|
get items() {
|
|
2350
2201
|
return this._filterController.items;
|
|
2351
2202
|
}
|
|
2352
2203
|
click(item, chip) {
|
|
2353
|
-
|
|
2204
|
+
this._injector.get(FocusControllerService).click(item, chip.name);
|
|
2354
2205
|
}
|
|
2355
2206
|
remove(item, chip) {
|
|
2356
2207
|
item.clear(chip.name);
|
|
2357
2208
|
}
|
|
2358
2209
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", ngImport: i0, template: "@for (item of items; track item.name) {\n @let chips = item.chips$ | async;\n @if (chips.length > 0) {\n @for (chip of chips; track chip.label) {\n <fs-chip\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"click(item, chip)\"\n (removed)=\"remove(item, chip)\">\n {{ chip.label
|
|
2210
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", ngImport: i0, template: "@for (item of items; track item.name) {\n @let chips = item.chips$ | async;\n @if (chips.length > 0) {\n @for (chip of chips; track chip.label) {\n <fs-chip\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"click(item, chip)\"\n (removed)=\"remove(item, chip)\">\n {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n </fs-chip>\n }\n }\n}", styles: [""], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2360
2211
|
}
|
|
2361
2212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
|
|
2362
2213
|
type: Component,
|
|
2363
2214
|
args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2364
|
-
FsFilterChipComponent,
|
|
2365
2215
|
AsyncPipe,
|
|
2366
2216
|
FsChipModule,
|
|
2367
|
-
], template: "@for (item of items; track item.name) {\n @let chips = item.chips$ | async;\n @if (chips.length > 0) {\n @for (chip of chips; track chip.label) {\n <fs-chip\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"click(item, chip)\"\n (removed)=\"remove(item, chip)\">\n {{ chip.label
|
|
2217
|
+
], template: "@for (item of items; track item.name) {\n @let chips = item.chips$ | async;\n @if (chips.length > 0) {\n @for (chip of chips; track chip.label) {\n <fs-chip\n [removable]=\"item.showClear\"\n size=\"small\"\n (click)=\"click(item, chip)\"\n (removed)=\"remove(item, chip)\">\n {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n </fs-chip>\n }\n }\n}" }]
|
|
2368
2218
|
}] });
|
|
2369
2219
|
|
|
2370
2220
|
class FsFilterDrawerActionsComponent {
|
|
@@ -3042,18 +2892,19 @@ class FsFilterSavedFilterChipsComponent {
|
|
|
3042
2892
|
this.items = [...this._filterController.items]
|
|
3043
2893
|
.filter((item) => !!this.savedFilter.filters[item.name])
|
|
3044
2894
|
.map((item) => {
|
|
3045
|
-
|
|
3046
|
-
|
|
2895
|
+
const object = item.clone();
|
|
2896
|
+
object.setValue(this.savedFilter.filters[item.name], false);
|
|
2897
|
+
return object;
|
|
3047
2898
|
});
|
|
3048
2899
|
}
|
|
3049
2900
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3050
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterChipsComponent, isStandalone: true, selector: "fs-saved-filter-chips", inputs: { savedFilter: "savedFilter" }, ngImport: i0, template: "<div class=\"filter-chips\">\n @for (item of items; track item.name) {\n <fs-
|
|
2901
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterSavedFilterChipsComponent, isStandalone: true, selector: "fs-saved-filter-chips", inputs: { savedFilter: "savedFilter" }, ngImport: i0, template: "<div class=\"filter-chips\">\n @for (item of items; track item.name) {\n @for (chip of item.chips; track chip.label) {\n <fs-chip size=\"small\">\n {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n </fs-chip>\n }\n }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$2.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3051
2902
|
}
|
|
3052
2903
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterSavedFilterChipsComponent, decorators: [{
|
|
3053
2904
|
type: Component,
|
|
3054
2905
|
args: [{ selector: 'fs-saved-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3055
|
-
|
|
3056
|
-
], template: "<div class=\"filter-chips\">\n @for (item of items; track item.name) {\n <fs-
|
|
2906
|
+
FsChipModule,
|
|
2907
|
+
], template: "<div class=\"filter-chips\">\n @for (item of items; track item.name) {\n @for (chip of item.chips; track chip.label) {\n <fs-chip size=\"small\">\n {{ chip.value ? chip.label + ': ' + chip.value : chip.label }}\n </fs-chip>\n }\n }\n</div>", styles: [".filter-chips{display:flex;flex-wrap:wrap;gap:4px}\n"] }]
|
|
3057
2908
|
}], propDecorators: { savedFilter: [{
|
|
3058
2909
|
type: Input
|
|
3059
2910
|
}] } });
|
|
@@ -3062,14 +2913,14 @@ class FsFilterSavedFilterManageComponent {
|
|
|
3062
2913
|
savedFilters;
|
|
3063
2914
|
_savedFilterController = inject(SavedFilterController);
|
|
3064
2915
|
_cdRef = inject(ChangeDetectorRef);
|
|
3065
|
-
|
|
2916
|
+
_filterController = inject(FilterController);
|
|
3066
2917
|
_dialogRef = inject(MatDialogRef);
|
|
3067
2918
|
_filterOverlayService = inject(FsFilterOverlayService);
|
|
3068
2919
|
ngOnInit() {
|
|
3069
2920
|
this.savedFilters = this._savedFilterController.savedFilters;
|
|
3070
2921
|
}
|
|
3071
2922
|
get items() {
|
|
3072
|
-
return this.
|
|
2923
|
+
return this._filterController.items;
|
|
3073
2924
|
}
|
|
3074
2925
|
get pluralLabelLower() {
|
|
3075
2926
|
return this._savedFilterController.pluralLabelLower;
|
|
@@ -3366,7 +3217,7 @@ class FilterComponent {
|
|
|
3366
3217
|
get inlineToolbar$() {
|
|
3367
3218
|
return combineLatest({
|
|
3368
3219
|
keywordVisible: this.keywordVisible$,
|
|
3369
|
-
activeFilter: of(this.
|
|
3220
|
+
activeFilter: of(this.savedFilterController.enabled),
|
|
3370
3221
|
})
|
|
3371
3222
|
.pipe(map(({ keywordVisible, activeFilter }) => {
|
|
3372
3223
|
return !keywordVisible && !activeFilter;
|
|
@@ -3385,16 +3236,7 @@ class FilterComponent {
|
|
|
3385
3236
|
get menuActions$() {
|
|
3386
3237
|
return this._actionsController.menuActions$;
|
|
3387
3238
|
}
|
|
3388
|
-
|
|
3389
|
-
this._savedFilterController.setActiveFilter(savedFilter);
|
|
3390
|
-
}
|
|
3391
|
-
get activeSavedFilter() {
|
|
3392
|
-
return this._savedFilterController.activeFilter;
|
|
3393
|
-
}
|
|
3394
|
-
get savedFilters() {
|
|
3395
|
-
return this._savedFilterController.savedFilters;
|
|
3396
|
-
}
|
|
3397
|
-
get savedFiltersController() {
|
|
3239
|
+
get savedFilterController() {
|
|
3398
3240
|
return this._savedFilterController;
|
|
3399
3241
|
}
|
|
3400
3242
|
ngOnInit() {
|
|
@@ -3625,7 +3467,7 @@ class FilterComponent {
|
|
|
3625
3467
|
ActionsController,
|
|
3626
3468
|
KeywordController,
|
|
3627
3469
|
SortController,
|
|
3628
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n @if (notInlineToolbar$ | async) {\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n }\n <div class=\"filter-inner-container\">\n @if (notInlineToolbar$ | async) {\n <div class=\"filter-inner-inputs\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @if (
|
|
3470
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"filter-container\">\n @if (notInlineToolbar$ | async) {\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n }\n <div class=\"filter-inner-container\">\n @if (notInlineToolbar$ | async) {\n <div class=\"filter-inner-inputs\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @if (savedFilterController.enabled) {\n <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n }\n </div>\n } @else {\n <div>\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n @if (notInlineToolbar$ | async) {\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n }\n</div>\n<ng-template #filterStatusBarChips>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n @if (config.chips) {\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n }\n</ng-template>\n<ng-template #filterActions>\n @if (actionsVisible$ | async) {\n <div class=\"filter-actions\">\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbar>\n @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n <div class=\"filter-toolbar\">\n @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n <a\n mat-icon-button\n class=\"button-filters\"\n (click)=\"filterButtonClick($event)\"\n [color]=\"config.button.color\">\n @if (config.button.icon) {\n <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n }\n </a>\n }\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <div class=\"filter-reload\">\n @if (config.autoReload) {\n <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [(ngModel)]=\"autoReload\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #heading>\n @if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.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:18px}.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-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}: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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsSavedFilterAutocompleteChipsComponent, selector: "fs-saved-filter-autocomplete-chips", inputs: ["savedFiltersController"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsClearModule }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips" }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3629
3471
|
}
|
|
3630
3472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3631
3473
|
type: Component,
|
|
@@ -3653,7 +3495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3653
3495
|
MatSlideToggle,
|
|
3654
3496
|
AsyncPipe,
|
|
3655
3497
|
KeywordInputComponent,
|
|
3656
|
-
], template: "<div class=\"filter-container\">\n @if (notInlineToolbar$ | async) {\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n }\n <div class=\"filter-inner-container\">\n @if (notInlineToolbar$ | async) {\n <div class=\"filter-inner-inputs\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @if (
|
|
3498
|
+
], template: "<div class=\"filter-container\">\n @if (notInlineToolbar$ | async) {\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n }\n <div class=\"filter-inner-container\">\n @if (notInlineToolbar$ | async) {\n <div class=\"filter-inner-inputs\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @if (savedFilterController.enabled) {\n <fs-saved-filter-autocomplete-chips [savedFiltersController]=\"savedFilterController\"></fs-saved-filter-autocomplete-chips>\n }\n </div>\n } @else {\n <div>\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n @if (notInlineToolbar$ | async) {\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n }\n</div>\n<ng-template #filterStatusBarChips>\n @if (statusBar) {\n <div\n class=\"filter-status-container\"\n [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div\n class=\"filter-status\"\n #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n }\n @if (config.chips) {\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n }\n</ng-template>\n<ng-template #filterActions>\n @if (actionsVisible$ | async) {\n <div class=\"filter-actions\">\n <fs-filter-actions\n [actions]=\"actions$ | async\"\n [kebabActions]=\"menuActions$ | async\">\n </fs-filter-actions>\n </div>\n }\n</ng-template>\n<ng-template #filterToolbar>\n @if (config.reload || config.autoReload || ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting)) {\n <div class=\"filter-toolbar\">\n @if ((filtersBtnVisible$ | async) && hasVisibleItemOrSorting) {\n <a\n mat-icon-button\n class=\"button-filters\"\n (click)=\"filterButtonClick($event)\"\n [color]=\"config.button.color\">\n @if (config.button.icon) {\n <mat-icon [svgIcon]=\"'filterOutline'\"></mat-icon>\n }\n </a>\n }\n @if (config.reload) {\n <a\n mat-icon-button\n (click)=\"reload($event)\"\n class=\"button-reload\">\n <mat-icon #reloadEl>\n refresh\n </mat-icon>\n </a>\n }\n @if (config.autoReload) {\n <div class=\"filter-reload\">\n @if (config.autoReload) {\n <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [(ngModel)]=\"autoReload\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #heading>\n @if (config.heading) {\n <div class=\"heading\">\n <h2>\n {{ config.heading }}\n </h2>\n <div class=\"subheading\">\n {{ config.subheading }}\n </div>\n </div>\n }\n</ng-template>", styles: [":host{margin-bottom:20px;display:block}.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:18px}.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-inner-inputs{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.filter-toolbar .button-filters,.filter-toolbar .button-reload{display:flex;width:40px;padding:8px;height:40px;overflow:hidden}.filter-toolbar .button-filters ::ng-deep svg,.filter-toolbar .button-reload ::ng-deep svg{display:flex}.filter-toolbar .filter-reload{margin-left:10px;display:flex;align-items:center}.filter-toolbar .filter-reload .auto-reload{margin-right:5px}.filter-toolbar .filter-reload .auto-reload span{font-size:80%}.heading{margin-right:10px}.heading h2{margin:0}.heading h2+.subheading{margin:0}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin:4px 0;display:flex;flex-wrap:wrap;gap:5px}@media screen and (min-width: 1200px){html.fs-filter-open body{margin-right:350px}}html.fs-filter-open{scrollbar-width:none}:host ::ng-deep .auto-reload.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(12px,0,0)}: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"] }]
|
|
3657
3499
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
3658
3500
|
type: ViewChild,
|
|
3659
3501
|
args: [KeywordInputComponent]
|
|
@@ -4253,8 +4095,6 @@ class FsFilterModule {
|
|
|
4253
4095
|
DateRangeComponent,
|
|
4254
4096
|
CheckboxComponent,
|
|
4255
4097
|
FilterDrawerComponent,
|
|
4256
|
-
FsFilterChipComponent,
|
|
4257
|
-
FsFilterChipContentComponent,
|
|
4258
4098
|
FsFilterDrawerActionsComponent,
|
|
4259
4099
|
FsFilterActionsComponent,
|
|
4260
4100
|
FsFilterActionButtonComponent,
|
|
@@ -4280,7 +4120,6 @@ class FsFilterModule {
|
|
|
4280
4120
|
DateRangeComponent,
|
|
4281
4121
|
CheckboxComponent,
|
|
4282
4122
|
FilterDrawerComponent,
|
|
4283
|
-
FsFilterChipComponent,
|
|
4284
4123
|
FsFilterDrawerActionsComponent,
|
|
4285
4124
|
FsFilterActionsComponent,
|
|
4286
4125
|
FsFilterActionButtonComponent,
|
|
@@ -4306,8 +4145,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4306
4145
|
DateRangeComponent,
|
|
4307
4146
|
CheckboxComponent,
|
|
4308
4147
|
FilterDrawerComponent,
|
|
4309
|
-
FsFilterChipComponent,
|
|
4310
|
-
FsFilterChipContentComponent,
|
|
4311
4148
|
FsFilterDrawerActionsComponent,
|
|
4312
4149
|
FsFilterActionsComponent,
|
|
4313
4150
|
FsFilterActionButtonComponent,
|