59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { NgIf } from '@angular/common';
|
|
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { CircleButtonComponent, CircleButtonType, CircleButtonTypes } from '../../buttons';
|
|
|
|
@Component({
|
|
selector: 'iqser-editable-input [value]',
|
|
templateUrl: './editable-input.component.html',
|
|
styleUrls: ['./editable-input.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
standalone: true,
|
|
imports: [NgIf, CircleButtonComponent, FormsModule],
|
|
})
|
|
export class EditableInputComponent implements OnChanges {
|
|
@Input() id?: string;
|
|
@Input() parentId?: string;
|
|
@Input() value!: string;
|
|
@Input() editTooltip?: string;
|
|
@Input() saveTooltip?: string;
|
|
@Input() cancelTooltip?: string;
|
|
@Input() placeholder = '';
|
|
@Input() class?: string;
|
|
@Input() showPreview = true;
|
|
@Input() canEdit = true;
|
|
@Input() buttonsType: CircleButtonType = CircleButtonTypes.default;
|
|
@Output() readonly save = new EventEmitter<string>();
|
|
parentDimensions?: { width: number; height: number };
|
|
newValue = '';
|
|
|
|
private _editing = false;
|
|
|
|
@HostBinding('class.editing')
|
|
get editing(): boolean {
|
|
return this._editing;
|
|
}
|
|
|
|
set editing(value: boolean) {
|
|
this._editing = value;
|
|
this.newValue = this.value;
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (changes['value']) {
|
|
this.editing = false;
|
|
}
|
|
if (changes['parentId']?.currentValue) {
|
|
setTimeout(() => {
|
|
const parent = document.getElementById(this.parentId as string) as HTMLElement;
|
|
this.parentDimensions = { width: parent.offsetWidth - 98, height: parent.offsetHeight - 16 };
|
|
}, 20);
|
|
}
|
|
}
|
|
|
|
saveValue(): void {
|
|
this.save.emit(this.newValue);
|
|
this.editing = false;
|
|
}
|
|
}
|