@firestitch/filter 18.2.100 → 18.2.101
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-chips/filter-chips.component.d.ts +2 -2
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter/filter.component.mjs +3 -3
- package/esm2022/app/components/filter-chips/filter-chips.component.mjs +33 -38
- package/fesm2022/firestitch-filter.mjs +36 -39
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -13,10 +13,10 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
|
|
|
13
13
|
import * as i3$3 from '@firestitch/clear';
|
|
14
14
|
import { FsClearModule } from '@firestitch/clear';
|
|
15
15
|
import * as i3 from '@firestitch/form';
|
|
16
|
-
import { FsFormModule
|
|
16
|
+
import { FsFormModule } from '@firestitch/form';
|
|
17
17
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
18
18
|
import { MatInput } from '@angular/material/input';
|
|
19
|
-
import { MatSelect
|
|
19
|
+
import { MatSelect } from '@angular/material/select';
|
|
20
20
|
import * as i1$2 from '@firestitch/autocomplete';
|
|
21
21
|
import { FsAutocompleteComponent, FsAutocompleteModule } from '@firestitch/autocomplete';
|
|
22
22
|
import * as i1$3 from '@firestitch/autocomplete-chips';
|
|
@@ -3392,36 +3392,6 @@ class FsFilterChipsComponent {
|
|
|
3392
3392
|
this._initMoreFilterItems();
|
|
3393
3393
|
this._initClearFiltersVisible();
|
|
3394
3394
|
}
|
|
3395
|
-
_initSecondaryItems() {
|
|
3396
|
-
this._updateSecondaryItems();
|
|
3397
|
-
merge(...this.items
|
|
3398
|
-
.reduce((accum, item) => {
|
|
3399
|
-
return [
|
|
3400
|
-
...accum,
|
|
3401
|
-
item.hasValue$
|
|
3402
|
-
.pipe(skip$1(1)),
|
|
3403
|
-
item.visible$
|
|
3404
|
-
.pipe(skip$1(1)),
|
|
3405
|
-
];
|
|
3406
|
-
}, []))
|
|
3407
|
-
.pipe(tap$1(() => {
|
|
3408
|
-
this._updateSecondaryItems();
|
|
3409
|
-
}), takeUntilDestroyed(this._destroyRef))
|
|
3410
|
-
.subscribe();
|
|
3411
|
-
}
|
|
3412
|
-
_updateSecondaryItems() {
|
|
3413
|
-
this.secondaryItems = this.items
|
|
3414
|
-
.filter((item) => {
|
|
3415
|
-
if (!item.allowSecondary) {
|
|
3416
|
-
return false;
|
|
3417
|
-
}
|
|
3418
|
-
// Exclude checkbox items without values from secondary filters
|
|
3419
|
-
if (item.isTypeCheckbox && !item.hasValue) {
|
|
3420
|
-
return false;
|
|
3421
|
-
}
|
|
3422
|
-
return true;
|
|
3423
|
-
});
|
|
3424
|
-
}
|
|
3425
3395
|
clear() {
|
|
3426
3396
|
this._filterController.items
|
|
3427
3397
|
.filter((item) => item.clearable)
|
|
@@ -3545,6 +3515,36 @@ class FsFilterChipsComponent {
|
|
|
3545
3515
|
removeItem(item) {
|
|
3546
3516
|
item.secondaryHide();
|
|
3547
3517
|
}
|
|
3518
|
+
_initSecondaryItems() {
|
|
3519
|
+
this._updateSecondaryItems();
|
|
3520
|
+
merge(...this.items
|
|
3521
|
+
.reduce((accum, item) => {
|
|
3522
|
+
return [
|
|
3523
|
+
...accum,
|
|
3524
|
+
item.hasValue$
|
|
3525
|
+
.pipe(skip$1(1)),
|
|
3526
|
+
item.visible$
|
|
3527
|
+
.pipe(skip$1(1)),
|
|
3528
|
+
];
|
|
3529
|
+
}, []))
|
|
3530
|
+
.pipe(tap$1(() => {
|
|
3531
|
+
this._updateSecondaryItems();
|
|
3532
|
+
}), takeUntilDestroyed(this._destroyRef))
|
|
3533
|
+
.subscribe();
|
|
3534
|
+
}
|
|
3535
|
+
_updateSecondaryItems() {
|
|
3536
|
+
this.secondaryItems = this.items
|
|
3537
|
+
.filter((item) => {
|
|
3538
|
+
if (!item.allowSecondary) {
|
|
3539
|
+
return false;
|
|
3540
|
+
}
|
|
3541
|
+
// Exclude checkbox items without values from secondary filters
|
|
3542
|
+
if (item.isTypeCheckbox && !item.hasValue) {
|
|
3543
|
+
return false;
|
|
3544
|
+
}
|
|
3545
|
+
return true;
|
|
3546
|
+
});
|
|
3547
|
+
}
|
|
3548
3548
|
_attachContainer(overlayRef, item, name) {
|
|
3549
3549
|
const injector = this._createInjector(item, name);
|
|
3550
3550
|
const containerPortal = new ComponentPortal(FilterItemDialogComponent, undefined, injector);
|
|
@@ -3613,21 +3613,18 @@ class FsFilterChipsComponent {
|
|
|
3613
3613
|
.subscribe();
|
|
3614
3614
|
}
|
|
3615
3615
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", viewQueries: [{ propertyName: "chips", predicate: FsChipComponent, descendants: true }], ngImport: i0, template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"handleChipClick(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip, $event)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"handleChipClick(item)\"\n [outlined]=\"true\"\n [outlineDash]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n @if (moreFilterItems().length > 0) {\n <fs-chip-select\n [outlined]=\"true\"\n (select)=\"addFilter($event)\">\n <fs-chip-select-trigger>\n More filters\n </fs-chip-select-trigger>\n @for (item of moreFilterItems(); track item.name) {\n <fs-chip-select-option [value]=\"item\">\n {{ item.mergedLabel }}\n </fs-chip-select-option>\n }\n </fs-chip-select>\n }\n @if (savedFilterController.enabled) {\n <fs-chip-select [outlined]=\"true\">\n <fs-chip-select-trigger>\n {{ (savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel }}\n </fs-chip-select-trigger>\n @if (savedFilterController.activeFilter$ | async) {\n <fs-chip-select-option (click)=\"saveActiveFilter()\">\n Update filters\n </fs-chip-select-option>\n <fs-chip-select-option (click)=\"saveAs()\">\n Save as new\n </fs-chip-select-option>\n } @else {\n <fs-chip-select-option (click)=\"createSavedFilter()\">\n Create new\n </fs-chip-select-option>\n }\n <fs-chip-select-option (click)=\"manageSavedFilters()\">\n View all\n </fs-chip-select-option>\n </fs-chip-select>\n }\n @if (clearFiltersVisible()) {\n <fs-chip\n [outlined]=\"true\"\n (click)=\"clear()\">\n Clear filters\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;
|
|
3616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterChipsComponent, isStandalone: true, selector: "fs-filter-chips", viewQueries: [{ propertyName: "chips", predicate: FsChipComponent, descendants: true }], ngImport: i0, template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"handleChipClick(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip, $event)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"handleChipClick(item)\"\n [outlined]=\"true\"\n [outlineDash]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n @if (moreFilterItems().length > 0) {\n <fs-chip-select\n [outlined]=\"true\"\n (select)=\"addFilter($event)\">\n <fs-chip-select-trigger>\n More filters\n </fs-chip-select-trigger>\n @for (item of moreFilterItems(); track item.name) {\n <fs-chip-select-option [value]=\"item\">\n {{ item.mergedLabel }}\n </fs-chip-select-option>\n }\n </fs-chip-select>\n }\n @if (savedFilterController.enabled) {\n <fs-chip-select [outlined]=\"true\">\n <fs-chip-select-trigger>\n {{ (savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel }}\n </fs-chip-select-trigger>\n @if (savedFilterController.activeFilter$ | async) {\n <fs-chip-select-option (click)=\"saveActiveFilter()\">\n Update filters\n </fs-chip-select-option>\n <fs-chip-select-option (click)=\"saveAs()\">\n Save as new\n </fs-chip-select-option>\n } @else {\n <fs-chip-select-option (click)=\"createSavedFilter()\">\n Create new\n </fs-chip-select-option>\n }\n <fs-chip-select-option (click)=\"manageSavedFilters()\">\n View all\n </fs-chip-select-option>\n </fs-chip-select>\n }\n @if (clearFiltersVisible()) {\n <fs-chip\n [outlined]=\"true\"\n (click)=\"clear()\">\n Clear filters\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;z-index:999}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px;font-size:90%}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .mat-mdc-select-panel.fs-filter-no-initial-focus .mat-mdc-option-active:not(:hover){background:transparent!important}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "directive", type: i1$5.FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: ["icon", "link", "linkTarget", "color", "data", "tooltip"], outputs: ["click"] }, { kind: "component", type: i1$5.FsChipSelectComponent, selector: "fs-chip-select", inputs: ["size", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash"], outputs: ["select"] }, { kind: "component", type: i1$5.FsChipSelectTriggerDirective, selector: "fs-chip-select-trigger" }, { kind: "component", type: i1$5.FsChipSelectOptionComponent, selector: "fs-chip-select-option", inputs: ["value"], outputs: ["select"] }, { kind: "ngmodule", type: FsSelectButtonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3617
3617
|
}
|
|
3618
3618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
|
|
3619
3619
|
type: Component,
|
|
3620
3620
|
args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
3621
3621
|
AsyncPipe,
|
|
3622
3622
|
FsChipModule,
|
|
3623
|
-
MatSelect,
|
|
3624
|
-
MatOption$1,
|
|
3625
3623
|
FsSelectButtonModule,
|
|
3626
3624
|
MatButtonModule,
|
|
3627
|
-
FsButtonDirective,
|
|
3628
3625
|
FormsModule,
|
|
3629
3626
|
FsChipSelectTriggerDirective,
|
|
3630
|
-
], template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"handleChipClick(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip, $event)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"handleChipClick(item)\"\n [outlined]=\"true\"\n [outlineDash]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n @if (moreFilterItems().length > 0) {\n <fs-chip-select\n [outlined]=\"true\"\n (select)=\"addFilter($event)\">\n <fs-chip-select-trigger>\n More filters\n </fs-chip-select-trigger>\n @for (item of moreFilterItems(); track item.name) {\n <fs-chip-select-option [value]=\"item\">\n {{ item.mergedLabel }}\n </fs-chip-select-option>\n }\n </fs-chip-select>\n }\n @if (savedFilterController.enabled) {\n <fs-chip-select [outlined]=\"true\">\n <fs-chip-select-trigger>\n {{ (savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel }}\n </fs-chip-select-trigger>\n @if (savedFilterController.activeFilter$ | async) {\n <fs-chip-select-option (click)=\"saveActiveFilter()\">\n Update filters\n </fs-chip-select-option>\n <fs-chip-select-option (click)=\"saveAs()\">\n Save as new\n </fs-chip-select-option>\n } @else {\n <fs-chip-select-option (click)=\"createSavedFilter()\">\n Create new\n </fs-chip-select-option>\n }\n <fs-chip-select-option (click)=\"manageSavedFilters()\">\n View all\n </fs-chip-select-option>\n </fs-chip-select>\n }\n @if (clearFiltersVisible()) {\n <fs-chip\n [outlined]=\"true\"\n (click)=\"clear()\">\n Clear filters\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;
|
|
3627
|
+
], template: "@if (items.length !== 0) {\n @for (item of secondaryItems; track item.name) {\n @if ((item.visible$ | async)) {\n @if ((item.hasValue$ | async)) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n class=\"filter-chip selected\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n [attr.data-filter-item]=\"item.name\"\n [outlined]=\"true\"\n (click)=\"handleChipClick(item, chip.name)\">\n @if (chip.value) {\n {{ chip.label }}:\n <a>\n {{ chip.value }}\n </a>\n } @else {\n {{ chip.label }}\n }\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\"\n (click)=\"removeChip(item, chip, $event)\">\n </ng-template>\n </fs-chip>\n }\n }\n @if ((item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n <fs-chip\n class=\"filter-chip\"\n [attr.data-filter-item]=\"item.name\"\n [size]=\"'medium'\"\n [borderColor]=\"'#ddd'\"\n (click)=\"handleChipClick(item)\"\n [outlined]=\"true\"\n [outlineDash]=\"true\">\n {{ item.mergedLabel }}\n <ng-template\n fsChipSuffix\n [icon]=\"'add_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n }\n }\n @if (moreFilterItems().length > 0) {\n <fs-chip-select\n [outlined]=\"true\"\n (select)=\"addFilter($event)\">\n <fs-chip-select-trigger>\n More filters\n </fs-chip-select-trigger>\n @for (item of moreFilterItems(); track item.name) {\n <fs-chip-select-option [value]=\"item\">\n {{ item.mergedLabel }}\n </fs-chip-select-option>\n }\n </fs-chip-select>\n }\n @if (savedFilterController.enabled) {\n <fs-chip-select [outlined]=\"true\">\n <fs-chip-select-trigger>\n {{ (savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel }}\n </fs-chip-select-trigger>\n @if (savedFilterController.activeFilter$ | async) {\n <fs-chip-select-option (click)=\"saveActiveFilter()\">\n Update filters\n </fs-chip-select-option>\n <fs-chip-select-option (click)=\"saveAs()\">\n Save as new\n </fs-chip-select-option>\n } @else {\n <fs-chip-select-option (click)=\"createSavedFilter()\">\n Create new\n </fs-chip-select-option>\n }\n <fs-chip-select-option (click)=\"manageSavedFilters()\">\n View all\n </fs-chip-select-option>\n </fs-chip-select>\n }\n @if (clearFiltersVisible()) {\n <fs-chip\n [outlined]=\"true\"\n (click)=\"clear()\">\n Clear filters\n <ng-template\n fsChipSuffix\n [icon]=\"'cancel_circle_outline'\">\n </ng-template>\n </fs-chip>\n }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;z-index:999}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px;font-size:90%}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}::ng-deep .mat-mdc-select-panel.fs-filter-no-initial-focus .mat-mdc-option-active:not(:hover){background:transparent!important}\n"] }]
|
|
3631
3628
|
}], propDecorators: { chips: [{
|
|
3632
3629
|
type: ViewChildren,
|
|
3633
3630
|
args: [FsChipComponent]
|
|
@@ -4009,7 +4006,7 @@ class FilterComponent {
|
|
|
4009
4006
|
ActionsController,
|
|
4010
4007
|
KeywordController,
|
|
4011
4008
|
SortController,
|
|
4012
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container
|
|
4009
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "headingTemplate", first: true, predicate: FilterHeadingDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "keywordInput", first: true, predicate: KeywordInputComponent, descendants: true }, { propertyName: "reloadEl", first: true, predicate: ["reloadEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container [ngTemplateOutlet]=\"chipsTmpl\"></ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template #chipsTmpl>\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\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</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\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 #filterToolbarTmpl>\n @if (config.reload || config.autoReload) {\n <div class=\"filter-toolbar\">\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 <a\n mat-icon-button\n class=\"filter-reload\"\n (click)=\"config.autoReload.enabled = !config.autoReload.enabled\">\n <mat-icon>\n {{ config.autoReload.enabled ? 'sync' : 'sync_disabled' }}\n </mat-icon>\n </a>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else 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;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;column-gap:5px;row-gap:10px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-container .filter-bar-container+.filter-chips,.filter-container .filter-bar-container+.filter-status-container{margin-top:6px}.filter-container .filter-chips+.filter-status-container{margin-top:4px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end;gap:5px}.filter-actions ::ng-deep .mdc-icon-button{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-actions ::ng-deep .mdc-icon-button ::ng-deep svg{display:flex}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@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: FilterItemComponent, selector: "filter-item", inputs: ["autofocus", "floatLabel", "autofocusName", "overlayRef", "item", "name", "triggerChangeOn"] }, { 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: "ngmodule", type: FsFormModule }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KeywordInputComponent, selector: "fs-keyword-input", inputs: ["autofocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4013
4010
|
}
|
|
4014
4011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
4015
4012
|
type: Component,
|
|
@@ -4036,7 +4033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4036
4033
|
MatSlideToggle,
|
|
4037
4034
|
AsyncPipe,
|
|
4038
4035
|
KeywordInputComponent,
|
|
4039
|
-
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container
|
|
4036
|
+
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-primary-filter': primaryFilterVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | async }\">\n @if (primaryFilterVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (primaryFilterVisible$ | async) {\n <div class=\"filter-input-container\">\n @if (keywordVisible$ | async) {\n <fs-keyword-input [autofocus]=\"config.autofocus\"></fs-keyword-input>\n }\n @for (item of primaryItems; track item.name) {\n @if (item.visible$ | async) {\n <filter-item\n [item]=\"item\"\n [triggerChangeOn]=\"'change'\">\n </filter-item>\n }\n }\n </div>\n } @else if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"headingTmpl\"></ng-container>\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"chipsTmpl\"></ng-container>\n }\n <ng-container [ngTemplateOutlet]=\"filterActionsTmpl\"></ng-container>\n </div>\n @if ((primaryFilterVisible$ | async) === true || hasHeading) {\n <ng-container [ngTemplateOutlet]=\"chipsTmpl\"></ng-container>\n }\n <ng-container *ngTemplateOutlet=\"statusBarTmpl\"></ng-container>\n</div>\n<ng-template #chipsTmpl>\n <fs-filter-chips class=\"filter-chips\"></fs-filter-chips>\n</ng-template>\n<ng-template #statusBarTmpl>\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</ng-template>\n<ng-template #filterActionsTmpl>\n @if ((actionsVisible$ | async)) {\n <div class=\"filter-actions\">\n <ng-container [ngTemplateOutlet]=\"filterToolbarTmpl\"></ng-container>\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 #filterToolbarTmpl>\n @if (config.reload || config.autoReload) {\n <div class=\"filter-toolbar\">\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 <a\n mat-icon-button\n class=\"filter-reload\"\n (click)=\"config.autoReload.enabled = !config.autoReload.enabled\">\n <mat-icon>\n {{ config.autoReload.enabled ? 'sync' : 'sync_disabled' }}\n </mat-icon>\n </a>\n }\n </div>\n }\n</ng-template>\n<ng-template #headingTmpl>\n @if (headingTemplate) {\n <ng-container *ngTemplateOutlet=\"headingTemplate\"></ng-container>\n } @else 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;margin-top:4px}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-primary-filter .heading{margin-bottom:10px}.filter-container.has-primary-filter .filter-bar-container{margin-bottom:4px}.filter-container.keyword-full-width .filter-input-container{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input{flex:1}.filter-container.keyword-full-width .filter-input-container fs-keyword-input ::ng-deep mat-form-field{width:100%}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:flex-start}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;column-gap:5px;row-gap:10px;flex-wrap:wrap}.filter-container .filter-bar-container .filter-heading-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0}.filter-container .filter-bar-container .filter-heading-container fs-keyword-input+fs-saved-filter-autocomplete-chips{margin-left:5px}.filter-container .filter-bar-container+.filter-chips,.filter-container .filter-bar-container+.filter-status-container{margin-top:6px}.filter-container .filter-chips+.filter-status-container{margin-top:4px}.filter-actions{display:flex;align-items:center;flex:1;justify-content:flex-end;gap:5px}.filter-actions ::ng-deep .mdc-icon-button{display:flex;--mdc-icon-button-state-layer-size: 40px;padding:8px}.filter-actions ::ng-deep .mdc-icon-button ::ng-deep svg{display:flex}.filter-toolbar{white-space:nowrap;display:flex;align-items:center}.heading{margin-right:8px}.heading h2{margin:0}.heading h2+.subheading{margin:0}@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"] }]
|
|
4040
4037
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
4041
4038
|
type: ViewChild,
|
|
4042
4039
|
args: [KeywordInputComponent]
|