import { Component, Input, ViewChild } from '@angular/core';
import { HighlightParams } from '../../models/highlight-params.model';
import * as i0 from "@angular/core";
import * as i1 from "@tilde-nlp/ngx-common";
import * as i2 from "../../services/tld-translate-text.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/cdk/scrolling";
import * as i6 from "@ngbracket/ngx-layout/flex";
import * as i7 from "@angular/material/input";
import * as i8 from "../highlight-tree/highlight-tree.component";
import * as i9 from "@ngx-translate/core";
export class TextareaWithBackgroundComponent {
    alerts;
    textService;
    sourceInput;
    treeWrapper;
    maxCharLength;
    autoFocuss;
    highlightTree;
    highlight;
    textareaDisabled;
    _sourceText;
    get sourceText() { return this._sourceText; }
    ;
    set sourceText(val) {
        this._sourceText = val;
        // this is necessary so that highlighting is always in his real place also when tree wrapper is not finished rendering.
        if (this.treeWrapper) {
            this.treeWrapper.nativeElement.style.height = this.sourceInput.nativeElement.scrollHeight;
        }
        this.textService.changeSource({ phrase: val });
    }
    get hasOverflow() {
        const textarea = document.querySelector('textarea');
        const textareaOverflow = textarea.scrollHeight > textarea.clientHeight;
        return textareaOverflow;
    }
    clearButtonAriaCode = "CLEAR_SOURCE";
    wrapperClass = HighlightParams.sourceHighlightClass;
    constructor(alerts, textService) {
        this.alerts = alerts;
        this.textService = textService;
    }
    ngOnInit() {
        this._sourceText = this.textService.sourceText;
        this.textService.sourceChange.subscribe((event) => {
            //this.changeSourceManually(event);
            this._sourceText = event.phrase;
            if (!this.sourceText || this.sourceText.length === 0) {
                setTimeout(() => {
                    this.sourceInput.nativeElement.focus();
                }, 0);
            }
        });
    }
    ngAfterViewInit() {
        if (this.autoFocuss) {
            this.focus();
        }
    }
    onPaste(event) {
        if (this.maxCharLength > 0) {
            const totalCharLength = (this.sourceText || "").length + event.clipboardData.getData("text").length;
            if (totalCharLength > this.maxCharLength) {
                this.alerts.warning("ERRORS.MAX_CHAR_LENGTH", { maxCharLength: this.maxCharLength, totalSymbols: totalCharLength });
            }
        }
    }
    focus() {
        this.sourceInput?.nativeElement?.focus();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaWithBackgroundComponent, deps: [{ token: i1.AlertService }, { token: i2.TldTranslateTextService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextareaWithBackgroundComponent, selector: "tld-textarea-with-background", inputs: { maxCharLength: "maxCharLength", autoFocuss: "autoFocuss", highlightTree: "highlightTree", highlight: "highlight", textareaDisabled: "textareaDisabled" }, viewQueries: [{ propertyName: "sourceInput", first: true, predicate: ["sourceInput"], descendants: true }, { propertyName: "treeWrapper", first: true, predicate: ["treeWrapper"], descendants: true }], ngImport: i0, template: "<div [class.textarea-overflow]=\"hasOverflow\" class=\"textarea-with-background\">\r\n\t<textarea\r\n\t\t#sourceInput\r\n\t\tfxFlex\r\n\t\tmatInput\r\n\t\tcdkScrollable\r\n\t\tspellcheck=\"false\"\r\n\t\t[(ngModel)]=\"sourceText\"\r\n\t\t[disabled]=\"textareaDisabled\"\r\n\t\t[attr.maxLength]=\"maxCharLength ? maxCharLength : null\"\r\n\t\t[attr.aria-label]=\"'TLD_TRANSLATE.SOURCE_TOOLTIP' | translate\"\r\n\t\t(paste)=\"onPaste($event)\"\r\n\t></textarea>\r\n\t<div class=\"{{ wrapperClass }}\" *ngIf=\"highlight\" cdkScrollable #treeWrapper>\r\n\t\t<div class=\"textarea-highlight-backround-inner\" cdkScrollable>\r\n\t\t\t<div *ngFor=\"let paragraph of highlightTree\">\r\n\t\t\t\t<tld-highlight-tree [isSource]=\"true\" [tree]=\"paragraph\" [highlight]=\"highlight\"></tld-highlight-tree>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".textarea-with-background{position:relative}.textarea-with-background .textarea-highlight-background{position:absolute;color:transparent}.textarea-with-background textarea{resize:none!important;z-index:1;caret-color:#000!important}.textarea-with-background textarea,.textarea-with-background .textarea-highlight-backround-inner{padding:18px 48px 18px 18px!important}.textarea-with-background .textarea-highlight-backround-inner{max-width:calc(100% - 2em);width:calc(100% - 2em);min-width:calc(100% - 2em);min-height:calc(100% - 2em);max-height:calc(100% - 2em);height:calc(100% - 2em);overflow-y:auto}.textarea-with-background,.textarea-highlight-background{width:100%;max-width:100%;min-width:100%;min-height:100%;max-height:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i6.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.HighlightTreeComponent, selector: "tld-highlight-tree", inputs: ["tree", "isSource", "highlight"] }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaWithBackgroundComponent, decorators: [{
            type: Component,
            args: [{ selector: 'tld-textarea-with-background', template: "<div [class.textarea-overflow]=\"hasOverflow\" class=\"textarea-with-background\">\r\n\t<textarea\r\n\t\t#sourceInput\r\n\t\tfxFlex\r\n\t\tmatInput\r\n\t\tcdkScrollable\r\n\t\tspellcheck=\"false\"\r\n\t\t[(ngModel)]=\"sourceText\"\r\n\t\t[disabled]=\"textareaDisabled\"\r\n\t\t[attr.maxLength]=\"maxCharLength ? maxCharLength : null\"\r\n\t\t[attr.aria-label]=\"'TLD_TRANSLATE.SOURCE_TOOLTIP' | translate\"\r\n\t\t(paste)=\"onPaste($event)\"\r\n\t></textarea>\r\n\t<div class=\"{{ wrapperClass }}\" *ngIf=\"highlight\" cdkScrollable #treeWrapper>\r\n\t\t<div class=\"textarea-highlight-backround-inner\" cdkScrollable>\r\n\t\t\t<div *ngFor=\"let paragraph of highlightTree\">\r\n\t\t\t\t<tld-highlight-tree [isSource]=\"true\" [tree]=\"paragraph\" [highlight]=\"highlight\"></tld-highlight-tree>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n", styles: [".textarea-with-background{position:relative}.textarea-with-background .textarea-highlight-background{position:absolute;color:transparent}.textarea-with-background textarea{resize:none!important;z-index:1;caret-color:#000!important}.textarea-with-background textarea,.textarea-with-background .textarea-highlight-backround-inner{padding:18px 48px 18px 18px!important}.textarea-with-background .textarea-highlight-backround-inner{max-width:calc(100% - 2em);width:calc(100% - 2em);min-width:calc(100% - 2em);min-height:calc(100% - 2em);max-height:calc(100% - 2em);height:calc(100% - 2em);overflow-y:auto}.textarea-with-background,.textarea-highlight-background{width:100%;max-width:100%;min-width:100%;min-height:100%;max-height:100%;height:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.AlertService }, { type: i2.TldTranslateTextService }], propDecorators: { sourceInput: [{
                type: ViewChild,
                args: ["sourceInput"]
            }], treeWrapper: [{
                type: ViewChild,
                args: ["treeWrapper"]
            }], maxCharLength: [{
                type: Input
            }], autoFocuss: [{
                type: Input
            }], highlightTree: [{
                type: Input
            }], highlight: [{
                type: Input
            }], textareaDisabled: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 