@firestitch/filter 18.2.43 → 18.2.45
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 -7
- package/esm2022/app/components/filter/filter.component.mjs +14 -22
- package/esm2022/app/services/saved-filter-controller.service.mjs +6 -6
- package/fesm2022/firestitch-filter.mjs +18 -26
- package/fesm2022/firestitch-filter.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -169,11 +169,11 @@ class SavedFilterController {
|
|
|
169
169
|
return this._filterController.config.savedFilters
|
|
170
170
|
.save(savedFilter)
|
|
171
171
|
.pipe(tap((_savedFilter) => {
|
|
172
|
-
this.savedFilters
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
172
|
+
const exists = this.savedFilters.find((f) => f.id === _savedFilter.id);
|
|
173
|
+
this.savedFilters = exists ?
|
|
174
|
+
this.savedFilters
|
|
175
|
+
.map((item) => item.id === _savedFilter.id ? _savedFilter : item) :
|
|
176
|
+
[...this.savedFilters, _savedFilter];
|
|
177
177
|
this.setActiveFilter(_savedFilter);
|
|
178
178
|
}));
|
|
179
179
|
}
|
|
@@ -3163,17 +3163,8 @@ const FS_FILTER_CONFIG = new InjectionToken('fs.filter-config');
|
|
|
3163
3163
|
|
|
3164
3164
|
class FilterComponent {
|
|
3165
3165
|
keywordInput;
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
*/
|
|
3169
|
-
set filterConfig(value) {
|
|
3170
|
-
this.config = value;
|
|
3171
|
-
}
|
|
3172
|
-
set config(value) {
|
|
3173
|
-
this._config = new FsFilterConfig(value);
|
|
3174
|
-
}
|
|
3175
|
-
get config() {
|
|
3176
|
-
return this._config;
|
|
3166
|
+
set setFilterConfig(value) {
|
|
3167
|
+
this._filterConfig = value;
|
|
3177
3168
|
}
|
|
3178
3169
|
closed = new EventEmitter();
|
|
3179
3170
|
opened = new EventEmitter();
|
|
@@ -3185,6 +3176,7 @@ class FilterComponent {
|
|
|
3185
3176
|
windowDesktop = false;
|
|
3186
3177
|
fsFilterClass = true;
|
|
3187
3178
|
_config;
|
|
3179
|
+
_filterConfig;
|
|
3188
3180
|
_filtersVisible$ = new BehaviorSubject(true);
|
|
3189
3181
|
_hasFilterChips$ = new BehaviorSubject(false);
|
|
3190
3182
|
_destroy$ = new Subject();
|
|
@@ -3271,6 +3263,9 @@ class FilterComponent {
|
|
|
3271
3263
|
set values(values) {
|
|
3272
3264
|
this._filterController.values = values;
|
|
3273
3265
|
}
|
|
3266
|
+
get config() {
|
|
3267
|
+
return this._config;
|
|
3268
|
+
}
|
|
3274
3269
|
get items() {
|
|
3275
3270
|
return this._filterController.items;
|
|
3276
3271
|
}
|
|
@@ -3323,10 +3318,10 @@ class FilterComponent {
|
|
|
3323
3318
|
ngOnInit() {
|
|
3324
3319
|
const config = {
|
|
3325
3320
|
...(this._defaultConfig || {}),
|
|
3326
|
-
...this.
|
|
3321
|
+
...this._filterConfig,
|
|
3327
3322
|
};
|
|
3328
3323
|
this._config = new FsFilterConfig(config);
|
|
3329
|
-
this._actionsController.setConfig(this.
|
|
3324
|
+
this._actionsController.setConfig(this.config);
|
|
3330
3325
|
this._initItems();
|
|
3331
3326
|
this._initAutoReload();
|
|
3332
3327
|
this._initOverlay();
|
|
@@ -3515,7 +3510,7 @@ class FilterComponent {
|
|
|
3515
3510
|
});
|
|
3516
3511
|
}
|
|
3517
3512
|
_initItems() {
|
|
3518
|
-
this._filterController.init(this.
|
|
3513
|
+
this._filterController.init(this.config);
|
|
3519
3514
|
}
|
|
3520
3515
|
_initAutoReload() {
|
|
3521
3516
|
if (this.config.autoReload) {
|
|
@@ -3541,7 +3536,7 @@ class FilterComponent {
|
|
|
3541
3536
|
this._filterOverlay.setDoneFn(this.hideDrawer.bind(this));
|
|
3542
3537
|
}
|
|
3543
3538
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "fs-filter", inputs: {
|
|
3539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "fs-filter", inputs: { setFilterConfig: ["config", "setFilterConfig"] }, outputs: { closed: "closed", opened: "opened", ready: "ready" }, host: { properties: { "class.filters-open": "this.showFilterMenu", "class.window-desktop": "this.windowDesktop", "class.fs-filter": "this.fsFilterClass" } }, providers: [
|
|
3545
3540
|
FsFilterOverlayService,
|
|
3546
3541
|
PersistanceController,
|
|
3547
3542
|
QueryParamController,
|
|
@@ -3551,7 +3546,7 @@ class FilterComponent {
|
|
|
3551
3546
|
ActionsController,
|
|
3552
3547
|
KeywordController,
|
|
3553
3548
|
SortController,
|
|
3554
|
-
], 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 [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | 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
|
|
3549
|
+
], 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 [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | 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.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: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 });
|
|
3555
3550
|
}
|
|
3556
3551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3557
3552
|
type: Component,
|
|
@@ -3579,14 +3574,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3579
3574
|
MatSlideToggle,
|
|
3580
3575
|
AsyncPipe,
|
|
3581
3576
|
KeywordInputComponent,
|
|
3582
|
-
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-input': filterInputVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | 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
|
|
3577
|
+
], template: "<div\n class=\"filter-container\"\n [ngClass]=\"{ 'has-input': filterInputVisible$ | async }\"\n [ngClass]=\"{ 'keyword-full-width': keywordFullWidth$ | 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.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: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"] }]
|
|
3583
3578
|
}], ctorParameters: () => [], propDecorators: { keywordInput: [{
|
|
3584
3579
|
type: ViewChild,
|
|
3585
3580
|
args: [KeywordInputComponent]
|
|
3586
|
-
}],
|
|
3587
|
-
type: Input,
|
|
3588
|
-
args: ['filterConfig']
|
|
3589
|
-
}], config: [{
|
|
3581
|
+
}], setFilterConfig: [{
|
|
3590
3582
|
type: Input,
|
|
3591
3583
|
args: ['config']
|
|
3592
3584
|
}], closed: [{
|