chore(search): add disableAnimations input and update styles for search button transitions (#12087)

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

@@ -1,5 +1,5 @@
 <div class="adf-search-container" [attr.state]="subscriptAnimationState.value">
-    <div class="adf-search-container-transition" [class.adf-search-active]="isSearchBarActive()" [ngStyle]="subscriptAnimationState.params">
+    <div class="adf-search-container-transition" [class.adf-search-active]="isSearchBarActive()" [class.adf-search-no-animation]="disableAnimations">
         @if (expandable && !isSearchBarActive()) {
             <button
                 mat-icon-button
@@ -13,7 +13,7 @@
                 <mat-icon [attr.aria-label]="'CORE.SEARCH.BUTTON.ARIA-LABEL' | translate" adf-icon="search" />
             </button>
         }
-        <mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel">
+        <mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel" [ngStyle]="subscriptAnimationState.params">
             @if (label) {
                 <mat-label>{{ label }}</mat-label>
             }

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

@@ -6,12 +6,19 @@
     .adf-search-container-transition {
         display: flex;
         align-items: center;
+    }
+
+    .adf-input-form-field-divider {
         transition:
             transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
             margin-left 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
             margin-right 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
     }
 
+    .adf-search-no-animation .adf-input-form-field-divider {
+        transition: none;
+    }
+
     .adf {
         &-search-fixed-text {
             line-height: normal;

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

@@ -145,6 +145,13 @@ describe('SearchTextInputComponent', () => {
             fixture.detectChanges();
         });
 
+        it('should disable transitions when disableAnimations is true', () => {
+            component.disableAnimations = true;
+            fixture.detectChanges();
+
+            expect(testingUtils.getByCSS('.adf-search-container-transition.adf-search-no-animation')).toBeTruthy();
+        });
+
         /**
          * function which finds Search Button and clicks it
          */

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

@@ -103,6 +103,10 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     @Input()
     collapseOnBlur: boolean = true;
 
+    /** Disables expand/collapse transitions while keeping state changes functional. */
+    @Input()
+    disableAnimations: boolean = false;
+
     /** Toggles whether to show a clear button that closes the search */
     @Input()
     showClearButton: boolean = false;