[ACS-7531] - Search page (#9606)

lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip-tabbed/search-facet-chip-tabbed.component.html

@@ -18,7 +18,7 @@
           {{ 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>

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;
     }

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;
+}

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">

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;

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;
@@ -70,6 +72,26 @@
     .adf-dynamic-chip-list-chip {
         height: auto;
         word-break: break-word;
+        margin-top: 0;
+        margin-bottom: 0;
         padding: 6px 11px;
+
+        #{$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 {
+        font-size: var(--theme-title-font-size);
+        background-repeat: no-repeat;
+        display: inline-block;
+        fill: currentcolor;
+        height: 20px;
+        width: 20px;
+        color: var(--theme-primary-color-default-contrast);
     }
 }

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'