@firestitch/filter 18.0.13 → 18.0.14
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-chip/filter-chip.component.d.ts +0 -3
- package/app/components/filters-item/select/groups/groups.component.d.ts +1 -0
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter/filter.component.mjs +2 -2
- package/esm2022/app/components/filter-chip/filter-chip.component.mjs +4 -24
- package/esm2022/app/components/filter-chips/filter-chips.component.mjs +3 -3
- package/esm2022/app/components/filters-item/range/range.component.mjs +3 -3
- package/esm2022/app/components/filters-item/select/groups/groups.component.mjs +5 -2
- package/esm2022/app/components/filters-item/text/text.component.mjs +3 -3
- package/fesm2022/firestitch-filter.mjs +13 -30
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2754,7 +2754,6 @@ class FsFilterChipComponent {
|
|
|
2754
2754
|
_cdRef;
|
|
2755
2755
|
_focusController;
|
|
2756
2756
|
item;
|
|
2757
|
-
itemVisible;
|
|
2758
2757
|
rangeItem;
|
|
2759
2758
|
chipDelayedRender$;
|
|
2760
2759
|
_chipRenderTimer$ = timer(500)
|
|
@@ -2768,16 +2767,8 @@ class FsFilterChipComponent {
|
|
|
2768
2767
|
this.rangeItem = this.item.isTypeDateRange
|
|
2769
2768
|
|| this.item.isTypeRange
|
|
2770
2769
|
|| this.item.isTypeDateTimeRange;
|
|
2771
|
-
this.listenValueChangesForRanges();
|
|
2772
|
-
this._updateVisibility();
|
|
2773
2770
|
if (this.item.hasPendingValues) {
|
|
2774
2771
|
this.item.loadAsyncValues(false);
|
|
2775
|
-
this.item.values$
|
|
2776
|
-
.pipe(take(2), takeUntil(this._destroy$))
|
|
2777
|
-
.subscribe(() => {
|
|
2778
|
-
this._updateVisibility();
|
|
2779
|
-
this._cdRef.markForCheck();
|
|
2780
|
-
});
|
|
2781
2772
|
this._initDelayRender();
|
|
2782
2773
|
}
|
|
2783
2774
|
}
|
|
@@ -2799,17 +2790,6 @@ class FsFilterChipComponent {
|
|
|
2799
2790
|
this.item.clear();
|
|
2800
2791
|
}
|
|
2801
2792
|
}
|
|
2802
|
-
listenValueChangesForRanges() {
|
|
2803
|
-
this.item.value$
|
|
2804
|
-
.pipe(distinctUntilChanged(), takeUntil(this._destroy$))
|
|
2805
|
-
.subscribe(() => {
|
|
2806
|
-
this._updateVisibility();
|
|
2807
|
-
this._cdRef.markForCheck();
|
|
2808
|
-
});
|
|
2809
|
-
}
|
|
2810
|
-
_updateVisibility() {
|
|
2811
|
-
this.itemVisible = this.item.isChipVisible;
|
|
2812
|
-
}
|
|
2813
2793
|
_initDelayRender() {
|
|
2814
2794
|
this.chipDelayedRender$ = combineLatest([
|
|
2815
2795
|
this.item.values$,
|
|
@@ -2820,11 +2800,11 @@ class FsFilterChipComponent {
|
|
|
2820
2800
|
}));
|
|
2821
2801
|
}
|
|
2822
2802
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FocusControllerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2823
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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
|
|
2803
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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 <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 </ng-container>\n <ng-template #defaultChip>\n <fs-chip\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 <ng-template\n #chipContent\n let-item=\"item\"\n let-type=\"type\">\n <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n <fs-filter-chip-content\n [item]=\"item\"\n [type]=\"type\">\n </fs-filter-chip-content>\n </ng-container>\n <ng-template #lodaingValues>\n Loading...\n </ng-template>\n </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "actionable", "value", "maxWidth", "actions", "icon", "image", "selected", "size", "backgroundColor", "borderColor", "color", "outlined"], outputs: ["selectedToggled", "removed"] }, { kind: "component", type: FsFilterChipContentComponent, selector: "fs-filter-chip-content", inputs: ["item", "type"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2824
2804
|
}
|
|
2825
2805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipComponent, decorators: [{
|
|
2826
2806
|
type: Component,
|
|
2827
|
-
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
|
|
2807
|
+
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 <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 </ng-container>\n <ng-template #defaultChip>\n <fs-chip\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 <ng-template\n #chipContent\n let-item=\"item\"\n let-type=\"type\">\n <ng-container *ngIf=\"!item.hasPendingValues && !item.loading; else lodaingValues\">\n <fs-filter-chip-content\n [item]=\"item\"\n [type]=\"type\">\n </fs-filter-chip-content>\n </ng-container>\n <ng-template #lodaingValues>\n Loading...\n </ng-template>\n </ng-template>\n</ng-container>", styles: ["fs-chip{cursor:pointer}\n"] }]
|
|
2828
2808
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FocusControllerService }], propDecorators: { item: [{
|
|
2829
2809
|
type: Input
|
|
2830
2810
|
}] } });
|
|
@@ -2833,11 +2813,11 @@ class FsFilterChipsComponent {
|
|
|
2833
2813
|
filters;
|
|
2834
2814
|
ItemType = ItemType;
|
|
2835
2815
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2836
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2816
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: { filters: "filters" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of filters\">\n <ng-container *ngIf=\"(item.value$ | async) !== undefined && item.type !== ItemType.Keyword\">\n @if (item.isChipVisible) {\n <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n }\n </ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsFilterChipComponent, selector: "fs-filter-chip", inputs: ["item"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2837
2817
|
}
|
|
2838
2818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
|
|
2839
2819
|
type: Component,
|
|
2840
|
-
args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of filters\">\n <ng-container *ngIf=\"(item.value$ | async) !== undefined && item.type !== ItemType.Keyword\">\n <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n </ng-container>\n</ng-container>" }]
|
|
2820
|
+
args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of filters\">\n <ng-container *ngIf=\"(item.value$ | async) !== undefined && item.type !== ItemType.Keyword\">\n @if (item.isChipVisible) {\n <fs-filter-chip [item]=\"item\"></fs-filter-chip>\n }\n </ng-container>\n</ng-container>" }]
|
|
2841
2821
|
}], propDecorators: { filters: [{
|
|
2842
2822
|
type: Input
|
|
2843
2823
|
}] } });
|
|
@@ -3074,6 +3054,9 @@ class SelectGroupsComponent {
|
|
|
3074
3054
|
compare(o1, o2) {
|
|
3075
3055
|
return o1 == o2;
|
|
3076
3056
|
}
|
|
3057
|
+
markForCheck() {
|
|
3058
|
+
this.cd.markForCheck();
|
|
3059
|
+
}
|
|
3077
3060
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SelectGroupsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3078
3061
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SelectGroupsComponent, selector: "filter-item-select-groups", inputs: { item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field>\n <mat-label>{{item.label}}</mat-label>\n <mat-select\n #select\n [fsFilterFocusTrigger]=\"item\"\n [(ngModel)]=\"item.model\"\n [compareWith]=\"compare\">\n <ng-container *ngFor=\"let selectItem of item.values\">\n <ng-container *ngIf=\"selectItem[item.children]; else simpleOption\">\n <mat-optgroup [label]=\"selectItem.name\">\n <mat-option *ngFor=\"let subItem of selectItem[item.children]\"\n [value]=\"subItem.value\"\n [ngStyle]=\"selectItem.style\">\n {{ subItem.name }}\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #simpleOption>\n <mat-option\n [value]=\"selectItem.value\"\n [ngStyle]=\"selectItem.style\">\n {{ selectItem.name }}\n </mat-option>\n </ng-template>\n </ng-container>\n </mat-select>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i9.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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3079
3062
|
}
|
|
@@ -3283,11 +3266,11 @@ class TextComponent extends BaseItemComponent {
|
|
|
3283
3266
|
});
|
|
3284
3267
|
}
|
|
3285
3268
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TextComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3286
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: TextComponent, selector: "filter-item-text", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n <mat-label
|
|
3269
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: TextComponent, selector: "filter-item-text", usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n <mat-label>\n {{ item.label }}\n </mat-label>\n <span\n matTextPrefix\n *ngIf=\"item.prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n <input\n matInput\n [formControl]=\"textControl\"\n [fsFilterFocusTrigger]=\"item\">\n <span\n matSuffix\n *ngIf=\"item.suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n</mat-form-field>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3287
3270
|
}
|
|
3288
3271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TextComponent, decorators: [{
|
|
3289
3272
|
type: Component,
|
|
3290
|
-
args: [{ selector: 'filter-item-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n <mat-label
|
|
3273
|
+
args: [{ selector: 'filter-item-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n <mat-label>\n {{ item.label }}\n </mat-label>\n <span\n matTextPrefix\n *ngIf=\"item.prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n <input\n matInput\n [formControl]=\"textControl\"\n [fsFilterFocusTrigger]=\"item\">\n <span\n matSuffix\n *ngIf=\"item.suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n</mat-form-field>" }]
|
|
3291
3274
|
}], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }] });
|
|
3292
3275
|
|
|
3293
3276
|
class WeekComponent extends BaseItemComponent {
|
|
@@ -3332,11 +3315,11 @@ class RangeComponent extends BaseItemComponent {
|
|
|
3332
3315
|
});
|
|
3333
3316
|
}
|
|
3334
3317
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RangeComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3335
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n <mat-form-field class=\"filter-range-min\">\n <mat-label
|
|
3318
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RangeComponent, selector: "filter-item-range", viewQueries: [{ propertyName: "from", first: true, predicate: ["from"], descendants: true, static: true }, { propertyName: "to", first: true, predicate: ["to"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field\">\n <mat-form-field class=\"filter-range-min\">\n <mat-label>\n {{ item.label[0] }}\n </mat-label>\n <span\n matTextPrefix\n class=\"text-prefix\"\n *ngIf=\"item.prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n <input\n matInput\n [fsFilterFocusTrigger]=\"item\"\n [focusTargetType]=\"'from'\"\n type=\"text\"\n inputmode=\"decimal\"\n [(ngModel)]=\"item.model.min\"\n #from>\n <span\n matSuffix\n class=\"text-suffix\"\n *ngIf=\"item.suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n </mat-form-field>\n <mat-form-field class=\"filter-range-max\">\n <mat-label>\n {{ item.label[1] }}\n </mat-label>\n <span\n matTextPrefix\n class=\"text-prefix\"\n *ngIf=\"item.prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n <input\n matInput\n [fsFilterFocusTrigger]=\"item\"\n [focusTargetType]=\"'to'\"\n type=\"text\"\n inputmode=\"decimal\"\n [(ngModel)]=\"item.model.max\"\n #to>\n <span\n matSuffix\n class=\"text-suffix\"\n *ngIf=\"item.suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9.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: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger", "focusTargetType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3336
3319
|
}
|
|
3337
3320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RangeComponent, decorators: [{
|
|
3338
3321
|
type: Component,
|
|
3339
|
-
args: [{ selector: 'filter-item-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-field\">\n <mat-form-field class=\"filter-range-min\">\n <mat-label
|
|
3322
|
+
args: [{ selector: 'filter-item-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-field\">\n <mat-form-field class=\"filter-range-min\">\n <mat-label>\n {{ item.label[0] }}\n </mat-label>\n <span\n matTextPrefix\n class=\"text-prefix\"\n *ngIf=\"item.prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n <input\n matInput\n [fsFilterFocusTrigger]=\"item\"\n [focusTargetType]=\"'from'\"\n type=\"text\"\n inputmode=\"decimal\"\n [(ngModel)]=\"item.model.min\"\n #from>\n <span\n matSuffix\n class=\"text-suffix\"\n *ngIf=\"item.suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n </mat-form-field>\n <mat-form-field class=\"filter-range-max\">\n <mat-label>\n {{ item.label[1] }}\n </mat-label>\n <span\n matTextPrefix\n class=\"text-prefix\"\n *ngIf=\"item.prefix\"\n [innerHtml]=\"item.prefix\">\n </span>\n <input\n matInput\n [fsFilterFocusTrigger]=\"item\"\n [focusTargetType]=\"'to'\"\n type=\"text\"\n inputmode=\"decimal\"\n [(ngModel)]=\"item.model.max\"\n #to>\n <span\n matSuffix\n class=\"text-suffix\"\n *ngIf=\"item.suffix\"\n [innerHtml]=\"item.suffix\">\n </span>\n </mat-form-field>\n</div>", styles: [".form-field{display:flex}.form-field mat-form-field{min-width:0}.form-field mat-form-field+mat-form-field{margin-left:10px}\n"] }]
|
|
3340
3323
|
}], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { from: [{
|
|
3341
3324
|
type: ViewChild,
|
|
3342
3325
|
args: ['from', { static: true }]
|
|
@@ -4399,7 +4382,7 @@ class FilterComponent {
|
|
|
4399
4382
|
FsFilterItemsStore,
|
|
4400
4383
|
SavedFiltersController,
|
|
4401
4384
|
ActionsController,
|
|
4402
|
-
], 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 class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\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-icon-button\n class=\"button-filters\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n @if(config.button.icon) { \n <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n }\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=\"button-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 .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin
|
|
4385
|
+
], 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 class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\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-icon-button\n class=\"button-filters\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n @if(config.button.icon) { \n <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n }\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=\"button-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 .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.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: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .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: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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i3$2.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i12.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: "directive", type: i9.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: "component", type: i14.FsClearComponent, selector: "[fsClear]", inputs: ["ngModel", "visible", "fsClear"], outputs: ["ngModelChange", "cleared"] }, { kind: "component", type: FsFilterChipsComponent, selector: "fs-filter-chips", inputs: ["filters"] }, { kind: "component", type: FsFilterActionsComponent, selector: "fs-filter-actions", inputs: ["kebabActions", "actions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4403
4386
|
}
|
|
4404
4387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterComponent, decorators: [{
|
|
4405
4388
|
type: Component,
|
|
@@ -4412,7 +4395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
4412
4395
|
FsFilterItemsStore,
|
|
4413
4396
|
SavedFiltersController,
|
|
4414
4397
|
ActionsController,
|
|
4415
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\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-icon-button\n class=\"button-filters\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n @if(config.button.icon) { \n <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n }\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=\"button-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 .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.results{min-height:90px;position:relative;overflow-x:auto;overflow-y:hidden}fs-filter-chips{margin
|
|
4398
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-container\">\n <div class=\"filter-inner-container\">\n <ng-container *ngIf=\"!hasKeyword; else filterKeyword\">\n <div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n\n <ng-container *ngIf=\"hasKeyword\">\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n </ng-container>\n</div>\n\n<ng-template #filterStatusBarChips>\n <ng-container *ngIf=\"statusBar\">\n <div class=\"filter-status-container\" [ngClass]=\"{ 'has-status': !!filterStatus.textContent }\">\n <div class=\"filter-status\" #filterStatus>\n <ng-container *ngTemplateOutlet=\"statusBar.templateRef\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"config.chips && hasFilterChips$ | async\">\n <fs-filter-chips\n class=\"filter-chips\"\n [filters]=\"items\">\n </fs-filter-chips>\n </ng-container>\n</ng-template>\n\n<ng-template #filterKeyword>\n <div class=\"filter-keyword\">\n <ng-container *ngIf=\"(keywordVisible$ | async) && !keywordItem?.hide \">\n <mat-form-field\n class=\"form-field-padless\"\n [ngClass]=\"search\"\n appearance=\"outline\">\n <span matPrefix class=\"icon\">\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-icon-button\n class=\"button-filters\"\n (click)=\"changeVisibilityClick(!showFilterMenu, $event)\"\n [color]=\"config.button.color\">\n @if(config.button.icon) { \n <mat-icon svgIcon=\"filterOutline\"></mat-icon>\n }\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=\"button-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 .icon{margin-left:10px}.filter-inner-container .filter-keyword mat-form-field .icon mat-icon{font-size:24px;color:#626262}.filter-inner-container .filter-keyword mat-form-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.filter-actions{display:flex;align-items:center}.filter-toobar{flex:1;white-space:nowrap;display:flex;align-items:center}.filter-toobar .button-reload{margin-left:-6px}.filter-toobar .button-filters,.filter-toobar .button-reload{display:flex;width:40px;padding:8px;height:40px}.filter-toobar .button-filters ::ng-deep svg,.filter-toobar .button-reload ::ng-deep svg{display:flex}.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: 599px){.filter-actions{margin-left:10px}.button-filters+fs-filter-actions:not(:empty){margin-left:5px}}@media screen and (max-width: 600px){.button-filters{margin-left:5px}.button-filters .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: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"] }]
|
|
4416
4399
|
}], ctorParameters: () => [{ type: FsFilterConfig, decorators: [{
|
|
4417
4400
|
type: Optional
|
|
4418
4401
|
}, {
|