47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'iqser-input-with-action',
|
|
templateUrl: './input-with-action.component.html',
|
|
styleUrls: ['./input-with-action.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class InputWithActionComponent {
|
|
@Input() placeholder = '';
|
|
@Input() hint?: string;
|
|
@Input() width: number | 'full' = 250;
|
|
@Input() icon?: string;
|
|
@Input() autocomplete: 'on' | 'off' = 'on';
|
|
@Input() value = '';
|
|
@Output() readonly action = new EventEmitter<string>();
|
|
@Output() readonly valueChange = new EventEmitter<string>();
|
|
|
|
constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {}
|
|
|
|
get hasContent(): boolean {
|
|
return !!this.value?.length;
|
|
}
|
|
|
|
get computedWidth(): string {
|
|
return this.width === 'full' ? '100%' : `${this.width}px`;
|
|
}
|
|
|
|
get isSearch(): boolean {
|
|
return !this.icon;
|
|
}
|
|
|
|
reset(): void {
|
|
this.value = '';
|
|
this.valueChange.emit(this.value);
|
|
this._changeDetectorRef.markForCheck();
|
|
}
|
|
|
|
executeAction($event: MouseEvent): void {
|
|
$event?.stopPropagation();
|
|
|
|
if (this.hasContent) {
|
|
this.action.emit(this.value);
|
|
}
|
|
}
|
|
}
|