Highlight selected filter facets in search sidebar

src/app/core/auth/auth.service.spec.ts

@@ -315,6 +315,7 @@ describe('AuthService test', () => {
     beforeEach(() => {
       mockStore = TestBed.inject(MockStore);
       authService = TestBed.inject(AuthService);
+      mockStore.overrideSelector(getAuthenticationToken, token);
       mockStore.overrideSelector(isAuthenticated, true);
       mockStore.refreshState();
       storage = (authService as any).storage;

src/app/shared/search/search-filters/search-filter/search-filter.component.html

@@ -1,5 +1,6 @@
 @if (active$ | async) {
   <div class="facet-filter d-block mb-3 p-3"
+	  [class.filter-active]="(appliedFilters$ | async)?.length > 0"
     [id]="regionId" [attr.aria-labelledby]="toggleId" [ngClass]="{ 'focus': focusBox }" role="region">
     <button (click)="toggle()" (focusin)="focusBox = true" (focusout)="focusBox = false"
       class="filter-name d-flex" [attr.aria-controls]="regionId" [id]="toggleId"

src/styles/_bootstrap_variables.scss

@@ -40,6 +40,7 @@ $warning:   #ec9433 !default;               // Orange
 $danger:    #cf4444 !default;               // Red
 $light:     #f8f9fa !default;               // As Bootstrap $gray-100
 $dark:      darken(#2b4e72, 17%) !default;  // Blue gray (darker)
+$highlightColor: rgba(30, 111, 144, 0.3) !default; // $info color with 0.3 opacity
 
 // Add new semantic colors here (you don't need to add existing semantic colors)
 $global-custom-semantic-colors: (

src/styles/_bootstrap_variables_mapping.scss

@@ -91,6 +91,8 @@
 
   --bs-border-radius-lg: #{$bs-border-radius-lg};
 
+  --bs-highlight-color: #{$highlightColor};
+
 }
 
 // Some Bootstrap CSS variables are tied to classes

src/styles/_global-styles.scss

@@ -573,3 +573,5 @@ ngb-tooltip-window {
   mask-size: contain;
   background-color: currentColor;
 }
+
+ds-search-filter .facet-filter.filter-active { background-color: var(--bs-highlight-color); }