@telia-ace/alliance-ui 1.0.9-next.0 → 1.0.10-next.0

package/voca/components/telia-text-input.js

@@ -1,169 +1,14 @@
-import { p as c, H as d, c as m, h as i } from "../../chunks/index-eef143db.js";
-import { u as s } from "../../chunks/uniqueId-0daf01ec.js";
-import { s as p } from "../../chunks/stringCombiner-10b57054.js";
-import { d as h } from "../../chunks/telia-field-assistive-text2-173ba2fb.js";
-import { d as v } from "../../chunks/telia-field-error2-75dc8ceb.js";
-import { d as g } from "../../chunks/telia-field-valid2-0f6759ac.js";
-import { d as f } from "../../chunks/telia-icon2-d0e7c715.js";
-import { d as _ } from "../../chunks/telia-label2-f4c1eb47.js";
-import { d as b } from "../../chunks/telia-vst2-dfb33a56.js";
+import "../../chunks/telia-text-input2-db9121d9.js";
+import "../../chunks/index-eef143db.js";
+import "../../chunks/uniqueId-0daf01ec.js";
+import "../../chunks/stringCombiner-10b57054.js";
+import "../../chunks/telia-field-assistive-text2-173ba2fb.js";
+import "../../chunks/telia-vst2-dfb33a56.js";
+import "../../chunks/telia-field-error2-75dc8ceb.js";
 import "../../chunks/error-filled-8de50bdd.js";
-import "../../chunks/check-circle-filled-42095247.js";
+import "../../chunks/telia-icon2-d0e7c715.js";
 import "../../chunks/getSvgContent-f2389ce0.js";
-const x = {
-  text: "text",
-  number: "number",
-  email: "email",
-  tel: "tel",
-  search: "search",
-  password: "password"
-}, E = '.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}', V = /* @__PURE__ */ c(class extends d {
-  constructor() {
-    super(), this.__registerHost(), this.valueChange = m(this, "valueChange", 7), this.type = x.text, this.value = "", this.additionalId = s("additional"), this.inputId = s("input"), this.errorId = s("error"), this.disabled = !1, this.readonly = !1, this.required = !1, this.showValidIcon = !1, this.dataTrackingId = "telia-text-input", this.touched = !1, this.dirty = !1, this.inputValue = "", this.errorMessageState = "", this.updateInputValue = () => {
-      this.inputValue = this.inputElement ? this.inputElement.value : this.value;
-    }, this.isValuePatternValid = () => this.pattern ? new RegExp("^(?:" + this.pattern + ")$").test(this.inputValue) : !0, this.isValueLessThanMinlength = () => this.inputValue.length > 0 && this.inputValue.length < this.minlength, this.isValueTypeInvalid = () => {
-      var t;
-      return (t = this.inputElement) === null || t === void 0 ? void 0 : t.validity.typeMismatch;
-    }, this.updateErrorMessage = (t) => {
-      var e;
-      (e = this.inputElement) === null || e === void 0 || e.setCustomValidity(t), this.errorMessageState = t;
-    }, this.isValueMissing = () => this.inputValue.length === 0, this.updateErrorState = () => {
-      var t, e;
-      const a = !!(!((t = this.errorMessageState) === null || t === void 0) && t.length), l = this.required, r = !!this.pattern, n = this.minlength, u = !!(!((e = this.errorMessage) === null || e === void 0) && e.length), o = !!this.emailErrorMessage && this.type === "email";
-      if (u) {
-        this.updateErrorMessage(this.errorMessage), this.touched = !0;
-        return;
-      }
-      if (r && !this.isValueMissing() && this.touched && this.patternErrorMessage && !this.isValuePatternValid() && this.updateErrorMessage(this.patternErrorMessage), n && this.touched && this.minlengthErrorMessage && this.isValueLessThanMinlength() && this.updateErrorMessage(this.minlengthErrorMessage), l && (o && this.isValueTypeInvalid() && this.touched && this.updateErrorMessage(this.emailErrorMessage), this.touched && this.requiredErrorMessage && this.isValueMissing() && this.updateErrorMessage(this.requiredErrorMessage)), a) {
-        if (r && !this.isValuePatternValid() || n && this.isValueLessThanMinlength() || l && this.isValueMissing() || o && this.isValueTypeInvalid())
-          return;
-        this.updateErrorMessage("");
-      }
-    };
-  }
-  /**
-   * Sets focus on input
-   */
-  async focusInput() {
-    this.inputElement.focus();
-  }
-  componentWillLoad() {
-    this.updateInputValue(), this.updateErrorState();
-  }
-  componentWillUpdate() {
-    this.updateErrorState();
-  }
-  componentDidRender() {
-    var t, e, a;
-    this.inputElement && (!((t = this.inputElement) === null || t === void 0) && t.setCustomValidity) && ((e = this.inputElement) === null || e === void 0 || e.setCustomValidity(this.errorMessageState)), this.htmlForm && ((a = this.inputElement) === null || a === void 0 || a.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(t) {
-    this.inputValue = t, 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 t = this.touched && !!this.errorMessageState.length, e = !!this.additional, a = p({
-      [this.additionalId]: e,
-      [this.errorId]: this.errorMessageState.length
-    }), l = this.showValidIcon && this.dirty && this.isValid();
-    return i("div", { class: "telia-text-input" }, i("input", { class: {
-      "telia-text-input__input": !0,
-      "telia-text-input__input--touched": this.touched,
-      "telia-text-input__input--icon-shown": l
-    }, placeholder: this.placeholder, type: this.type, id: this.inputId, "aria-describedby": a, minlength: this.minlength, maxlength: this.maxlength, disabled: this.disabled, readonly: this.readonly, value: this.value, name: this.name, onChange: (r) => {
-      this.valueChange.emit(r);
-    }, onInput: () => {
-      this.dirty = !0, this.updateInputValue(), this.updateErrorState();
-    }, inputmode: this.inputmode, list: this.list, autocomplete: this.autocomplete, required: this.required, onBlur: () => {
-      this.touched = !0, this.updateErrorState();
-    }, ref: (r) => this.inputElement = r, pattern: this.pattern, onInvalid: (r) => {
-      r.preventDefault(), this.touched = !0, this.updateErrorState();
-    }, form: this.htmlForm }), l && i("div", { class: "telia-text-input__valid-icon-container" }, i("telia-field-valid", { class: "telia-text-input__valid-icon" })), i("telia-label", { class: "telia-text-input__label", htmlFor: this.inputId }, this.required && i("span", { "aria-hidden": "true" }, "* "), this.label), e && i("telia-field-assistive-text", { class: "telia-text-input__additional", id: this.additionalId }, this.additional), t && i("telia-field-error", { id: this.errorId, class: "telia-text-input__error" }, this.errorMessageState), i("telia-vst", { dataTrackingId: this.dataTrackingId }));
-  }
-  static get watchers() {
-    return {
-      value: ["componentValueChanged"]
-    };
-  }
-  static get style() {
-    return E;
-  }
-}, [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 M() {
-  if (typeof customElements > "u")
-    return;
-  ["telia-text-input", "telia-field-assistive-text", "telia-field-error", "telia-field-valid", "telia-icon", "telia-label", "telia-vst"].forEach((e) => {
-    switch (e) {
-      case "telia-text-input":
-        customElements.get(e) || customElements.define(e, V);
-        break;
-      case "telia-field-assistive-text":
-        customElements.get(e) || h();
-        break;
-      case "telia-field-error":
-        customElements.get(e) || v();
-        break;
-      case "telia-field-valid":
-        customElements.get(e) || g();
-        break;
-      case "telia-icon":
-        customElements.get(e) || f();
-        break;
-      case "telia-label":
-        customElements.get(e) || _();
-        break;
-      case "telia-vst":
-        customElements.get(e) || b();
-        break;
-    }
-  });
-}
-M();
+import "../../chunks/telia-field-valid2-0f6759ac.js";
+import "../../chunks/check-circle-filled-42095247.js";
+import "../../chunks/telia-label2-f4c1eb47.js";
 //# sourceMappingURL=telia-text-input.js.map

package/voca/components/telia-text-input.js.map

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