@firestitch/filter 18.2.71 → 18.2.73

package/fesm2022/firestitch-filter.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Directive, Input, TemplateRef, DestroyRef, Component, ChangeDetectionStrategy, InjectionToken, KeyValueDiffers, ChangeDetectorRef, Injector, ViewChild, EventEmitter, NgZone, ElementRef, Output, ContentChild, HostBinding, NgModule } from '@angular/core';
-import { FsMessage } from '@firestitch/message';
+import { inject, Injectable, Directive, Input, TemplateRef, DestroyRef, Component, ChangeDetectionStrategy, InjectionToken, KeyValueDiffers, ChangeDetectorRef, Injector, ViewChild, ElementRef, EventEmitter, NgZone, Output, ContentChild, HostBinding, 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, takeUntil as takeUntil$1, debounceTime as debounceTime$1, fromEvent, combineLatest, interval } from 'rxjs';
 import { distinctUntilChanged, switchMap, tap, skip, takeUntil, map, debounceTime, finalize, filter as filter$1 } from 'rxjs/operators';
@@ -47,14 +46,14 @@ import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$5 from '@firestitch/chip';
 import { FsChipModule } from '@firestitch/chip';
+import { FsMessage } from '@firestitch/message';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import * as i1$4 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
-import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatHint } from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';
 import { MatCheckbox } from '@angular/material/checkbox';
 
 class SavedFilterController {
-    _message = inject(FsMessage);
     _filterController;
     _savedFilters$ = new BehaviorSubject([]);
     _activeFilter$ = new BehaviorSubject(null);
@@ -792,6 +791,7 @@ class FsFilterConfig {
     namespace; // for persistance
     heading;
     subheading;
+    maxEnabled;
     constructor(data = {}) {
         this._init(data);
     }
@@ -802,6 +802,7 @@ class FsFilterConfig {
             savedFilters: data.savedFilters,
             autofocus: data.autofocus ?? false,
             chips: data.chips ?? false,
+            maxEnabled: data.maxEnabled ?? 0,
             sort: data.sort,
             queryParam: data.queryParam ?? false,
             init: data.init,
@@ -1002,6 +1003,7 @@ class BaseItem {
     persistanceDisabled;
     queryParamsDisabled;
     primary;
+    secondary;
     changeCallback;
     initCallback;
     _type;
@@ -1009,12 +1011,25 @@ class BaseItem {
     _hidden$ = new BehaviorSubject(false);
     _value$ = new BehaviorSubject({ value: undefined, emitChange: true });
     _values$ = new BehaviorSubject(null);
+    _secondaryVisible$ = new BehaviorSubject(false);
     _destroy$ = new Subject();
     constructor(itemConfig, _filter) {
         this._filter = _filter;
         this._type = itemConfig.type;
         this._initConfig(itemConfig);
     }
+    secondaryShow() {
+        this._secondaryVisible$.next(true);
+    }
+    secondaryHide() {
+        this._secondaryVisible$.next(false);
+    }
+    get secondaryVisible$() {
+        return this._secondaryVisible$.asObservable();
+    }
+    get secondaryVisible() {
+        return this._secondaryVisible$.getValue();
+    }
     get filter() {
         return this._filter;
     }
@@ -1079,6 +1094,10 @@ class BaseItem {
     get hasValue() {
         return this.value !== null && this.value !== undefined;
     }
+    get notValue$() {
+        return this.value$
+            .pipe(map(() => !this.hasValue));
+    }
     get hasValue$() {
         return this.value$
             .pipe(map(() => this.hasValue));
@@ -1122,9 +1141,15 @@ class BaseItem {
         return this.query;
     }
     hide() {
+        if (!this.primary) {
+            this.secondaryHide();
+        }
         this._hidden$.next(true);
     }
     show() {
+        if (!this.primary) {
+            this.secondaryShow();
+        }
         this._hidden$.next(false);
     }
     get query() {
@@ -1190,12 +1215,13 @@ class BaseItem {
         }
     }
     _initConfig(item) {
-        const hidden = item.hide ?? !(item.show ?? true);
         this.name = item.name;
         this.label = item.label;
-        this.primary = item.primary ?? false;
+        this.primary = this.isTypeKeyword || (item.primary ?? false);
+        this.secondary = item.secondary ?? false;
         this.chipLabel = item.chipLabel;
-        this._hidden$.next(hidden);
+        this._hidden$.next(item.hide ?? !(item.show ?? true));
+        this._secondaryVisible$.next(item.secondary ?? false);
         this.clearable = item.clear ?? true;
         this.persistanceDisabled = item.disablePersist ?? false;
         this.queryParamsDisabled = item.disableQueryParams ?? false;
@@ -2260,7 +2286,6 @@ class FilterController {
     _ready$ = new BehaviorSubject(false);
     _items = new Map();
     _config;
-    _add$ = new Subject();
     _init$ = new Subject();
     _change$ = new Subject();
     _destroy$ = new Subject();
@@ -2281,9 +2306,6 @@ class FilterController {
     get init$() {
         return this._init$.asObservable();
     }
-    get add$() {
-        return this._add$.asObservable();
-    }
     get change$() {
         return this._change$
             .pipe(debounceTime(30));
@@ -2404,13 +2426,38 @@ class FilterController {
             .map((item) => {
             return item.init(values[item.name]);
         }))
-            .pipe(tap(() => this.items.forEach((item) => {
+            .pipe(tap(() => {
+            this._initEnabledItems();
+        }), tap(() => this.items
+            .forEach((item) => {
             item.initCallback(item, this.filter);
         })));
     }
+    _initEnabledItems() {
+        let enabled = 0;
+        this.items
+            .forEach((item) => {
+            if (!item.primary) {
+                if (item.hasValue) {
+                    item.secondaryShow();
+                }
+            }
+        });
+        this.items
+            .forEach((item) => {
+            if (!item.primary) {
+                if (item.secondaryVisible) {
+                    enabled++;
+                }
+                else if (enabled < this._config.maxEnabled) {
+                    item.secondaryShow();
+                    enabled++;
+                }
+            }
+        });
+    }
     _addItems(items) {
-        this._add$.next();
-        this._items = new Map(items
+        const itemMap = items
             .filter((item) => {
             if (this._items.has(item.name)) {
                 throw Error('Filter init error. Items name must be unique.');
@@ -2422,9 +2469,9 @@ class FilterController {
             if (filterItem instanceof KeywordItem) {
                 this._keywordController.keywordItem = filterItem;
             }
-            this._items.set(item.name, filterItem);
             return [item.name, filterItem];
-        }));
+        });
+        this._items = new Map(itemMap);
     }
     _initChanges() {
         merge(...this.items
@@ -2948,7 +2995,7 @@ class SelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { autofocus: "autofocus", floatLabel: "floatLabel", item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n          (change)=\"isolateChange($event)\"\n          [(ngModel)]=\"item.isolated\">\n        <span class=\"checkbox-label\">\n          {{ item.isolateLabel }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { 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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "filter-item-select", inputs: { autofocus: "autofocus", floatLabel: "floatLabel", item: "item" }, viewQueries: [{ propertyName: "select", first: true, predicate: MatSelect, descendants: true, static: true }], ngImport: i0, template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus && !item.isolate\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <div class=\"isolate-checkbox\">\n    <mat-checkbox\n        (change)=\"isolateChange($event)\"\n        [(ngModel)]=\"item.isolated\">\n      <span class=\"checkbox-label\">\n        {{ item.isolateLabel }}\n      </span>\n    </mat-checkbox>\n  </div>\n}", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: FocusToItemDirective, selector: "[fsFilterFocusTrigger]", inputs: ["fsFilterFocusTrigger"] }, { 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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -2962,10 +3009,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsFormModule,
                         MatOption,
                         MatOptgroup,
-                        MatHint,
                         MatCheckbox,
                         AsyncPipe,
-                    ], template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n  <mat-hint>\n    @if (item.isolate) {\n      <mat-checkbox\n          (change)=\"isolateChange($event)\"\n          [(ngModel)]=\"item.isolated\">\n        <span class=\"checkbox-label\">\n          {{ item.isolateLabel }}\n        </span>\n      </mat-checkbox>\n    }\n  </mat-hint>\n</mat-form-field>", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"] }]
+                    ], template: "<mat-form-field\n    [ngClass]=\"{ isolate: item.isolate }\"\n    [floatLabel]=\"floatLabel\"\n    class=\"form-field-padless\">\n  <mat-label>\n    {{ item.label }}\n  </mat-label>\n  <mat-select\n      [fsFilterFocusTrigger]=\"autofocus && !item.isolate\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"changed()\"\n      [multiple]=\"item.multiple\">\n    @if (item.children) {\n      @for (option of item.values$ | async; track option) {\n        @if (option[item.children]) {\n          <mat-optgroup [label]=\"option.name\">\n            @for (childOption of option[item.children]; track childOption.value) {\n              <mat-option [value]=\"childOption.value\">\n                {{ childOption.name }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        } @else {\n          <mat-option [value]=\"option.value\">\n            {{ option.name }}\n          </mat-option>\n        }\n      }\n    } @else {\n      @for (option of item.values$ | async; track option) {\n        <mat-option [value]=\"option.value\">\n          {{ option.name }}\n        </mat-option>\n      }\n    }\n  </mat-select>\n</mat-form-field>\n@if (item.isolate) {\n  <div class=\"isolate-checkbox\">\n    <mat-checkbox\n        (change)=\"isolateChange($event)\"\n        [(ngModel)]=\"item.isolated\">\n      <span class=\"checkbox-label\">\n        {{ item.isolateLabel }}\n      </span>\n    </mat-checkbox>\n  </div>\n}", styles: [":host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper{padding-left:0;padding-right:0;padding-top:8px}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field{position:relative}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-checkbox{position:absolute}:host ::ng-deep .isolate .mat-mdc-form-field-hint-wrapper mat-hint .mat-internal-form-field .mdc-label{margin-left:32px;font-size:smaller;line-height:normal}\n"] }]
         }], propDecorators: { autofocus: [{
                 type: Input
             }], floatLabel: [{
@@ -3239,6 +3285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class FsFilterChipsComponent {
     ItemType = ItemType;
+    secondaryItems = [];
     _filterController = inject(FilterController);
     _dialog = inject(MatDialog);
     _message = inject(FsMessage);
@@ -3246,45 +3293,55 @@ class FsFilterChipsComponent {
     _injector = inject(Injector);
     _overlay = inject(Overlay);
     _overlayRef;
+    _destroyRef = inject(DestroyRef);
+    _elementRef = inject(ElementRef);
+    _hasSecondaryValue$ = new BehaviorSubject(false);
     get items() {
         return this._filterController.items
             .filter((item) => !item.isTypeKeyword);
     }
-    get nonPrimaryItems() {
+    addFilter(event) {
+        const item = event.value;
+        item.secondaryShow();
+        setTimeout(() => {
+            this.openChip(item);
+        });
+    }
+    get disabledItems() {
         return this.items
-            .filter((item) => !item.primary)
-            .flat();
+            .filter((item) => !item.secondaryVisible && !item.hasValue && !item.primary);
+    }
+    get hasSecondaryValue$() {
+        return this._hasSecondaryValue$.asObservable();
     }
     get savedFilterController() {
         return this._savedFilterController;
     }
+    get hasSecondaryValue() {
+        return this._filterController.items
+            .some((item) => item.hasValue && item.visible && !item.primary);
+    }
     ngOnInit() {
-        fromEvent(document, 'click')
-            .subscribe((event) => {
-            const elements = document.elementsFromPoint(event.clientX, event.clientY);
-            const item1 = elements.some((element) => {
-                return !!this.getNestedElement(element, 'cdk-overlay-pane');
-            });
-            const item2 = elements.some((element) => {
-                return !!this.getNestedElement(element, 'filter-chip');
-            });
-            if (!item1 && !item2) {
-                this._destroyOverlay();
-            }
-        });
+        this.secondaryItems = this.items
+            .filter((item) => !item.primary);
+        this._initHasSecondaryValue();
+        this._initChipClick();
     }
     clear() {
-        this.items
+        this._filterController.items
             .filter((item) => item.clearable)
             .forEach((item) => {
+            if (!item.secondary) {
+                item.secondaryHide();
+            }
             item.clear(false);
         });
         this._filterController.change();
         this._savedFilterController.setActiveFilter(null);
     }
-    click(item, name, el) {
+    openChip(item, name = null) {
         this._destroyOverlay();
-        el = this.getNestedElement(el, 'filter-chip');
+        const el = this._elementRef.nativeElement.querySelector(`[data-filter-item="${item.name}"]`);
         const positions = [
             {
                 originX: 'start',
@@ -3365,7 +3422,10 @@ class FsFilterChipsComponent {
             this._overlayRef.dispose();
         }
     }
-    remove(item, chip) {
+    removeChip(item, chip) {
+        if (!item.secondary) {
+            item.secondaryHide();
+        }
         if (chip.name) {
             item.clearByName(chip.name);
         }
@@ -3388,8 +3448,31 @@ class FsFilterChipsComponent {
             parent: this._injector,
         });
     }
+    _initChipClick() {
+        fromEvent(document, 'click')
+            .subscribe((event) => {
+            const elements = document.elementsFromPoint(event.clientX, event.clientY);
+            const item1 = elements.some((element) => {
+                return !!this.getNestedElement(element, 'cdk-overlay-pane');
+            });
+            const item2 = elements.some((element) => {
+                return !!this.getNestedElement(element, 'filter-chip');
+            });
+            if (!item1 && !item2) {
+                this._destroyOverlay();
+            }
+        });
+    }
+    _initHasSecondaryValue() {
+        this._hasSecondaryValue$.next(this.hasSecondaryValue);
+        this._filterController.change$
+            .pipe(tap$1(() => {
+            this._hasSecondaryValue$.next(this.hasSecondaryValue);
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
     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: "@if (items.length !== 0) {\n  @for (item of nonPrimaryItems; track item.name) {\n    @if (item.visible$ | async) {\n      @if ((item.chips$ | async).length) {\n        @for (chip of item.chips$ | async; track chip.label) {\n          <fs-chip\n              class=\"filter-chip selected\"\n              [size]=\"'medium'\"\n              (click)=\"click(item, chip.name, $event.target)\">\n            @if (chip.value) {\n              {{ chip.label + ': ' + chip.value }}\n            } @else {\n              {{ chip.label }}\n            }\n            <ng-template\n              fsChipSuffix\n              [icon]=\"'cancel_circle_outline'\"\n              (click)=\"remove(item, chip)\">\n            </ng-template>\n          </fs-chip>\n        }\n      } @else {\n        <fs-chip\n            class=\"filter-chip\"\n            [size]=\"'medium'\"\n            (click)=\"click(item, null, $event.target)\"\n            [outlined]=\"true\">\n          {{ item.mergedLabel }}\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'add_circle_outline'\"\n            (click)=\"click(item, null, $event.event.target)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n  }\n  <a\n      class=\"clear\"\n      mat-stroked-button\n      (click)=\"clear()\">\n    Clear filters\n  </a>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-outlined-button\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.clear{display:flex;color:inherit;height:30px}.saved-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "directive", type: i1$5.FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: ["icon", "link", "linkTarget", "color", "data", "tooltip"], outputs: ["click"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsSelectButtonModule }, { kind: "directive", type: i3$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "minWidth", "maxWidth", "width", "buttonType", "deselectOnChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }], 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: "@if (items.length !== 0) {\n  @for (item of secondaryItems; track item.name) {\n    @if ((item.visible$ | async) && (item.hasValue$ | async)) {\n      @for (chip of item.chips$ | async; track chip.label) {\n        <fs-chip\n            class=\"filter-chip selected\"\n            [size]=\"'medium'\"\n            [borderColor]=\"'#ddd'\"\n            [attr.data-filter-item]=\"item.name\"\n            [outlined]=\"true\"\n            (click)=\"openChip(item, chip.name)\">\n          @if (chip.value) {\n            {{ chip.label }}:\n            <a>\n              {{ chip.value }}\n            </a>\n          } @else {\n            {{ chip.label }}\n          }\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'cancel_circle_outline'\"\n            (click)=\"removeChip(item, chip)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n    @if ((item.visible$ | async) && (item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n      <fs-chip\n          class=\"filter-chip\"\n          [attr.data-filter-item]=\"item.name\"\n          [size]=\"'medium'\"\n          [borderColor]=\"'#ddd'\"\n          (click)=\"openChip(item)\"\n          [outlined]=\"true\">\n        {{ item.mergedLabel }}\n        <ng-template\n          fsChipSuffix\n          [icon]=\"'add_circle_outline'\"\n          (click)=\"openChip(item)\">\n        </ng-template>\n      </fs-chip>\n    }\n  }\n  <mat-select\n      class=\"more-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"'More filters'\"\n      (selectionChange)=\"addFilter($event)\"\n      [deselectOnChange]=\"true\">\n    @for (item of disabledItems; track item.name) {\n      <mat-option [value]=\"item\">\n        {{ item.mergedLabel }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n  @if (hasSecondaryValue$ | async) {\n    <a\n        class=\"clear\"\n        mat-button\n        (click)=\"clear()\">\n      Clear filters\n    </a>\n  }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FsChipModule }, { kind: "component", type: i1$5.FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { kind: "directive", type: i1$5.FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: ["icon", "link", "linkTarget", "color", "data", "tooltip"], outputs: ["click"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsSelectButtonModule }, { kind: "directive", type: i3$1.FsSelectButtonDirective, selector: "[fsSelectButton]", inputs: ["color", "minWidth", "maxWidth", "width", "buttonType", "deselectOnChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FsFilterChipsComponent, decorators: [{
             type: Component,
@@ -3401,7 +3484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FsSelectButtonModule,
                         MatButtonModule,
                         FsButtonDirective,
-                    ], template: "@if (items.length !== 0) {\n  @for (item of nonPrimaryItems; track item.name) {\n    @if (item.visible$ | async) {\n      @if ((item.chips$ | async).length) {\n        @for (chip of item.chips$ | async; track chip.label) {\n          <fs-chip\n              class=\"filter-chip selected\"\n              [size]=\"'medium'\"\n              (click)=\"click(item, chip.name, $event.target)\">\n            @if (chip.value) {\n              {{ chip.label + ': ' + chip.value }}\n            } @else {\n              {{ chip.label }}\n            }\n            <ng-template\n              fsChipSuffix\n              [icon]=\"'cancel_circle_outline'\"\n              (click)=\"remove(item, chip)\">\n            </ng-template>\n          </fs-chip>\n        }\n      } @else {\n        <fs-chip\n            class=\"filter-chip\"\n            [size]=\"'medium'\"\n            (click)=\"click(item, null, $event.target)\"\n            [outlined]=\"true\">\n          {{ item.mergedLabel }}\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'add_circle_outline'\"\n            (click)=\"click(item, null, $event.event.target)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n  }\n  <a\n      class=\"clear\"\n      mat-stroked-button\n      (click)=\"clear()\">\n    Clear filters\n  </a>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-outlined-button\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.clear{display:flex;color:inherit;height:30px}.saved-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"] }]
+                    ], template: "@if (items.length !== 0) {\n  @for (item of secondaryItems; track item.name) {\n    @if ((item.visible$ | async) && (item.hasValue$ | async)) {\n      @for (chip of item.chips$ | async; track chip.label) {\n        <fs-chip\n            class=\"filter-chip selected\"\n            [size]=\"'medium'\"\n            [borderColor]=\"'#ddd'\"\n            [attr.data-filter-item]=\"item.name\"\n            [outlined]=\"true\"\n            (click)=\"openChip(item, chip.name)\">\n          @if (chip.value) {\n            {{ chip.label }}:\n            <a>\n              {{ chip.value }}\n            </a>\n          } @else {\n            {{ chip.label }}\n          }\n          <ng-template\n            fsChipSuffix\n            [icon]=\"'cancel_circle_outline'\"\n            (click)=\"removeChip(item, chip)\">\n          </ng-template>\n        </fs-chip>\n      }\n    }\n    @if ((item.visible$ | async) && (item.notValue$ | async) && (item.secondaryVisible$ | async)) {\n      <fs-chip\n          class=\"filter-chip\"\n          [attr.data-filter-item]=\"item.name\"\n          [size]=\"'medium'\"\n          [borderColor]=\"'#ddd'\"\n          (click)=\"openChip(item)\"\n          [outlined]=\"true\">\n        {{ item.mergedLabel }}\n        <ng-template\n          fsChipSuffix\n          [icon]=\"'add_circle_outline'\"\n          (click)=\"openChip(item)\">\n        </ng-template>\n      </fs-chip>\n    }\n  }\n  <mat-select\n      class=\"more-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"'More filters'\"\n      (selectionChange)=\"addFilter($event)\"\n      [deselectOnChange]=\"true\">\n    @for (item of disabledItems; track item.name) {\n      <mat-option [value]=\"item\">\n        {{ item.mergedLabel }}\n      </mat-option>\n    }\n  </mat-select>\n  <mat-select\n      class=\"saved-filters-select mat-mdc-button-base\"\n      [buttonType]=\"'basic'\"\n      fsSelectButton\n      [placeholder]=\"(savedFilterController.activeFilter$ | async) ? savedFilterController.singularLabel + ': ' + (savedFilterController.activeFilter$ | async).name : savedFilterController.pluralLabel\"\n      [deselectOnChange]=\"true\">\n    @if (savedFilterController.activeFilter$ | async) {\n      <mat-option (click)=\"saveActiveFilter()\">\n        Update filters\n      </mat-option>\n      <mat-option (click)=\"saveAs()\">\n        Save as new\n      </mat-option>\n    } @else {\n      <mat-option (click)=\"createSavedFilter()\">\n        Create new\n      </mat-option>\n    }\n    <mat-option (click)=\"manageSavedFilters()\">\n      View all\n    </mat-option>\n  </mat-select>\n  @if (hasSecondaryValue$ | async) {\n    <a\n        class=\"clear\"\n        mat-button\n        (click)=\"clear()\">\n      Clear filters\n    </a>\n  }\n}", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;gap:5px;max-width:100%;margin-top:4px}.saved-filters-select,.more-filters-select,.clear{display:flex;height:30px}.saved-filters-select.clear,.more-filters-select.clear,.clear.clear{padding:0 10px}.saved-filters-select ::ng-deep .mat-mdc-select-value,.more-filters-select ::ng-deep .mat-mdc-select-value,.clear ::ng-deep .mat-mdc-select-value{padding:0 5px}.saved-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.more-filters-select ::ng-deep .mat-mdc-select-arrow-wrapper,.clear ::ng-deep .mat-mdc-select-arrow-wrapper{padding-right:10px}\n"] }]
         }] });
 
 class KeywordInputComponent {