66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
|
import { ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { Observable, map, startWith } from 'rxjs';
|
|
import { AsyncPipe } from '@angular/common';
|
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
|
|
@Component({
|
|
selector: 'receiver-input',
|
|
standalone: true,
|
|
imports: [
|
|
MatInputModule,
|
|
MatAutocompleteModule,
|
|
ReactiveFormsModule,
|
|
AsyncPipe,
|
|
MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule
|
|
],
|
|
templateUrl: './receiver-input.component.html',
|
|
styleUrl: './receiver-input.component.scss'
|
|
})
|
|
export class ReceiverInputComponent implements OnInit, OnChanges {
|
|
ngOnInit(): void {
|
|
this.setupFiltering();
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (changes['options']) {
|
|
this.setupFiltering();
|
|
}
|
|
}
|
|
|
|
private setupFiltering(): void {
|
|
this.filteredOptions = this.control.valueChanges.pipe(
|
|
startWith(''),
|
|
map(value => this.filter(value || '', this.options, this.index)),
|
|
);
|
|
}
|
|
|
|
control = new FormControl('');
|
|
filteredOptions!: Observable<string[]>;
|
|
|
|
@Input() options: string[] = [];
|
|
@Input() filter: (value: string, options: string[], index?: number) => string[] = value => {
|
|
const filterValue = value.toLowerCase();
|
|
return this.options.filter(option => option.toLowerCase().includes(filterValue));
|
|
}
|
|
@Input() index?: number;
|
|
|
|
public get text(): string {
|
|
return this.control.value || '';
|
|
}
|
|
|
|
public set text(value: string) {
|
|
this.control.setValue(value)
|
|
}
|
|
|
|
public get lenght(): number {
|
|
return this.text.length;
|
|
}
|
|
|
|
} |