Skip to content

Commit

Permalink
[ACS-7387][ADF] Break Search Text dependency on Material Module (#9508)
Browse files Browse the repository at this point in the history 
* [ACS-7387] convert component to standalone

* [ACS-7387] convert component to standalone
  • Loading branch information
@tamaragruszka
tamaragruszka authored Apr 11, 2024
1 parent 1bcc760 commit 503cdc4
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 65 deletions.
90 changes: 45 additions & 45 deletions lib/core/src/lib/search-text/search-text-input.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { SearchTextStateEnum, SearchAnimationState, SearchAnimationDirection } from './models/search-text-input.model';
import { SearchAnimationDirection, SearchAnimationState, SearchTextStateEnum } 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;
Expand Down Expand Up @@ -66,7 +75,7 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
@Input()
debounceTime: number = 0;

/** Listener for results-list events (focus, blur and focusout). */
/** Listener for results-list events (focus, blur and focusout). */
@Input()
focusListener: Observable<FocusEvent>;

Expand Down Expand Up @@ -128,12 +137,12 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
subscriptAnimationState: any;

animationStates: SearchAnimationDirection = {
ltr : {
ltr: {
active: { value: 'active', params: { 'margin-left': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(82%)' } }
},
rtl: {
active: { value: 'active', params: { 'margin-right': 13 } },
active: { value: 'active', params: { 'margin-right': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(-82%)' } }
}
};
Expand All @@ -144,27 +153,20 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
private focusSubscription: Subscription;
private valueChange = new Subject<string>();

constructor(
private userPreferencesService: UserPreferencesService
) {
this.toggleSearch
.pipe(
debounceTime(200),
takeUntil(this.onDestroy$)
)
.subscribe(() => {
if (this.expandable) {
this.subscriptAnimationState = this.toggleAnimation();
if (this.subscriptAnimationState.value === 'inactive') {
this.searchTerm = '';
this.reset.emit(true);
if (document.activeElement.id === this.searchInput.nativeElement.id) {
this.searchInput.nativeElement.blur();
}
constructor(private userPreferencesService: UserPreferencesService) {
this.toggleSearch.pipe(debounceTime(200), takeUntil(this.onDestroy$)).subscribe(() => {
if (this.expandable) {
this.subscriptAnimationState = this.toggleAnimation();
if (this.subscriptAnimationState.value === 'inactive') {
this.searchTerm = '';
this.reset.emit(true);
if (document.activeElement.id === this.searchInput.nativeElement.id) {
this.searchInput.nativeElement.blur();
}
this.emitVisibilitySearch();
}
});
this.emitVisibilitySearch();
}
});
}

ngOnInit() {
Expand Down Expand Up @@ -193,13 +195,13 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {

private toggleAnimation() {
if (this.dir === 'ltr') {
return this.subscriptAnimationState.value === 'inactive' ?
{ value: 'active', params: { 'margin-left': 13 } } :
{ value: 'inactive', params: { transform: 'translateX(82%)' } };
return this.subscriptAnimationState.value === 'inactive'
? { value: 'active', params: { 'margin-left': 13 } }
: { value: 'inactive', params: { transform: 'translateX(82%)' } };
} else {
return this.subscriptAnimationState.value === 'inactive' ?
{ value: 'active', params: { 'margin-right': 13 } } :
{ value: 'inactive', params: { transform: 'translateX(-82%)' } };
return this.subscriptAnimationState.value === 'inactive'
? { value: 'active', params: { 'margin-right': 13 } }
: { value: 'inactive', params: { transform: 'translateX(-82%)' } };
}
}

Expand All @@ -213,24 +215,25 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
private getAnimationState(dir: string): SearchAnimationState {
if (this.expandable && this.isDefaultStateExpanded()) {
return this.animationStates[dir].active;
} else if ( this.expandable ) {
} else if (this.expandable) {
return this.animationStates[dir].inactive;
} else {
return { value: 'no-animation' };
}
}

private setupFocusEventHandlers() {
if ( this.focusListener ) {
const focusEvents: Observable<FocusEvent> = this.focusListener
.pipe(
if (this.focusListener) {
const focusEvents: Observable<FocusEvent> = this.focusListener.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$)
);

this.focusSubscription = focusEvents.subscribe( (event: FocusEvent) => {
if ( event.type === 'focus') {
this.focusSubscription = focusEvents.subscribe((event: FocusEvent) => {
if (event.type === 'focus') {
this.searchInput.nativeElement.focus();
} else {
this.toggleSearchBar();
Expand All @@ -240,10 +243,7 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
}

private setValueChangeHandler() {
this.valueChange.pipe(
debounceTime(this.debounceTime),
takeUntil(this.onDestroy$)
).subscribe( (value: string) => {
this.valueChange.pipe(debounceTime(this.debounceTime), takeUntil(this.onDestroy$)).subscribe((value: string) => {
this.searchChange.emit(value);
});
}
Expand Down
20 changes: 2 additions & 18 deletions lib/core/src/lib/search-text/search-text-input.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
SearchTextInputComponent,
SearchTriggerDirective
],
imports: [
CommonModule,
TranslateModule,
MaterialModule,
FormsModule
],
exports: [
SearchTextInputComponent,
SearchTriggerDirective
]
imports: [SearchTextInputComponent, SearchTriggerDirective],
exports: [SearchTextInputComponent, SearchTriggerDirective]
})
export class SearchTextModule {}
4 changes: 2 additions & 2 deletions lib/core/src/lib/search-text/search-trigger.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 = inputValue;
this.element.nativeElement.value = toDisplay != null ? toDisplay : '';
}

private setValueAndClose(event: any | null): void {
Expand Down

0 comments on commit 503cdc4

Please sign in to comment.