From d6d4b9adb235374a5f86cd7e9de746298ef1d602 Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Mon, 1 Jul 2024 17:10:39 +0200
Subject: [PATCH] AAE-23556 Fix search text input component styles (#9895)

---
 .../src/lib/search-text/search-text-input.component.html | 7 ++-----
 .../src/lib/search-text/search-text-input.component.scss | 9 +++------
 .../src/lib/search-text/search-text-input.component.ts   | 9 ++++-----
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/lib/core/src/lib/search-text/search-text-input.component.html b/lib/core/src/lib/search-text/search-text-input.component.html
index 796bc3852c6..d7becee74a3 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.html
+++ b/lib/core/src/lib/search-text/search-text-input.component.html
@@ -27,13 +27,10 @@
                    (ngModelChange)="inputChange($event)"
                    [searchAutocomplete]="searchAutocomplete ? searchAutocomplete : null"
                    (keyup.enter)="searchSubmit($event)">
-            <button mat-icon-button matSuffix
+                <mat-icon *ngIf="canShowClearSearch()" matSuffix
                     data-automation-id="adf-clear-search-button"
                     class="adf-clear-search-button"
-                    *ngIf="canShowClearSearch()"
-                    (mousedown)="resetSearch()">
-                <mat-icon>clear</mat-icon>
-            </button>
+                    (mousedown)="resetSearch()">clear</mat-icon>
         </mat-form-field>
     </div>
 </div>
diff --git a/lib/core/src/lib/search-text/search-text-input.component.scss b/lib/core/src/lib/search-text/search-text-input.component.scss
index 59c65928507..3d6444ab9a2 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.scss
+++ b/lib/core/src/lib/search-text/search-text-input.component.scss
@@ -21,12 +21,9 @@
         line-height: normal;
     }
 
-    &-input-form-field-divider {
-        #{$mat-line-ripple} {
-            background-color: var(--adf-theme-primary-50);
-        }
-
-        font-size: var(--theme-subheading-2-font-size);
+    &-clear-search-button {
+        font-size: var(--theme-button-font-size);
+        cursor: pointer;
     }
 }
 
diff --git a/lib/core/src/lib/search-text/search-text-input.component.ts b/lib/core/src/lib/search-text/search-text-input.component.ts
index da9e6f4b5c2..5ffbf82fd15 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.ts
+++ b/lib/core/src/lib/search-text/search-text-input.component.ts
@@ -99,7 +99,6 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     @Input()
     placeholder: string = '';
 
-
     /** Label text to show over the input field */
     @Input()
     label: string = '';
@@ -144,11 +143,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     animationStates: SearchAnimationDirection = {
         ltr: {
             active: { value: 'active', params: { 'margin-left': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(82%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(95%)' } }
         },
         rtl: {
             active: { value: 'active', params: { 'margin-right': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(-82%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(-95%)' } }
         }
     };
 
@@ -202,11 +201,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
         if (this.dir === 'ltr') {
             return this.subscriptAnimationState.value === 'inactive'
                 ? { value: 'active', params: { 'margin-left': 13 } }
-                : { value: 'inactive', params: { transform: 'translateX(82%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(95%)' } };
         } else {
             return this.subscriptAnimationState.value === 'inactive'
                 ? { value: 'active', params: { 'margin-right': 13 } }
-                : { value: 'inactive', params: { transform: 'translateX(-82%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(-95%)' } };
         }
     }