@firestitch/filter 18.2.38 → 18.2.40

package/fesm2022/firestitch-filter.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-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';
+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';
 import { FsPrompt } from '@firestitch/prompt';
 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';
 import { distinctUntilChanged, tap, switchMap, map, debounceTime, finalize, takeUntil, filter as filter$1, delay, skip } from 'rxjs/operators';
@@ -1548,6 +1548,83 @@ class DateTimeItem extends BaseDateItem {
     }
 }
 
+class TextItem extends BaseItem {
+    _additionalConfig;
+    _filter;
+    constructor(itemConfig, _additionalConfig, _filter) {
+        super(itemConfig, _additionalConfig, _filter);
+        this._additionalConfig = _additionalConfig;
+        this._filter = _filter;
+        this.prefix = itemConfig.prefix;
+        this.suffix = itemConfig.suffix;
+    }
+    static create(config, filter) {
+        return new TextItem(config, null, filter);
+    }
+    get hasValue() {
+        return typeof this.value === 'string' && this.value.length > 0;
+    }
+    get query() {
+        if (!this.hasValue) {
+            return {};
+        }
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        params[name] = value;
+        return params;
+    }
+    get chips() {
+        if (!this.hasValue || this.isTypeKeyword) {
+            return [];
+        }
+        return [
+            {
+                value: this.value,
+                label: this.label,
+            },
+        ];
+    }
+}
+
+class KeywordItem extends TextItem {
+    _additionalConfig;
+    _filter;
+    constructor(itemConfig, _additionalConfig, _filter) {
+        super(itemConfig, _additionalConfig, _filter);
+        this._additionalConfig = _additionalConfig;
+        this._filter = _filter;
+        this.fullWidth = itemConfig.fullWidth;
+    }
+    static create(config, filter) {
+        return new KeywordItem(config, null, filter);
+    }
+    get hasValue() {
+        return typeof this.value === 'string' && this.value.length > 0;
+    }
+    get query() {
+        if (!this.hasValue) {
+            return {};
+        }
+        const value = this.value;
+        const name = this.name;
+        const params = {};
+        params[name] = value;
+        return params;
+    }
+    get chips() {
+        if (!this.hasValue || this.isTypeKeyword) {
+            return [];
+        }
+        return [
+            {
+                value: this.value,
+                label: this.label,
+            },
+        ];
+    }
+}
+
 class SelectItem extends BaseItem {
     _additionalConfig;
     _filter;
@@ -1653,45 +1730,6 @@ class SelectItem extends BaseItem {
     }
 }
 
-class TextItem extends BaseItem {
-    _additionalConfig;
-    _filter;
-    constructor(itemConfig, _additionalConfig, _filter) {
-        super(itemConfig, _additionalConfig, _filter);
-        this._additionalConfig = _additionalConfig;
-        this._filter = _filter;
-        this.prefix = itemConfig.prefix;
-        this.suffix = itemConfig.suffix;
-    }
-    static create(config, filter) {
-        return new TextItem(config, null, filter);
-    }
-    get hasValue() {
-        return typeof this.value === 'string' && this.value.length > 0;
-    }
-    get query() {
-        if (!this.hasValue) {
-            return {};
-        }
-        const value = this.value;
-        const name = this.name;
-        const params = {};
-        params[name] = value;
-        return params;
-    }
-    get chips() {
-        if (!this.hasValue || this.isTypeKeyword) {
-            return [];
-        }
-        return [
-            {
-                value: this.value,
-                label: this.label,
-            },
-        ];
-    }
-}
-
 function createFilterItem(item, config, filter) {
     switch (item.type) {
         case ItemType.Select: {
@@ -1727,7 +1765,9 @@ function createFilterItem(item, config, filter) {
         case ItemType.Checkbox: {
             return new CheckboxItem(item, null, filter);
         }
-        case ItemType.Keyword:
+        case ItemType.Keyword: {
+            return KeywordItem.create(item, filter);
+        }
         case ItemType.Text: {
             return TextItem.create(item, filter);
         }
@@ -1737,19 +1777,25 @@ function createFilterItem(item, config, filter) {
 class KeywordController {
     _keywordItem$ = new BehaviorSubject(null);
     _keywordVisible$ = new BehaviorSubject(null);
+    _keywordFullWidth$ = new BehaviorSubject(null);
     _destroyRef = inject(DestroyRef);
-    _filterController;
-    init(filterController) {
-        this._filterController = filterController;
+    init() {
         this._keywordItem$
             .pipe(
         // when item changes, unsubscribe from the previous visible$
         switchMap$1((item) => item ? item.visible$ : of(false)), 
         // avoid redundant writes
-        distinctUntilChanged$1(), 
+        distinctUntilChanged$1(), tap$1((visible) => this._keywordVisible$.next(visible)), 
+        // clean up on destroy,
+        takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+        this._keywordItem$
+            .pipe(map$1((item) => !!item.fullWidth), 
+        // avoid redundant writes
+        distinctUntilChanged$1(), tap$1((fullWidth) => this._keywordFullWidth$.next(fullWidth)), 
         // clean up on destroy,
         takeUntilDestroyed(this._destroyRef))
-            .subscribe((visible) => this._keywordVisible$.next(visible));
+            .subscribe();
     }
     get keywordItem$() {
         return this._keywordItem$.asObservable();
@@ -1772,6 +1818,9 @@ class KeywordController {
     get keywordVisible$() {
         return this._keywordVisible$.asObservable();
     }
+    get keywordFullWidth$() {
+        return this._keywordFullWidth$.asObservable();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeywordController });
 }
@@ -2025,7 +2074,7 @@ class FilterController {
     init(config) {
         this._config = config;
         of(null)
-            .pipe(tap(() => this._addItems(this._config.items || [])), tap(() => this._keywordController.init(this)), tap(() => this._sortController.init(this)), switchMap(() => forkJoin({
+            .pipe(tap(() => this._addItems(this._config.items || [])), tap(() => this._keywordController.init()), tap(() => this._sortController.init(this)), switchMap(() => forkJoin({
             savedFilters: this._savedFilterController.init(this),
             persistance: this._persistanceController.init(this),
             queryParams: this._queryParamController.init(this),
@@ -2142,7 +2191,7 @@ class FilterController {
         })
             .map((item) => {
             const filterItem = createFilterItem(item, {}, this.filter);
-            if (filterItem.type === ItemType.Keyword) {
+            if (filterItem instanceof KeywordItem) {
                 this._keywordController.keywordItem = filterItem;
             }
             this._items.set(item.name, filterItem);
@@ -2213,14 +2262,14 @@ class FsFilterChipsComponent {
         item.clear(chip.name);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 });
+    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;max-width:100%}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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-filter-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         AsyncPipe,
                         FsChipModule,
-                    ], 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"] }]
+                    ], 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;max-width:100%}fs-chip{margin-top:4px}\n"] }]
         }] });
 
 class FsFilterDrawerActionsComponent {
@@ -2845,7 +2894,6 @@ class KeywordInputComponent {
     _destroyRef = inject(DestroyRef);
     _destroy$ = new Subject();
     _keywordController = inject(KeywordController);
-    _filterController = inject(FilterController);
     _cdRef = inject(ChangeDetectorRef);
     get keywordVisible$() {
         return this._keywordController.keywordVisible$;
@@ -3124,7 +3172,7 @@ class FilterComponent {
     opened = new EventEmitter();
     ready = new EventEmitter();
     statusBar;
-    heading;
+    headingTemplate;
     reloadEl;
     showFilterMenu = false;
     windowDesktop = false;
@@ -3222,6 +3270,9 @@ class FilterComponent {
     change() {
         this._filterController.change();
     }
+    get hasHeading() {
+        return !!this.headingTemplate || !!this.config.heading;
+    }
     get hasFilterChips$() {
         return this._hasFilterChips$.asObservable();
     }
@@ -3238,6 +3289,9 @@ class FilterComponent {
     get keywordVisible$() {
         return this._keywordController.keywordVisible$;
     }
+    get keywordFullWidth$() {
+        return this._keywordController.keywordFullWidth$;
+    }
     get filterInputVisible$() {
         return combineLatest({
             keywordVisible: this.keywordVisible$,
@@ -3490,7 +3544,7 @@ class FilterComponent {
             ActionsController,
             KeywordController,
             SortController,
-        ], 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 });
+        ], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -3518,7 +3572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSlideToggle,
                         AsyncPipe,
                         KeywordInputComponent,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { keywordInput: [{
                 type: ViewChild,
                 args: [KeywordInputComponent]
@@ -3537,9 +3591,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], statusBar: [{
                 type: ContentChild,
                 args: [FilterStatusBarDirective]
-            }], heading: [{
+            }], headingTemplate: [{
                 type: ContentChild,
-                args: [FilterHeadingDirective]
+                args: [FilterHeadingDirective, { read: TemplateRef }]
             }], reloadEl: [{
                 type: ViewChild,
                 args: ['reloadEl', { read: ElementRef }]