src/app/shared/controls/text-field/text-field.component.ts

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/
import {AfterContentChecked, Component, ElementRef, EventEmitter, Input, Output, ViewChild} from "@angular/core";
import {timer} from "rxjs";

@Component({
    selector: "app-text-field",
    templateUrl: "./text-field.component.html",
    styleUrls: ["./text-field.component.scss"]
})
export class TextFieldComponent implements AfterContentChecked {

    @ViewChild("inputElement") inputElement: ElementRef;

    @Input()
    public appIsFocused: boolean;

    @Input()
    public appValue: string;

    @Output()
    public appInputValue = new EventEmitter<string>();

    @Output()
    public appFocusOut = new EventEmitter<void>();

    public async ngAfterContentChecked() {
        if (this.inputElement && this.appIsFocused) {
            await timer(0).toPromise();
            this.inputElement.nativeElement.focus();
            this.resize();
        }
    }

    public resize() {
        this.inputElement.nativeElement.style.height = "1px";
        this.inputElement.nativeElement.style.height = this.inputElement.nativeElement.scrollHeight + "px";
    }

    public onFocusOut() {
        this.appFocusOut.emit();
    }

    public onInput(value: string) {
        this.resize();
        this.appInputValue.emit(value);
    }

}