AAE-25888 Offset SearchTextInput expansion based on search icon width (#10213)

* AAE-25888 use negative margin and transform by full width

* AAE-25888 update tests

* AAE-25888 add adf-search-button-inactive to manage search icon offset

* AAE-25888 remove scss variable

* AAE-25888 adjust peer unit tests

lib/content-services/src/lib/search/components/search-control.component.spec.ts

@@ -415,13 +415,13 @@ describe('SearchControlComponent', () => {
             it('should have positive transform translation', () => {
                 userPreferencesService.setWithoutStore('textOrientation', 'ltr');
                 fixture.detectChanges();
-                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(85%)');
+                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(100%)');
             });
 
             it('should have negative transform translation ', () => {
                 userPreferencesService.setWithoutStore('textOrientation', 'rtl');
                 fixture.detectChanges();
-                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-85%)');
+                expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-100%)');
             });
         });
     });

lib/core/src/lib/search-text/search-text-input.component.html

@@ -6,6 +6,7 @@
                 *ngIf="expandable"
                 id="adf-search-button"
                 class="adf-search-button"
+                [ngClass]="{'adf-search-button-inactive': subscriptAnimationState.value === 'inactive'}"
                 [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
                 (click)="toggleSearchBar()"
                 (keyup.enter)="toggleSearchBar()">

lib/core/src/lib/search-text/search-text-input.component.scss

@@ -15,6 +15,10 @@
     }
 
     .adf {
+        &-search-button-inactive {
+            margin-left: -48px;
+        }
+
         &-search-fixed-text {
             line-height: normal;
         }

lib/core/src/lib/search-text/search-text-input.component.spec.ts

@@ -210,7 +210,7 @@ describe('SearchTextInputComponent', () => {
             userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl');
             component.subscriptAnimationState.value = 'active';
             clickSearchButton();
-            const expectedValue = isLtr ? 'translateX(85%)' : 'translateX(-85%)';
+            const expectedValue = isLtr ? 'translateX(100%)' : 'translateX(-100%)';
             expect(component.subscriptAnimationState.params).toEqual({ transform: expectedValue });
             discardPeriodicTasks();
         }
@@ -223,6 +223,13 @@ describe('SearchTextInputComponent', () => {
             testTransformValue(false);
         }));
 
+        it('should have an inactive class when input is collapsed', fakeAsync(() => {
+            component.subscriptAnimationState.value = 'inactive';
+            fixture.detectChanges();
+            expect(component.subscriptAnimationState.value).toBe('inactive');
+            expect(element.querySelector('.adf-search-button-inactive')).toBeTruthy();
+        }));
+
         it('should set browser autocomplete to on when configured', async () => {
             component.autocomplete = true;
 

lib/core/src/lib/search-text/search-text-input.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Direction } from '@angular/cdk/bidi';
-import { NgIf } from '@angular/common';
+import { NgClass, NgIf } from '@angular/common';
 import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -38,7 +38,17 @@ import { SearchTriggerDirective } from './search-trigger.directive';
     styleUrls: ['./search-text-input.component.scss'],
     animations: [searchAnimation],
     encapsulation: ViewEncapsulation.None,
-    imports: [MatButtonModule, MatIconModule, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, SearchTriggerDirective, NgIf],
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        TranslateModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+        SearchTriggerDirective,
+        NgIf,
+        NgClass
+    ],
     host: {
         class: 'adf-search-text-input'
     }
@@ -143,11 +153,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     animationStates: SearchAnimationDirection = {
         ltr: {
             active: { value: 'active', params: { 'margin-left': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(85%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(100%)' } }
         },
         rtl: {
             active: { value: 'active', params: { 'margin-right': 13 } },
-            inactive: { value: 'inactive', params: { transform: 'translateX(-85%)' } }
+            inactive: { value: 'inactive', params: { transform: 'translateX(-100%)' } }
         }
     };
 
@@ -201,11 +211,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(85%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(100%)' } };
         } else {
             return this.subscriptAnimationState.value === 'inactive'
                 ? { value: 'active', params: { 'margin-right': 13 } }
-                : { value: 'inactive', params: { transform: 'translateX(-85%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(-100%)' } };
         }
     }