40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
|
|
import { Required } from '../../utils';
|
|
import { CircleButtonType } from '../../buttons';
|
|
|
|
@Component({
|
|
selector: 'iqser-editable-input',
|
|
templateUrl: './editable-input.component.html',
|
|
styleUrls: ['./editable-input.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class EditableInputComponent {
|
|
@Input() @Required() value!: string;
|
|
@Input() editTooltip?: string;
|
|
@Input() saveTooltip?: string;
|
|
@Input() cancelTooltip?: string;
|
|
@Input() placeholder?: string;
|
|
@Input() class?: string;
|
|
@Input() showPreview = true;
|
|
@Input() buttonsType?: CircleButtonType;
|
|
@Output() readonly save = new EventEmitter<string>();
|
|
newValue = '';
|
|
|
|
private _editing = false;
|
|
|
|
@HostBinding('class.editing')
|
|
get editing(): boolean {
|
|
return this._editing;
|
|
}
|
|
|
|
set editing(value: boolean) {
|
|
this._editing = value;
|
|
this.newValue = this.value;
|
|
}
|
|
|
|
saveValue(): void {
|
|
this.save.emit(this.newValue);
|
|
this.editing = false;
|
|
}
|
|
}
|