'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b499856a.js');
const uniqueId = require('./uniqueId-dab8aef4.js');
const stringCombiner = require('./stringCombiner-21e97a77.js');

const teliaTextareaCss = ".telia-textarea{display:flex;flex-direction:column}.telia-textarea__textarea{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3);border-radius:calc(0.2rem * var(--voca-rem-multiplier));background-color:#ffffff;font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;-webkit-appearance:none;appearance:none;box-sizing:border-box;color:rgba(0, 0, 0, 0.85);display:block;margin:0;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier));width:100%;margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:2}.telia-textarea__textarea:hover{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__textarea:hover:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-textarea__textarea:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier));padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:focus:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-textarea__textarea:disabled{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15);background-color:rgba(0, 0, 0, 0.1);color:rgba(0, 0, 0, 0.4);cursor:not-allowed;-webkit-text-fill-color:#606064}.telia-textarea__textarea:disabled:hover{padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:disabled~telia-label .telia-label{color:rgba(0, 0, 0, 0.4);cursor:not-allowed}.telia-textarea__textarea:disabled~.telia-textarea__additional{color:rgba(0, 0, 0, 0.4)}.telia-textarea__textarea:invalid{box-shadow:none}.telia-textarea__textarea--touched:invalid{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #e4175c}.telia-textarea__textarea--touched:invalid:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-textarea__textarea--touched:invalid:hover:not(:focus){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #e4175c;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__additional{order:4}.telia-textarea__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:5}";

const TeliaTextArea = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** Additional description id */
    this.additionalId = uniqueId.uniqueId('additional');
    /** Disabled state */
    this.disabled = false;
    /** Error description id */
    this.errorId = uniqueId.uniqueId('error');
    /** Textarea input element id */
    this.inputId = uniqueId.uniqueId('textareaId');
    /** Required state */
    this.required = false;
    /** Textarea rows */
    this.rows = 4;
    /** Checks if textarea will be checked for spelling errors */
    this.spellcheck = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-textarea';
    /**
     * Real time value of input
     */
    this.inputValue = '';
    /**
     * Error message
     */
    this.errorMessageState = '';
    this.updateInputValue = () => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      this.inputValue = this.textAreaElement
        ? this.textAreaElement.value
        : this.value;
    };
    /**
     * Check if input value is empty, so required should be triggered.
     */
    this.isValueMissing = () => {
      return this.inputValue.length === 0;
    };
    /**
     * Check if input value is empty, so required should be triggered.
     */
    this.isValueLessThanMinlength = () => {
      return this.inputValue.length < this.minlength;
    };
    /**
     * Update error message and keep native input error message in sync.
     */
    this.updateErrorMessage = message => {
      var _a;
      (_a = this.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
      this.errorMessageState = message;
    };
    this.updateErrorState = () => {
      var _a, _b, _c;
      const errorMessageIsSet = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);
      const requiredInUse = this.required;
      const generalErrorInUse = !!((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.length);
      const minlengthInUse = this.minlength;
      const minlengthErrorMessageIsSet = !!((_c = this.minlengthErrorMessage) === null || _c === void 0 ? void 0 : _c.length);
      if (generalErrorInUse) {
        this.updateErrorMessage(this.errorMessage);
        this.touched = true;
        // General error message overrides other errors, so exit here.
        return;
      }
      if (requiredInUse) {
        if (this.touched &&
          !!this.requiredErrorMessage &&
          this.isValueMissing()) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
      }
      if (minlengthInUse) {
        if (this.touched &&
          !!this.minlengthErrorMessage &&
          this.isValueLessThanMinlength()) {
          this.updateErrorMessage(this.minlengthErrorMessage);
        }
      }
      // Clean error message if needed
      if (errorMessageIsSet || minlengthErrorMessageIsSet) {
        if (generalErrorInUse)
          return;
        if (requiredInUse && this.isValueMissing())
          return;
        if (minlengthInUse && this.isValueLessThanMinlength())
          return;
        this.updateErrorMessage('');
      }
    };
    /**
     * Input has been blurred at least once.
     */
    this.touched = false;
  }
  componentWillLoad() {
    this.updateInputValue();
    this.updateErrorState();
  }
  componentWillUpdate() {
    this.updateErrorState();
  }
  componentDidRender() {
    // This check is for Stencil unit tests. Input element is mocked,
    // but setCustomValidity method is not. It is undefined.
    var _a, _b, _c;
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (this.textAreaElement && ((_a = this.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {
      (_b = this.textAreaElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);
    }
    if (this.htmlForm) {
      (_c = this.textAreaElement) === null || _c === void 0 ? void 0 : _c.setAttribute('form', this.htmlForm);
    }
  }
  render() {
    const showError = this.touched && !!this.errorMessageState.length;
    const showAdditional = !!this.additional;
    const describedBy = stringCombiner.stringCombiner({
      [this.additionalId]: showAdditional,
      [this.errorId]: this.errorMessageState.length,
    });
    return (index.h("div", { class: "telia-textarea" }, index.h("textarea", { class: {
        'telia-textarea__textarea': true,
        'telia-textarea__textarea--touched': !!this.touched,
      }, "aria-describedby": describedBy, disabled: this.disabled, id: this.inputId, value: this.value, maxlength: this.maxlength, minlength: this.minlength, name: this.name, ref: ref => (this.textAreaElement = ref), required: this.required, rows: this.rows, spellcheck: this.spellcheck, onInput: () => {
        this.updateInputValue();
        this.updateErrorState();
      }, onBlur: () => {
        this.touched = true;
        this.updateErrorState();
      }, onInvalid: event => {
        event.preventDefault();
        this.touched = true;
        this.updateErrorState();
      }, form: this.htmlForm }, this.value), index.h("telia-label", { class: "telia-textarea__label", htmlFor: this.inputId }, this.required && index.h("span", { "aria-hidden": "true" }, '* '), this.label), showAdditional && (index.h("telia-field-assistive-text", { class: "telia-textarea__additional", id: this.additionalId }, this.additional)), showError && (index.h("telia-field-error", { id: this.errorId, class: "telia-textarea__error" }, this.errorMessageState)), index.h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
};
TeliaTextArea.style = teliaTextareaCss;

exports.telia_textarea = TeliaTextArea;
