@wlcm/angular 17.7.15 → 17.7.17

package/filters/fesm2022/wlcm-angular-filters.mjs

@@ -1,467 +1,206 @@
+import { BehaviorSubject, startWith, switchMap, combineLatest, map } from 'rxjs';
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Directive, inject, Injector, Component, ChangeDetectionStrategy, SkipSelf, Input, TemplateRef, ViewChild, ContentChild, EventEmitter, Output, HostListener, Pipe, Host, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { __decorate, __metadata } from 'tslib';
-import { BehaviorSubject, Subject, filter, switchMap, auditTime, skip, map } from 'rxjs';
+import { InjectionToken, Directive, ContentChildren, forwardRef, Component, NgModule } from '@angular/core';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i5 from '@wlcm/angular/core';
-import { WlcmStreamUtils, ChevronDownIconComponent, CloseIconComponent } from '@wlcm/angular/core';
-import * as i2 from '@rx-angular/template/let';
-import { RxLet } from '@rx-angular/template/let';
-import * as i4 from '@wlcm/angular/button';
-import { WlcmButtonComponent } from '@wlcm/angular/button';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import * as i3$1 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
-import * as i1$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-
-class WlcmFiltersContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: WlcmFiltersContentDirective, selector: "[wlcmFiltersContent]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersContentDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[wlcmFiltersContent]' }]
-        }] });
-
-class WlcmFiltersUnit {
-    constructor(param, parent) {
-        this.param = '';
-        this.data = [];
-        this._dataChanges$ = new BehaviorSubject([...this.data]);
-        this.dataChanges$ = this._dataChanges$.asObservable();
-        this.param = param;
-        this.parent = parent;
-    }
-    add(value) {
-        this.data = [...this.data, value];
-        this.notifyChanges();
-    }
-    setAll(value, onlySelf = false) {
-        this.data = [...value];
-        this.notifyChanges(onlySelf);
-    }
-    remove(value) {
-        this.data = this.data.filter((_value) => _value !== value);
-        this.notifyChanges();
-    }
-    reset(onlySelf = false) {
-        this.data = [];
-        this.notifyChanges(onlySelf);
-    }
-    clone(parent) {
-        const unit = new WlcmFiltersUnit(this.param, parent);
-        unit.data = [...this.data];
-        unit.notifyChanges(true);
-        return unit;
-    }
-    notifyChanges(onlySelf = false) {
-        this._dataChanges$.next([...this.data]);
-        if (!onlySelf) {
-            this.parent.syncUnitChanges();
-        }
-    }
-}
-class WlcmFiltersSelectionModel {
-}
-class WlcmFiltersTriggerControl {
-}
-
-class WlcmFiltersUtils {
-    static modelToQueryFilters(model) {
-        const filters = {};
-        Object.keys(model).forEach((key) => {
-            const data = model[key].data;
-            if (data.length > 0) {
-                filters[key] = { oneOf: data };
-            }
-        });
-        return filters;
-    }
-}
-
-let WlcmFiltersPanelComponent = class WlcmFiltersPanelComponent {
-    constructor(injector, panelControl, globalSelectionModel) {
-        this.injector = injector;
-        this.panelControl = panelControl;
-        this.globalSelectionModel = globalSelectionModel;
-        this.loading$ = new BehaviorSubject(false);
-        this.totalResults$ = new BehaviorSubject(null);
-        this._selectionModel = inject(WlcmFiltersSelectionModel);
-        this._countResults$ = new Subject();
-        this.handleCountResultsEvent();
-        this.handleSelectionChanges();
-    }
-    ngOnInit() {
-        this._countResults$.next(this._selectionModel.model);
-    }
-    apply() {
-        this.updateGlobalModel();
-        this.panelControl.close();
-    }
-    reset() {
-        this._selectionModel.reset();
-    }
-    close() {
-        this.panelControl.close();
-    }
-    updateGlobalModel() {
-        this.globalSelectionModel.updateSelection(this._selectionModel.model);
-    }
-    handleSelectionChanges() {
-        this._selectionModel.modelChanges$
-            .pipe(untilDestroyed(this))
-            .subscribe((model) => this._countResults$.next(model));
-    }
-    handleCountResultsEvent() {
-        this._countResults$
-            .pipe(filter(() => this.countResults instanceof Function))
-            .pipe(switchMap((model) => {
-            const filters = WlcmFiltersUtils.modelToQueryFilters(model);
-            return this.countResults(filters).pipe(auditTime(300), WlcmStreamUtils.loadingDetector(this.loading$));
-        }))
-            .subscribe((totalResults) => this.totalResults$.next(totalResults));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersPanelComponent, deps: [{ token: i0.Injector }, { token: WlcmFiltersTriggerControl }, { token: WlcmFiltersSelectionModel, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: WlcmFiltersPanelComponent, selector: "wlcm-filters-panel", inputs: { countResults: "countResults", filtersContent: "filtersContent" }, providers: [
-            {
-                provide: WlcmFiltersSelectionModel,
-                useFactory: () => inject(WlcmFiltersSelectionModel, { skipSelf: true }).clone(),
-            },
-        ], ngImport: i0, template: "<div class=\"wlcm-filters-panel\">\n  <div class=\"wlcm-filters-panel-header\">\n    <h4 class=\"filters-panel__title\">Filters</h4>\n\n    <wlcm-close-icon\n      (click)=\"close()\"\n      class=\"wlcm-cursor-pointer\"\n    ></wlcm-close-icon>\n  </div>\n\n  <div class=\"wlcm-filters-panel-units\">\n    <ng-container\n      *ngTemplateOutlet=\"filtersContent; injector: injector\"\n    ></ng-container>\n  </div>\n\n  <div class=\"wlcm-filters-panel-actions\">\n    <wlcm-button type=\"borderless\" (clicked)=\"reset()\">Reset All</wlcm-button>\n\n    <wlcm-button\n      (clicked)=\"apply()\"\n      *rxLet=\"loading$ | async as isLoading\"\n      [isLoading]=\"isLoading\"\n    >\n      Show\n\n      <ng-container *rxLet=\"totalResults$ | async as totalResults\">\n        <ng-container *ngIf=\"totalResults !== null && !isLoading\">\n          ({{ totalResults }})\n        </ng-container>\n      </ng-container>\n    </wlcm-button>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i2.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.WlcmButtonComponent, selector: "wlcm-button", inputs: ["type", "size", "isDisabled", "isLoading"], outputs: ["clicked"] }, { kind: "component", type: i5.CloseIconComponent, selector: "wlcm-close-icon" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-WlcmFiltersPanelComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Injector,
-        WlcmFiltersTriggerControl,
-        WlcmFiltersSelectionModel])
-], WlcmFiltersPanelComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-filters-panel', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: WlcmFiltersSelectionModel,
-                            useFactory: () => inject(WlcmFiltersSelectionModel, { skipSelf: true }).clone(),
-                        },
-                    ], template: "<div class=\"wlcm-filters-panel\">\n  <div class=\"wlcm-filters-panel-header\">\n    <h4 class=\"filters-panel__title\">Filters</h4>\n\n    <wlcm-close-icon\n      (click)=\"close()\"\n      class=\"wlcm-cursor-pointer\"\n    ></wlcm-close-icon>\n  </div>\n\n  <div class=\"wlcm-filters-panel-units\">\n    <ng-container\n      *ngTemplateOutlet=\"filtersContent; injector: injector\"\n    ></ng-container>\n  </div>\n\n  <div class=\"wlcm-filters-panel-actions\">\n    <wlcm-button type=\"borderless\" (clicked)=\"reset()\">Reset All</wlcm-button>\n\n    <wlcm-button\n      (clicked)=\"apply()\"\n      *rxLet=\"loading$ | async as isLoading\"\n      [isLoading]=\"isLoading\"\n    >\n      Show\n\n      <ng-container *rxLet=\"totalResults$ | async as totalResults\">\n        <ng-container *ngIf=\"totalResults !== null && !isLoading\">\n          ({{ totalResults }})\n        </ng-container>\n      </ng-container>\n    </wlcm-button>\n  </div>\n</div>\n", styles: [":host{width:100%;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: WlcmFiltersTriggerControl }, { type: WlcmFiltersSelectionModel, decorators: [{
-                    type: SkipSelf
-                }] }], propDecorators: { countResults: [{
-                type: Input
-            }], filtersContent: [{
-                type: Input
-            }] } });
-
-class WlcmFiltersComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: WlcmFiltersComponent, selector: "wlcm-filters", inputs: { countResults: "countResults" }, queries: [{ propertyName: "filtersContent", first: true, predicate: WlcmFiltersContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["filtersPanelTemplate"], descendants: true }], exportAs: ["wlcmFilters"], ngImport: i0, template: "<ng-template #filtersPanelTemplate>\n  <wlcm-filters-panel\n    [countResults]=\"countResults\"\n    [filtersContent]=\"filtersContent\"\n  >\n  </wlcm-filters-panel>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: WlcmFiltersPanelComponent, selector: "wlcm-filters-panel", inputs: ["countResults", "filtersContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-filters', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'wlcmFilters', template: "<ng-template #filtersPanelTemplate>\n  <wlcm-filters-panel\n    [countResults]=\"countResults\"\n    [filtersContent]=\"filtersContent\"\n  >\n  </wlcm-filters-panel>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { countResults: [{
-                type: Input
-            }], templateRef: [{
-                type: ViewChild,
-                args: ['filtersPanelTemplate']
-            }], filtersContent: [{
-                type: ContentChild,
-                args: [WlcmFiltersContentDirective, { read: TemplateRef }]
-            }] } });
+import { CommonModule } from '@angular/common';
 
-class FiltersDefaultSelectionModel extends WlcmFiltersSelectionModel {
+class WlcmFilter {
     constructor() {
-        super(...arguments);
-        this.model = {};
-        this._modelChanges$ = new BehaviorSubject({ ...this.model });
-        this.modelChanges$ = this._modelChanges$.asObservable();
-    }
-    add(param, unit, wlcmtChanges = true) {
-        this.model[param] = unit;
-        if (wlcmtChanges) {
-            this.notifyChanges();
-        }
-    }
-    has(param) {
-        return this.model[param] instanceof WlcmFiltersUnit;
+        this._cachedValue = null;
+        this._size$ = new BehaviorSubject(0);
+        this.size$ = this._size$.asObservable();
+        this._value$ = new BehaviorSubject(this.initialValue);
+        this.value$ = this._value$.asObservable();
     }
-    get(param) {
-        return this.model[param];
+    reset() {
+        this.value = this.initialValue;
     }
-    createUnit(param) {
-        return new WlcmFiltersUnit(param, this);
+    cacheValue() {
+        this._cachedValue = this.prepareValueForCache(this.value);
     }
-    updateSelection(model) {
-        this.model = this.cloneModel(model, this);
-        this.notifyChanges();
+    restoreCachedValue() {
+        this.value = this._cachedValue;
     }
-    syncUnitChanges() {
-        this.notifyChanges();
+    prepareValueForCache(value) {
+        return value;
     }
-    clone() {
-        const clone = new FiltersDefaultSelectionModel();
-        clone.updateSelection({ ...this.model });
-        return clone;
+    getAppliedFilters() {
+        return this.value;
     }
-    reset() {
-        Object.values(this.model).forEach((unit) => unit.reset(true));
-        this.notifyChanges();
+    get initialValue() {
+        return null;
     }
-    get isEmpty() {
-        return (Object.keys(this.model).length == 0 ||
-            Object.values(this.model).every((unit) => unit.data.length === 0));
+    get size() {
+        return this._size$.value;
     }
-    cloneModel(model, parent) {
-        const _model = {};
-        Object.keys(model).forEach((param) => {
-            _model[param] = model[param].clone(parent);
-        });
-        return _model;
+    get value() {
+        return this._value$.value;
     }
-    notifyChanges() {
-        this._modelChanges$.next({ ...this.model });
+    set value(data) {
+        this._value$.next(data);
+        if (data !== null) {
+            this._size$.next(this.computeSize(data));
+        }
     }
 }
 
-let FiltersTriggerBase = class FiltersTriggerBase {
-    set filters(value) {
-        this._filters = value;
-        this.updateSelectionModel();
-    }
-    constructor(selectionModel) {
-        this.selectionModel = selectionModel;
-        this.filtersChanges = new EventEmitter();
-    }
-    updateSelectionModel() {
-        if (!this._filters || Object.values(this._filters).length === 0) {
-            if (!this.selectionModel.isEmpty) {
-                this.selectionModel.reset();
-            }
+class WlcmArrayFilter extends WlcmFilter {
+    constructor() {
+        super();
+        this.prepareValue();
+    }
+    get initialValue() {
+        return new Map();
+    }
+    getAppliedFilters() {
+        if (!this.value)
+            return [];
+        return Array.from(this.value.values());
+    }
+    prepareValueForCache(value) {
+        if (!value)
+            return null;
+        return new Map(value);
+    }
+    computeSize(value) {
+        return value.size;
+    }
+    selectId(value) {
+        return value;
+    }
+    contains(value) {
+        if (!this.value)
+            return false;
+        return this.value.has(this.selectId(value));
+    }
+    addOne(value) {
+        this.prepareValue();
+        this.value = this.value.set(this.selectId(value), value);
+    }
+    addMany(values) {
+        this.prepareValue();
+        const currentValue = this.value;
+        values.forEach((value) => currentValue.set(this.selectId(value), value));
+        this.value = currentValue;
+    }
+    setAll(values) {
+        const newValue = new Map();
+        values.forEach((value) => newValue.set(this.selectId(value), value));
+        this.value = newValue;
+    }
+    removeOne(value) {
+        this.prepareValue();
+        const currentValue = this.value;
+        currentValue.delete(this.selectId(value));
+        this.value = currentValue;
+    }
+    removeAll() {
+        this.value = new Map();
+    }
+    toggle(value) {
+        this.prepareValue();
+        const currentValue = this.value;
+        const id = this.selectId(value);
+        if (currentValue.has(id)) {
+            currentValue.delete(id);
         }
         else {
-            const filters = this._filters;
-            Object.keys(filters).forEach((param) => {
-                const unit = this.selectionModel.createUnit(param);
-                unit.setAll(filters[param].oneOf, true);
-                this.selectionModel.add(param, unit, false);
-            });
+            currentValue.set(id, value);
         }
+        this.value = currentValue;
     }
-    handleModelChanges() {
-        this.selectionModel.modelChanges$.pipe(untilDestroyed(this), skip(1)).subscribe((model) => {
-            const filters = WlcmFiltersUtils.modelToQueryFilters(model);
-            this.filtersChanges.next(filters);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FiltersTriggerBase, deps: [{ token: WlcmFiltersSelectionModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: FiltersTriggerBase, inputs: { filters: ["wlcmFiltersTriggerData", "filters"] }, outputs: { filtersChanges: "wlcmFiltersTriggerDataChanges" }, ngImport: i0 }); }
-};
-FiltersTriggerBase = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [WlcmFiltersSelectionModel])
-], FiltersTriggerBase);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FiltersTriggerBase, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: WlcmFiltersSelectionModel }], propDecorators: { filters: [{
-                type: Input,
-                args: ['wlcmFiltersTriggerData']
-            }], filtersChanges: [{
-                type: Output,
-                args: ['wlcmFiltersTriggerDataChanges']
-            }] } });
-
-class WlcmFiltersTriggerDirective extends FiltersTriggerBase {
-    openPanel() {
-        if (this.overlayRef instanceof OverlayRef)
+    prepareValue() {
+        if (this.value instanceof Map)
             return;
-        const config = this.createOverlayConfig();
-        const injector = this.createInjector();
-        this.overlayRef = this.overlay.create(config);
-        this.overlayRef.attach(new TemplatePortal(this.panel.templateRef, this.viewContainerRef, null, injector));
-    }
-    constructor(overlay, injector, elementRef, viewContainerRef, selectionModel) {
-        super(selectionModel);
-        this.overlay = overlay;
-        this.injector = injector;
-        this.elementRef = elementRef;
-        this.viewContainerRef = viewContainerRef;
-        this.selectionModel = selectionModel;
-        this.overlayRef = null;
-        this.handleModelChanges();
-    }
-    close() {
-        this.overlayRef?.dispose();
-        this.overlayRef = null;
-    }
-    createInjector() {
-        return Injector.create({
-            providers: [
-                { provide: WlcmFiltersSelectionModel, useValue: this.selectionModel },
-                { provide: WlcmFiltersTriggerControl, useValue: { close: this.close.bind(this) } },
-            ],
-            parent: this.injector,
-        });
-    }
-    createOverlayConfig() {
-        const strategy = this.overlay.position().flexibleConnectedTo(this.elementRef);
-        strategy.withPositions([{ originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }]);
-        strategy.withDefaultOffsetY(5);
-        return new OverlayConfig({
-            width: '300px',
-            positionStrategy: strategy,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-        });
+        this.value = new Map();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersTriggerDirective, deps: [{ token: i1.Overlay }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: WlcmFiltersSelectionModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: WlcmFiltersTriggerDirective, selector: "[wlcmFiltersTrigger]", inputs: { panel: ["wlcmFiltersTrigger", "panel"] }, host: { listeners: { "click": "openPanel()" } }, providers: [{ provide: WlcmFiltersSelectionModel, useClass: FiltersDefaultSelectionModel }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[wlcmFiltersTrigger]',
-                    providers: [{ provide: WlcmFiltersSelectionModel, useClass: FiltersDefaultSelectionModel }],
-                }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: WlcmFiltersSelectionModel }], propDecorators: { panel: [{
-                type: Input,
-                args: ['wlcmFiltersTrigger']
-            }], openPanel: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
 
-class IsFiltersParamCheckedPipe {
-    transform(data) {
-        return data.has(this.checkbox.value);
+const WLCM_FILTER = new InjectionToken('WLCM_FILTER');
+
+let WlcmFiltersGroup = class WlcmFiltersGroup {
+    constructor() {
+        this._size$ = new BehaviorSubject(0);
+        this.size$ = this._size$.asObservable();
     }
-    constructor(checkbox) {
-        this.checkbox = checkbox;
+    ngAfterContentInit() {
+        this.handleFiltersListChange();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: IsFiltersParamCheckedPipe, deps: [{ token: i1$1.MatCheckbox, host: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: IsFiltersParamCheckedPipe, name: "isFiltersParamChecked" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: IsFiltersParamCheckedPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'isFiltersParamChecked' }]
-        }], ctorParameters: () => [{ type: i1$1.MatCheckbox, decorators: [{
-                    type: Host
-                }] }] });
-
-class WlcmFiltersUnitComponent {
-    constructor(selectionModel) {
-        this.selectionModel = selectionModel;
-        this.label = '';
-        this.param = '';
-        this.options = [];
+    resetAll() {
+        this.filters.forEach((filter) => filter.reset());
     }
-    ngOnInit() {
-        this.initializeFiltersUnit();
+    getAppliedFilters() {
+        const appliedFilters = {};
+        this.filters.forEach((filter) => {
+            appliedFilters[filter.key] = filter.getAppliedFilters();
+        });
+        return appliedFilters;
     }
-    reset() {
-        this.filtersUnit.reset();
+    cacheValues() {
+        this.filters.forEach((filter) => filter.cacheValue());
     }
-    change(event) {
-        if (event.checked) {
-            this.filtersUnit.add(event.source.value);
-        }
-        else {
-            this.filtersUnit.remove(event.source.value);
-        }
+    restoreCachedValues() {
+        this.filters.forEach((filter) => filter.restoreCachedValue());
     }
-    initializeFiltersUnit() {
-        if (this.selectionModel.has(this.param)) {
-            this.filtersUnit = this.selectionModel.get(this.param);
-        }
-        else {
-            this.filtersUnit = this.selectionModel.createUnit(this.param);
-            this.selectionModel.add(this.param, this.filtersUnit, false);
-        }
-        this.dataChanges$ = this.filtersUnit.dataChanges$.pipe(map((data) => new Set(data)));
+    get size() {
+        return this._size$.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersUnitComponent, deps: [{ token: WlcmFiltersSelectionModel }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: WlcmFiltersUnitComponent, selector: "wlcm-filters-unit", inputs: { label: "label", param: "param", options: "options" }, ngImport: i0, template: "<mat-expansion-panel class=\"wlcm-filters-unit\" hideToggle>\n  <mat-expansion-panel-header collapsedHeight=\"30px\" expandedHeight=\"30px\">\n    <div class=\"wlcm-filters-unit-header\">\n      <section>\n        <span class=\"wlcm-filters-unit-header__label\">{{ label }}</span>\n\n        <div\n          class=\"wlcm-entities-count\"\n          *ngIf=\"(dataChanges$ | async)!.size as size\"\n        >\n          {{ size }}\n        </div>\n      </section>\n\n      <section>\n        <button\n          class=\"reset-btn cursor-pointer\"\n          (click)=\"reset(); $event.stopPropagation()\"\n          *ngIf=\"(dataChanges$ | async)!.size > 0\"\n        >\n          Reset\n        </button>\n\n        <wlcm-chevron-down-icon\n          class=\"wlcm-filters-unit__chevron\"\n        ></wlcm-chevron-down-icon>\n      </section>\n    </div>\n  </mat-expansion-panel-header>\n\n  <div class=\"wlcm-filters-unit-checkboxes\">\n    <ng-container *ngFor=\"let option of options\">\n      <mat-checkbox\n        [value]=\"$any(option.value)\"\n        [checked]=\"(dataChanges$ | async)! | isFiltersParamChecked\"\n        (change)=\"change($event)\"\n      >\n        {{ option.viewValue }}\n      </mat-checkbox>\n    </ng-container>\n  </div>\n</mat-expansion-panel>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: i1$1.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: "component", type: i5.ChevronDownIconComponent, selector: "wlcm-chevron-down-icon" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: IsFiltersParamCheckedPipe, name: "isFiltersParamChecked" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersUnitComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-filters-unit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-expansion-panel class=\"wlcm-filters-unit\" hideToggle>\n  <mat-expansion-panel-header collapsedHeight=\"30px\" expandedHeight=\"30px\">\n    <div class=\"wlcm-filters-unit-header\">\n      <section>\n        <span class=\"wlcm-filters-unit-header__label\">{{ label }}</span>\n\n        <div\n          class=\"wlcm-entities-count\"\n          *ngIf=\"(dataChanges$ | async)!.size as size\"\n        >\n          {{ size }}\n        </div>\n      </section>\n\n      <section>\n        <button\n          class=\"reset-btn cursor-pointer\"\n          (click)=\"reset(); $event.stopPropagation()\"\n          *ngIf=\"(dataChanges$ | async)!.size > 0\"\n        >\n          Reset\n        </button>\n\n        <wlcm-chevron-down-icon\n          class=\"wlcm-filters-unit__chevron\"\n        ></wlcm-chevron-down-icon>\n      </section>\n    </div>\n  </mat-expansion-panel-header>\n\n  <div class=\"wlcm-filters-unit-checkboxes\">\n    <ng-container *ngFor=\"let option of options\">\n      <mat-checkbox\n        [value]=\"$any(option.value)\"\n        [checked]=\"(dataChanges$ | async)! | isFiltersParamChecked\"\n        (change)=\"change($event)\"\n      >\n        {{ option.viewValue }}\n      </mat-checkbox>\n    </ng-container>\n  </div>\n</mat-expansion-panel>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: WlcmFiltersSelectionModel }], propDecorators: { label: [{
-                type: Input
-            }], param: [{
-                type: Input
-            }], options: [{
-                type: Input
+    handleFiltersListChange() {
+        this.filters.changes
+            .pipe(untilDestroyed(this))
+            .pipe(startWith(this.filters))
+            .pipe(switchMap((filters) => this.handleSizeChange(filters.toArray())))
+            .subscribe();
+    }
+    handleSizeChange(list) {
+        return combineLatest(list.map((filter) => filter.size$)).pipe(map((sizes) => {
+            this._size$.next(sizes.reduce((a, b) => a + b, 0));
+            return list;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: WlcmFiltersGroup, queries: [{ propertyName: "filters", predicate: WLCM_FILTER }], ngImport: i0 }); }
+};
+WlcmFiltersGroup = __decorate([
+    UntilDestroy()
+], WlcmFiltersGroup);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersGroup, decorators: [{
+            type: Directive
+        }], propDecorators: { filters: [{
+                type: ContentChildren,
+                args: [WLCM_FILTER]
             }] } });
 
-class WlcmTotalFiltersAppliedPipe {
-    transform(filters) {
-        if (!filters)
-            return 0;
-        return Object.values(filters).reduce((total, filter) => {
-            return total + (filter.oneOf?.length || 0);
-        }, 0);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmTotalFiltersAppliedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: WlcmTotalFiltersAppliedPipe, isStandalone: true, name: "totalFiltersApplied" }); }
+class FilterDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: FilterDirective, isStandalone: true, selector: "[wlcmFilter]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmTotalFiltersAppliedPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'totalFiltersApplied', standalone: true }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FilterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[wlcmFilter]', standalone: true }]
         }] });
 
-class WlcmFiltersButtonComponent {
-    constructor() {
-        this.filtersChange = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: WlcmFiltersButtonComponent, selector: "wlcm-filters-button", inputs: { panel: "panel", filters: "filters" }, outputs: { filtersChange: "filtersChange" }, ngImport: i0, template: "<ng-container *rxLet=\"filters | totalFiltersApplied as filtersCount\">\n  <wlcm-button\n    [wlcmFiltersTrigger]=\"panel\"\n    [wlcmFiltersTriggerData]=\"filters\"\n    (wlcmFiltersTriggerDataChanges)=\"filtersChange.emit($event)\"\n    [type]=\"filtersCount > 0 ? 'primary' : 'secondary'\"\n  >\n    Filters\n    @if (filtersCount > 0) {\n      <div class=\"wlcm-entities-count\">{{ filtersCount }}</div>\n    }\n  </wlcm-button>\n</ng-container>\n", styles: [":host{display:block}:host .wlcm-entities-count{margin-left:8px}\n"], dependencies: [{ kind: "directive", type: i2.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i4.WlcmButtonComponent, selector: "wlcm-button", inputs: ["type", "size", "isDisabled", "isLoading"], outputs: ["clicked"] }, { kind: "directive", type: WlcmFiltersTriggerDirective, selector: "[wlcmFiltersTrigger]", inputs: ["wlcmFiltersTrigger"] }, { kind: "pipe", type: WlcmTotalFiltersAppliedPipe, name: "totalFiltersApplied" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class FiltersGroupComponent extends WlcmFiltersGroup {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FiltersGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: FiltersGroupComponent, isStandalone: true, selector: "wlcm-filters-group", host: { classAttribute: "wlcm-filters-group" }, providers: [{ provide: WlcmFiltersGroup, useExisting: forwardRef(() => FiltersGroupComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[wlcmFilter]\"></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FiltersGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-filters-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *rxLet=\"filters | totalFiltersApplied as filtersCount\">\n  <wlcm-button\n    [wlcmFiltersTrigger]=\"panel\"\n    [wlcmFiltersTriggerData]=\"filters\"\n    (wlcmFiltersTriggerDataChanges)=\"filtersChange.emit($event)\"\n    [type]=\"filtersCount > 0 ? 'primary' : 'secondary'\"\n  >\n    Filters\n    @if (filtersCount > 0) {\n      <div class=\"wlcm-entities-count\">{{ filtersCount }}</div>\n    }\n  </wlcm-button>\n</ng-container>\n", styles: [":host{display:block}:host .wlcm-entities-count{margin-left:8px}\n"] }]
-        }], propDecorators: { panel: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], filtersChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'wlcm-filters-group', standalone: true, imports: [CommonModule], host: { class: 'wlcm-filters-group' }, providers: [{ provide: WlcmFiltersGroup, useExisting: forwardRef(() => FiltersGroupComponent) }], template: "<ng-content select=\"[wlcmFilter]\"></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }] });
 
-const publicComponents = [WlcmFiltersComponent, WlcmFiltersUnitComponent, WlcmFiltersButtonComponent];
-const publicDirectives = [WlcmFiltersTriggerDirective, WlcmFiltersContentDirective];
+const publicComponents = [FiltersGroupComponent];
+const publicDirectives = [FilterDirective];
 class WlcmFiltersModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersModule, declarations: [WlcmFiltersComponent, WlcmFiltersUnitComponent, WlcmFiltersButtonComponent, WlcmFiltersTriggerDirective, WlcmFiltersContentDirective, WlcmFiltersPanelComponent, IsFiltersParamCheckedPipe], imports: [RxLet,
-            CommonModule,
-            MatExpansionModule,
-            MatCheckboxModule,
-            WlcmTotalFiltersAppliedPipe,
-            ChevronDownIconComponent,
-            WlcmButtonComponent,
-            CloseIconComponent], exports: [WlcmFiltersComponent, WlcmFiltersUnitComponent, WlcmFiltersButtonComponent, WlcmFiltersTriggerDirective, WlcmFiltersContentDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersModule, imports: [CommonModule,
-            MatExpansionModule,
-            MatCheckboxModule,
-            ChevronDownIconComponent,
-            WlcmButtonComponent,
-            CloseIconComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersModule, imports: [CommonModule, FiltersGroupComponent, FilterDirective], exports: [FiltersGroupComponent, FilterDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersModule, imports: [CommonModule, publicComponents] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: WlcmFiltersModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        RxLet,
-                        CommonModule,
-                        MatExpansionModule,
-                        MatCheckboxModule,
-                        WlcmTotalFiltersAppliedPipe,
-                        ChevronDownIconComponent,
-                        WlcmButtonComponent,
-                        CloseIconComponent,
-                    ],
-                    declarations: [...publicComponents, ...publicDirectives, WlcmFiltersPanelComponent, IsFiltersParamCheckedPipe],
+                    imports: [CommonModule, ...publicComponents, ...publicDirectives],
                     exports: [...publicComponents, ...publicDirectives],
                 }]
         }] });
@@ -470,5 +209,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { WlcmFiltersButtonComponent, WlcmFiltersComponent, WlcmFiltersContentDirective, WlcmFiltersModule, WlcmFiltersSelectionModel, WlcmFiltersTriggerControl, WlcmFiltersTriggerDirective, WlcmFiltersUnit, WlcmFiltersUnitComponent };
+export { FilterDirective, FiltersGroupComponent, WLCM_FILTER, WlcmArrayFilter, WlcmFilter, WlcmFiltersGroup, WlcmFiltersModule };
 //# sourceMappingURL=wlcm-angular-filters.mjs.map