@firestitch/filter 18.2.37 → 18.2.39
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 -4
- package/app/helpers/create-filter-item.d.ts +1 -1
- package/esm2022/app/components/filter/filter.component.mjs +10 -7
- package/esm2022/app/components/filter-drawer-actions/filter-drawer-actions.component.mjs +3 -3
- package/fesm2022/firestitch-filter.mjs +11 -8
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, Injector, EventEmitter, Output, InjectionToken, Directive, Optional, Self, ChangeDetectorRef, ViewChild, NgZone, ElementRef, ContentChild, HostBinding, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { inject, Injectable, Component, ChangeDetectionStrategy, Input, DestroyRef, Injector, EventEmitter, Output, InjectionToken, Directive, Optional, Self, ChangeDetectorRef, ViewChild, NgZone, TemplateRef, ElementRef, ContentChild, HostBinding, HostListener, NgModule } from '@angular/core';
|
|
3
3
|
import { FsPrompt } from '@firestitch/prompt';
|
|
4
4
|
import { BehaviorSubject, Subject, of, forkJoin, Observable, tap as tap$1, map as map$1, switchMap as switchMap$1, distinctUntilChanged as distinctUntilChanged$1, merge, filter, combineLatest, fromEvent, interval, takeUntil as takeUntil$1, debounceTime as debounceTime$1 } from 'rxjs';
|
|
5
5
|
import { distinctUntilChanged, tap, switchMap, map, debounceTime, finalize, takeUntil, filter as filter$1, delay, skip } from 'rxjs/operators';
|
|
@@ -2243,7 +2243,7 @@ class FsFilterDrawerActionsComponent {
|
|
|
2243
2243
|
.subscribe();
|
|
2244
2244
|
}
|
|
2245
2245
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterDrawerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2246
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterDrawerActionsComponent, isStandalone: true, selector: "fs-filter-drawer-actions", inputs: { savedFiltersController: "savedFiltersController" }, outputs: { _clear: "clear", _done: "done" }, ngImport: i0, template: "<div class=\"filter-drawer-actions-container\">\n <button\n mat-button\n color=\"primary\"\n type=\"button\"\n (click)=\"done()\">\n Done\n </button>\n @if (savedFiltersController.enabled) {\n @if (savedFiltersController.activeFilter$ | async) {\n <button\n mat-button\n type=\"submit\">\n Save\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n (click)=\"createFilter()\">\n Create\n {{ savedFiltersController.singularLabelLower }}\n </button>\n }\n }\n <button\n mat-button\n type=\"button\"\n (click)=\"clear()\">\n Clear\n </button>\n</div>", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}@media (max-width: 599px){
|
|
2246
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FsFilterDrawerActionsComponent, isStandalone: true, selector: "fs-filter-drawer-actions", inputs: { savedFiltersController: "savedFiltersController" }, outputs: { _clear: "clear", _done: "done" }, ngImport: i0, template: "<div class=\"filter-drawer-actions-container\">\n <button\n mat-button\n color=\"primary\"\n type=\"button\"\n (click)=\"done()\">\n Done\n </button>\n @if (savedFiltersController.enabled) {\n @if (savedFiltersController.activeFilter$ | async) {\n <button\n mat-button\n type=\"submit\">\n Save\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n (click)=\"createFilter()\">\n Create\n {{ savedFiltersController.singularLabelLower }}\n </button>\n }\n }\n <button\n mat-button\n type=\"button\"\n (click)=\"clear()\">\n Clear\n </button>\n</div>", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}@media (max-width: 599px){button{width:100%}}.filter-drawer-actions-container{display:flex;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2247
2247
|
}
|
|
2248
2248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterDrawerActionsComponent, decorators: [{
|
|
2249
2249
|
type: Component,
|
|
@@ -2251,7 +2251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2251
2251
|
MatButton,
|
|
2252
2252
|
FsFormModule,
|
|
2253
2253
|
AsyncPipe,
|
|
2254
|
-
], template: "<div class=\"filter-drawer-actions-container\">\n <button\n mat-button\n color=\"primary\"\n type=\"button\"\n (click)=\"done()\">\n Done\n </button>\n @if (savedFiltersController.enabled) {\n @if (savedFiltersController.activeFilter$ | async) {\n <button\n mat-button\n type=\"submit\">\n Save\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n (click)=\"createFilter()\">\n Create\n {{ savedFiltersController.singularLabelLower }}\n </button>\n }\n }\n <button\n mat-button\n type=\"button\"\n (click)=\"clear()\">\n Clear\n </button>\n</div>", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}@media (max-width: 599px){
|
|
2254
|
+
], template: "<div class=\"filter-drawer-actions-container\">\n <button\n mat-button\n color=\"primary\"\n type=\"button\"\n (click)=\"done()\">\n Done\n </button>\n @if (savedFiltersController.enabled) {\n @if (savedFiltersController.activeFilter$ | async) {\n <button\n mat-button\n type=\"submit\">\n Save\n </button>\n } @else {\n <button\n mat-button\n type=\"button\"\n (click)=\"createFilter()\">\n Create\n {{ savedFiltersController.singularLabelLower }}\n </button>\n }\n }\n <button\n mat-button\n type=\"button\"\n (click)=\"clear()\">\n Clear\n </button>\n</div>", styles: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}div[class*=fs-delimit]:not([class*=\".middot\"])>:not(:last-child):after{content:\",\\a0\"}div[class*=fs-delimit][class*=\".middot\"]>:not(:last-child):after{content:\"\\a0\\b7\\a0\"}div[class*=fs-delimit]>*{display:inline-flex}@media (max-width: 599px){button{width:100%}}.filter-drawer-actions-container{display:flex;flex-wrap:wrap}\n"] }]
|
|
2255
2255
|
}], propDecorators: { savedFiltersController: [{
|
|
2256
2256
|
type: Input
|
|
2257
2257
|
}], _clear: [{
|
|
@@ -3124,7 +3124,7 @@ class FilterComponent {
|
|
|
3124
3124
|
opened = new EventEmitter();
|
|
3125
3125
|
ready = new EventEmitter();
|
|
3126
3126
|
statusBar;
|
|
3127
|
-
|
|
3127
|
+
headingTemplate;
|
|
3128
3128
|
reloadEl;
|
|
3129
3129
|
showFilterMenu = false;
|
|
3130
3130
|
windowDesktop = false;
|
|
@@ -3222,6 +3222,9 @@ class FilterComponent {
|
|
|
3222
3222
|
change() {
|
|
3223
3223
|
this._filterController.change();
|
|
3224
3224
|
}
|
|
3225
|
+
get hasHeading() {
|
|
3226
|
+
return !!this.headingTemplate || !!this.config.heading;
|
|
3227
|
+
}
|
|
3225
3228
|
get hasFilterChips$() {
|
|
3226
3229
|
return this._hasFilterChips$.asObservable();
|
|
3227
3230
|
}
|
|
@@ -3490,7 +3493,7 @@ class FilterComponent {
|
|
|
3490
3493
|
ActionsController,
|
|
3491
3494
|
KeywordController,
|
|
3492
3495
|
SortController,
|
|
3493
|
-
], queries: [{ propertyName: "statusBar", first: true, predicate: FilterStatusBarDirective, descendants: true }, { propertyName: "
|
|
3496
|
+
], 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-input': filterInputVisible$ | async }\">\n @if (filterInputVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (filterInputVisible$ | async) {\n <div class=\"filter-input-container\">\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 <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n </div>\n } @else {\n @if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n </div>\n }\n }\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\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 #heading>\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}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-input .heading{margin-bottom:10px}.filter-container.has-input .filter-bar-container{margin-bottom:4px}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.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-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 .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.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: 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 });
|
|
3494
3497
|
}
|
|
3495
3498
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3496
3499
|
type: Component,
|
|
@@ -3518,7 +3521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3518
3521
|
MatSlideToggle,
|
|
3519
3522
|
AsyncPipe,
|
|
3520
3523
|
KeywordInputComponent,
|
|
3521
|
-
], template: "<div
|
|
3524
|
+
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-input': filterInputVisible$ | async }\">\n @if (filterInputVisible$ | async) {\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n }\n <div class=\"filter-bar-container\">\n @if (filterInputVisible$ | async) {\n <div class=\"filter-input-container\">\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 <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n </div>\n } @else {\n @if (hasHeading) {\n <div class=\"filter-heading-container\">\n <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"filterToolbar\"></ng-container>\n </div>\n }\n }\n <ng-container [ngTemplateOutlet]=\"filterActions\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"filterStatusBarChips\"></ng-container>\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 #heading>\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}.filter-status-container .filter-status{overflow:hidden;text-overflow:ellipsis}.filter-container{width:100%}.filter-container.has-input .heading{margin-bottom:10px}.filter-container.has-input .filter-bar-container{margin-bottom:4px}.filter-container .filter-bar-container{flex-direction:row;box-sizing:border-box;display:flex;position:relative;align-items:center}.filter-container .filter-bar-container .filter-input-container{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;min-width:0;gap:5px}.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-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 .button-reload{display:flex;align-items:center}.filter-toolbar .button-reload .auto-reload{margin-right:5px}.filter-toolbar .button-reload .auto-reload span{font-size:80%}.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"] }]
|
|
3522
3525
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
3523
3526
|
type: ViewChild,
|
|
3524
3527
|
args: [KeywordInputComponent]
|
|
@@ -3537,9 +3540,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3537
3540
|
}], statusBar: [{
|
|
3538
3541
|
type: ContentChild,
|
|
3539
3542
|
args: [FilterStatusBarDirective]
|
|
3540
|
-
}],
|
|
3543
|
+
}], headingTemplate: [{
|
|
3541
3544
|
type: ContentChild,
|
|
3542
|
-
args: [FilterHeadingDirective]
|
|
3545
|
+
args: [FilterHeadingDirective, { read: TemplateRef }]
|
|
3543
3546
|
}], reloadEl: [{
|
|
3544
3547
|
type: ViewChild,
|
|
3545
3548
|
args: ['reloadEl', { read: ElementRef }]
|