import { Component, Input, ViewChild } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "../../services/model.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "../sti-component";
import * as i5 from "../sti-editable-content.component";
import * as i6 from "../sti-input-text.component";
import * as i7 from "../sti-tooltip/sti-tooltip.directive";
export class StiTextBoxComponent {
    get align() {
        return "start";
    }
    get needToFill() {
        return (this.element.required &&
            (this.element.isPassword ? !this.element.password : !this.element.value) &&
            this.model.hasEmptyReuiredFields);
    }
    disableDrag(event) {
        let t = null;
        this.model.canDrag = false;
    }
    constructor(model) {
        this.model = model;
        this.isClone = false;
    }
    ngDoCheck() {
        if (this.textArea) {
            this.element.element = this.textArea;
        }
    }
    ngOnInit() { }
    borderWidth() {
        return `${this.element.borderWeight}px`;
    }
    get text() {
        return this.element.text;
    }
    set text(value) {
        this.element.text = value;
        this.model.formEvents.next({ name: "ValueChanged" });
    }
    get password() {
        return this.element.password;
    }
    set password(value) {
        this.element.password = value;
        this.model.formEvents.next({ name: "ValueChanged" });
    }
    onInput(value) {
        this.element.text = value;
        this.model.formEvents.next({ name: "ValueChanged" });
        //this.model.selectedComponent.element.options.options = value.split("\n"); TODO
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StiTextBoxComponent, deps: [{ token: i1.StiModelService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StiTextBoxComponent, selector: "sti-textbox-component", inputs: { element: "element", isClone: "isClone" }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: `
    <sti-component [element]="element" [isClone]="isClone" class="sti-text-box">
      <sti-editable-content-component
        *ngIf="element?.label.value?.length > 0 && element?.isLabelTopAlignment()"
        [editableContent]="element?.label"
        [required]="element.required"
        [style.align-self]="align"
        [style.text-align]="element?.getContentAlign()"
        [style.width]="element?.getLabelWidth()"
        [hideEmpty]="element?.showLabelPlaceholder(model?.selectedComponent?.element == element)"
      ></sti-editable-content-component>
      <table [style.width]="'100%'" [style.height]="'max-content'" [style.margin-top.px]="element?.getTopMargin()">
        <tr>
          <td
            *ngIf="element?.label.value?.length > 0 && !element?.isLabelTopAlignment()"
            [style.display]="'flex'"
            [style.height]="'100%'"
            [style.width]="element?.getLabelWidth()"
            [style.align-items]="element?.getVerticalAlignment()"
          >
            <sti-editable-content-component
              *ngIf="element?.label.value?.length > 0"
              [editableContent]="element?.label"
              [required]="element.required"
              [style.text-align]="element?.getContentAlign()"
              [style.width]="element?.getLabelWidth()"
              [hideEmpty]="element?.showLabelPlaceholder(model?.selectedComponent?.element == element)"
            ></sti-editable-content-component>
          </td>
          <td [style.width]="'100%'">
            <textarea
              #textArea
              name=""
              id=""
              cols="30"
              [rows]="element?.linesCount"
              *ngIf="!element?.isPassword && element?.isMultiline"
              [ngModel]="text"
              (input)="onInput($event.target.value)"
              [style.color]="element?.textColor.toHtmlColor()"
              [style.background-color]="element?.backgroundColor.toHtmlColor()"
              [style.border-color]="needToFill ? 'red' : element?.borderColor.toHtmlColor()"
              [style.border-width]="borderWidth()"
              [style]="element?.htmlStyle()"
              [stiTooltip]="element?.tooltip"
              [tabIndex]="element['tabIndex']"
              tooltipPosition="bottom"
              showDelay="500"
              [required]="element?.required"
              [readonly]="element?.readOnly"
              (mousedown)="disableDrag($event)"
              (mouseup)="this.model.canDrag = true"
            ></textarea>
            <input
              type="password"
              *ngIf="element?.isPassword"
              [style]="element?.htmlStyle()"
              [style.color]="element?.textColor.toHtmlColor()"
              [style.background-color]="element?.backgroundColor.toHtmlColor()"
              spellcheck="false"
              [style.border-color]="needToFill ? 'red' : element?.borderColor.toHtmlColor()"
              [style.border-width]="borderWidth()"
              maxlength="{{ element?.maxLength }}"
              [stiTooltip]="element?.tooltip"
              [tabIndex]="element['tabIndex']"
              tooltipPosition="bottom"
              showDelay="500"
              [required]="element?.required"
              [readonly]="element?.readOnly"
              [(ngModel)]="password"
              (mousedown)="disableDrag($event)"
              (mouseup)="this.model.canDrag = true"
            />
            <sti-input-text-component
              *ngIf="!element?.isPassword && !element?.isMultiline"
              [element]="element"
              [tabIndex]="element['tabIndex']"
              [property]="'text'"
              [stiTooltip]="element?.tooltip"
              tooltipPosition="bottom"
              showDelay="500"
            ></sti-input-text-component>
          </td>
        </tr>
        <tr *ngIf="element?.description.value?.length > 0">
          <td *ngIf="element?.label.value?.length > 0 && !element?.isLabelTopAlignment()"></td>
          <td [style.maxWidth.px]="element.maxWidth + 1">
            <sti-editable-content-component
              *ngIf="element?.description.value?.length > 0"
              [editableContent]="element.description"
            >
            </sti-editable-content-component>
          </td>
        </tr>
      </table>
    </sti-component>
  `, isInline: true, styles: ["table{border-spacing:0}tr{height:max-content;padding:0;margin:0}td{height:100%;padding:0;margin:0}textarea{resize:none;width:100%;height:auto;overflow-y:auto;padding:3px 4px}textarea:hover{border-color:#a3bde3!important}textarea:focus{outline:none}input{height:fit-content;padding:3px 4px;width:100%;border:1px solid rgb(198,198,198)}.sti-text-box input:hover{border-color:#a3bde3!important}.sti-text-box input:focus{outline:none;border:1px solid rgb(163,189,227)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.StiComponent, selector: "sti-component", inputs: ["element", "class", "isClone", "borderArea"] }, { kind: "component", type: i5.StiEditableContentComponent, selector: "sti-editable-content-component", inputs: ["editableContent", "displayContent", "required", "eParent", "hideEmpty", "active", "alignment", "isTableTotalHeader", "disablePadding", "fromButton", "parentCursor", "isTableHeader"] }, { kind: "component", type: i6.StiInputTextComponent, selector: "sti-input-text-component", inputs: ["element", "property", "tabIndex"] }, { kind: "directive", type: i7.StiTooltipDirective, selector: "[stiTooltip]", inputs: ["tooltipPosition", "stiTooltip", "showDelay"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StiTextBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: "sti-textbox-component", template: `
    <sti-component [element]="element" [isClone]="isClone" class="sti-text-box">
      <sti-editable-content-component
        *ngIf="element?.label.value?.length > 0 && element?.isLabelTopAlignment()"
        [editableContent]="element?.label"
        [required]="element.required"
        [style.align-self]="align"
        [style.text-align]="element?.getContentAlign()"
        [style.width]="element?.getLabelWidth()"
        [hideEmpty]="element?.showLabelPlaceholder(model?.selectedComponent?.element == element)"
      ></sti-editable-content-component>
      <table [style.width]="'100%'" [style.height]="'max-content'" [style.margin-top.px]="element?.getTopMargin()">
        <tr>
          <td
            *ngIf="element?.label.value?.length > 0 && !element?.isLabelTopAlignment()"
            [style.display]="'flex'"
            [style.height]="'100%'"
            [style.width]="element?.getLabelWidth()"
            [style.align-items]="element?.getVerticalAlignment()"
          >
            <sti-editable-content-component
              *ngIf="element?.label.value?.length > 0"
              [editableContent]="element?.label"
              [required]="element.required"
              [style.text-align]="element?.getContentAlign()"
              [style.width]="element?.getLabelWidth()"
              [hideEmpty]="element?.showLabelPlaceholder(model?.selectedComponent?.element == element)"
            ></sti-editable-content-component>
          </td>
          <td [style.width]="'100%'">
            <textarea
              #textArea
              name=""
              id=""
              cols="30"
              [rows]="element?.linesCount"
              *ngIf="!element?.isPassword && element?.isMultiline"
              [ngModel]="text"
              (input)="onInput($event.target.value)"
              [style.color]="element?.textColor.toHtmlColor()"
              [style.background-color]="element?.backgroundColor.toHtmlColor()"
              [style.border-color]="needToFill ? 'red' : element?.borderColor.toHtmlColor()"
              [style.border-width]="borderWidth()"
              [style]="element?.htmlStyle()"
              [stiTooltip]="element?.tooltip"
              [tabIndex]="element['tabIndex']"
              tooltipPosition="bottom"
              showDelay="500"
              [required]="element?.required"
              [readonly]="element?.readOnly"
              (mousedown)="disableDrag($event)"
              (mouseup)="this.model.canDrag = true"
            ></textarea>
            <input
              type="password"
              *ngIf="element?.isPassword"
              [style]="element?.htmlStyle()"
              [style.color]="element?.textColor.toHtmlColor()"
              [style.background-color]="element?.backgroundColor.toHtmlColor()"
              spellcheck="false"
              [style.border-color]="needToFill ? 'red' : element?.borderColor.toHtmlColor()"
              [style.border-width]="borderWidth()"
              maxlength="{{ element?.maxLength }}"
              [stiTooltip]="element?.tooltip"
              [tabIndex]="element['tabIndex']"
              tooltipPosition="bottom"
              showDelay="500"
              [required]="element?.required"
              [readonly]="element?.readOnly"
              [(ngModel)]="password"
              (mousedown)="disableDrag($event)"
              (mouseup)="this.model.canDrag = true"
            />
            <sti-input-text-component
              *ngIf="!element?.isPassword && !element?.isMultiline"
              [element]="element"
              [tabIndex]="element['tabIndex']"
              [property]="'text'"
              [stiTooltip]="element?.tooltip"
              tooltipPosition="bottom"
              showDelay="500"
            ></sti-input-text-component>
          </td>
        </tr>
        <tr *ngIf="element?.description.value?.length > 0">
          <td *ngIf="element?.label.value?.length > 0 && !element?.isLabelTopAlignment()"></td>
          <td [style.maxWidth.px]="element.maxWidth + 1">
            <sti-editable-content-component
              *ngIf="element?.description.value?.length > 0"
              [editableContent]="element.description"
            >
            </sti-editable-content-component>
          </td>
        </tr>
      </table>
    </sti-component>
  `, styles: ["table{border-spacing:0}tr{height:max-content;padding:0;margin:0}td{height:100%;padding:0;margin:0}textarea{resize:none;width:100%;height:auto;overflow-y:auto;padding:3px 4px}textarea:hover{border-color:#a3bde3!important}textarea:focus{outline:none}input{height:fit-content;padding:3px 4px;width:100%;border:1px solid rgb(198,198,198)}.sti-text-box input:hover{border-color:#a3bde3!important}.sti-text-box input:focus{outline:none;border:1px solid rgb(163,189,227)}\n"] }]
        }], ctorParameters: () => [{ type: i1.StiModelService }], propDecorators: { element: [{
                type: Input
            }], textArea: [{
                type: ViewChild,
                args: ["textArea"]
            }], isClone: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 