inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [ACS-7387] convert component to standalone

* [ACS-7387] convert component to standalone
This commit is contained in:
tamaragruszka 2024-04-11 22:40:30 +02:00 committed by GitHub
parent 1bcc760b3f
commit 503cdc40b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 49 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
lib/core/src/lib/search-text/search-text-input.component.ts
View File

@ -15,26 +15,35 @@
* limitations under the License. * 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 { 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 { 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({ @Component({
selector: 'adf-search-text-input', selector: 'adf-search-text-input',
standalone: true,
templateUrl: './search-text-input.component.html', templateUrl: './search-text-input.component.html',
styleUrls: ['./search-text-input.component.scss'], styleUrls: ['./search-text-input.component.scss'],
animations: [searchAnimation], animations: [searchAnimation],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
imports: [MatButtonModule, MatIconModule, TranslateModule, MatFormFieldModule, MatInputModule, FormsModule, SearchTriggerDirective, NgIf],
host: { host: {
class: 'adf-search-text-input' class: 'adf-search-text-input'
} }
}) })
export class SearchTextInputComponent implements OnInit, OnDestroy { export class SearchTextInputComponent implements OnInit, OnDestroy {
/** Toggles auto-completion of the search input field. */ /** Toggles auto-completion of the search input field. */
@Input() @Input()
autocomplete: boolean = false; autocomplete: boolean = false;
@ -66,7 +75,7 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
@Input() @Input()
debounceTime: number = 0; debounceTime: number = 0;
/** Listener for results-list events (focus, blur and focusout). */ /** Listener for results-list events (focus, blur and focusout). */
@Input() @Input()
focusListener: Observable<FocusEvent>; focusListener: Observable<FocusEvent>;
@ -128,12 +137,12 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
subscriptAnimationState: any; subscriptAnimationState: any;
animationStates: SearchAnimationDirection = { animationStates: SearchAnimationDirection = {
ltr : { ltr: {
active: { value: 'active', params: { 'margin-left': 13 } }, active: { value: 'active', params: { 'margin-left': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(82%)' } } inactive: { value: 'inactive', params: { transform: 'translateX(82%)' } }
}, },
rtl: { rtl: {
active: { value: 'active', params: { 'margin-right': 13 } }, active: { value: 'active', params: { 'margin-right': 13 } },
inactive: { value: 'inactive', params: { transform: 'translateX(-82%)' } } inactive: { value: 'inactive', params: { transform: 'translateX(-82%)' } }
} }
}; };
@ -144,27 +153,20 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
private focusSubscription: Subscription; private focusSubscription: Subscription;
private valueChange = new Subject<string>(); private valueChange = new Subject<string>();
constructor( constructor(private userPreferencesService: UserPreferencesService) {
private userPreferencesService: UserPreferencesService this.toggleSearch.pipe(debounceTime(200), takeUntil(this.onDestroy$)).subscribe(() => {
) { if (this.expandable) {
this.toggleSearch this.subscriptAnimationState = this.toggleAnimation();
.pipe( if (this.subscriptAnimationState.value === 'inactive') {
debounceTime(200), this.searchTerm = '';
takeUntil(this.onDestroy$) this.reset.emit(true);
) if (document.activeElement.id === this.searchInput.nativeElement.id) {
.subscribe(() => { this.searchInput.nativeElement.blur();
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() { ngOnInit() {
@ -193,13 +195,13 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
private toggleAnimation() { private toggleAnimation() {
if (this.dir === 'ltr') { 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 { } 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%)' } };
} }
} }
@ -213,7 +215,7 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
private getAnimationState(dir: string): SearchAnimationState { private getAnimationState(dir: string): SearchAnimationState {
if (this.expandable && this.isDefaultStateExpanded()) { if (this.expandable && this.isDefaultStateExpanded()) {
return this.animationStates[dir].active; return this.animationStates[dir].active;
} else if ( this.expandable ) { } else if (this.expandable) {
return this.animationStates[dir].inactive; return this.animationStates[dir].inactive;
} else { } else {
return { value: 'no-animation' }; return { value: 'no-animation' };
@ -221,16 +223,17 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
} }
private setupFocusEventHandlers() { private setupFocusEventHandlers() {
if ( this.focusListener ) { if (this.focusListener) {
const focusEvents: Observable<FocusEvent> = this.focusListener const focusEvents: Observable<FocusEvent> = this.focusListener.pipe(
.pipe(
debounceTime(50), 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$) takeUntil(this.onDestroy$)
); );
this.focusSubscription = focusEvents.subscribe( (event: FocusEvent) => { this.focusSubscription = focusEvents.subscribe((event: FocusEvent) => {
if ( event.type === 'focus') { if (event.type === 'focus') {
this.searchInput.nativeElement.focus(); this.searchInput.nativeElement.focus();
} else { } else {
this.toggleSearchBar(); this.toggleSearchBar();
@ -240,10 +243,7 @@ export class SearchTextInputComponent implements OnInit, OnDestroy {
} }
private setValueChangeHandler() { 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); this.searchChange.emit(value);
}); });
} }

20
lib/core/src/lib/search-text/search-text-input.module.ts
View File

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

4
lib/core/src/lib/search-text/search-trigger.directive.ts
View File

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