From 8780b47843ca3ccd7be3fa0378727eacf85497d3 Mon Sep 17 00:00:00 2001
From: jacekpluta <73617938+jacekpluta@users.noreply.github.com>
Date: Thu, 25 Apr 2024 12:04:58 +0200
Subject: [PATCH] [ACS-7531] - Search page (#9606)

---
 .../search-facet-chip-tabbed.component.html          |  2 +-
 .../search-facet-chip-tabbed.component.scss          |  4 ++++
 .../search-filter-chips.component.scss               | 12 +++++++++++-
 .../search-form/search-form.component.html           |  2 +-
 .../search-form/search-form.component.scss           | 10 ++++++++--
 .../dynamic-chip-list.component.scss                 | 12 ++++++++++++
 lib/core/src/lib/styles/_mat-selectors.scss          |  4 ++++
 7 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html
index 0517cfa58e0..48470bb8d28 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html
@@ -18,7 +18,7 @@
         &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 *ngIf="isPopulated; else disabledIcon">{{ chipIcon }}</mat-icon>
+    <mat-icon class="adf-search-filter-chip-icon" *ngIf="isPopulated; else disabledIcon">{{ chipIcon }}</mat-icon>
     <ng-template #disabledIcon>
         <mat-icon>remove</mat-icon>
     </ng-template>
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
index fe421ccb654..ba248dbbde6 100644
--- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
+++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.scss
@@ -5,6 +5,10 @@ adf-search-facet-chip-tabbed {
         }
     }
 
+    .adf-search-filter-chip-icon {
+        padding-top: 2px;
+    }
+
     .adf-search-widget-extra-width {
         max-width: 500px;
     }
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 44bdc060854..56c5d156f01 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
@@ -1,9 +1,11 @@
 @use '@angular/material' as mat;
+@import 'styles/mat-selectors';
 
 .adf-search-filter-chip,
 .adf-search-filter-chip-tabbed {
     border: 2px solid transparent;
     transition: border 500ms ease-in-out;
+    height: 32px;
     max-width: 320px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -37,7 +39,6 @@
     }
 
     .adf-search-filter-chip-icon {
-        padding-top: 5px;
         padding-left: 5px;
     }
 
@@ -48,3 +49,12 @@
         @include mat.elevation(2);
     }
 }
+
+.adf-search-filter-chip#{$mat-evolution-chip}#{$mat-standard-chip} {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+#{$mat-standard-chip} {
+    -webkit-font-smoothing: unset;
+}
diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.html b/lib/content-services/src/lib/search/components/search-form/search-form.component.html
index 7e2976fe9ec..f2af1ddd60e 100644
--- a/lib/content-services/src/lib/search/components/search-form/search-form.component.html
+++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.html
@@ -21,7 +21,7 @@
                 [matMenuTriggerRestoreFocus]="true">
 
             <span class="adf-search-form-title">{{ getSelected(forms) | translate }}</span>
-            <mat-icon [class.adf-search-form-icon-selected]="menuTrigger.menuOpen" class="adf-search-form-icon">expand_more</mat-icon>
+            <mat-icon [class.adf-search-form-icon-selected]="menuTrigger.menuOpen" iconPositionEnd class="adf-search-form-icon">expand_more</mat-icon>
         </button>
 
         <mat-menu #menu="matMenu" class="adf-search-form-menu">
diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
index b908b35bec7..56d6262e4a4 100644
--- a/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
+++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.scss
@@ -1,7 +1,11 @@
 @use '@angular/material' as mat;
+@import 'styles/mat-selectors';
 
 .adf-search-form {
     &.adf-search-form-button {
+        justify-content: space-between;
+        display: flex;
+        padding: 0 14px 0 16px;
         height: 35px;
         max-width: 190px;
         min-width: 190px;
@@ -17,7 +21,6 @@
     &-title {
         max-width: 120px;
         min-width: 120px;
-        font-weight: bold;
         font-size: var(--theme-body-1-font-size);
         line-height: 24px;
         padding-right: 12px;
@@ -26,7 +29,10 @@
         text-align: left;
     }
 
-    &-icon {
+    .adf-search-form-icon#{$mat-icon} {
+        font-size: 24px;
+        height: 24px;
+        width: 24px;
         border: 2px solid transparent;
         border-radius: 6px;
         transition: border 500ms ease-out;
diff --git a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
index a8cf64eb9ae..14c4046dcca 100644
--- a/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
+++ b/lib/core/src/lib/dynamic-chip-list/dynamic-chip-list.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-dynamic-chip-list-container {
     display: flex;
     flex-direction: row;
@@ -72,6 +74,16 @@
         background-color: var(--theme-primary-color);
         height: auto;
         word-break: break-word;
+        margin-top: 0;
+        margin-bottom: 0;
+
+        #{$mat-evolution-chip-action} {
+            padding: 2px 12px;
+
+            #{$mat-evolution-chip-text-label} {
+                color: var(--adf-theme-foreground-text-color-054);
+            }
+        }
     }
 
     .adf-dynamic-chip-list-delete-icon {
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
index 3792818d04d..2c7c01cd5d6 100644
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -108,3 +108,7 @@ $mdc-dialog: '.mdc-dialog';
 $mat-text-filed-input: '.mdc-text-field__input';
 $mat-floating-label-float-above: '.mdc-floating-label--float-above';
 $mat-floating-label--required: '.mdc-floating-label--required';
+$mat-evolution-chip: '.mdc-evolution-chip';
+$mat-standard-chip: '.mat-mdc-standard-chip';
+$mat-evolution-chip-action: '.mdc-evolution-chip__action';
+$mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label'