Progress bar component supports filters

src/lib/misc/progress-bar/progress-bar-config.model.ts

@@ -1,4 +1,5 @@
 export interface ProgressBarConfigModel {
+    id: string;
     label: string;
     icon: string;
     count: number;

src/lib/misc/progress-bar/progress-bar.component.html

@@ -1,8 +1,10 @@
-<div class="details mb-6">
-    <span>{{ config.count }} {{ config.label | translate }}</span>
-    <mat-icon [svgIcon]="config.icon"></mat-icon>
-</div>
+<div (click)="selectValue()" [class.pointer]="filterKey && !!filterService">
+    <div [class.active]="filterChecked$ | async" class="details mb-6">
+        <span>{{ config.count }} {{ config.label | translate }}</span>
+        <mat-icon [svgIcon]="config.icon"></mat-icon>
+    </div>
 
-<div class="wrapper">
-    <div [style.--count]="config.count" [style.--total]="config.total" class="indicator"></div>
+    <div class="wrapper">
+        <div [style.--count]="config.count" [style.--total]="config.total" class="indicator"></div>
+    </div>
 </div>

src/lib/misc/progress-bar/progress-bar.component.scss

@@ -21,8 +21,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
+
     mat-icon {
         width: 10px;
     }
 }
+
+.active {
+    font-weight: 600;
+}

src/lib/misc/progress-bar/progress-bar.component.ts

@@ -1,5 +1,9 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, Optional } from '@angular/core';
 import { ProgressBarConfigModel } from './progress-bar-config.model';
+import { FilterService, INestedFilter } from '../../filtering';
+import { Observable, of } from 'rxjs';
+import { get, shareLast } from '../../utils';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'iqser-progress-bar [config]',
@@ -9,4 +13,29 @@ import { ProgressBarConfigModel } from './progress-bar-config.model';
 })
 export class ProgressBarComponent {
     @Input() config!: ProgressBarConfigModel;
+    @Input() filterKey?: string;
+
+    filterChecked$!: Observable<boolean>;
+    filters$!: Observable<INestedFilter[]>;
+
+    constructor(@Optional() readonly filterService: FilterService) {}
+
+    ngOnInit() {
+        this.filters$ =
+            this.filterService?.getFilterModels$(this.filterKey || '-').pipe(
+                map(filters => filters ?? []),
+                shareLast(),
+            ) ?? of([]);
+
+        this.filterChecked$ = this.filters$.pipe(
+            get(filter => filter.id === this.config.id),
+            map(filter => !!filter?.checked),
+        );
+    }
+
+    selectValue(): void {
+        if (this.filterKey && this.filterService) {
+            this.filterService?.toggleFilter(this.filterKey, this.config.id);
+        }
+    }
 }