import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { u as uniqueId } from './uniqueId.js';
import { s as stringCombiner } from './stringCombiner.js';
import { d as defineCustomElement$6 } from './telia-field-assistive-text2.js';
import { d as defineCustomElement$5 } from './telia-field-error2.js';
import { d as defineCustomElement$4 } from './telia-field-valid2.js';
import { d as defineCustomElement$3 } from './telia-icon2.js';
import { d as defineCustomElement$2 } from './telia-label2.js';
import { d as defineCustomElement$1 } from './telia-vst2.js';

// Create a const where all members have a readonly value
// and literal type by using const assertion.
const TextFieldTypes = {
  text: 'text',
  number: 'number',
  email: 'email',
  tel: 'tel',
  search: 'search',
  password: 'password',
};

const teliaTextInputCss = ".telia-text-input{display:flex;flex-direction:column}.telia-text-input__input{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%;height:calc(4.6rem * var(--voca-rem-multiplier));margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:2}.telia-text-input__input:required{box-shadow:none}.telia-text-input__input[type=search]{-webkit-appearance:textfield;outline-offset:calc(-0.2rem * var(--voca-rem-multiplier))}.telia-text-input__input[type=search]::-webkit-search-decoration{-webkit-appearance:none}.telia-text-input__input[type=number]~.telia-text-input__valid-icon-container,.telia-text-input__input[type=search]~.telia-text-input__valid-icon-container{margin:calc(-1 * (4.6rem * var(--voca-rem-multiplier))) calc(1.2rem * var(--voca-rem-multiplier)) 0 calc(100% - (3.2rem * var(--voca-rem-multiplier)));width:0}.telia-text-input__input: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-text-input__input:hover:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-text-input__input: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-text-input__input:focus:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-text-input__input:read-only{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd;background-color:rgba(0, 0, 0, 0.05)}.telia-text-input__input:read-only:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-text-input__input: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-text-input__input:disabled:hover{padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-text-input__input:disabled~telia-label .telia-label{color:rgba(0, 0, 0, 0.4);cursor:not-allowed}.telia-text-input__input:disabled~.telia-text-input__additional{color:rgba(0, 0, 0, 0.4)}.telia-text-input__input:invalid{box-shadow:none}.telia-text-input__input--icon-shown{padding:calc(1rem * var(--voca-rem-multiplier)) calc(4.5rem * var(--voca-rem-multiplier)) calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-text-input__input--touched:invalid{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #e4175c}.telia-text-input__input--touched:invalid:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-text-input__input--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-text-input__valid-icon-container{align-items:center;display:flex;flex-direction:row;height:calc(4.6rem * var(--voca-rem-multiplier));justify-content:flex-end;margin:calc(calc(4.6rem * var(--voca-rem-multiplier)) * -1) calc(1.2rem * var(--voca-rem-multiplier)) 0 calc(100% - calc(1.2rem * var(--voca-rem-multiplier)));order:3}.telia-text-input__additional{order:4}.telia-text-input__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:5}";

const TeliaTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.valueChange = createEvent(this, "valueChange", 7);
    /** Type of input as a string */
    this.type = TextFieldTypes.text;
    /** Value of input */
    this.value = '';
    /** Additional description id */
    this.additionalId = uniqueId('additional');
    /** Input element id */
    this.inputId = uniqueId('input');
    /** Error description id */
    this.errorId = uniqueId('error');
    /** Disabled state */
    this.disabled = false;
    /** Readonly state */
    this.readonly = false;
    /** Field needs to be filled, so it can be submitted  */
    this.required = false;
    /** Show valid icon when value passes all validations. Use sparingly. */
    this.showValidIcon = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-text-input';
    /**
     * Input has been blurred at least once.
     */
    this.touched = false;
    /**
     * Input has received data at least once.
     */
    this.dirty = false;
    /**
     * Real time value of input
     */
    this.inputValue = '';
    /**
     * Error message
     */
    this.errorMessageState = '';
    this.updateInputValue = () => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      this.inputValue = this.inputElement ? this.inputElement.value : this.value;
    };
    /**
     * Check if input value state is valid with given pattern. This is
     * imitating native input validation.
     */
    this.isValuePatternValid = () => {
      if (this.pattern) {
        const regexp = new RegExp('^(?:' + this.pattern + ')$');
        return regexp.test(this.inputValue);
      }
      return true;
    };
    this.isValueLessThanMinlength = () => {
      return (this.inputValue.length > 0 && this.inputValue.length < this.minlength);
    };
    /**
     * Check if validation failed due to type mismatch.
     * Type mismatch is set to true when email, url, ... field type built-in validation triggers
     */
    this.isValueTypeInvalid = () => {
      var _a;
      return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.validity.typeMismatch;
    };
    /**
     * Update error message and keep native input error message in sync.
     */
    this.updateErrorMessage = message => {
      var _a;
      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
      this.errorMessageState = message;
    };
    /**
     * Check if input value is empty, so required should be triggered.
     */
    this.isValueMissing = () => {
      return this.inputValue.length === 0;
    };
    this.updateErrorState = () => {
      var _a, _b;
      const errorMessageIsSet = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);
      const requiredInUse = this.required;
      const patternInUse = !!this.pattern;
      const minlengthInUse = this.minlength;
      const generalErrorInUse = !!((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.length);
      const emailErrorInUse = !!this.emailErrorMessage && this.type === 'email';
      if (generalErrorInUse) {
        this.updateErrorMessage(this.errorMessage);
        this.touched = true;
        // General error message overrides other errors, so exit here.
        return;
      }
      if (patternInUse && !this.isValueMissing()) {
        if (this.touched &&
          !!this.patternErrorMessage &&
          !this.isValuePatternValid()) {
          this.updateErrorMessage(this.patternErrorMessage);
        }
      }
      if (minlengthInUse) {
        if (this.touched &&
          !!this.minlengthErrorMessage &&
          this.isValueLessThanMinlength()) {
          this.updateErrorMessage(this.minlengthErrorMessage);
        }
      }
      if (requiredInUse) {
        /**
         * Follow HTML5 input ways of working,
         * email field is validated only if type is email and required is set to true
         */
        if (emailErrorInUse && this.isValueTypeInvalid() && this.touched) {
          this.updateErrorMessage(this.emailErrorMessage);
        }
        if (this.touched &&
          !!this.requiredErrorMessage &&
          this.isValueMissing()) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
      }
      // Clean error message if needed
      if (errorMessageIsSet) {
        if (patternInUse && !this.isValuePatternValid())
          return;
        if (minlengthInUse && this.isValueLessThanMinlength())
          return;
        if (requiredInUse && this.isValueMissing())
          return;
        if (emailErrorInUse && this.isValueTypeInvalid())
          return;
        this.updateErrorMessage('');
      }
    };
  }
  /**
   * Sets focus on input
   */
  async focusInput() {
    var _a;
    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
  }
  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.inputElement && ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {
      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);
    }
    if (this.htmlForm) {
      (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.setAttribute('form', this.htmlForm);
    }
  }
  /**
   * Watch if value attributes changes after initial load.
   * Needed for prefilling functionality to work with input validations.
   * @param value value attribute
   */
  componentValueChanged(value) {
    this.inputValue = value;
    this.updateErrorState();
  }
  /**
   * This method is used to determine
   * if a 'valid icon' can be shown to the user.
   * Given the complexity of the validation logic
   * in this component, using this method
   * to determine 'validity' in a general sense
   * should be carefully considered and tested.
   */
  isValid() {
    return (!this.errorMessage &&
      !this.isValueMissing() &&
      !this.isValueLessThanMinlength() &&
      !this.isValueTypeInvalid() &&
      this.isValuePatternValid());
  }
  render() {
    const showError = this.touched && !!this.errorMessageState.length;
    const showAdditional = !!this.additional;
    const describedBy = stringCombiner({
      [this.additionalId]: showAdditional,
      [this.errorId]: this.errorMessageState.length,
    });
    const showValidIcon = this.showValidIcon && this.dirty && this.isValid();
    return (h("div", { class: "telia-text-input" }, h("input", { class: {
        'telia-text-input__input': true,
        'telia-text-input__input--touched': this.touched,
        'telia-text-input__input--icon-shown': showValidIcon,
      }, placeholder: this.placeholder, type: this.type, id: this.inputId, "aria-describedby": describedBy, minlength: this.minlength, maxlength: this.maxlength, disabled: this.disabled, readonly: this.readonly, value: this.value, name: this.name, onChange: event => {
        /** valueChange is deprecated, will be removed in the future releases. */
        this.valueChange.emit(event);
      }, onInput: () => {
        this.dirty = true;
        this.updateInputValue();
        this.updateErrorState();
      }, inputmode: this.inputmode, list: this.list, autocomplete: this.autocomplete, required: this.required, onBlur: () => {
        this.touched = true;
        this.updateErrorState();
      }, ref: ref => (this.inputElement = ref), pattern: this.pattern, onInvalid: event => {
        event.preventDefault();
        this.touched = true;
        this.updateErrorState();
      }, form: this.htmlForm }), showValidIcon && (h("div", { class: "telia-text-input__valid-icon-container" }, h("telia-field-valid", { class: "telia-text-input__valid-icon" }))), h("telia-label", { class: "telia-text-input__label", htmlFor: this.inputId }, this.required && h("span", { "aria-hidden": "true" }, '* '), this.label), showAdditional && (h("telia-field-assistive-text", { class: "telia-text-input__additional", id: this.additionalId }, this.additional)), showError && (h("telia-field-error", { id: this.errorId, class: "telia-text-input__error" }, this.errorMessageState)), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get watchers() { return {
    "value": ["componentValueChanged"]
  }; }
  static get style() { return teliaTextInputCss; }
}, [0, "telia-text-input", {
    "dataTestid": [1, "data-testid"],
    "htmlForm": [1, "html-form"],
    "type": [1],
    "label": [1],
    "value": [1],
    "placeholder": [1],
    "name": [1],
    "additional": [1],
    "additionalId": [1, "additional-id"],
    "inputId": [1, "input-id"],
    "errorId": [1, "error-id"],
    "disabled": [4],
    "minlength": [2],
    "maxlength": [2],
    "readonly": [4],
    "inputmode": [1],
    "list": [1],
    "autocomplete": [1],
    "required": [4],
    "requiredErrorMessage": [1, "required-error-message"],
    "emailErrorMessage": [1, "email-error-message"],
    "minlengthErrorMessage": [1, "minlength-error-message"],
    "showValidIcon": [4, "show-valid-icon"],
    "pattern": [1],
    "patternErrorMessage": [1, "pattern-error-message"],
    "errorMessage": [1, "error-message"],
    "touched": [32],
    "dirty": [32],
    "inputValue": [32],
    "errorMessageState": [32],
    "focusInput": [64]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-text-input", "telia-field-assistive-text", "telia-field-error", "telia-field-valid", "telia-icon", "telia-label", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-text-input":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaTextInput);
      }
      break;
    case "telia-field-assistive-text":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "telia-field-error":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "telia-field-valid":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "telia-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "telia-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { TeliaTextInput as T, defineCustomElement as d };
