[ACS-7387][ADF] Break Search Text dependency on Material Module (#9508)

* [ACS-7387] convert component to standalone

* [ACS-7387] convert component to standalone

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

@@ -15,26 +15,35 @@
  * limitations under the License.
  */
 
-import { ViewEncapsulation, Component, Input, OnDestroy, ViewChild, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
-import { Subject, Observable, Subscription } from 'rxjs';
-import { debounceTime, takeUntil, filter } from 'rxjs/operators';
 import { Direction } from '@angular/cdk/bidi';
+import { 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';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { TranslateModule } from '@ngx-translate/core';
+import { Observable, Subject, Subscription } from 'rxjs';
+import { debounceTime, filter, takeUntil } from 'rxjs/operators';
+import { UserPreferencesService } from '../common';
 import { searchAnimation } from './animations';
-import { UserPreferencesService } from '../common/services/user-preferences.service';
+import { SearchAnimationDirection, SearchAnimationState, SearchTextStateEnum } from './models/search-text-input.model';
-import { SearchTextStateEnum, SearchAnimationState, SearchAnimationDirection } from './models/search-text-input.model';
+import { SearchTriggerDirective } from './search-trigger.directive';
 
 @Component({
     selector: 'adf-search-text-input',
+    standalone: true,
     templateUrl: './search-text-input.component.html',
     styleUrls: ['./search-text-input.component.scss'],
     animations: [searchAnimation],
     encapsulation: ViewEncapsulation.None,
+    imports: [MatButtonModule, MatIconModule, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, SearchTriggerDirective, NgIf],
     host: {
         class: 'adf-search-text-input'
     }
 })
 export class SearchTextInputComponent implements OnInit, OnDestroy {
-
     /** Toggles auto-completion of the search input field. */
     @Input()
     autocomplete: boolean = false;
@@ -144,15 +153,8 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     private focusSubscription: Subscription;
     private valueChange = new Subject<string>();
 
-    constructor(
+    constructor(private userPreferencesService: UserPreferencesService) {
-        private userPreferencesService: UserPreferencesService
+        this.toggleSearch.pipe(debounceTime(200), takeUntil(this.onDestroy$)).subscribe(() => {
-    ) {
-        this.toggleSearch
-            .pipe(
-                debounceTime(200),
-                takeUntil(this.onDestroy$)
-            )
-            .subscribe(() => {
             if (this.expandable) {
                 this.subscriptAnimationState = this.toggleAnimation();
                 if (this.subscriptAnimationState.value === 'inactive') {
@@ -193,13 +195,13 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
 
     private toggleAnimation() {
         if (this.dir === 'ltr') {
-            return this.subscriptAnimationState.value === 'inactive' ?
+            return this.subscriptAnimationState.value === 'inactive'
-                { value: 'active', params: { 'margin-left': 13 } } :
+                ? { value: 'active', params: { 'margin-left': 13 } }
-                { value: 'inactive', params: { transform: 'translateX(82%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(82%)' } };
         } else {
-            return this.subscriptAnimationState.value === 'inactive' ?
+            return this.subscriptAnimationState.value === 'inactive'
-                { value: 'active', params: { 'margin-right': 13 } } :
+                ? { value: 'active', params: { 'margin-right': 13 } }
-                { value: 'inactive', params: { transform: 'translateX(-82%)' } };
+                : { value: 'inactive', params: { transform: 'translateX(-82%)' } };
         }
     }
 
@@ -222,10 +224,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
 
     private setupFocusEventHandlers() {
         if (this.focusListener) {
-            const focusEvents: Observable<FocusEvent> = this.focusListener
+            const focusEvents: Observable<FocusEvent> = this.focusListener.pipe(
-            .pipe(
                 debounceTime(50),
-                filter(($event: any) => this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout' || $event.type === 'focus')),
+                filter(
+                    ($event: any) => this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout' || $event.type === 'focus')
+                ),
                 takeUntil(this.onDestroy$)
             );
 
@@ -240,10 +243,7 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
     }
 
     private setValueChangeHandler() {
-        this.valueChange.pipe(
+        this.valueChange.pipe(debounceTime(this.debounceTime), takeUntil(this.onDestroy$)).subscribe((value: string) => {
-            debounceTime(this.debounceTime),
-            takeUntil(this.onDestroy$)
-        ).subscribe( (value: string) => {
             this.searchChange.emit(value);
         });
     }

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

@@ -16,27 +16,11 @@
  */
 
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { SearchTextInputComponent } from './search-text-input.component';
-import { TranslateModule } from '@ngx-translate/core';
 import { SearchTriggerDirective } from './search-trigger.directive';
-import { MaterialModule } from '../material.module';
 
 @NgModule({
-    declarations: [
+    imports: [SearchTextInputComponent, SearchTriggerDirective],
-        SearchTextInputComponent,
+    exports: [SearchTextInputComponent, SearchTriggerDirective]
-        SearchTriggerDirective
-    ],
-    imports: [
-        CommonModule,
-        TranslateModule,
-        MaterialModule,
-        FormsModule
-    ],
-    exports: [
-        SearchTextInputComponent,
-        SearchTriggerDirective
-    ]
 })
 export class SearchTextModule {}

lib/core/src/lib/search-text/search-trigger.directive.ts

@@ -37,6 +37,7 @@ export const SEARCH_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
 @Directive({
     // eslint-disable-next-line @angular-eslint/directive-selector
     selector: `input[searchAutocomplete], textarea[searchAutocomplete]`,
+    standalone: true,
     host: {
         role: 'combobox',
         '[attr.autocomplete]': 'autocomplete',
@@ -189,8 +190,7 @@ export class SearchTriggerDirective implements ControlValueAccessor, OnDestroy {
 
     private setTriggerValue(value: any): void {
         const toDisplay = this.searchPanel?.displayWith ? this.searchPanel.displayWith(value) : value;
-        const inputValue = toDisplay != null ? toDisplay : '';
+        this.element.nativeElement.value = toDisplay != null ? toDisplay : '';
-        this.element.nativeElement.value = inputValue;
     }
 
     private setValueAndClose(event: any | null): void {