@firestitch/filter 18.2.35 → 18.2.37
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 +4 -2
- package/app/directives/{focus-to-item/focus-to-item.directive.d.ts → focus-to-item.directive.d.ts} +1 -1
- package/app/directives/heading.directive.d.ts +8 -0
- package/app/directives/index.d.ts +3 -0
- package/app/fs-filter.module.d.ts +4 -3
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter/filter.component.mjs +9 -4
- package/esm2022/app/components/filter-chips/filter-chips.component.mjs +3 -3
- package/esm2022/app/components/filters-item/autocomplete/autocomplete.component.mjs +2 -2
- package/esm2022/app/components/filters-item/autocompletechips/autocompletechips.component.mjs +2 -2
- package/esm2022/app/components/filters-item/date/date.component.mjs +2 -2
- package/esm2022/app/components/filters-item/date-range/date-range.component.mjs +2 -2
- package/esm2022/app/components/filters-item/range/range.component.mjs +2 -2
- package/esm2022/app/components/filters-item/select/select.component.mjs +2 -2
- package/esm2022/app/components/filters-item/text/text.component.mjs +2 -2
- package/esm2022/app/components/filters-item/week/week.component.mjs +2 -2
- package/esm2022/app/directives/focus-to-item.directive.mjs +142 -0
- package/esm2022/app/directives/heading.directive.mjs +18 -0
- package/esm2022/app/directives/index.mjs +4 -0
- package/esm2022/app/directives/{status-bar/status-bar.directive.mjs → status-bar.directive.mjs} +1 -1
- package/esm2022/app/fs-filter.module.mjs +7 -4
- package/esm2022/public_api.mjs +3 -2
- package/fesm2022/firestitch-filter.mjs +46 -22
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +2 -1
- package/esm2022/app/directives/focus-to-item/focus-to-item.directive.mjs +0 -142
- /package/app/directives/{status-bar/status-bar.directive.d.ts → status-bar.directive.d.ts} +0 -0
|
@@ -2213,14 +2213,14 @@ class FsFilterChipsComponent {
|
|
|
2213
2213
|
item.clear(chip.name);
|
|
2214
2214
|
}
|
|
2215
2215
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2216
|
-
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 @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n [removable]=\"item.clearable\"\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}", 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 });
|
|
2216
|
+
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 @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n [removable]=\"item.clearable\"\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}", styles: [":host{display:flex;flex-wrap:wrap;column-gap:4px}fs-chip{margin-top:4px}\n"], 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 });
|
|
2217
2217
|
}
|
|
2218
2218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
|
|
2219
2219
|
type: Component,
|
|
2220
2220
|
args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2221
2221
|
AsyncPipe,
|
|
2222
2222
|
FsChipModule,
|
|
2223
|
-
], template: "@for (item of items; track item.name) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n [removable]=\"item.clearable\"\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}" }]
|
|
2223
|
+
], template: "@for (item of items; track item.name) {\n @for (chip of item.chips$ | async; track chip.label) {\n <fs-chip\n [removable]=\"item.clearable\"\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}", styles: [":host{display:flex;flex-wrap:wrap;column-gap:4px}fs-chip{margin-top:4px}\n"] }]
|
|
2224
2224
|
}] });
|
|
2225
2225
|
|
|
2226
2226
|
class FsFilterDrawerActionsComponent {
|
|
@@ -2716,6 +2716,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2716
2716
|
|
|
2717
2717
|
const FilterIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M440-160q-17 0-28.5-11.5T400-200v-240L161-745q-14-17-4-36t31-19h584q21 0 31 19t-4 36L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-276 240-304H240l240 304Zm0 0Z"/></svg>';
|
|
2718
2718
|
|
|
2719
|
+
class FilterHeadingDirective {
|
|
2720
|
+
templateRef;
|
|
2721
|
+
constructor(templateRef) {
|
|
2722
|
+
this.templateRef = templateRef;
|
|
2723
|
+
}
|
|
2724
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterHeadingDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2725
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FilterHeadingDirective, isStandalone: true, selector: "[fsFilterHeading]", ngImport: i0 });
|
|
2726
|
+
}
|
|
2727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterHeadingDirective, decorators: [{
|
|
2728
|
+
type: Directive,
|
|
2729
|
+
args: [{
|
|
2730
|
+
selector: '[fsFilterHeading]',
|
|
2731
|
+
standalone: true,
|
|
2732
|
+
}]
|
|
2733
|
+
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
2734
|
+
|
|
2735
|
+
class FilterStatusBarDirective {
|
|
2736
|
+
templateRef;
|
|
2737
|
+
constructor(templateRef) {
|
|
2738
|
+
this.templateRef = templateRef;
|
|
2739
|
+
}
|
|
2740
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2741
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FilterStatusBarDirective, isStandalone: true, selector: "[fsFilterStatusBar]", ngImport: i0 });
|
|
2742
|
+
}
|
|
2743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, decorators: [{
|
|
2744
|
+
type: Directive,
|
|
2745
|
+
args: [{
|
|
2746
|
+
selector: '[fsFilterStatusBar]',
|
|
2747
|
+
standalone: true,
|
|
2748
|
+
}]
|
|
2749
|
+
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
2750
|
+
|
|
2719
2751
|
const SortByField = 'sortName';
|
|
2720
2752
|
const SortDirectionField = 'sortDirection';
|
|
2721
2753
|
class FsFilterConfig {
|
|
@@ -3072,22 +3104,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3072
3104
|
type: Input
|
|
3073
3105
|
}] } });
|
|
3074
3106
|
|
|
3075
|
-
class FilterStatusBarDirective {
|
|
3076
|
-
templateRef;
|
|
3077
|
-
constructor(templateRef) {
|
|
3078
|
-
this.templateRef = templateRef;
|
|
3079
|
-
}
|
|
3080
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3081
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FilterStatusBarDirective, isStandalone: true, selector: "[fsFilterStatusBar]", ngImport: i0 });
|
|
3082
|
-
}
|
|
3083
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterStatusBarDirective, decorators: [{
|
|
3084
|
-
type: Directive,
|
|
3085
|
-
args: [{
|
|
3086
|
-
selector: '[fsFilterStatusBar]',
|
|
3087
|
-
standalone: true,
|
|
3088
|
-
}]
|
|
3089
|
-
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
3090
|
-
|
|
3091
3107
|
const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
|
|
3092
3108
|
|
|
3093
3109
|
class FilterComponent {
|
|
@@ -3108,6 +3124,7 @@ class FilterComponent {
|
|
|
3108
3124
|
opened = new EventEmitter();
|
|
3109
3125
|
ready = new EventEmitter();
|
|
3110
3126
|
statusBar;
|
|
3127
|
+
heading;
|
|
3111
3128
|
reloadEl;
|
|
3112
3129
|
showFilterMenu = false;
|
|
3113
3130
|
windowDesktop = false;
|
|
@@ -3473,7 +3490,7 @@ class FilterComponent {
|
|
|
3473
3490
|
ActionsController,
|
|
3474
3491
|
KeywordController,
|
|
3475
3492
|
SortController,
|
|
3476
|
-
], 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 (filterInputVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"
|
|
3493
|
+
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "heading", first: true, predicate: FilterHeadingDirective, 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 (filterInputVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n }\n <div class=\"filter-inner-container\">\n <div class=\"filter-left-container\">\n @if (filterInputVisible$ | 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 <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n }\n </div>\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n @if ((filterInputVisible$ | 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 || (filtersVisible$ | async)) {\n <div class=\"filter-toolbar\">\n @if ((filtersVisible$ | async)) {\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 <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [ngModel]=\"config.autoReload.enabled\"\n (ngModelChange)=\"config.autoReload.enabled = $event\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #header>\n @if (heading) {\n <ng-container *ngTemplateOutlet=\"heading.templateRef\"></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;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-left-container{min-width:0}.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;--mdc-icon-button-state-layer-size: 40px;padding:8px}.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}@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 });
|
|
3477
3494
|
}
|
|
3478
3495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3479
3496
|
type: Component,
|
|
@@ -3501,7 +3518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3501
3518
|
MatSlideToggle,
|
|
3502
3519
|
AsyncPipe,
|
|
3503
3520
|
KeywordInputComponent,
|
|
3504
|
-
], template: "<div class=\"filter-container\">\n @if (filterInputVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"
|
|
3521
|
+
], template: "<div class=\"filter-container\">\n @if (filterInputVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n }\n <div class=\"filter-inner-container\">\n <div class=\"filter-left-container\">\n @if (filterInputVisible$ | 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 <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\n }\n </div>\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n @if ((filterInputVisible$ | 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 || (filtersVisible$ | async)) {\n <div class=\"filter-toolbar\">\n @if ((filtersVisible$ | async)) {\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 <mat-slide-toggle\n name=\"autoReload\"\n class=\"auto-reload\"\n [ngModel]=\"config.autoReload.enabled\"\n (ngModelChange)=\"config.autoReload.enabled = $event\">\n <span>\n Auto refresh\n </span>\n </mat-slide-toggle>\n </div>\n }\n </div>\n }\n</ng-template>\n<ng-template #header>\n @if (heading) {\n <ng-container *ngTemplateOutlet=\"heading.templateRef\"></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;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-left-container{min-width:0}.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;--mdc-icon-button-state-layer-size: 40px;padding:8px}.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}@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"] }]
|
|
3505
3522
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
3506
3523
|
type: ViewChild,
|
|
3507
3524
|
args: [KeywordInputComponent]
|
|
@@ -3520,6 +3537,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3520
3537
|
}], statusBar: [{
|
|
3521
3538
|
type: ContentChild,
|
|
3522
3539
|
args: [FilterStatusBarDirective]
|
|
3540
|
+
}], heading: [{
|
|
3541
|
+
type: ContentChild,
|
|
3542
|
+
args: [FilterHeadingDirective]
|
|
3523
3543
|
}], reloadEl: [{
|
|
3524
3544
|
type: ViewChild,
|
|
3525
3545
|
args: ['reloadEl', { read: ElementRef }]
|
|
@@ -4092,8 +4112,10 @@ class FsFilterModule {
|
|
|
4092
4112
|
FsFilterActionButtonComponent,
|
|
4093
4113
|
FsFilterActionKebabActionsComponent,
|
|
4094
4114
|
FilterStatusBarDirective,
|
|
4115
|
+
FilterHeadingDirective,
|
|
4095
4116
|
FocusToItemDirective], exports: [FilterComponent,
|
|
4096
|
-
FilterStatusBarDirective
|
|
4117
|
+
FilterStatusBarDirective,
|
|
4118
|
+
FilterHeadingDirective] });
|
|
4097
4119
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterModule, providers: [
|
|
4098
4120
|
FsStore,
|
|
4099
4121
|
], imports: [FsSavedFilterAutocompleteChipsComponent,
|
|
@@ -4141,6 +4163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4141
4163
|
FsFilterActionButtonComponent,
|
|
4142
4164
|
FsFilterActionKebabActionsComponent,
|
|
4143
4165
|
FilterStatusBarDirective,
|
|
4166
|
+
FilterHeadingDirective,
|
|
4144
4167
|
FocusToItemDirective,
|
|
4145
4168
|
],
|
|
4146
4169
|
providers: [
|
|
@@ -4149,6 +4172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4149
4172
|
exports: [
|
|
4150
4173
|
FilterComponent,
|
|
4151
4174
|
FilterStatusBarDirective,
|
|
4175
|
+
FilterHeadingDirective,
|
|
4152
4176
|
],
|
|
4153
4177
|
}]
|
|
4154
4178
|
}] });
|
|
@@ -4157,5 +4181,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4157
4181
|
* Generated bundle index. Do not edit.
|
|
4158
4182
|
*/
|
|
4159
4183
|
|
|
4160
|
-
export { ActionMode, AutocompleteChipsItem, AutocompleteItem, BaseItem, ButtonStyle, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, FS_FILTER_CONFIG, FilterComponent, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, ItemDateMode, ItemType, MenuActionMode, RangeItem, SavedFilterController, SelectItem, TextItem, filterFromQueryParam, filterToQueryParam };
|
|
4184
|
+
export { ActionMode, AutocompleteChipsItem, AutocompleteItem, BaseItem, ButtonStyle, CheckboxItem, ChipsItem, DateItem, DateRangeItem, DateTimeItem, DateTimeRangeItem, FS_FILTER_CONFIG, FilterComponent, FilterHeadingDirective, FilterItemComponent, FilterStatusBarDirective, FsFilterModule, ItemDateMode, ItemType, MenuActionMode, RangeItem, SavedFilterController, SelectItem, TextItem, filterFromQueryParam, filterToQueryParam };
|
|
4161
4185
|
//# sourceMappingURL=firestitch-filter.mjs.map
|