72 lines
2.4 KiB
TypeScript
72 lines
2.4 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;
|
|
@Input() helpModeKey: string = '';
|
|
@Input() lastChild = false;
|
|
@Output() readonly save = new EventEmitter<string>();
|
|
textArea?: { 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) {
|
|
this.setTextAreaSize();
|
|
}
|
|
}
|
|
|
|
setTextAreaSize() {
|
|
setTimeout(() => {
|
|
const element = document.getElementById(this.id as string) as HTMLElement;
|
|
const parentElement = document.getElementById(this.parentId as string) as HTMLElement;
|
|
const width = parentElement.offsetWidth - 98;
|
|
let height = (this.lastChild ? parentElement.offsetHeight : element.offsetHeight) - 16;
|
|
if (this.lastChild) {
|
|
const lastChildIndex = Number(this.id?.split('-')[2]);
|
|
height = height - lastChildIndex * element.offsetHeight;
|
|
}
|
|
this.textArea = { width, height };
|
|
}, 50);
|
|
}
|
|
|
|
saveValue(): void {
|
|
this.save.emit(this.newValue);
|
|
this.editing = false;
|
|
}
|
|
}
|