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

package/chunks/telia-text-input2-db9121d9.js

@@ -0,0 +1,169 @@
+import { p as c, H as d, c as m, h as i } from "./index-eef143db.js";
+import { u as s } from "./uniqueId-0daf01ec.js";
+import { s as p } from "./stringCombiner-10b57054.js";
+import { d as h } from "./telia-field-assistive-text2-173ba2fb.js";
+import { d as v } from "./telia-field-error2-75dc8ceb.js";
+import { d as g } from "./telia-field-valid2-0f6759ac.js";
+import { d as f } from "./telia-icon2-d0e7c715.js";
+import { d as _ } from "./telia-label2-f4c1eb47.js";
+import { d as x } from "./telia-vst2-dfb33a56.js";
+const b = {
+  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 = b.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) || x();
+        break;
+    }
+  });
+}
+M();
+export {
+  M as d
+};
+//# sourceMappingURL=telia-text-input2-db9121d9.js.map

package/chunks/telia-text-input2-db9121d9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"telia-text-input2-db9121d9.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":";;;;;;;;;AAYA,MAAMA,IAAiB;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AACZ,GAEMC,IAAoB,0kIAEpBC,IAA+B,gBAAAC,EAAmB,cAAcC,EAAY;AAAA,EAChF,cAAc;AACZ,aACA,KAAK,eAAc,GACnB,KAAK,cAAcC,EAAY,MAAM,eAAe,CAAC,GAErD,KAAK,OAAOL,EAAe,MAE3B,KAAK,QAAQ,IAEb,KAAK,eAAeM,EAAS,YAAY,GAEzC,KAAK,UAAUA,EAAS,OAAO,GAE/B,KAAK,UAAUA,EAAS,OAAO,GAE/B,KAAK,WAAW,IAEhB,KAAK,WAAW,IAEhB,KAAK,WAAW,IAEhB,KAAK,gBAAgB,IAErB,KAAK,iBAAiB,oBAItB,KAAK,UAAU,IAIf,KAAK,QAAQ,IAIb,KAAK,aAAa,IAIlB,KAAK,oBAAoB,IACzB,KAAK,mBAAmB,MAAM;AAE5B,WAAK,aAAa,KAAK,eAAe,KAAK,aAAa,QAAQ,KAAK;AAAA,IAC3E,GAKI,KAAK,sBAAsB,MACrB,KAAK,UACQ,IAAI,OAAO,SAAS,KAAK,UAAU,IAAI,EACxC,KAAK,KAAK,UAAU,IAE7B,IAET,KAAK,2BAA2B,MACtB,KAAK,WAAW,SAAS,KAAK,KAAK,WAAW,SAAS,KAAK,WAMtE,KAAK,qBAAqB,MAAM;AAC9B,UAAIC;AACJ,cAAQA,IAAK,KAAK,kBAAkB,QAAQA,MAAO,SAAS,SAASA,EAAG,SAAS;AAAA,IACvF,GAII,KAAK,qBAAqB,CAAAC,MAAW;AACnC,UAAID;AACJ,OAACA,IAAK,KAAK,kBAAkB,QAAQA,MAAO,UAAkBA,EAAG,kBAAkBC,CAAO,GAC1F,KAAK,oBAAoBA;AAAA,IAC/B,GAII,KAAK,iBAAiB,MACb,KAAK,WAAW,WAAW,GAEpC,KAAK,mBAAmB,MAAM;AAC5B,UAAID,GAAIE;AACR,YAAMC,IAAoB,CAAC,EAAG,GAAAH,IAAK,KAAK,uBAAuB,QAAQA,MAAO,WAAkBA,EAAG,SAC7FI,IAAgB,KAAK,UACrBC,IAAe,CAAC,CAAC,KAAK,SACtBC,IAAiB,KAAK,WACtBC,IAAoB,CAAC,EAAG,GAAAL,IAAK,KAAK,kBAAkB,QAAQA,MAAO,WAAkBA,EAAG,SACxFM,IAAkB,CAAC,CAAC,KAAK,qBAAqB,KAAK,SAAS;AAClE,UAAID,GAAmB;AACrB,aAAK,mBAAmB,KAAK,YAAY,GACzC,KAAK,UAAU;AAEf;AAAA;AA+BF,UA7BIF,KAAgB,CAAC,KAAK,oBACpB,KAAK,WACL,KAAK,uBACP,CAAC,KAAK,yBACN,KAAK,mBAAmB,KAAK,mBAAmB,GAGhDC,KACE,KAAK,WACL,KAAK,yBACP,KAAK,yBAAwB,KAC7B,KAAK,mBAAmB,KAAK,qBAAqB,GAGlDF,MAKEI,KAAmB,KAAK,mBAAkB,KAAM,KAAK,WACvD,KAAK,mBAAmB,KAAK,iBAAiB,GAE5C,KAAK,WACL,KAAK,wBACP,KAAK,eAAc,KACnB,KAAK,mBAAmB,KAAK,oBAAoB,IAIjDL,GAAmB;AAOrB,YANIE,KAAgB,CAAC,KAAK,oBAAqB,KAE3CC,KAAkB,KAAK,yBAA0B,KAEjDF,KAAiB,KAAK,eAAgB,KAEtCI,KAAmB,KAAK,mBAAoB;AAC9C;AACF,aAAK,mBAAmB,EAAE;AAAA;AAAA,IAElC;AAAA,EACG;AAAA;AAAA;AAAA;AAAA,EAID,MAAM,aAAa;AACjB,SAAK,aAAa;EACnB;AAAA,EACD,oBAAoB;AAClB,SAAK,iBAAgB,GACrB,KAAK,iBAAgB;AAAA,EACtB;AAAA,EACD,sBAAsB;AACpB,SAAK,iBAAgB;AAAA,EACtB;AAAA,EACD,qBAAqB;AAGnB,QAAIR,GAAIE,GAAIO;AAEZ,IAAI,KAAK,iBAAkB,GAAAT,IAAK,KAAK,kBAAkB,QAAQA,MAAO,WAAkBA,EAAG,wBACxFE,IAAK,KAAK,kBAAkB,QAAQA,MAAO,UAAkBA,EAAG,kBAAkB,KAAK,iBAAiB,IAEvG,KAAK,cACNO,IAAK,KAAK,kBAAkB,QAAQA,MAAO,UAAkBA,EAAG,aAAa,QAAQ,KAAK,QAAQ;AAAA,EAEtG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,sBAAsBC,GAAO;AAC3B,SAAK,aAAaA,GAClB,KAAK,iBAAgB;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASD,UAAU;AACR,WAAQ,CAAC,KAAK,gBACZ,CAAC,KAAK,eAAgB,KACtB,CAAC,KAAK,yBAA0B,KAChC,CAAC,KAAK,mBAAoB,KAC1B,KAAK,oBAAmB;AAAA,EAC3B;AAAA,EACD,SAAS;AACP,UAAMC,IAAY,KAAK,WAAW,CAAC,CAAC,KAAK,kBAAkB,QACrDC,IAAiB,CAAC,CAAC,KAAK,YACxBC,IAAcC,EAAe;AAAA,MACjC,CAAC,KAAK,YAAY,GAAGF;AAAA,MACrB,CAAC,KAAK,OAAO,GAAG,KAAK,kBAAkB;AAAA,IAC7C,CAAK,GACKG,IAAgB,KAAK,iBAAiB,KAAK,SAAS,KAAK;AAC/D,WAAQC,EAAE,OAAO,EAAE,OAAO,mBAAkB,GAAIA,EAAE,SAAS,EAAE,OAAO;AAAA,MAChE,2BAA2B;AAAA,MAC3B,oCAAoC,KAAK;AAAA,MACzC,uCAAuCD;AAAA,IAC/C,GAAS,aAAa,KAAK,aAAa,MAAM,KAAK,MAAM,IAAI,KAAK,SAAS,oBAAoBF,GAAa,WAAW,KAAK,WAAW,WAAW,KAAK,WAAW,UAAU,KAAK,UAAU,UAAU,KAAK,UAAU,OAAO,KAAK,OAAO,MAAM,KAAK,MAAM,UAAU,CAAAI,MAAS;AAEnQ,WAAK,YAAY,KAAKA,CAAK;AAAA,IAC5B,GAAE,SAAS,MAAM;AAChB,WAAK,QAAQ,IACb,KAAK,iBAAgB,GACrB,KAAK,iBAAgB;AAAA,IACtB,GAAE,WAAW,KAAK,WAAW,MAAM,KAAK,MAAM,cAAc,KAAK,cAAc,UAAU,KAAK,UAAU,QAAQ,MAAM;AACrH,WAAK,UAAU,IACf,KAAK,iBAAgB;AAAA,IACtB,GAAE,KAAK,CAAAC,MAAQ,KAAK,eAAeA,GAAM,SAAS,KAAK,SAAS,WAAW,CAAAD,MAAS;AACnF,MAAAA,EAAM,eAAc,GACpB,KAAK,UAAU,IACf,KAAK,iBAAgB;AAAA,IAC7B,GAAS,MAAM,KAAK,SAAU,CAAA,GAAGF,KAAkBC,EAAE,OAAO,EAAE,OAAO,yCAA0C,GAAEA,EAAE,qBAAqB,EAAE,OAAO,gCAAgC,CAAC,GAAIA,EAAE,eAAe,EAAE,OAAO,2BAA2B,SAAS,KAAK,QAAO,GAAI,KAAK,YAAYA,EAAE,QAAQ,EAAE,eAAe,OAAM,GAAI,IAAI,GAAG,KAAK,KAAK,GAAGJ,KAAmBI,EAAE,8BAA8B,EAAE,OAAO,gCAAgC,IAAI,KAAK,aAAY,GAAI,KAAK,UAAU,GAAIL,KAAcK,EAAE,qBAAqB,EAAE,IAAI,KAAK,SAAS,OAAO,0BAA2B,GAAE,KAAK,iBAAiB,GAAIA,EAAE,aAAa,EAAE,gBAAgB,KAAK,eAAgB,CAAA,CAAC;AAAA,EACjoB;AAAA,EACD,WAAW,WAAW;AAAE,WAAO;AAAA,MAC7B,OAAS,CAAC,uBAAuB;AAAA,IACrC;AAAA,EAAM;AAAA,EACJ,WAAW,QAAQ;AAAE,WAAOtB;AAAA,EAAoB;AAClD,GAAG,CAAC,GAAG,oBAAoB;AAAA,EACvB,YAAc,CAAC,GAAG,aAAa;AAAA,EAC/B,UAAY,CAAC,GAAG,WAAW;AAAA,EAC3B,MAAQ,CAAC,CAAC;AAAA,EACV,OAAS,CAAC,CAAC;AAAA,EACX,OAAS,CAAC,CAAC;AAAA,EACX,aAAe,CAAC,CAAC;AAAA,EACjB,MAAQ,CAAC,CAAC;AAAA,EACV,YAAc,CAAC,CAAC;AAAA,EAChB,cAAgB,CAAC,GAAG,eAAe;AAAA,EACnC,SAAW,CAAC,GAAG,UAAU;AAAA,EACzB,SAAW,CAAC,GAAG,UAAU;AAAA,EACzB,UAAY,CAAC,CAAC;AAAA,EACd,WAAa,CAAC,CAAC;AAAA,EACf,WAAa,CAAC,CAAC;AAAA,EACf,UAAY,CAAC,CAAC;AAAA,EACd,WAAa,CAAC,CAAC;AAAA,EACf,MAAQ,CAAC,CAAC;AAAA,EACV,cAAgB,CAAC,CAAC;AAAA,EAClB,UAAY,CAAC,CAAC;AAAA,EACd,sBAAwB,CAAC,GAAG,wBAAwB;AAAA,EACpD,mBAAqB,CAAC,GAAG,qBAAqB;AAAA,EAC9C,uBAAyB,CAAC,GAAG,yBAAyB;AAAA,EACtD,eAAiB,CAAC,GAAG,iBAAiB;AAAA,EACtC,SAAW,CAAC,CAAC;AAAA,EACb,qBAAuB,CAAC,GAAG,uBAAuB;AAAA,EAClD,cAAgB,CAAC,GAAG,eAAe;AAAA,EACnC,SAAW,CAAC,EAAE;AAAA,EACd,OAAS,CAAC,EAAE;AAAA,EACZ,YAAc,CAAC,EAAE;AAAA,EACjB,mBAAqB,CAAC,EAAE;AAAA,EACxB,YAAc,CAAC,EAAE;AAClB,CAAA,CAAC;AACJ,SAASyB,IAAsB;AAC7B,MAAI,OAAO,iBAAmB;AAC5B;AAGF,EADmB,CAAC,oBAAoB,8BAA8B,qBAAqB,qBAAqB,cAAc,eAAe,WAAW,EAC7I,QAAQ,CAAAC,MAAW;AAAE,YAAQA,GAAO;AAAA,MAC7C,KAAK;AACH,QAAK,eAAe,IAAIA,CAAO,KAC7B,eAAe,OAAOA,GAASzB,CAAc;AAE/C;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIyB,CAAO,KAC7BC;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAID,CAAO,KAC7BE;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIF,CAAO,KAC7BG;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIH,CAAO,KAC7BI;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIJ,CAAO,KAC7BK;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIL,CAAO,KAC7BM;AAEF;AAAA,IACH;AAAA,EAAA,CAAE;AACL;AACAP,EAAqB;","x_google_ignoreList":[0]}

package/components/alliance-link/alliance-link.d.ts

@@ -0,0 +1,23 @@
+import { SerializeableObject } from '@telia-ace/alliance-utilities/frontend';
+import { LitElement } from 'lit';
+export declare class Link extends LitElement {
+    capability: string;
+    app: string;
+    args: SerializeableObject;
+    private active;
+    /**
+     * Link properties
+     */
+    href?: string;
+    target?: string;
+    rel?: string;
+    download?: string;
+    navigate: () => void;
+    onclick: (event: MouseEvent) => void;
+    updateIfActive: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(property: string, oldValue: string | null, newValue: string | null): void;
+    private computeHref;
+    render(): import("lit").TemplateResult<1>;
+}

package/components/alliance-link/index.d.ts

@@ -0,0 +1 @@
+import './alliance-link';

package/components/alliance-link.js

@@ -0,0 +1,3 @@
+import "../chunks/alliance-link-4e9f5dd5.js";
+import "../chunks/query-assigned-elements-024d0918.js";
+//# sourceMappingURL=alliance-link.js.map

package/components/alliance-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alliance-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/index.d.ts

@@ -1,3 +1,4 @@
+import './alliance-link';
 import './alliance-modal';
 import './alliance-paginator';
 import './alliance-table';

package/components/index.js

@@ -1,3 +1,4 @@
+import "../chunks/alliance-link-4e9f5dd5.js";
 import "../chunks/alliance-modal-06ec7d6a.js";
 import "../chunks/alliance-paginator-button-4cc1a5cf.js";
 import "../chunks/alliance-table-row-ec104b1e.js";

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/alliance-ui",
-  "version": "1.0.9-next.0",
+  "version": "1.0.10-next.0",
   "description": "UI components used by ACE Alliance apps.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -17,23 +17,23 @@
   "exports": {
     "./components": {
       "types": "./components/index.d.ts",
-      "import": "./components/index"
+      "import": "./components/index.js"
     },
     "./components/*": {
       "types": "./components/*/index.d.ts",
-      "import": "./components/*"
+      "import": "./components/*.js"
     },
     "./voca/components/*": {
       "types": "./voca/components/*.d.ts",
-      "import": "./voca/components/*"
+      "import": "./voca/components/*.js"
     },
     "./voca/icons": {
       "types": "./voca/icons/index.d.ts",
-      "import": "./voca/icons/index"
+      "import": "./voca/icons/index.js"
     },
     "./voca/foundations": {
       "types": "./voca/foundations/index.d.ts",
-      "import": "./voca/foundations/index"
+      "import": "./voca/foundations/index.js"
     },
     "./voca/foundations/component-library-styling": {
       "types": "./voca/foundations/component-library-styling.d.ts",
@@ -41,8 +41,8 @@
     }
   },
   "devDependencies": {
-    "@telia-ace/alliance-framework": "1.0.9-next.3",
-    "@telia-ace/alliance-utilities": "1.0.9-next.2",
+    "@telia-ace/alliance-framework": "1.0.10-next.0",
+    "@telia-ace/alliance-utilities": "1.0.10-next.0",
     "@teliads/components": "^21.3.1",
     "@types/fs-extra": "^11.0.1",
     "fs-extra": "^11.1.1",

package/voca/components/telia-counter-badge.d.ts

@@ -0,0 +1 @@
+import '@teliads/components/dist/components/telia-counter-badge';

package/voca/components/telia-counter-badge.js

@@ -0,0 +1,45 @@
+import { p as l, H as i, h as a, a as r } from "../../chunks/index-eef143db.js";
+import { d as s } from "../../chunks/telia-vst2-dfb33a56.js";
+const n = '.telia-counter-badge{background-color:#5e0092;border-radius:calc(99.9rem * var(--voca-rem-multiplier));font-family:"TeliaSans", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:500;font-size:calc(1.2rem * var(--voca-rem-multiplier));color:#ffffff;display:inline-block;line-height:1;width:calc(1.4rem * var(--voca-rem-multiplier));max-height:calc(1.4rem * var(--voca-rem-multiplier));padding:calc(0.1rem * var(--voca-rem-multiplier)) calc(0.4rem * var(--voca-rem-multiplier));text-align:center}.telia-counter-badge--long{width:auto}.telia-counter-badge--placeholder{display:flex;justify-content:center;align-items:center}', o = /* @__PURE__ */ l(class extends i {
+  constructor() {
+    super(), this.__registerHost(), this.__attachShadow(), this.value = 0, this.allyLabel = null, this.dataTrackingId = "telia-counter-badge";
+  }
+  sanitizeValue(t) {
+    const e = Number.parseInt(t);
+    if (e > 0)
+      return e;
+    throw Error("Value needs to be a number (1-9)");
+  }
+  formatValue(t) {
+    return t > 999 ? "999+" : t.toString();
+  }
+  render() {
+    return a(r, { class: {
+      "telia-counter-badge": !!this.value,
+      ["telia-counter-badge--long"]: this.value > 9
+    }, "data-testid": this.dataTestid }, a("span", { class: "telia-counter-badge--placeholder", role: "status", "aria-label": this.allyLabel }, this.formatValue(this.sanitizeValue(this.value))), a("telia-vst", { dataTrackingId: this.dataTrackingId }));
+  }
+  static get style() {
+    return n;
+  }
+}, [1, "telia-counter-badge", {
+  dataTestid: [1, "data-testid"],
+  value: [2],
+  allyLabel: [1, "ally-label"]
+}]);
+function c() {
+  if (typeof customElements > "u")
+    return;
+  ["telia-counter-badge", "telia-vst"].forEach((e) => {
+    switch (e) {
+      case "telia-counter-badge":
+        customElements.get(e) || customElements.define(e, o);
+        break;
+      case "telia-vst":
+        customElements.get(e) || s();
+        break;
+    }
+  });
+}
+c();
+//# sourceMappingURL=telia-counter-badge.js.map

package/voca/components/telia-counter-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"telia-counter-badge.js","sources":["../../../../node_modules/.pnpm/@teliads+components@21.3.1/node_modules/@teliads/components/dist/components/telia-counter-badge.js"],"sourcesContent":["import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';\nimport { d as defineCustomElement$2 } from './telia-vst2.js';\n\nconst teliaCounterBadgeCss = \".telia-counter-badge{background-color:#5e0092;border-radius:calc(99.9rem * var(--voca-rem-multiplier));font-family:\\\"TeliaSans\\\", Helvetica, Arial, \\\"Lucida Grande\\\", sans-serif;font-weight:500;font-size:calc(1.2rem * var(--voca-rem-multiplier));color:#ffffff;display:inline-block;line-height:1;width:calc(1.4rem * var(--voca-rem-multiplier));max-height:calc(1.4rem * var(--voca-rem-multiplier));padding:calc(0.1rem * var(--voca-rem-multiplier)) calc(0.4rem * var(--voca-rem-multiplier));text-align:center}.telia-counter-badge--long{width:auto}.telia-counter-badge--placeholder{display:flex;justify-content:center;align-items:center}\";\n\nconst TeliaCounterBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {\n  constructor() {\n    super();\n    this.__registerHost();\n    this.__attachShadow();\n    /** The numeric value displayed in the badge. */\n    this.value = 0;\n    /** Describe unclear button context for better accessibility support */\n    this.allyLabel = null;\n    /** Tracking id is used to identify and count Component usage */\n    this.dataTrackingId = 'telia-counter-badge';\n  }\n  sanitizeValue(value) {\n    const integerValue = Number.parseInt(value);\n    if (integerValue > 0) {\n      return integerValue;\n    }\n    else {\n      throw Error('Value needs to be a number (1-9)');\n    }\n  }\n  formatValue(value) {\n    return value > 999 ? '999+' : value.toString();\n  }\n  render() {\n    return (h(Host, { class: {\n        'telia-counter-badge': !!this.value,\n        [`telia-counter-badge--long`]: this.value > 9,\n      }, \"data-testid\": this.dataTestid }, h(\"span\", { class: \"telia-counter-badge--placeholder\", role: \"status\", \"aria-label\": this.allyLabel }, this.formatValue(this.sanitizeValue(this.value))), h(\"telia-vst\", { dataTrackingId: this.dataTrackingId })));\n  }\n  static get style() { return teliaCounterBadgeCss; }\n}, [1, \"telia-counter-badge\", {\n    \"dataTestid\": [1, \"data-testid\"],\n    \"value\": [2],\n    \"allyLabel\": [1, \"ally-label\"]\n  }]);\nfunction defineCustomElement$1() {\n  if (typeof customElements === \"undefined\") {\n    return;\n  }\n  const components = [\"telia-counter-badge\", \"telia-vst\"];\n  components.forEach(tagName => { switch (tagName) {\n    case \"telia-counter-badge\":\n      if (!customElements.get(tagName)) {\n        customElements.define(tagName, TeliaCounterBadge$1);\n      }\n      break;\n    case \"telia-vst\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$2();\n      }\n      break;\n  } });\n}\ndefineCustomElement$1();\n\nconst TeliaCounterBadge = TeliaCounterBadge$1;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TeliaCounterBadge, defineCustomElement };\n"],"names":["teliaCounterBadgeCss","TeliaCounterBadge$1","proxyCustomElement","HTMLElement","value","integerValue","h","Host","defineCustomElement$1","tagName","defineCustomElement$2"],"mappings":";;AAGA,MAAMA,IAAuB,ynBAEvBC,IAAoC,gBAAAC,EAAmB,cAAcC,EAAY;AAAA,EACrF,cAAc;AACZ,aACA,KAAK,eAAc,GACnB,KAAK,eAAc,GAEnB,KAAK,QAAQ,GAEb,KAAK,YAAY,MAEjB,KAAK,iBAAiB;AAAA,EACvB;AAAA,EACD,cAAcC,GAAO;AACnB,UAAMC,IAAe,OAAO,SAASD,CAAK;AAC1C,QAAIC,IAAe;AACjB,aAAOA;AAGP,UAAM,MAAM,kCAAkC;AAAA,EAEjD;AAAA,EACD,YAAYD,GAAO;AACjB,WAAOA,IAAQ,MAAM,SAASA,EAAM,SAAQ;AAAA,EAC7C;AAAA,EACD,SAAS;AACP,WAAQE,EAAEC,GAAM,EAAE,OAAO;AAAA,MACrB,uBAAuB,CAAC,CAAC,KAAK;AAAA,MAC9B,CAAC,2BAA2B,GAAG,KAAK,QAAQ;AAAA,IAC7C,GAAE,eAAe,KAAK,WAAU,GAAID,EAAE,QAAQ,EAAE,OAAO,oCAAoC,MAAM,UAAU,cAAc,KAAK,UAAW,GAAE,KAAK,YAAY,KAAK,cAAc,KAAK,KAAK,CAAC,CAAC,GAAGA,EAAE,aAAa,EAAE,gBAAgB,KAAK,eAAc,CAAE,CAAC;AAAA,EACzP;AAAA,EACD,WAAW,QAAQ;AAAE,WAAON;AAAA,EAAuB;AACrD,GAAG,CAAC,GAAG,uBAAuB;AAAA,EAC1B,YAAc,CAAC,GAAG,aAAa;AAAA,EAC/B,OAAS,CAAC,CAAC;AAAA,EACX,WAAa,CAAC,GAAG,YAAY;AAC9B,CAAA,CAAC;AACJ,SAASQ,IAAwB;AAC/B,MAAI,OAAO,iBAAmB;AAC5B;AAGF,EADmB,CAAC,uBAAuB,WAAW,EAC3C,QAAQ,CAAAC,MAAW;AAAE,YAAQA,GAAO;AAAA,MAC7C,KAAK;AACH,QAAK,eAAe,IAAIA,CAAO,KAC7B,eAAe,OAAOA,GAASR,CAAmB;AAEpD;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIQ,CAAO,KAC7BC;AAEF;AAAA,IACH;AAAA,EAAA,CAAE;AACL;AACAF,EAAuB;","x_google_ignoreList":[0]}

package/voca/components/telia-search-input.d.ts

@@ -0,0 +1 @@
+import '@teliads/components/dist/components/telia-search-input';

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

@@ -0,0 +1,134 @@
+import { p as n, H as s, c, h as i } from "../../chunks/index-eef143db.js";
+import { d as u } from "../../chunks/telia-button2-7783c019.js";
+import { d as o } from "../../chunks/telia-field-assistive-text2-173ba2fb.js";
+import { d as p } from "../../chunks/telia-field-error2-75dc8ceb.js";
+import { d as h } from "../../chunks/telia-field-valid2-0f6759ac.js";
+import { d as m } from "../../chunks/telia-icon2-d0e7c715.js";
+import { d } from "../../chunks/telia-label2-f4c1eb47.js";
+import { d as v } from "../../chunks/telia-text-input2-db9121d9.js";
+import { d as b } from "../../chunks/telia-vst2-dfb33a56.js";
+import "../../chunks/error-filled-8de50bdd.js";
+import "../../chunks/check-circle-filled-42095247.js";
+import "../../chunks/getSvgContent-f2389ce0.js";
+import "../../chunks/uniqueId-0daf01ec.js";
+import "../../chunks/stringCombiner-10b57054.js";
+const a = {
+  DEFAULT: "default",
+  SIMPLE: "simple",
+  ADVANCED: "advanced"
+};
+Object.values(a);
+const r = {
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  EXPRESSIVE: "expressive",
+  DESTRUCTIVE: "destructive",
+  TERTIARY_PURPLE: "tertiary-purple",
+  TEXT: "text",
+  PRIMARY_WHITE: "primary-white",
+  SECONDARY_WHITE: "secondary-white",
+  EXPRESSIVE_WHITE: "expressive-white"
+};
+Object.values(r);
+const _ = ":host{--right-padding-default:calc(12rem * var(--voca-rem-multiplier));--right-padding-simple:calc(6.5rem * var(--voca-rem-multiplier));--right-padding-advanced:calc(12.1rem * var(--voca-rem-multiplier))}.telia-search-input{position:relative}.telia-search-input__leading-icon{color:rgba(0, 0, 0, 0.6);position:absolute;bottom:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier)));left:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input--isDisabled .telia-search-input__leading-icon{color:rgba(0, 0, 0, 0.4)}.telia-search-input--hasInput .telia-search-input__leading-icon,.telia-search-input--hasInput~.telia-search-input__leading-icon,.telia-search-input telia-text-input:focus-within .telia-search-input__leading-icon,.telia-search-input telia-text-input:focus-within~.telia-search-input__leading-icon{display:none}.telia-search-input .telia-search-input__input input::placeholder{color:rgba(0, 0, 0, 0.6);opacity:1}.telia-search-input .telia-search-input__input input:disabled::placeholder{color:rgba(0, 0, 0, 0.4)}.telia-search-input--simple .telia-search-input__input input::placeholder,.telia-search-input--advanced .telia-search-input__input input::placeholder{padding-left:calc(2rem * var(--voca-rem-multiplier))}.telia-search-input .telia-text-input__input{height:calc(4.4rem * var(--voca-rem-multiplier));padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc(0.8rem * var(--voca-rem-multiplier));margin-top:0}.telia-search-input .telia-text-input__input:hover{padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc((0.8rem * var(--voca-rem-multiplier)) - (0.1rem * var(--voca-rem-multiplier)))}.telia-search-input .telia-text-input__input:focus,.telia-search-input .telia-text-input__input:disabled:hover{padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input .telia-text-input__input:focus-within::placeholder{padding-left:0}.telia-search-input--default .telia-text-input__input,.telia-search-input--default .telia-text-input__input:hover,.telia-search-input--default .telia-text-input__input:focus{padding-right:var(--right-padding-default, calc(10.5rem * var(--voca-rem-multiplier)))}.telia-search-input--simple .telia-text-input__input,.telia-search-input--simple .telia-text-input__input:hover,.telia-search-input--simple .telia-text-input__input:focus{padding-right:var(--right-padding-simple, calc(5.5rem * var(--voca-rem-multiplier)))}.telia-search-input--advanced .telia-text-input__input,.telia-search-input--advanced .telia-text-input__input:hover,.telia-search-input--advanced .telia-text-input__input:focus{padding-right:var(--right-padding-advanced, calc(13.5rem * var(--voca-rem-multiplier)))}.telia-search-input__button-wrapper{display:flex;position:absolute;bottom:0;right:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input__button-wrapper .telia-search-input__search-button:last-child:not(:only-child){margin-left:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input__button-wrapper .telia-button--text.telia-button--sm.telia-button--icon-only,.telia-search-input__button-wrapper .telia-search-input__reset-input-button .telia-button--text.telia-button--sm{padding:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier))) calc(1.6rem * var(--voca-rem-multiplier))}.telia-search-input--advanced .telia-search-input__button-wrapper .telia-search-input__search-button .telia-button.telia-button--text.telia-button--sm:not(.telia-button--icon-only){padding:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier))) 0}", f = /* @__PURE__ */ n(class extends s {
+  constructor() {
+    super(), this.__registerHost(), this.__attachShadow(), this.vocaSearchButtonClicked = c(this, "vocaSearchButtonClicked", 7), this.placeholder = "Search...", this.variant = a.DEFAULT, this.ariaLabel = null, this.searchButtonText = "Search", this.searchButtonAriaLabel = "Search button", this.resetInputButtonAriaLabel = "Reset input button", this.disabled = !1, this.inputValue = "", this.classname = "telia-search-input", this.leadingIconVariants = [
+      a.SIMPLE,
+      a.ADVANCED
+    ], this.searchButtonVariants = [
+      a.DEFAULT,
+      a.ADVANCED
+    ], this.matchVariant = (e) => e.includes(this.variant), this.handleInput = (e) => {
+      this.inputValue = e.target.value;
+    }, this.handleResetInput = () => {
+      var e;
+      this.inputValue = "", (e = this.inputElement.querySelector("input")) === null || e === void 0 || e.focus();
+    };
+  }
+  renderIcon(e, t, l = !1) {
+    return i("telia-icon", { name: e, size: "sm", class: t, "aria-hidden": l });
+  }
+  renderResetInputButton() {
+    return i("telia-button", { variant: "text", size: "sm", class: `${this.classname}__reset-input-button`, onClick: this.handleResetInput, allyLabel: this.resetInputButtonAriaLabel, disabled: this.disabled }, this.renderIcon("close"));
+  }
+  renderSearchButton() {
+    const e = {
+      variant: r.TEXT,
+      size: "sm",
+      class: `${this.classname}__search-button`,
+      disabled: this.disabled,
+      allyLabel: this.searchButtonAriaLabel,
+      onClick: (t) => {
+        this.vocaSearchButtonClicked.emit({ value: this.inputValue, event: t });
+      }
+    };
+    switch (this.variant) {
+      case a.DEFAULT:
+        return i("telia-button", Object.assign({}, e), this.renderIcon("search"));
+      case a.ADVANCED:
+        return i("telia-button", Object.assign({}, e), this.searchButtonText);
+    }
+  }
+  render() {
+    const e = {
+      [this.classname]: !0,
+      [`${this.classname}--${this.variant}`]: !!this.variant,
+      [`${this.classname}--hasInput`]: !!this.inputValue,
+      [`${this.classname}--isDisabled`]: this.disabled
+    };
+    return i("div", { class: e, role: "search" }, i("telia-text-input", { class: `${this.classname}__input`, label: this.label, "aria-label": this.ariaLabel, disabled: this.disabled, placeholder: this.placeholder, "aria-placeholder": this.ariaPlaceholder, onInput: this.handleInput, value: this.inputValue, ref: (t) => {
+      this.inputElement = t;
+    } }), this.matchVariant(this.leadingIconVariants) && this.renderIcon("search", `${this.classname}__leading-icon`, !0), i("div", { class: `${this.classname}__button-wrapper` }, !!this.inputValue && this.renderResetInputButton(), this.matchVariant(this.searchButtonVariants) && this.renderSearchButton()), i("telia-vst", { dataTrackingId: `${this.classname}` }));
+  }
+  static get style() {
+    return _;
+  }
+}, [1, "telia-search-input", {
+  placeholder: [1],
+  label: [1],
+  variant: [8],
+  ariaLabel: [1, "aria-label"],
+  ariaPlaceholder: [1, "aria-placeholder"],
+  searchButtonText: [1, "search-button-text"],
+  searchButtonAriaLabel: [1, "search-button-aria-label"],
+  resetInputButtonAriaLabel: [1, "reset-input-button-aria-label"],
+  disabled: [4],
+  inputValue: [32]
+}]);
+function E() {
+  if (typeof customElements > "u")
+    return;
+  ["telia-search-input", "telia-button", "telia-field-assistive-text", "telia-field-error", "telia-field-valid", "telia-icon", "telia-label", "telia-text-input", "telia-vst"].forEach((t) => {
+    switch (t) {
+      case "telia-search-input":
+        customElements.get(t) || customElements.define(t, f);
+        break;
+      case "telia-button":
+        customElements.get(t) || u();
+        break;
+      case "telia-field-assistive-text":
+        customElements.get(t) || o();
+        break;
+      case "telia-field-error":
+        customElements.get(t) || p();
+        break;
+      case "telia-field-valid":
+        customElements.get(t) || h();
+        break;
+      case "telia-icon":
+        customElements.get(t) || m();
+        break;
+      case "telia-label":
+        customElements.get(t) || d();
+        break;
+      case "telia-text-input":
+        customElements.get(t) || v();
+        break;
+      case "telia-vst":
+        customElements.get(t) || b();
+        break;
+    }
+  });
+}
+E();
+//# sourceMappingURL=telia-search-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"telia-search-input.js","sources":["../../../../node_modules/.pnpm/@teliads+components@21.3.1/node_modules/@teliads/components/dist/components/telia-search-input.js"],"sourcesContent":["import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';\nimport { d as defineCustomElement$9 } from './telia-button2.js';\nimport { d as defineCustomElement$8 } from './telia-field-assistive-text2.js';\nimport { d as defineCustomElement$7 } from './telia-field-error2.js';\nimport { d as defineCustomElement$6 } from './telia-field-valid2.js';\nimport { d as defineCustomElement$5 } from './telia-icon2.js';\nimport { d as defineCustomElement$4 } from './telia-label2.js';\nimport { d as defineCustomElement$3 } from './telia-text-input2.js';\nimport { d as defineCustomElement$2 } from './telia-vst2.js';\n\nconst SearchInputVariants = {\n  DEFAULT: 'default',\n  SIMPLE: 'simple',\n  ADVANCED: 'advanced',\n};\nObject.values(SearchInputVariants);\n\nconst ButtonVariant = {\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  EXPRESSIVE: 'expressive',\n  DESTRUCTIVE: 'destructive',\n  TERTIARY_PURPLE: 'tertiary-purple',\n  TEXT: 'text',\n  PRIMARY_WHITE: 'primary-white',\n  SECONDARY_WHITE: 'secondary-white',\n  EXPRESSIVE_WHITE: 'expressive-white',\n};\nObject.values(ButtonVariant);\n\nconst searchInputCss = \":host{--right-padding-default:calc(12rem * var(--voca-rem-multiplier));--right-padding-simple:calc(6.5rem * var(--voca-rem-multiplier));--right-padding-advanced:calc(12.1rem * var(--voca-rem-multiplier))}.telia-search-input{position:relative}.telia-search-input__leading-icon{color:rgba(0, 0, 0, 0.6);position:absolute;bottom:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier)));left:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input--isDisabled .telia-search-input__leading-icon{color:rgba(0, 0, 0, 0.4)}.telia-search-input--hasInput .telia-search-input__leading-icon,.telia-search-input--hasInput~.telia-search-input__leading-icon,.telia-search-input telia-text-input:focus-within .telia-search-input__leading-icon,.telia-search-input telia-text-input:focus-within~.telia-search-input__leading-icon{display:none}.telia-search-input .telia-search-input__input input::placeholder{color:rgba(0, 0, 0, 0.6);opacity:1}.telia-search-input .telia-search-input__input input:disabled::placeholder{color:rgba(0, 0, 0, 0.4)}.telia-search-input--simple .telia-search-input__input input::placeholder,.telia-search-input--advanced .telia-search-input__input input::placeholder{padding-left:calc(2rem * var(--voca-rem-multiplier))}.telia-search-input .telia-text-input__input{height:calc(4.4rem * var(--voca-rem-multiplier));padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc(0.8rem * var(--voca-rem-multiplier));margin-top:0}.telia-search-input .telia-text-input__input:hover{padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc((0.8rem * var(--voca-rem-multiplier)) - (0.1rem * var(--voca-rem-multiplier)))}.telia-search-input .telia-text-input__input:focus,.telia-search-input .telia-text-input__input:disabled:hover{padding:calc((0.8rem * var(--voca-rem-multiplier)) + (0.2rem * var(--voca-rem-multiplier))) calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input .telia-text-input__input:focus-within::placeholder{padding-left:0}.telia-search-input--default .telia-text-input__input,.telia-search-input--default .telia-text-input__input:hover,.telia-search-input--default .telia-text-input__input:focus{padding-right:var(--right-padding-default, calc(10.5rem * var(--voca-rem-multiplier)))}.telia-search-input--simple .telia-text-input__input,.telia-search-input--simple .telia-text-input__input:hover,.telia-search-input--simple .telia-text-input__input:focus{padding-right:var(--right-padding-simple, calc(5.5rem * var(--voca-rem-multiplier)))}.telia-search-input--advanced .telia-text-input__input,.telia-search-input--advanced .telia-text-input__input:hover,.telia-search-input--advanced .telia-text-input__input:focus{padding-right:var(--right-padding-advanced, calc(13.5rem * var(--voca-rem-multiplier)))}.telia-search-input__button-wrapper{display:flex;position:absolute;bottom:0;right:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input__button-wrapper .telia-search-input__search-button:last-child:not(:only-child){margin-left:calc(0.8rem * var(--voca-rem-multiplier))}.telia-search-input__button-wrapper .telia-button--text.telia-button--sm.telia-button--icon-only,.telia-search-input__button-wrapper .telia-search-input__reset-input-button .telia-button--text.telia-button--sm{padding:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier))) calc(1.6rem * var(--voca-rem-multiplier))}.telia-search-input--advanced .telia-search-input__button-wrapper .telia-search-input__search-button .telia-button.telia-button--text.telia-button--sm:not(.telia-button--icon-only){padding:calc((1.6rem * var(--voca-rem-multiplier)) - (0.2rem * var(--voca-rem-multiplier))) 0}\";\n\nconst TeliaSearchInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {\n  constructor() {\n    super();\n    this.__registerHost();\n    this.__attachShadow();\n    this.vocaSearchButtonClicked = createEvent(this, \"vocaSearchButtonClicked\", 7);\n    /** Placeholder text */\n    this.placeholder = 'Search...';\n    /** Variant */\n    this.variant = SearchInputVariants.DEFAULT;\n    /** Accessibility: aria-label for the input */\n    this.ariaLabel = null;\n    /** Text for \"Expressive\" variant search button  */\n    this.searchButtonText = 'Search';\n    /** Accessibility: aria-label for the search button */\n    this.searchButtonAriaLabel = 'Search button';\n    /** Accessibility: aria-label for the reset input button */\n    this.resetInputButtonAriaLabel = 'Reset input button';\n    /** Set button disabled */\n    this.disabled = false;\n    /** Input value */\n    this.inputValue = '';\n    this.classname = 'telia-search-input';\n    this.leadingIconVariants = [\n      SearchInputVariants.SIMPLE,\n      SearchInputVariants.ADVANCED,\n    ];\n    this.searchButtonVariants = [\n      SearchInputVariants.DEFAULT,\n      SearchInputVariants.ADVANCED,\n    ];\n    this.matchVariant = (variants) => {\n      return variants.includes(this.variant);\n    };\n    this.handleInput = (event) => {\n      this.inputValue = event.target.value;\n    };\n    this.handleResetInput = () => {\n      var _a;\n      this.inputValue = '';\n      (_a = this.inputElement.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();\n    };\n  }\n  renderIcon(iconName, className, ariaHidden = false) {\n    return (h(\"telia-icon\", { name: iconName, size: \"sm\", class: className, \"aria-hidden\": ariaHidden }));\n  }\n  renderResetInputButton() {\n    return (h(\"telia-button\", { variant: \"text\", size: \"sm\", class: `${this.classname}__reset-input-button`, onClick: this.handleResetInput, allyLabel: this.resetInputButtonAriaLabel, disabled: this.disabled }, this.renderIcon('close')));\n  }\n  renderSearchButton() {\n    const commonProps = {\n      variant: ButtonVariant.TEXT,\n      size: 'sm',\n      class: `${this.classname}__search-button`,\n      disabled: this.disabled,\n      allyLabel: this.searchButtonAriaLabel,\n      onClick: (event) => {\n        this.vocaSearchButtonClicked.emit({ value: this.inputValue, event });\n      },\n    };\n    switch (this.variant) {\n      case SearchInputVariants.DEFAULT:\n        return (h(\"telia-button\", Object.assign({}, commonProps), this.renderIcon('search')));\n      case SearchInputVariants.ADVANCED:\n        return (h(\"telia-button\", Object.assign({}, commonProps), this.searchButtonText));\n    }\n    return;\n  }\n  render() {\n    const wrapperClasses = {\n      [this.classname]: true,\n      [`${this.classname}--${this.variant}`]: !!this.variant,\n      [`${this.classname}--hasInput`]: !!this.inputValue,\n      [`${this.classname}--isDisabled`]: this.disabled,\n    };\n    return (h(\"div\", { class: wrapperClasses, role: \"search\" }, h(\"telia-text-input\", { class: `${this.classname}__input`, label: this.label, \"aria-label\": this.ariaLabel, disabled: this.disabled, placeholder: this.placeholder, \"aria-placeholder\": this.ariaPlaceholder, onInput: this.handleInput, value: this.inputValue, ref: ref => {\n        this.inputElement = ref;\n      } }), this.matchVariant(this.leadingIconVariants) &&\n      this.renderIcon('search', `${this.classname}__leading-icon`, true), h(\"div\", { class: `${this.classname}__button-wrapper` }, !!this.inputValue && this.renderResetInputButton(), this.matchVariant(this.searchButtonVariants) &&\n      this.renderSearchButton()), h(\"telia-vst\", { dataTrackingId: `${this.classname}` })));\n  }\n  static get style() { return searchInputCss; }\n}, [1, \"telia-search-input\", {\n    \"placeholder\": [1],\n    \"label\": [1],\n    \"variant\": [8],\n    \"ariaLabel\": [1, \"aria-label\"],\n    \"ariaPlaceholder\": [1, \"aria-placeholder\"],\n    \"searchButtonText\": [1, \"search-button-text\"],\n    \"searchButtonAriaLabel\": [1, \"search-button-aria-label\"],\n    \"resetInputButtonAriaLabel\": [1, \"reset-input-button-aria-label\"],\n    \"disabled\": [4],\n    \"inputValue\": [32]\n  }]);\nfunction defineCustomElement$1() {\n  if (typeof customElements === \"undefined\") {\n    return;\n  }\n  const components = [\"telia-search-input\", \"telia-button\", \"telia-field-assistive-text\", \"telia-field-error\", \"telia-field-valid\", \"telia-icon\", \"telia-label\", \"telia-text-input\", \"telia-vst\"];\n  components.forEach(tagName => { switch (tagName) {\n    case \"telia-search-input\":\n      if (!customElements.get(tagName)) {\n        customElements.define(tagName, TeliaSearchInput$1);\n      }\n      break;\n    case \"telia-button\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$9();\n      }\n      break;\n    case \"telia-field-assistive-text\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$8();\n      }\n      break;\n    case \"telia-field-error\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$7();\n      }\n      break;\n    case \"telia-field-valid\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$6();\n      }\n      break;\n    case \"telia-icon\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$5();\n      }\n      break;\n    case \"telia-label\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$4();\n      }\n      break;\n    case \"telia-text-input\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$3();\n      }\n      break;\n    case \"telia-vst\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$2();\n      }\n      break;\n  } });\n}\ndefineCustomElement$1();\n\nconst TeliaSearchInput = TeliaSearchInput$1;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TeliaSearchInput, defineCustomElement };\n"],"names":["SearchInputVariants","ButtonVariant","searchInputCss","TeliaSearchInput$1","proxyCustomElement","HTMLElement","createEvent","variants","event","_a","iconName","className","ariaHidden","h","commonProps","wrapperClasses","ref","defineCustomElement$1","tagName","defineCustomElement$9","defineCustomElement$8","defineCustomElement$7","defineCustomElement$6","defineCustomElement$5","defineCustomElement$4","defineCustomElement$3","defineCustomElement$2"],"mappings":";;;;;;;;;;;;;;AAUA,MAAMA,IAAsB;AAAA,EAC1B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AACZ;AACA,OAAO,OAAOA,CAAmB;AAEjC,MAAMC,IAAgB;AAAA,EACpB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,kBAAkB;AACpB;AACA,OAAO,OAAOA,CAAa;AAE3B,MAAMC,IAAiB,8pHAEjBC,IAAmC,gBAAAC,EAAmB,cAAcC,EAAY;AAAA,EACpF,cAAc;AACZ,aACA,KAAK,eAAc,GACnB,KAAK,eAAc,GACnB,KAAK,0BAA0BC,EAAY,MAAM,2BAA2B,CAAC,GAE7E,KAAK,cAAc,aAEnB,KAAK,UAAUN,EAAoB,SAEnC,KAAK,YAAY,MAEjB,KAAK,mBAAmB,UAExB,KAAK,wBAAwB,iBAE7B,KAAK,4BAA4B,sBAEjC,KAAK,WAAW,IAEhB,KAAK,aAAa,IAClB,KAAK,YAAY,sBACjB,KAAK,sBAAsB;AAAA,MACzBA,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAC1B,GACI,KAAK,uBAAuB;AAAA,MAC1BA,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAC1B,GACI,KAAK,eAAe,CAACO,MACZA,EAAS,SAAS,KAAK,OAAO,GAEvC,KAAK,cAAc,CAACC,MAAU;AAC5B,WAAK,aAAaA,EAAM,OAAO;AAAA,IACrC,GACI,KAAK,mBAAmB,MAAM;AAC5B,UAAIC;AACJ,WAAK,aAAa,KACjBA,IAAK,KAAK,aAAa,cAAc,OAAO,OAAO,QAAQA,MAAO,UAAkBA,EAAG,MAAK;AAAA,IACnG;AAAA,EACG;AAAA,EACD,WAAWC,GAAUC,GAAWC,IAAa,IAAO;AAClD,WAAQC,EAAE,cAAc,EAAE,MAAMH,GAAU,MAAM,MAAM,OAAOC,GAAW,eAAeC,EAAY,CAAA;AAAA,EACpG;AAAA,EACD,yBAAyB;AACvB,WAAQC,EAAE,gBAAgB,EAAE,SAAS,QAAQ,MAAM,MAAM,OAAO,GAAG,KAAK,iCAAiC,SAAS,KAAK,kBAAkB,WAAW,KAAK,2BAA2B,UAAU,KAAK,SAAU,GAAE,KAAK,WAAW,OAAO,CAAC;AAAA,EACxO;AAAA,EACD,qBAAqB;AACnB,UAAMC,IAAc;AAAA,MAClB,SAASb,EAAc;AAAA,MACvB,MAAM;AAAA,MACN,OAAO,GAAG,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,WAAW,KAAK;AAAA,MAChB,SAAS,CAACO,MAAU;AAClB,aAAK,wBAAwB,KAAK,EAAE,OAAO,KAAK,YAAY,OAAAA,EAAK,CAAE;AAAA,MACpE;AAAA,IACP;AACI,YAAQ,KAAK,SAAO;AAAA,MAClB,KAAKR,EAAoB;AACvB,eAAQa,EAAE,gBAAgB,OAAO,OAAO,CAAA,GAAIC,CAAW,GAAG,KAAK,WAAW,QAAQ,CAAC;AAAA,MACrF,KAAKd,EAAoB;AACvB,eAAQa,EAAE,gBAAgB,OAAO,OAAO,CAAE,GAAEC,CAAW,GAAG,KAAK,gBAAgB;AAAA,IAClF;AAAA,EAEF;AAAA,EACD,SAAS;AACP,UAAMC,IAAiB;AAAA,MACrB,CAAC,KAAK,SAAS,GAAG;AAAA,MAClB,CAAC,GAAG,KAAK,cAAc,KAAK,SAAS,GAAG,CAAC,CAAC,KAAK;AAAA,MAC/C,CAAC,GAAG,KAAK,qBAAqB,GAAG,CAAC,CAAC,KAAK;AAAA,MACxC,CAAC,GAAG,KAAK,uBAAuB,GAAG,KAAK;AAAA,IAC9C;AACI,WAAQF,EAAE,OAAO,EAAE,OAAOE,GAAgB,MAAM,SAAU,GAAEF,EAAE,oBAAoB,EAAE,OAAO,GAAG,KAAK,oBAAoB,OAAO,KAAK,OAAO,cAAc,KAAK,WAAW,UAAU,KAAK,UAAU,aAAa,KAAK,aAAa,oBAAoB,KAAK,iBAAiB,SAAS,KAAK,aAAa,OAAO,KAAK,YAAY,KAAK,CAAAG,MAAO;AACrU,WAAK,eAAeA;AAAA,IACrB,EAAA,CAAE,GAAG,KAAK,aAAa,KAAK,mBAAmB,KAChD,KAAK,WAAW,UAAU,GAAG,KAAK,2BAA2B,EAAI,GAAGH,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,+BAA+B,CAAC,CAAC,KAAK,cAAc,KAAK,uBAAsB,GAAI,KAAK,aAAa,KAAK,oBAAoB,KAC5N,KAAK,mBAAkB,CAAE,GAAGA,EAAE,aAAa,EAAE,gBAAgB,GAAG,KAAK,YAAW,CAAE,CAAC;AAAA,EACtF;AAAA,EACD,WAAW,QAAQ;AAAE,WAAOX;AAAA,EAAiB;AAC/C,GAAG,CAAC,GAAG,sBAAsB;AAAA,EACzB,aAAe,CAAC,CAAC;AAAA,EACjB,OAAS,CAAC,CAAC;AAAA,EACX,SAAW,CAAC,CAAC;AAAA,EACb,WAAa,CAAC,GAAG,YAAY;AAAA,EAC7B,iBAAmB,CAAC,GAAG,kBAAkB;AAAA,EACzC,kBAAoB,CAAC,GAAG,oBAAoB;AAAA,EAC5C,uBAAyB,CAAC,GAAG,0BAA0B;AAAA,EACvD,2BAA6B,CAAC,GAAG,+BAA+B;AAAA,EAChE,UAAY,CAAC,CAAC;AAAA,EACd,YAAc,CAAC,EAAE;AAClB,CAAA,CAAC;AACJ,SAASe,IAAwB;AAC/B,MAAI,OAAO,iBAAmB;AAC5B;AAGF,EADmB,CAAC,sBAAsB,gBAAgB,8BAA8B,qBAAqB,qBAAqB,cAAc,eAAe,oBAAoB,WAAW,EACnL,QAAQ,CAAAC,MAAW;AAAE,YAAQA,GAAO;AAAA,MAC7C,KAAK;AACH,QAAK,eAAe,IAAIA,CAAO,KAC7B,eAAe,OAAOA,GAASf,CAAkB;AAEnD;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIe,CAAO,KAC7BC;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAID,CAAO,KAC7BE;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIF,CAAO,KAC7BG;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIH,CAAO,KAC7BI;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIJ,CAAO,KAC7BK;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIL,CAAO,KAC7BM;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIN,CAAO,KAC7BO;AAEF;AAAA,MACF,KAAK;AACH,QAAK,eAAe,IAAIP,CAAO,KAC7BQ;AAEF;AAAA,IACH;AAAA,EAAA,CAAE;AACL;AACAT,EAAuB;","x_google_ignoreList":[0]}