From c431d0c6f5c95225b490951ddde9ce00ddcb9cba Mon Sep 17 00:00:00 2001
From: Nikita Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Thu, 18 May 2023 10:18:42 +0200
Subject: [PATCH] [ACS-5171] Facets section - UI changes (#8563)

---
 lib/content-services/src/lib/i18n/en.json                   | 3 ++-
 .../search-facet-chip/search-facet-chip.component.html      | 6 +++---
 .../search-filter-chips/search-filter-chips.component.scss  | 5 +++++
 .../search-filter-chips.component.spec.ts                   | 2 +-
 .../search-widget-chip/search-widget-chip.component.html    | 6 +++---
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index afffbacdb5..234613519b 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -332,7 +332,8 @@
       },
       "ARIA-LABEL": {
         "SEARCH_FILTER": "Search Filter List"
-      }
+      },
+      "ANY": "Any"
     },
     "ICONS": {
       "ft_ic_raster_image": "Image file",
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
index c55d8c0f15..1420a5a8fe 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
@@ -11,13 +11,13 @@
           #menuTrigger="matMenuTrigger">
 
     <span class="adf-search-filter-placeholder">
-        <span class="adf-search-filter-ellipsis">{{ field.label | translate }}</span>
-        <ng-container *ngIf="facetField.displayValue$ | async">:</ng-container>
+        <span class="adf-search-filter-ellipsis">{{ field.label | translate }}:</span>
     </span>
 
-    <span class="adf-search-filter-ellipsis" *ngIf="facetField.displayValue$ | async as displayValue">
+    <span class="adf-search-filter-ellipsis adf-filter-value" *ngIf="facetField.displayValue$ | async as displayValue; else showAny">
         &nbsp; {{ displayValue | translate }}
     </span>
+    <ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
     <mat-icon>keyboard_arrow_down</mat-icon>
 </mat-chip>
 
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
index bc46418adf..07c36f658a 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss
@@ -42,6 +42,11 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        font-weight: 300;
+    }
+
+    .adf-filter-value {
+        font-weight: 500;
     }
 
     .mat-icon {
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts
index 23b095e8b0..12beb81f22 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.spec.ts
@@ -249,7 +249,7 @@ describe('SearchFilterChipsComponent', () => {
             expect(chips.length).toBe(2);
 
             const titleElements = fixture.debugElement.queryAll(By.css('.adf-search-filter-placeholder'));
-            expect(titleElements.map(title => title.nativeElement.innerText.trim())).toEqual(['Name', 'Type']);
+            expect(titleElements.map(title => title.nativeElement.innerText.trim())).toEqual(['Name:', 'Type:']);
         });
 
         it('should be update the search query when name changed', async () => {
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
index aac5798455..0e0dda9a42 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
@@ -10,12 +10,12 @@
           [attr.title]="widget.getDisplayValue() | async"
           #menuTrigger="matMenuTrigger">
     <span class="adf-search-filter-placeholder">
-        <span class="adf-search-filter-ellipsis">{{ category.name | translate }}</span>
-        <ng-container *ngIf="widget.getDisplayValue() | async">:</ng-container>
+        <span class="adf-search-filter-ellipsis">{{ category.name | translate }}:</span>
     </span>
-    <span class="adf-search-filter-ellipsis" *ngIf="widget.getDisplayValue() | async as displayValue">
+    <span class="adf-search-filter-ellipsis adf-filter-value" *ngIf="widget.getDisplayValue() | async as displayValue; else showAny">
         &nbsp;{{ displayValue | translate }}
     </span>
+    <ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
     <mat-icon>keyboard_arrow_down</mat-icon>
 </mat-chip>