@telia-ace/alliance-ui 1.0.4-next.1 → 1.0.5-next.0

package/voca/components/telia-textarea.js

@@ -1,11 +1,11 @@
-import { p as c, H as m, h as a } from "../../chunks/index-629ecbb8.js";
+import { p as c, H as m, h as a } from "../../chunks/index-17652cf7.js";
 import { u as l } from "../../chunks/uniqueId-0daf01ec.js";
-import { s as u } from "../../chunks/stringCombiner-67bee7be.js";
-import { d as h } from "../../chunks/telia-field-assistive-text2-a7ada9a5.js";
-import { d as v } from "../../chunks/telia-field-error2-341030c7.js";
-import { d as p } from "../../chunks/telia-icon2-9c59983c.js";
-import { d as f } from "../../chunks/telia-label2-92041936.js";
-import { d as g } from "../../chunks/telia-vst2-5b28f085.js";
+import { s as u } from "../../chunks/stringCombiner-10b57054.js";
+import { d as h } from "../../chunks/telia-field-assistive-text2-fd970326.js";
+import { d as v } from "../../chunks/telia-field-error2-63eae7b3.js";
+import { d as p } from "../../chunks/telia-icon2-34bf5aef.js";
+import { d as f } from "../../chunks/telia-label2-4d674e5e.js";
+import { d as g } from "../../chunks/telia-vst2-1a7f7bd6.js";
 import "../../chunks/error-filled-8de50bdd.js";
 import "../../chunks/getSvgContent-f2389ce0.js";
 const x = '.telia-textarea{display:flex;flex-direction:column}.telia-textarea__textarea{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90;border-radius:calc(0.2rem * var(--voca-rem-multiplier));background-color:#ffffff;color:#222222;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;display:block;margin:0;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier));width:100%;margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:2}.telia-textarea__textarea:hover{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__textarea:hover:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier));padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:focus:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea:disabled{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd;background-color:#dcdce1;color:#606064;cursor:not-allowed;-webkit-text-fill-color:#606064}.telia-textarea__textarea:disabled:hover{padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:disabled~telia-label .telia-label{color:#606064;cursor:not-allowed}.telia-textarea__textarea:disabled~.telia-textarea__additional{color:#b0b0b5}.telia-textarea__textarea:invalid{box-shadow:none}.telia-textarea__textarea--touched:invalid{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #be0040}.telia-textarea__textarea--touched:invalid:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea--touched:invalid:hover:not(:focus){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #be0040;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__additional{order:4}.telia-textarea__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:5}', b = /* @__PURE__ */ c(class extends m {
@@ -22,7 +22,7 @@ const x = '.telia-textarea{display:flex;flex-direction:column}.telia-textarea__t
         this.updateErrorMessage(this.errorMessage), this.touched = !0;
         return;
       }
-      if (s && this.touched && !!this.requiredErrorMessage && this.isValueMissing() && this.updateErrorMessage(this.requiredErrorMessage), d && this.touched && !!this.minlengthErrorMessage && this.isValueLessThanMinlength() && this.updateErrorMessage(this.minlengthErrorMessage), i || n) {
+      if (s && this.touched && this.requiredErrorMessage && this.isValueMissing() && this.updateErrorMessage(this.requiredErrorMessage), d && this.touched && this.minlengthErrorMessage && this.isValueLessThanMinlength() && this.updateErrorMessage(this.minlengthErrorMessage), i || n) {
         if (o || s && this.isValueMissing() || d && this.isValueLessThanMinlength())
           return;
         this.updateErrorMessage("");
@@ -37,7 +37,7 @@ const x = '.telia-textarea{display:flex;flex-direction:column}.telia-textarea__t
   }
   componentDidRender() {
     var t, e, r;
-    this.textAreaElement && ((t = this.textAreaElement) === null || t === void 0 ? void 0 : t.setCustomValidity) && ((e = this.textAreaElement) === null || e === void 0 || e.setCustomValidity(this.errorMessageState)), this.htmlForm && ((r = this.textAreaElement) === null || r === void 0 || r.setAttribute("form", this.htmlForm));
+    this.textAreaElement && (!((t = this.textAreaElement) === null || t === void 0) && t.setCustomValidity) && ((e = this.textAreaElement) === null || e === void 0 || e.setCustomValidity(this.errorMessageState)), this.htmlForm && ((r = this.textAreaElement) === null || r === void 0 || r.setAttribute("form", this.htmlForm));
   }
   render() {
     const t = this.touched && !!this.errorMessageState.length, e = !!this.additional, r = u({

package/voca/components/telia-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"telia-textarea.js","sources":["../../../../node_modules/.pnpm/@teliads+components@18.3.3/node_modules/@teliads/components/dist/components/telia-textarea.js"],"sourcesContent":["import { proxyCustomElement, HTMLElement, 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-icon2.js';\nimport { d as defineCustomElement$3 } from './telia-label2.js';\nimport { d as defineCustomElement$2 } from './telia-vst2.js';\n\nconst teliaTextareaCss = \".telia-textarea{display:flex;flex-direction:column}.telia-textarea__textarea{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90;border-radius:calc(0.2rem * var(--voca-rem-multiplier));background-color:#ffffff;color:#222222;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;display:block;margin:0;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier));width:100%;margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:2}.telia-textarea__textarea:hover{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__textarea:hover:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier));padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:focus:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea:disabled{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd;background-color:#dcdce1;color:#606064;cursor:not-allowed;-webkit-text-fill-color:#606064}.telia-textarea__textarea:disabled:hover{padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:disabled~telia-label .telia-label{color:#606064;cursor:not-allowed}.telia-textarea__textarea:disabled~.telia-textarea__additional{color:#b0b0b5}.telia-textarea__textarea:invalid{box-shadow:none}.telia-textarea__textarea--touched:invalid{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #be0040}.telia-textarea__textarea--touched:invalid:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea--touched:invalid:hover:not(:focus){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #be0040;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__additional{order:4}.telia-textarea__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:5}\";\n\nconst TeliaTextArea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {\n  constructor() {\n    super();\n    this.__registerHost();\n    /** Additional description id */\n    this.additionalId = uniqueId('additional');\n    /** Disabled state */\n    this.disabled = false;\n    /** Error description id */\n    this.errorId = uniqueId('error');\n    /** Textarea input element id */\n    this.inputId = uniqueId('textareaId');\n    /** Required state */\n    this.required = false;\n    /** Textarea rows */\n    this.rows = 4;\n    /** Checks if textarea will be checked for spelling errors */\n    this.spellcheck = false;\n    /** Tracking id is used to identify and count Component usage */\n    this.dataTrackingId = 'telia-textarea';\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.textAreaElement\n        ? this.textAreaElement.value\n        : this.value;\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    /**\n     * Check if input value is empty, so required should be triggered.\n     */\n    this.isValueLessThanMinlength = () => {\n      return this.inputValue.length < this.minlength;\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.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);\n      this.errorMessageState = message;\n    };\n    this.updateErrorState = () => {\n      var _a, _b, _c;\n      const errorMessageIsSet = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);\n      const requiredInUse = this.required;\n      const generalErrorInUse = !!((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.length);\n      const minlengthInUse = this.minlength;\n      const minlengthErrorMessageIsSet = !!((_c = this.minlengthErrorMessage) === null || _c === void 0 ? void 0 : _c.length);\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 (requiredInUse) {\n        if (this.touched &&\n          !!this.requiredErrorMessage &&\n          this.isValueMissing()) {\n          this.updateErrorMessage(this.requiredErrorMessage);\n        }\n      }\n      if (minlengthInUse) {\n        if (this.touched &&\n          !!this.minlengthErrorMessage &&\n          this.isValueLessThanMinlength()) {\n          this.updateErrorMessage(this.minlengthErrorMessage);\n        }\n      }\n      // Clean error message if needed\n      if (errorMessageIsSet || minlengthErrorMessageIsSet) {\n        if (generalErrorInUse)\n          return;\n        if (requiredInUse && this.isValueMissing())\n          return;\n        if (minlengthInUse && this.isValueLessThanMinlength())\n          return;\n        this.updateErrorMessage('');\n      }\n    };\n    /**\n     * Input has been blurred at least once.\n     */\n    this.touched = false;\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.textAreaElement && ((_a = this.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {\n      (_b = this.textAreaElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);\n    }\n    if (this.htmlForm) {\n      (_c = this.textAreaElement) === null || _c === void 0 ? void 0 : _c.setAttribute('form', this.htmlForm);\n    }\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    return (h(\"div\", { class: \"telia-textarea\" }, h(\"textarea\", { class: {\n        'telia-textarea__textarea': true,\n        'telia-textarea__textarea--touched': !!this.touched,\n      }, \"aria-describedby\": describedBy, disabled: this.disabled, id: this.inputId, maxlength: this.maxlength, minlength: this.minlength, name: this.name, ref: ref => (this.textAreaElement = ref), required: this.required, rows: this.rows, spellcheck: this.spellcheck, onInput: () => {\n        this.updateInputValue();\n        this.updateErrorState();\n      }, onBlur: () => {\n        this.touched = true;\n        this.updateErrorState();\n      }, onInvalid: event => {\n        event.preventDefault();\n        this.touched = true;\n        this.updateErrorState();\n      }, form: this.htmlForm }, this.value), h(\"telia-label\", { class: \"telia-textarea__label\", htmlFor: this.inputId }, this.required && h(\"span\", { \"aria-hidden\": \"true\" }, '* '), this.label), showAdditional && (h(\"telia-field-assistive-text\", { class: \"telia-textarea__additional\", id: this.additionalId }, this.additional)), showError && (h(\"telia-field-error\", { id: this.errorId, class: \"telia-textarea__error\" }, this.errorMessageState)), h(\"telia-vst\", { dataTrackingId: this.dataTrackingId })));\n  }\n  static get style() { return teliaTextareaCss; }\n}, [0, \"telia-textarea\", {\n    \"additional\": [1],\n    \"htmlForm\": [1, \"html-form\"],\n    \"additionalId\": [1, \"additional-id\"],\n    \"dataTestid\": [1, \"data-testid\"],\n    \"disabled\": [4],\n    \"errorId\": [1, \"error-id\"],\n    \"inputId\": [1, \"input-id\"],\n    \"label\": [1],\n    \"minlength\": [2],\n    \"maxlength\": [2],\n    \"name\": [1],\n    \"required\": [4],\n    \"rows\": [2],\n    \"spellcheck\": [4],\n    \"value\": [1],\n    \"errorMessage\": [1, \"error-message\"],\n    \"minlengthErrorMessage\": [1, \"minlength-error-message\"],\n    \"requiredErrorMessage\": [1, \"required-error-message\"],\n    \"inputValue\": [32],\n    \"errorMessageState\": [32],\n    \"touched\": [32]\n  }]);\nfunction defineCustomElement$1() {\n  if (typeof customElements === \"undefined\") {\n    return;\n  }\n  const components = [\"telia-textarea\", \"telia-field-assistive-text\", \"telia-field-error\", \"telia-icon\", \"telia-label\", \"telia-vst\"];\n  components.forEach(tagName => { switch (tagName) {\n    case \"telia-textarea\":\n      if (!customElements.get(tagName)) {\n        customElements.define(tagName, TeliaTextArea);\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-icon\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$4();\n      }\n      break;\n    case \"telia-label\":\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 TeliaTextarea = TeliaTextArea;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TeliaTextarea, defineCustomElement };\n"],"names":["teliaTextareaCss","TeliaTextArea","proxyCustomElement","HTMLElement","uniqueId","message","_a","_b","_c","errorMessageIsSet","requiredInUse","generalErrorInUse","minlengthInUse","minlengthErrorMessageIsSet","showError","showAdditional","describedBy","stringCombiner","h","ref","event","defineCustomElement$1","tagName","defineCustomElement$6","defineCustomElement$5","defineCustomElement$4","defineCustomElement$3","defineCustomElement$2"],"mappings":"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"}
+{"version":3,"file":"telia-textarea.js","sources":["../../../../node_modules/.pnpm/@teliads+components@18.6.0/node_modules/@teliads/components/dist/components/telia-textarea.js"],"sourcesContent":["import { proxyCustomElement, HTMLElement, 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-icon2.js';\nimport { d as defineCustomElement$3 } from './telia-label2.js';\nimport { d as defineCustomElement$2 } from './telia-vst2.js';\n\nconst teliaTextareaCss = \".telia-textarea{display:flex;flex-direction:column}.telia-textarea__textarea{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90;border-radius:calc(0.2rem * var(--voca-rem-multiplier));background-color:#ffffff;color:#222222;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;display:block;margin:0;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier));width:100%;margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:2}.telia-textarea__textarea:hover{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__textarea:hover:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier));padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:focus:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea:disabled{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd;background-color:#dcdce1;color:#606064;cursor:not-allowed;-webkit-text-fill-color:#606064}.telia-textarea__textarea:disabled:hover{padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-textarea__textarea:disabled~telia-label .telia-label{color:#606064;cursor:not-allowed}.telia-textarea__textarea:disabled~.telia-textarea__additional{color:#b0b0b5}.telia-textarea__textarea:invalid{box-shadow:none}.telia-textarea__textarea--touched:invalid{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #be0040}.telia-textarea__textarea--touched:invalid:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #8c8c90}.telia-textarea__textarea--touched:invalid:hover:not(:focus){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #be0040;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-textarea__additional{order:4}.telia-textarea__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:5}\";\n\nconst TeliaTextArea = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {\n  constructor() {\n    super();\n    this.__registerHost();\n    /** Additional description id */\n    this.additionalId = uniqueId('additional');\n    /** Disabled state */\n    this.disabled = false;\n    /** Error description id */\n    this.errorId = uniqueId('error');\n    /** Textarea input element id */\n    this.inputId = uniqueId('textareaId');\n    /** Required state */\n    this.required = false;\n    /** Textarea rows */\n    this.rows = 4;\n    /** Checks if textarea will be checked for spelling errors */\n    this.spellcheck = false;\n    /** Tracking id is used to identify and count Component usage */\n    this.dataTrackingId = 'telia-textarea';\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.textAreaElement\n        ? this.textAreaElement.value\n        : this.value;\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    /**\n     * Check if input value is empty, so required should be triggered.\n     */\n    this.isValueLessThanMinlength = () => {\n      return this.inputValue.length < this.minlength;\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.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);\n      this.errorMessageState = message;\n    };\n    this.updateErrorState = () => {\n      var _a, _b, _c;\n      const errorMessageIsSet = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);\n      const requiredInUse = this.required;\n      const generalErrorInUse = !!((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.length);\n      const minlengthInUse = this.minlength;\n      const minlengthErrorMessageIsSet = !!((_c = this.minlengthErrorMessage) === null || _c === void 0 ? void 0 : _c.length);\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 (requiredInUse) {\n        if (this.touched &&\n          !!this.requiredErrorMessage &&\n          this.isValueMissing()) {\n          this.updateErrorMessage(this.requiredErrorMessage);\n        }\n      }\n      if (minlengthInUse) {\n        if (this.touched &&\n          !!this.minlengthErrorMessage &&\n          this.isValueLessThanMinlength()) {\n          this.updateErrorMessage(this.minlengthErrorMessage);\n        }\n      }\n      // Clean error message if needed\n      if (errorMessageIsSet || minlengthErrorMessageIsSet) {\n        if (generalErrorInUse)\n          return;\n        if (requiredInUse && this.isValueMissing())\n          return;\n        if (minlengthInUse && this.isValueLessThanMinlength())\n          return;\n        this.updateErrorMessage('');\n      }\n    };\n    /**\n     * Input has been blurred at least once.\n     */\n    this.touched = false;\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.textAreaElement && ((_a = this.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {\n      (_b = this.textAreaElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);\n    }\n    if (this.htmlForm) {\n      (_c = this.textAreaElement) === null || _c === void 0 ? void 0 : _c.setAttribute('form', this.htmlForm);\n    }\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    return (h(\"div\", { class: \"telia-textarea\" }, h(\"textarea\", { class: {\n        'telia-textarea__textarea': true,\n        'telia-textarea__textarea--touched': !!this.touched,\n      }, \"aria-describedby\": describedBy, disabled: this.disabled, id: this.inputId, maxlength: this.maxlength, minlength: this.minlength, name: this.name, ref: ref => (this.textAreaElement = ref), required: this.required, rows: this.rows, spellcheck: this.spellcheck, onInput: () => {\n        this.updateInputValue();\n        this.updateErrorState();\n      }, onBlur: () => {\n        this.touched = true;\n        this.updateErrorState();\n      }, onInvalid: event => {\n        event.preventDefault();\n        this.touched = true;\n        this.updateErrorState();\n      }, form: this.htmlForm }, this.value), h(\"telia-label\", { class: \"telia-textarea__label\", htmlFor: this.inputId }, this.required && h(\"span\", { \"aria-hidden\": \"true\" }, '* '), this.label), showAdditional && (h(\"telia-field-assistive-text\", { class: \"telia-textarea__additional\", id: this.additionalId }, this.additional)), showError && (h(\"telia-field-error\", { id: this.errorId, class: \"telia-textarea__error\" }, this.errorMessageState)), h(\"telia-vst\", { dataTrackingId: this.dataTrackingId })));\n  }\n  static get style() { return teliaTextareaCss; }\n}, [0, \"telia-textarea\", {\n    \"additional\": [1],\n    \"htmlForm\": [1, \"html-form\"],\n    \"additionalId\": [1, \"additional-id\"],\n    \"dataTestid\": [1, \"data-testid\"],\n    \"disabled\": [4],\n    \"errorId\": [1, \"error-id\"],\n    \"inputId\": [1, \"input-id\"],\n    \"label\": [1],\n    \"minlength\": [2],\n    \"maxlength\": [2],\n    \"name\": [1],\n    \"required\": [4],\n    \"rows\": [2],\n    \"spellcheck\": [4],\n    \"value\": [1],\n    \"errorMessage\": [1, \"error-message\"],\n    \"minlengthErrorMessage\": [1, \"minlength-error-message\"],\n    \"requiredErrorMessage\": [1, \"required-error-message\"],\n    \"inputValue\": [32],\n    \"errorMessageState\": [32],\n    \"touched\": [32]\n  }]);\nfunction defineCustomElement$1() {\n  if (typeof customElements === \"undefined\") {\n    return;\n  }\n  const components = [\"telia-textarea\", \"telia-field-assistive-text\", \"telia-field-error\", \"telia-icon\", \"telia-label\", \"telia-vst\"];\n  components.forEach(tagName => { switch (tagName) {\n    case \"telia-textarea\":\n      if (!customElements.get(tagName)) {\n        customElements.define(tagName, TeliaTextArea);\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-icon\":\n      if (!customElements.get(tagName)) {\n        defineCustomElement$4();\n      }\n      break;\n    case \"telia-label\":\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 TeliaTextarea = TeliaTextArea;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TeliaTextarea, defineCustomElement };\n"],"names":["teliaTextareaCss","TeliaTextArea","proxyCustomElement","HTMLElement","uniqueId","message","_a","_b","_c","errorMessageIsSet","requiredInUse","generalErrorInUse","minlengthInUse","minlengthErrorMessageIsSet","showError","showAdditional","describedBy","stringCombiner","h","ref","event","defineCustomElement$1","tagName","defineCustomElement$6","defineCustomElement$5","defineCustomElement$4","defineCustomElement$3","defineCustomElement$2"],"mappings":"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"}

package/voca/components/telia-toggle.js

@@ -1,6 +1,6 @@
-import { p as o, H as s, c as n, h as i } from "../../chunks/index-629ecbb8.js";
-import { d as c } from "../../chunks/telia-visually-hidden2-9e970a02.js";
-import { d as g } from "../../chunks/telia-vst2-5b28f085.js";
+import { p as o, H as s, c as n, h as i } from "../../chunks/index-17652cf7.js";
+import { d as c } from "../../chunks/telia-visually-hidden2-71416262.js";
+import { d as g } from "../../chunks/telia-vst2-1a7f7bd6.js";
 const d = '.telia-toggle{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;outline:none;position:relative}.telia-toggle--disabled{cursor:not-allowed}.telia-toggle button{clip:rect(0 0 0 0);clip-path:circle(0%);height:0;margin:0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0;position:absolute;width:0;}.telia-toggle button[aria-pressed=true]~.telia-toggle__track .telia-toggle__thumb{transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.2rem * var(--voca-rem-multiplier))))}.telia-toggle button:focus~.telia-toggle__label::before{border-radius:calc(0.2rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:"";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));height:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)));width:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)))}.telia-toggle button:focus:not(:focus-visible)~.telia-toggle__label ::before{box-shadow:none;outline:0}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--on{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--off{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}@media (hover: hover){.telia-toggle button:not(:disabled)~.telia-toggle__track--on:hover .telia-toggle__thumb--on,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--on:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:not(:disabled)~.telia-toggle__track--off:hover .telia-toggle__thumb--off,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--off:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--on{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.4rem * var(--voca-rem-multiplier))));transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--off{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(calc(2rem * var(--voca-rem-multiplier)) / 2);transform:translateX(0);transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:disabled~.telia-toggle__track--on:before,.telia-toggle button:disabled~.telia-toggle__track--off:before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd}.telia-toggle button:disabled~.telia-toggle__track--on:before{background-color:#c8c8cd}.telia-toggle button:disabled~.telia-toggle__label{color:#606064}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--on{background-color:#b0b0b5;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(1rem * var(--voca-rem-multiplier));}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--off{background-color:#c8c8cd;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(1.1rem * var(--voca-rem-multiplier));}.telia-toggle__track{z-index:1;align-items:center;border:calc(1.2rem * var(--voca-rem-multiplier)) solid transparent;box-sizing:content-box;display:flex;height:calc(2rem * var(--voca-rem-multiplier));position:relative;right:0;transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1)}.telia-toggle__track::before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:auto;content:" ";display:block;height:100%;position:absolute;width:100%}.telia-toggle__thumb{border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:1;background-clip:padding-box;box-sizing:border-box;height:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2);padding:calc(0.7rem * var(--voca-rem-multiplier)) calc(1.1rem * var(--voca-rem-multiplier));transform:translateX(-0.2rem);transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2)}.telia-toggle__thumb--on{background-color:#29003e}.telia-toggle__thumb--on.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--off{background-color:#8c8c90;padding:calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) / 2)}.telia-toggle__thumb--off.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--dragging{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle__thumb-line{background-color:#ffffff;border-radius:calc(0.2rem * var(--voca-rem-multiplier));height:100%;width:100%}.telia-toggle--label-none{display:inline-flex}.telia-toggle--label-none .telia-toggle__track{border-left:0;border-right:0}.telia-toggle--label-before .telia-toggle__track{border-right:0}.telia-toggle--label-after .telia-toggle__track{border-left:0}.telia-toggle__label{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;flex:1 1 0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0}.telia-toggle__label--none{flex:none;padding:0}', h = /* @__PURE__ */ o(class extends s {
   constructor() {
     super(), this.__registerHost(), this.__attachShadow(), this.vocaChange = n(this, "vocaChange", 7), this.disabled = !1, this.labelPosition = "before", this.dataTrackingId = "telia-toggle", this.dragged = !1, this.dragging = !1, this.dragStartX = 0, this.dragX = 0, this.eventListeners = {

package/voca/components/telia-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"telia-toggle.js","sources":["../../../../node_modules/.pnpm/@teliads+components@18.3.3/node_modules/@teliads/components/dist/components/telia-toggle.js"],"sourcesContent":["import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';\nimport { d as defineCustomElement$3 } from './telia-visually-hidden2.js';\nimport { d as defineCustomElement$2 } from './telia-vst2.js';\n\nconst teliaToggleCss = \".telia-toggle{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;outline:none;position:relative}.telia-toggle--disabled{cursor:not-allowed}.telia-toggle button{clip:rect(0 0 0 0);clip-path:circle(0%);height:0;margin:0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0;position:absolute;width:0;}.telia-toggle button[aria-pressed=true]~.telia-toggle__track .telia-toggle__thumb{transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.2rem * var(--voca-rem-multiplier))))}.telia-toggle button:focus~.telia-toggle__label::before{border-radius:calc(0.2rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:\\\"\\\";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));height:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)));width:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)))}.telia-toggle button:focus:not(:focus-visible)~.telia-toggle__label ::before{box-shadow:none;outline:0}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--on{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--off{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}@media (hover: hover){.telia-toggle button:not(:disabled)~.telia-toggle__track--on:hover .telia-toggle__thumb--on,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--on:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:not(:disabled)~.telia-toggle__track--off:hover .telia-toggle__thumb--off,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--off:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--on{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.4rem * var(--voca-rem-multiplier))));transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--off{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(calc(2rem * var(--voca-rem-multiplier)) / 2);transform:translateX(0);transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:disabled~.telia-toggle__track--on:before,.telia-toggle button:disabled~.telia-toggle__track--off:before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd}.telia-toggle button:disabled~.telia-toggle__track--on:before{background-color:#c8c8cd}.telia-toggle button:disabled~.telia-toggle__label{color:#606064}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--on{background-color:#b0b0b5;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(1rem * var(--voca-rem-multiplier));}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--off{background-color:#c8c8cd;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(1.1rem * var(--voca-rem-multiplier));}.telia-toggle__track{z-index:1;align-items:center;border:calc(1.2rem * var(--voca-rem-multiplier)) solid transparent;box-sizing:content-box;display:flex;height:calc(2rem * var(--voca-rem-multiplier));position:relative;right:0;transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1)}.telia-toggle__track::before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:auto;content:\\\" \\\";display:block;height:100%;position:absolute;width:100%}.telia-toggle__thumb{border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:1;background-clip:padding-box;box-sizing:border-box;height:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2);padding:calc(0.7rem * var(--voca-rem-multiplier)) calc(1.1rem * var(--voca-rem-multiplier));transform:translateX(-0.2rem);transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2)}.telia-toggle__thumb--on{background-color:#29003e}.telia-toggle__thumb--on.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--off{background-color:#8c8c90;padding:calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) / 2)}.telia-toggle__thumb--off.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--dragging{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle__thumb-line{background-color:#ffffff;border-radius:calc(0.2rem * var(--voca-rem-multiplier));height:100%;width:100%}.telia-toggle--label-none{display:inline-flex}.telia-toggle--label-none .telia-toggle__track{border-left:0;border-right:0}.telia-toggle--label-before .telia-toggle__track{border-right:0}.telia-toggle--label-after .telia-toggle__track{border-left:0}.telia-toggle__label{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;flex:1 1 0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0}.telia-toggle__label--none{flex:none;padding:0}\";\n\nconst TeliaToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {\n  constructor() {\n    super();\n    this.__registerHost();\n    this.__attachShadow();\n    this.vocaChange = createEvent(this, \"vocaChange\", 7);\n    /** When set, the toggle button is disabled and the change event won't be emitted */\n    this.disabled = false;\n    /** The position of the label. When set to neither after nor before, the label will be hidden but still set as aria-label for the button element */\n    this.labelPosition = 'before';\n    /** Tracking id is used to identify and count Component usage */\n    this.dataTrackingId = 'telia-toggle';\n    this.dragged = false;\n    this.dragging = false;\n    this.dragStartX = 0;\n    this.dragX = 0;\n    this.eventListeners = {\n      mousemove: this.onDrag.bind(this),\n      touchmove: this.onDrag.bind(this),\n      mouseup: this.endDragEmitChange.bind(this),\n      touchend: this.endDragEmitChange.bind(this),\n    };\n    this.emitChange = event => {\n      if (this.disabled)\n        return;\n      this.internalSelected = !this.internalSelected;\n      this.vocaChange.emit({\n        originalEvent: event,\n        value: this.internalSelected,\n      });\n    };\n  }\n  setInternalSelected(newValue) {\n    this.internalSelected = newValue;\n  }\n  componentWillLoad() {\n    this.internalSelected = this.selected;\n    this.remSize = 10;\n    this.trackHeight = 2 * this.remSize;\n    this.thumbMaxDragRange = this.trackHeight * 1.1;\n    this.thumbPressedLineHeight = Math.round(0.83 * this.remSize);\n    this.thumbLineWidth = 0.2 * this.remSize;\n  }\n  addEventListeners() {\n    Object.entries(this.eventListeners).forEach(([eventName, listener]) => {\n      document.addEventListener(eventName, listener);\n    });\n  }\n  removeEventListeners() {\n    Object.entries(this.eventListeners).forEach(([eventName, listener]) => {\n      document.removeEventListener(eventName, listener);\n    });\n  }\n  initDrag(event) {\n    this.stopPrevent(event);\n    if (!this.disabled) {\n      this.addEventListeners();\n      this.dragging = true;\n      this.dragStartX = this.getClientX(event);\n      this.dragX = this.getClientX(event);\n    }\n  }\n  endDrag(event) {\n    event && this.stopPrevent(event);\n    this.removeEventListeners();\n    this.dragged = false;\n    this.dragging = false;\n    this.dragStartX = 0;\n    this.dragX = 0;\n  }\n  endDragEmitChange(event) {\n    if (!this.dragged || this.isDraggedHalfway()) {\n      this.emitChange(event);\n    }\n    this.endDrag(event);\n  }\n  onDrag(event) {\n    const draggedRange = Math.abs(Math.round(this.dragX - this.dragStartX));\n    this.dragged = draggedRange > 0;\n    this.dragX = this.getClientX(event);\n  }\n  getClientX(event) {\n    var _a, _b, _c;\n    return (_a = event.clientX) !== null && _a !== void 0 ? _a : (_c = (_b = event.touches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.clientX;\n  }\n  toggleOnEnter(event) {\n    this.stopPrevent(event);\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.emitChange(event);\n    }\n  }\n  onLabelClick(event) {\n    this.stopPrevent(event);\n    if (event.type === 'click') {\n      this.emitChange(event);\n    }\n  }\n  stopPrevent(event) {\n    event.cancelable && event.preventDefault();\n    event.stopPropagation();\n  }\n  getThumbOffset() {\n    const diff = Math.round(this.dragX - this.dragStartX);\n    const stateOffset = this.internalSelected ? this.thumbMaxDragRange : 0;\n    const offset = diff + stateOffset;\n    if (offset > this.thumbMaxDragRange) {\n      return this.thumbMaxDragRange;\n    }\n    else if (offset < 0) {\n      return 0;\n    }\n    else {\n      return offset;\n    }\n  }\n  isDraggedHalfway() {\n    return this.internalSelected\n      ? this.getThumbOffset() < this.thumbMaxDragRange / 2\n      : this.getThumbOffset() > this.thumbMaxDragRange / 2;\n  }\n  getValueByState(onValue, offValue) {\n    if (this.internalSelected) {\n      return this.isDraggedHalfway() ? offValue : onValue;\n    }\n    else {\n      return this.isDraggedHalfway() ? onValue : offValue;\n    }\n  }\n  calculateThumbPadding() {\n    const halfDragRange = this.thumbMaxDragRange / 2;\n    const halfwayDraggedPercentage = Math.abs((this.getThumbOffset() - halfDragRange) / halfDragRange);\n    const topBottomPadding = `${(this.trackHeight -\n      this.thumbPressedLineHeight * halfwayDraggedPercentage) /\n      2}px`;\n    const onPadding = `${topBottomPadding} ${(this.trackHeight - this.thumbLineWidth) / 2}px`;\n    const offPadding = `${this.trackHeight / 2}px`;\n    return this.getValueByState(onPadding, offPadding);\n  }\n  getThumbStyle() {\n    const cursor = this.dragged ? 'grabbing' : 'inherit';\n    const padding = this.calculateThumbPadding();\n    const transform = `translateX(${this.getThumbOffset()}px)`;\n    const transition = `all 200ms ease${this.dragged ? ', transform 0ms, padding 0ms' : ''}`;\n    return this.dragging ? { cursor, padding, transform, transition } : {};\n  }\n  getThumbClass() {\n    const thumbBaseClass = 'telia-toggle__thumb';\n    const stateClass = this.getValueByState(`${thumbBaseClass}--on`, `${thumbBaseClass}--off`);\n    const draggingClass = this.dragging ? ` ${thumbBaseClass}--dragging` : '';\n    return `${thumbBaseClass} ${stateClass}${draggingClass}`;\n  }\n  getTrackClass() {\n    const trackBaseClass = 'telia-toggle__track';\n    const stateClass = this.getValueByState(`${trackBaseClass}--on`, `${trackBaseClass}--off`);\n    return `${trackBaseClass} ${stateClass}`;\n  }\n  renderLabel() {\n    const labelPositionClass = this.labelPosition\n      ? ` telia-toggle__label--${this.labelPosition}`\n      : '';\n    return (this.label && (h(\"span\", { class: `telia-toggle__label${labelPositionClass}`, onMouseUp: e => this.endDrag(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.onLabelClick(e) }, this.labelPosition !== 'none' && this.label)));\n  }\n  render() {\n    const componentClass = 'telia-toggle';\n    const wrapperClasses = {\n      [`${componentClass}`]: true,\n      [`${componentClass}--label-${this.labelPosition}`]: true,\n      [`${componentClass}--disabled`]: this.disabled,\n    };\n    return (h(\"div\", { class: wrapperClasses }, h(\"button\", { \"aria-pressed\": this.internalSelected ? 'true' : 'false', disabled: this.disabled, \"aria-labelledby\": this.labelledby, onKeyUp: e => this.toggleOnEnter(e) }, h(\"telia-visually-hidden\", null, this.label)), (this.labelPosition === 'before' || this.labelPosition === 'none') &&\n      this.renderLabel(), h(\"div\", { class: this.getTrackClass(), onMouseUp: e => this.endDrag(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.onLabelClick(e) }, h(\"div\", { style: this.getThumbStyle(), class: this.getThumbClass(), onMouseDown: e => this.initDrag(e), onTouchStart: e => this.initDrag(e), onMouseUp: e => this.endDragEmitChange(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.stopPrevent(e) }, h(\"div\", { class: \"telia-toggle__thumb-line\" })), h(\"telia-vst\", { dataTrackingId: this.dataTrackingId })), this.labelPosition === 'after' && this.renderLabel()));\n  }\n  static get watchers() { return {\n    \"selected\": [\"setInternalSelected\"]\n  }; }\n  static get style() { return teliaToggleCss; }\n}, [1, \"telia-toggle\", {\n    \"dataTestid\": [1, \"data-testid\"],\n    \"selected\": [4],\n    \"disabled\": [4],\n    \"label\": [1],\n    \"labelPosition\": [1, \"label-position\"],\n    \"labelledby\": [1],\n    \"dragged\": [32],\n    \"dragging\": [32],\n    \"dragStartX\": [32],\n    \"dragX\": [32],\n    \"internalSelected\": [32],\n    \"remSize\": [32],\n    \"trackHeight\": [32],\n    \"thumbMaxDragRange\": [32],\n    \"thumbPressedLineHeight\": [32],\n    \"thumbLineWidth\": [32],\n    \"eventListeners\": [32]\n  }]);\nfunction defineCustomElement$1() {\n  if (typeof customElements === \"undefined\") {\n    return;\n  }\n  const components = [\"telia-toggle\", \"telia-visually-hidden\", \"telia-vst\"];\n  components.forEach(tagName => { switch (tagName) {\n    case \"telia-toggle\":\n      if (!customElements.get(tagName)) {\n        customElements.define(tagName, TeliaToggle$1);\n      }\n      break;\n    case \"telia-visually-hidden\":\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 TeliaToggle = TeliaToggle$1;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TeliaToggle, defineCustomElement };\n"],"names":["teliaToggleCss","TeliaToggle$1","proxyCustomElement","HTMLElement","createEvent","event","newValue","eventName","listener","draggedRange","_a","_b","_c","diff","stateOffset","offset","onValue","offValue","halfDragRange","halfwayDraggedPercentage","onPadding","offPadding","cursor","padding","transform","transition","thumbBaseClass","stateClass","draggingClass","trackBaseClass","labelPositionClass","h","e","componentClass","wrapperClasses","defineCustomElement$1","tagName","defineCustomElement$3","defineCustomElement$2"],"mappings":"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"}
+{"version":3,"file":"telia-toggle.js","sources":["../../../../node_modules/.pnpm/@teliads+components@18.6.0/node_modules/@teliads/components/dist/components/telia-toggle.js"],"sourcesContent":["import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';\nimport { d as defineCustomElement$3 } from './telia-visually-hidden2.js';\nimport { d as defineCustomElement$2 } from './telia-vst2.js';\n\nconst teliaToggleCss = \".telia-toggle{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;outline:none;position:relative}.telia-toggle--disabled{cursor:not-allowed}.telia-toggle button{clip:rect(0 0 0 0);clip-path:circle(0%);height:0;margin:0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0;position:absolute;width:0;}.telia-toggle button[aria-pressed=true]~.telia-toggle__track .telia-toggle__thumb{transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.2rem * var(--voca-rem-multiplier))))}.telia-toggle button:focus~.telia-toggle__label::before{border-radius:calc(0.2rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:\\\"\\\";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));height:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)));width:calc(100% + calc(0.8rem * var(--voca-rem-multiplier)))}.telia-toggle button:focus:not(:focus-visible)~.telia-toggle__label ::before{box-shadow:none;outline:0}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--on{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:active~.telia-toggle__track .telia-toggle__thumb--off{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}@media (hover: hover){.telia-toggle button:not(:disabled)~.telia-toggle__track--on:hover .telia-toggle__thumb--on,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--on:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle button:not(:disabled)~.telia-toggle__track--off:hover .telia-toggle__thumb--off,.telia-toggle button:not(:disabled)~.telia-toggle__thumb--off:hover{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--on{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));transform:translateX(calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1) - calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) + calc(0.4rem * var(--voca-rem-multiplier))));transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:active:not(:disabled)~.telia-toggle__track .telia-toggle__thumb--off{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(calc(2rem * var(--voca-rem-multiplier)) / 2);transform:translateX(0);transition:all 200ms ease;width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle button:disabled~.telia-toggle__track--on:before,.telia-toggle button:disabled~.telia-toggle__track--off:before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd}.telia-toggle button:disabled~.telia-toggle__track--on:before{background-color:#c8c8cd}.telia-toggle button:disabled~.telia-toggle__label{color:#606064}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--on{background-color:#b0b0b5;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(1rem * var(--voca-rem-multiplier));}.telia-toggle button:disabled~.telia-toggle__track .telia-toggle__thumb--off{background-color:#c8c8cd;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #ffffff;box-shadow:none;padding:calc(1.1rem * var(--voca-rem-multiplier));}.telia-toggle__track{z-index:1;align-items:center;border:calc(1.2rem * var(--voca-rem-multiplier)) solid transparent;box-sizing:content-box;display:flex;height:calc(2rem * var(--voca-rem-multiplier));position:relative;right:0;transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 2.1)}.telia-toggle__track::before{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:auto;content:\\\" \\\";display:block;height:100%;position:absolute;width:100%}.telia-toggle__thumb{border-radius:calc(99.9rem * var(--voca-rem-multiplier));z-index:1;background-clip:padding-box;box-sizing:border-box;height:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2);padding:calc(0.7rem * var(--voca-rem-multiplier)) calc(1.1rem * var(--voca-rem-multiplier));transform:translateX(-0.2rem);transition:all 200ms ease;width:calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2)}.telia-toggle__thumb--on{background-color:#29003e}.telia-toggle__thumb--on.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--off{background-color:#8c8c90;padding:calc(calc(calc(2rem * var(--voca-rem-multiplier)) * 1.2) / 2)}.telia-toggle__thumb--off.telia-toggle__thumb--dragging{background-color:#29003e;box-shadow:0 0 0 calc(0.8rem * var(--voca-rem-multiplier)) rgba(222, 153, 255, 0.75)}.telia-toggle__thumb--dragging{height:calc(2rem * var(--voca-rem-multiplier));padding:calc(0.6rem * var(--voca-rem-multiplier)) calc(0.9rem * var(--voca-rem-multiplier));width:calc(2rem * var(--voca-rem-multiplier))}.telia-toggle__thumb-line{background-color:#ffffff;border-radius:calc(0.2rem * var(--voca-rem-multiplier));height:100%;width:100%}.telia-toggle--label-none{display:inline-flex}.telia-toggle--label-none .telia-toggle__track{border-left:0;border-right:0}.telia-toggle--label-before .telia-toggle__track{border-right:0}.telia-toggle--label-after .telia-toggle__track{border-left:0}.telia-toggle__label{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;flex:1 1 0;padding:calc(1.2rem * var(--voca-rem-multiplier)) 0}.telia-toggle__label--none{flex:none;padding:0}\";\n\nconst TeliaToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {\n  constructor() {\n    super();\n    this.__registerHost();\n    this.__attachShadow();\n    this.vocaChange = createEvent(this, \"vocaChange\", 7);\n    /** When set, the toggle button is disabled and the change event won't be emitted */\n    this.disabled = false;\n    /** The position of the label. When set to neither after nor before, the label will be hidden but still set as aria-label for the button element */\n    this.labelPosition = 'before';\n    /** Tracking id is used to identify and count Component usage */\n    this.dataTrackingId = 'telia-toggle';\n    this.dragged = false;\n    this.dragging = false;\n    this.dragStartX = 0;\n    this.dragX = 0;\n    this.eventListeners = {\n      mousemove: this.onDrag.bind(this),\n      touchmove: this.onDrag.bind(this),\n      mouseup: this.endDragEmitChange.bind(this),\n      touchend: this.endDragEmitChange.bind(this),\n    };\n    this.emitChange = event => {\n      if (this.disabled)\n        return;\n      this.internalSelected = !this.internalSelected;\n      this.vocaChange.emit({\n        originalEvent: event,\n        value: this.internalSelected,\n      });\n    };\n  }\n  setInternalSelected(newValue) {\n    this.internalSelected = newValue;\n  }\n  componentWillLoad() {\n    this.internalSelected = this.selected;\n    this.remSize = 10;\n    this.trackHeight = 2 * this.remSize;\n    this.thumbMaxDragRange = this.trackHeight * 1.1;\n    this.thumbPressedLineHeight = Math.round(0.83 * this.remSize);\n    this.thumbLineWidth = 0.2 * this.remSize;\n  }\n  addEventListeners() {\n    Object.entries(this.eventListeners).forEach(([eventName, listener]) => {\n      document.addEventListener(eventName, listener);\n    });\n  }\n  removeEventListeners() {\n    Object.entries(this.eventListeners).forEach(([eventName, listener]) => {\n      document.removeEventListener(eventName, listener);\n    });\n  }\n  initDrag(event) {\n    this.stopPrevent(event);\n    if (!this.disabled) {\n      this.addEventListeners();\n      this.dragging = true;\n      this.dragStartX = this.getClientX(event);\n      this.dragX = this.getClientX(event);\n    }\n  }\n  endDrag(event) {\n    event && this.stopPrevent(event);\n    this.removeEventListeners();\n    this.dragged = false;\n    this.dragging = false;\n    this.dragStartX = 0;\n    this.dragX = 0;\n  }\n  endDragEmitChange(event) {\n    if (!this.dragged || this.isDraggedHalfway()) {\n      this.emitChange(event);\n    }\n    this.endDrag(event);\n  }\n  onDrag(event) {\n    const draggedRange = Math.abs(Math.round(this.dragX - this.dragStartX));\n    this.dragged = draggedRange > 0;\n    this.dragX = this.getClientX(event);\n  }\n  getClientX(event) {\n    var _a, _b, _c;\n    return (_a = event.clientX) !== null && _a !== void 0 ? _a : (_c = (_b = event.touches) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.clientX;\n  }\n  toggleOnEnter(event) {\n    this.stopPrevent(event);\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.emitChange(event);\n    }\n  }\n  onLabelClick(event) {\n    this.stopPrevent(event);\n    if (event.type === 'click') {\n      this.emitChange(event);\n    }\n  }\n  stopPrevent(event) {\n    event.cancelable && event.preventDefault();\n    event.stopPropagation();\n  }\n  getThumbOffset() {\n    const diff = Math.round(this.dragX - this.dragStartX);\n    const stateOffset = this.internalSelected ? this.thumbMaxDragRange : 0;\n    const offset = diff + stateOffset;\n    if (offset > this.thumbMaxDragRange) {\n      return this.thumbMaxDragRange;\n    }\n    else if (offset < 0) {\n      return 0;\n    }\n    else {\n      return offset;\n    }\n  }\n  isDraggedHalfway() {\n    return this.internalSelected\n      ? this.getThumbOffset() < this.thumbMaxDragRange / 2\n      : this.getThumbOffset() > this.thumbMaxDragRange / 2;\n  }\n  getValueByState(onValue, offValue) {\n    if (this.internalSelected) {\n      return this.isDraggedHalfway() ? offValue : onValue;\n    }\n    else {\n      return this.isDraggedHalfway() ? onValue : offValue;\n    }\n  }\n  calculateThumbPadding() {\n    const halfDragRange = this.thumbMaxDragRange / 2;\n    const halfwayDraggedPercentage = Math.abs((this.getThumbOffset() - halfDragRange) / halfDragRange);\n    const topBottomPadding = `${(this.trackHeight -\n      this.thumbPressedLineHeight * halfwayDraggedPercentage) /\n      2}px`;\n    const onPadding = `${topBottomPadding} ${(this.trackHeight - this.thumbLineWidth) / 2}px`;\n    const offPadding = `${this.trackHeight / 2}px`;\n    return this.getValueByState(onPadding, offPadding);\n  }\n  getThumbStyle() {\n    const cursor = this.dragged ? 'grabbing' : 'inherit';\n    const padding = this.calculateThumbPadding();\n    const transform = `translateX(${this.getThumbOffset()}px)`;\n    const transition = `all 200ms ease${this.dragged ? ', transform 0ms, padding 0ms' : ''}`;\n    return this.dragging ? { cursor, padding, transform, transition } : {};\n  }\n  getThumbClass() {\n    const thumbBaseClass = 'telia-toggle__thumb';\n    const stateClass = this.getValueByState(`${thumbBaseClass}--on`, `${thumbBaseClass}--off`);\n    const draggingClass = this.dragging ? ` ${thumbBaseClass}--dragging` : '';\n    return `${thumbBaseClass} ${stateClass}${draggingClass}`;\n  }\n  getTrackClass() {\n    const trackBaseClass = 'telia-toggle__track';\n    const stateClass = this.getValueByState(`${trackBaseClass}--on`, `${trackBaseClass}--off`);\n    return `${trackBaseClass} ${stateClass}`;\n  }\n  renderLabel() {\n    const labelPositionClass = this.labelPosition\n      ? ` telia-toggle__label--${this.labelPosition}`\n      : '';\n    return (this.label && (h(\"span\", { class: `telia-toggle__label${labelPositionClass}`, onMouseUp: e => this.endDrag(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.onLabelClick(e) }, this.labelPosition !== 'none' && this.label)));\n  }\n  render() {\n    const componentClass = 'telia-toggle';\n    const wrapperClasses = {\n      [`${componentClass}`]: true,\n      [`${componentClass}--label-${this.labelPosition}`]: true,\n      [`${componentClass}--disabled`]: this.disabled,\n    };\n    return (h(\"div\", { class: wrapperClasses }, h(\"button\", { \"aria-pressed\": this.internalSelected ? 'true' : 'false', disabled: this.disabled, \"aria-labelledby\": this.labelledby, onKeyUp: e => this.toggleOnEnter(e) }, h(\"telia-visually-hidden\", null, this.label)), (this.labelPosition === 'before' || this.labelPosition === 'none') &&\n      this.renderLabel(), h(\"div\", { class: this.getTrackClass(), onMouseUp: e => this.endDrag(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.onLabelClick(e) }, h(\"div\", { style: this.getThumbStyle(), class: this.getThumbClass(), onMouseDown: e => this.initDrag(e), onTouchStart: e => this.initDrag(e), onMouseUp: e => this.endDragEmitChange(e), onTouchEnd: e => this.endDragEmitChange(e), onClick: e => this.stopPrevent(e) }, h(\"div\", { class: \"telia-toggle__thumb-line\" })), h(\"telia-vst\", { dataTrackingId: this.dataTrackingId })), this.labelPosition === 'after' && this.renderLabel()));\n  }\n  static get watchers() { return {\n    \"selected\": [\"setInternalSelected\"]\n  }; }\n  static get style() { return teliaToggleCss; }\n}, [1, \"telia-toggle\", {\n    \"dataTestid\": [1, \"data-testid\"],\n    \"selected\": [4],\n    \"disabled\": [4],\n    \"label\": [1],\n    \"labelPosition\": [1, \"label-position\"],\n    \"labelledby\": [1],\n    \"dragged\": [32],\n    \"dragging\": [32],\n    \"dragStartX\": [32],\n    \"dragX\": [32],\n    \"internalSelected\": [32],\n    \"remSize\": [32],\n    \"trackHeight\": [32],\n    \"thumbMaxDragRange\": [32],\n    \"thumbPressedLineHeight\": [32],\n    \"thumbLineWidth\": [32],\n    \"eventListeners\": [32]\n  }]);\nfunction defineCustomElement$1() {\n  if (typeof customElements === \"undefined\") {\n    return;\n  }\n  const components = [\"telia-toggle\", \"telia-visually-hidden\", \"telia-vst\"];\n  components.forEach(tagName => { switch (tagName) {\n    case \"telia-toggle\":\n      if (!customElements.get(tagName)) {\n        customElements.define(tagName, TeliaToggle$1);\n      }\n      break;\n    case \"telia-visually-hidden\":\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 TeliaToggle = TeliaToggle$1;\nconst defineCustomElement = defineCustomElement$1;\n\nexport { TeliaToggle, defineCustomElement };\n"],"names":["teliaToggleCss","TeliaToggle$1","proxyCustomElement","HTMLElement","createEvent","event","newValue","eventName","listener","draggedRange","_a","_b","_c","diff","stateOffset","offset","onValue","offValue","halfDragRange","halfwayDraggedPercentage","onPadding","offPadding","cursor","padding","transform","transition","thumbBaseClass","stateClass","draggingClass","trackBaseClass","labelPositionClass","h","e","componentClass","wrapperClasses","defineCustomElement$1","tagName","defineCustomElement$3","defineCustomElement$2"],"mappings":"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"}

package/voca/components/telia-visually-hidden.js

@@ -1,4 +1,4 @@
-import "../../chunks/telia-visually-hidden2-9e970a02.js";
-import "../../chunks/index-629ecbb8.js";
-import "../../chunks/telia-vst2-5b28f085.js";
+import "../../chunks/telia-visually-hidden2-71416262.js";
+import "../../chunks/index-17652cf7.js";
+import "../../chunks/telia-vst2-1a7f7bd6.js";
 //# sourceMappingURL=telia-visually-hidden.js.map

package/voca/foundations/index.js

@@ -1,14 +1,13 @@
-import { t as d, s as a, a as o, m as r, l as t, b as n, d as s, c as e, g, f as c } from "../../chunks/variables-03fe2cd9.js";
-import { b as k, d as x, c as S, f as v, g as L, l as M, m as H, a as $, s as z, t as B } from "../../chunks/variables-03fe2cd9.js";
+import { t as s, s as a, a as o, m as r, l as t, b as n, d, c as e, g, f as c } from "../../chunks/variables-03fe2cd9.js";
 const y = () => {
   const p = "voca-foundations-style-tag", l = document.getElementById(p), i = document.createElement("style");
   i.id = p;
   const u = {
     "--font-telia-heading": "TeliaSansHeading, TeliaSans, HelveticaNeue, Helvetica, Arial, sans-serif",
     "--font-telia-sans": "TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif",
-    "--font-normal": d.weightNormal,
-    "--font-medium": d.weightMedium,
-    "--font-bold": d.weightBold,
+    "--font-normal": s.weightNormal,
+    "--font-medium": s.weightMedium,
+    "--font-bold": s.weightBold,
     "--spacing-0": a.spacing0,
     "--spacing-2": a.spacing2,
     "--spacing-4": a.spacing4,
@@ -53,10 +52,10 @@ const y = () => {
     "--border-radius-sm": n.radiusSm,
     "--border-radius-lg": n.radiusLg,
     "--border-radius-full": n.radiusFull,
-    "--screen-size-sm": s.breakpointSm,
-    "--screen-size-md": s.breakpointMd,
-    "--screen-size-lg": s.breakpointLg,
-    "--screen-size-xl": s.breakpointXl,
+    "--screen-size-sm": d.breakpointSm,
+    "--screen-size-md": d.breakpointMd,
+    "--screen-size-lg": d.breakpointLg,
+    "--screen-size-xl": d.breakpointXl,
     "--purple-100": e.purple100,
     "--purple-200": e.purple200,
     "--purple-300": e.purple300,
@@ -133,6 +132,7 @@ const y = () => {
     "--grid-page-padding-m": g.pagePaddingM,
     "--grid-page-padding-l": g.pagePaddingL,
     "--grid-page-padding-xl": g.pagePaddingXl,
+    // The following are not available in JS variables for some reason
     "--functional-transparent": "transparent",
     "--transparent-black-50": "rgba(0, 0, 0, 0.05)",
     "--transparent-black-100": "rgba(0, 0, 0, 0.1)",
@@ -170,15 +170,15 @@ const y = () => {
 };
 export {
   y as addCssVariables,
-  k as borders,
-  x as breakpoints,
-  S as colors,
-  v as focus,
-  L as grid,
-  M as layers,
-  H as motion,
-  $ as shadows,
-  z as spacing,
-  B as typography
+  n as borders,
+  d as breakpoints,
+  e as colors,
+  c as focus,
+  g as grid,
+  t as layers,
+  r as motion,
+  o as shadows,
+  a as spacing,
+  s as typography
 };
 //# sourceMappingURL=index.js.map

package/voca/foundations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/voca/foundations/index.ts"],"sourcesContent":["import {\n    borders,\n    breakpoints,\n    colors,\n    grid,\n    layers,\n    motion,\n    shadows,\n    spacing,\n    typography,\n} from '@teliads/components/foundations';\nimport focus from '@teliads/components/foundations/focus/variables.json';\n\nexport { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography, focus };\n\nexport const addCssVariables = () => {\n    const styleId = 'voca-foundations-style-tag';\n    const existing = document.getElementById(styleId);\n    const element = document.createElement('style');\n    element.id = styleId;\n\n    const variables: Record<string, string> = {\n        '--font-telia-heading':\n            'TeliaSansHeading, TeliaSans, HelveticaNeue, Helvetica, Arial, sans-serif',\n        '--font-telia-sans': 'TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif',\n        '--font-normal': typography.weightNormal,\n        '--font-medium': typography.weightMedium,\n        '--font-bold': typography.weightBold,\n\n        '--spacing-0': spacing.spacing0,\n        '--spacing-2': spacing.spacing2,\n        '--spacing-4': spacing.spacing4,\n        '--spacing-8': spacing.spacing8,\n        '--spacing-12': spacing.spacing12,\n        '--spacing-16': spacing.spacing16,\n        '--spacing-20': spacing.spacing20,\n        '--spacing-24': spacing.spacing24,\n        '--spacing-32': spacing.spacing32,\n        '--spacing-48': spacing.spacing48,\n        '--spacing-64': spacing.spacing64,\n        '--spacing-80': spacing.spacing80,\n        '--spacing-96': spacing.spacing96,\n        '--spacing-128': spacing.spacing128,\n\n        '--box-shadow-none': shadows.none,\n        '--box-shadow-hard': shadows.hard,\n        '--box-shadow-soft': shadows.soft,\n\n        '--duration-50': motion.duration50,\n        '--duration-100': motion.duration100,\n        '--duration-150': motion.duration150,\n        '--duration-200': motion.duration200,\n        '--duration-250': motion.duration250,\n        '--duration-300': motion.duration300,\n        '--duration-350': motion.duration350,\n        '--duration-400': motion.duration400,\n        '--duration-500': motion.duration500,\n        '--duration-1500': motion.duration1500,\n        '--duration-2000': motion.duration2000,\n\n        '--timing-ease-in': motion.easeIn,\n        '--timing-ease-out': motion.easeOut,\n        '--timing-ease-in-out': motion.easeInOut,\n\n        '--layer-base': layers.base,\n        '--layer-dropdown': layers.dropdown,\n        '--layer-header': layers.header,\n        '--layer-modal': layers.modal,\n\n        '--border-width-none': borders.widthNone,\n        '--border-width-sm': borders.widthSm,\n        '--border-width-md': borders.widthMd,\n        '--border-width-xs': borders.widthXs,\n\n        '--border-radius-none': borders.radiusNone,\n        '--border-radius-default': borders.radiusDefault,\n        '--border-radius-sm': borders.radiusSm,\n        '--border-radius-lg': borders.radiusLg,\n        '--border-radius-full': borders.radiusFull,\n\n        '--screen-size-sm': breakpoints.breakpointSm,\n        '--screen-size-md': breakpoints.breakpointMd,\n        '--screen-size-lg': breakpoints.breakpointLg,\n        '--screen-size-xl': breakpoints.breakpointXl,\n\n        '--purple-100': colors.purple100,\n        '--purple-200': colors.purple200,\n        '--purple-300': colors.purple300,\n        '--purple-400': colors.purple400,\n        '--purple-500': colors.purple500,\n        '--purple-600': colors.purple600,\n        '--purple-700': colors.purple700,\n        '--purple-800': colors.purple800,\n        '--purple-850': colors.purple850,\n        '--purple-900': colors.purple900,\n\n        '--beige-50': colors.beige50,\n        '--beige-100': colors.beige100,\n        '--beige-200': colors.beige200,\n        '--beige-300': colors.beige300,\n        '--beige-400': colors.beige400,\n        '--beige-500': colors.beige500,\n        '--beige-600': colors.beige600,\n        '--beige-700': colors.beige700,\n        '--beige-800': colors.beige800,\n        '--beige-900': colors.beige900,\n\n        '--gray-50': colors.gray50,\n        '--gray-100': colors.gray100,\n        '--gray-200': colors.gray200,\n        '--gray-300': colors.gray300,\n        '--gray-400': colors.gray400,\n        '--gray-500': colors.gray500,\n        '--gray-600': colors.gray600,\n        '--gray-700': colors.gray700,\n        '--gray-800': colors.gray800,\n        '--gray-900': colors.gray900,\n\n        '--green-100': colors.green100,\n        '--green-200': colors.green200,\n        '--green-300': colors.green300,\n        '--green-400': colors.green400,\n        '--green-500': colors.green500,\n        '--green-600': colors.green600,\n        '--green-700': colors.green700,\n        '--green-800': colors.green800,\n        '--green-900': colors.green900,\n\n        '--red-100': colors.red100,\n        '--red-200': colors.red200,\n        '--red-300': colors.red300,\n        '--red-400': colors.red400,\n        '--red-500': colors.red500,\n        '--red-600': colors.red600,\n        '--red-700': colors.red700,\n        '--red-800': colors.red800,\n        '--red-900': colors.red900,\n\n        '--orange-100': colors.orange100,\n        '--orange-200': colors.orange200,\n        '--orange-300': colors.orange300,\n        '--orange-400': colors.orange400,\n        '--orange-500': colors.orange500,\n        '--orange-600': colors.orange600,\n        '--orange-700': colors.orange700,\n        '--orange-800': colors.orange800,\n        '--orange-900': colors.orange900,\n\n        '--blue-100': colors.blue100,\n        '--blue-200': colors.blue200,\n        '--blue-300': colors.blue300,\n        '--blue-400': colors.blue400,\n        '--blue-500': colors.blue500,\n        '--blue-600': colors.blue600,\n        '--blue-700': colors.blue700,\n        '--blue-800': colors.blue800,\n        '--blue-900': colors.blue900,\n\n        '--white': colors.white,\n        '--black': colors.black,\n        '--functional-black': colors.functionalBlack,\n\n        '--grid-gutter': grid.gutter,\n        '--grid-gutter-medium': grid.gutterMedium,\n        '--grid-gutter-large': grid.gutterLarge,\n        '--grid-page-padding': grid.pagePadding,\n        '--grid-page-padding-m': grid.pagePaddingM,\n        '--grid-page-padding-l': grid.pagePaddingL,\n        '--grid-page-padding-xl': grid.pagePaddingXl,\n\n        // The following are not available in JS variables for some reason\n        '--functional-transparent': 'transparent',\n        '--transparent-black-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-black-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-black-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-black-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-black-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-black-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-black-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-black-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-black-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-black-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-black-900': 'rgba(0, 0, 0, 0.9)',\n        '--transparent-white-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-white-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-white-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-white-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-white-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-white-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-white-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-white-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-white-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-white-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-white-900': 'rgba(0, 0, 0, 0.9)',\n\n        '--focus-border': `${focus.focusBorderWidth} solid ${focus.focusColor}`,\n    };\n\n    const variableString = Object.keys(variables)\n        .map((key) => `${key}:${variables[key]};`)\n        .join('');\n\n    element.innerHTML = `\n        :root {\n            ${variableString}\n        }\n    `;\n\n    if (!!existing) {\n        document.head.replaceChild(element, existing);\n        return;\n    }\n    return document.head.append(element);\n};\n"],"names":["addCssVariables","styleId","existing","element","variables","typography","spacing","shadows","motion","layers","borders","breakpoints","colors","grid","focus","variableString","key"],"mappings":";;AAeO,MAAMA,IAAkB,MAAM;AACjC,QAAMC,IAAU,8BACVC,IAAW,SAAS,eAAeD,CAAO,GAC1CE,IAAU,SAAS,cAAc,OAAO;AAC9C,EAAAA,EAAQ,KAAKF;AAEb,QAAMG,IAAoC;AAAA,IACtC,wBACI;AAAA,IACJ,qBAAqB;AAAA,IACrB,iBAAiBC,EAAW;AAAA,IAC5B,iBAAiBA,EAAW;AAAA,IAC5B,eAAeA,EAAW;AAAA,IAE1B,eAAeC,EAAQ;AAAA,IACvB,eAAeA,EAAQ;AAAA,IACvB,eAAeA,EAAQ;AAAA,IACvB,eAAeA,EAAQ;AAAA,IACvB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,iBAAiBA,EAAQ;AAAA,IAEzB,qBAAqBC,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAE7B,iBAAiBC,EAAO;AAAA,IACxB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,mBAAmBA,EAAO;AAAA,IAC1B,mBAAmBA,EAAO;AAAA,IAE1B,oBAAoBA,EAAO;AAAA,IAC3B,qBAAqBA,EAAO;AAAA,IAC5B,wBAAwBA,EAAO;AAAA,IAE/B,gBAAgBC,EAAO;AAAA,IACvB,oBAAoBA,EAAO;AAAA,IAC3B,kBAAkBA,EAAO;AAAA,IACzB,iBAAiBA,EAAO;AAAA,IAExB,uBAAuBC,EAAQ;AAAA,IAC/B,qBAAqBA,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAE7B,wBAAwBA,EAAQ;AAAA,IAChC,2BAA2BA,EAAQ;AAAA,IACnC,sBAAsBA,EAAQ;AAAA,IAC9B,sBAAsBA,EAAQ;AAAA,IAC9B,wBAAwBA,EAAQ;AAAA,IAEhC,oBAAoBC,EAAY;AAAA,IAChC,oBAAoBA,EAAY;AAAA,IAChC,oBAAoBA,EAAY;AAAA,IAChC,oBAAoBA,EAAY;AAAA,IAEhC,gBAAgBC,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IAEvB,cAAcA,EAAO;AAAA,IACrB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IAEtB,aAAaA,EAAO;AAAA,IACpB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IAErB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IAEtB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IAEpB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IAEvB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IAErB,WAAWA,EAAO;AAAA,IAClB,WAAWA,EAAO;AAAA,IAClB,sBAAsBA,EAAO;AAAA,IAE7B,iBAAiBC,EAAK;AAAA,IACtB,wBAAwBA,EAAK;AAAA,IAC7B,uBAAuBA,EAAK;AAAA,IAC5B,uBAAuBA,EAAK;AAAA,IAC5B,yBAAyBA,EAAK;AAAA,IAC9B,yBAAyBA,EAAK;AAAA,IAC9B,0BAA0BA,EAAK;AAAA,IAG/B,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,0BAA0B;AAAA,IAC1B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAE3B,kBAAkB,GAAGC,EAAM,0BAA0BA,EAAM;AAAA,EAAA,GAGzDC,IAAiB,OAAO,KAAKX,CAAS,EACvC,IAAI,CAACY,MAAQ,GAAGA,KAAOZ,EAAUY,KAAO,EACxC,KAAK,EAAE;AAQR,MANJb,EAAQ,YAAY;AAAA;AAAA,cAEVY;AAAA;AAAA,OAIJb,GAAU;AACH,aAAA,KAAK,aAAaC,GAASD,CAAQ;AAC5C;AAAA,EACJ;AACO,SAAA,SAAS,KAAK,OAAOC,CAAO;AACvC;"}
+{"version":3,"file":"index.js","sources":["../../src/voca/foundations/index.ts"],"sourcesContent":["import {\n    borders,\n    breakpoints,\n    colors,\n    grid,\n    layers,\n    motion,\n    shadows,\n    spacing,\n    typography,\n} from '@teliads/components/foundations';\nimport focus from '@teliads/components/foundations/focus/variables.json';\n\nexport { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography, focus };\n\nexport const addCssVariables = () => {\n    const styleId = 'voca-foundations-style-tag';\n    const existing = document.getElementById(styleId);\n    const element = document.createElement('style');\n    element.id = styleId;\n\n    const variables: Record<string, string> = {\n        '--font-telia-heading':\n            'TeliaSansHeading, TeliaSans, HelveticaNeue, Helvetica, Arial, sans-serif',\n        '--font-telia-sans': 'TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif',\n        '--font-normal': typography.weightNormal,\n        '--font-medium': typography.weightMedium,\n        '--font-bold': typography.weightBold,\n\n        '--spacing-0': spacing.spacing0,\n        '--spacing-2': spacing.spacing2,\n        '--spacing-4': spacing.spacing4,\n        '--spacing-8': spacing.spacing8,\n        '--spacing-12': spacing.spacing12,\n        '--spacing-16': spacing.spacing16,\n        '--spacing-20': spacing.spacing20,\n        '--spacing-24': spacing.spacing24,\n        '--spacing-32': spacing.spacing32,\n        '--spacing-48': spacing.spacing48,\n        '--spacing-64': spacing.spacing64,\n        '--spacing-80': spacing.spacing80,\n        '--spacing-96': spacing.spacing96,\n        '--spacing-128': spacing.spacing128,\n\n        '--box-shadow-none': shadows.none,\n        '--box-shadow-hard': shadows.hard,\n        '--box-shadow-soft': shadows.soft,\n\n        '--duration-50': motion.duration50,\n        '--duration-100': motion.duration100,\n        '--duration-150': motion.duration150,\n        '--duration-200': motion.duration200,\n        '--duration-250': motion.duration250,\n        '--duration-300': motion.duration300,\n        '--duration-350': motion.duration350,\n        '--duration-400': motion.duration400,\n        '--duration-500': motion.duration500,\n        '--duration-1500': motion.duration1500,\n        '--duration-2000': motion.duration2000,\n\n        '--timing-ease-in': motion.easeIn,\n        '--timing-ease-out': motion.easeOut,\n        '--timing-ease-in-out': motion.easeInOut,\n\n        '--layer-base': layers.base,\n        '--layer-dropdown': layers.dropdown,\n        '--layer-header': layers.header,\n        '--layer-modal': layers.modal,\n\n        '--border-width-none': borders.widthNone,\n        '--border-width-sm': borders.widthSm,\n        '--border-width-md': borders.widthMd,\n        '--border-width-xs': borders.widthXs,\n\n        '--border-radius-none': borders.radiusNone,\n        '--border-radius-default': borders.radiusDefault,\n        '--border-radius-sm': borders.radiusSm,\n        '--border-radius-lg': borders.radiusLg,\n        '--border-radius-full': borders.radiusFull,\n\n        '--screen-size-sm': breakpoints.breakpointSm,\n        '--screen-size-md': breakpoints.breakpointMd,\n        '--screen-size-lg': breakpoints.breakpointLg,\n        '--screen-size-xl': breakpoints.breakpointXl,\n\n        '--purple-100': colors.purple100,\n        '--purple-200': colors.purple200,\n        '--purple-300': colors.purple300,\n        '--purple-400': colors.purple400,\n        '--purple-500': colors.purple500,\n        '--purple-600': colors.purple600,\n        '--purple-700': colors.purple700,\n        '--purple-800': colors.purple800,\n        '--purple-850': colors.purple850,\n        '--purple-900': colors.purple900,\n\n        '--beige-50': colors.beige50,\n        '--beige-100': colors.beige100,\n        '--beige-200': colors.beige200,\n        '--beige-300': colors.beige300,\n        '--beige-400': colors.beige400,\n        '--beige-500': colors.beige500,\n        '--beige-600': colors.beige600,\n        '--beige-700': colors.beige700,\n        '--beige-800': colors.beige800,\n        '--beige-900': colors.beige900,\n\n        '--gray-50': colors.gray50,\n        '--gray-100': colors.gray100,\n        '--gray-200': colors.gray200,\n        '--gray-300': colors.gray300,\n        '--gray-400': colors.gray400,\n        '--gray-500': colors.gray500,\n        '--gray-600': colors.gray600,\n        '--gray-700': colors.gray700,\n        '--gray-800': colors.gray800,\n        '--gray-900': colors.gray900,\n\n        '--green-100': colors.green100,\n        '--green-200': colors.green200,\n        '--green-300': colors.green300,\n        '--green-400': colors.green400,\n        '--green-500': colors.green500,\n        '--green-600': colors.green600,\n        '--green-700': colors.green700,\n        '--green-800': colors.green800,\n        '--green-900': colors.green900,\n\n        '--red-100': colors.red100,\n        '--red-200': colors.red200,\n        '--red-300': colors.red300,\n        '--red-400': colors.red400,\n        '--red-500': colors.red500,\n        '--red-600': colors.red600,\n        '--red-700': colors.red700,\n        '--red-800': colors.red800,\n        '--red-900': colors.red900,\n\n        '--orange-100': colors.orange100,\n        '--orange-200': colors.orange200,\n        '--orange-300': colors.orange300,\n        '--orange-400': colors.orange400,\n        '--orange-500': colors.orange500,\n        '--orange-600': colors.orange600,\n        '--orange-700': colors.orange700,\n        '--orange-800': colors.orange800,\n        '--orange-900': colors.orange900,\n\n        '--blue-100': colors.blue100,\n        '--blue-200': colors.blue200,\n        '--blue-300': colors.blue300,\n        '--blue-400': colors.blue400,\n        '--blue-500': colors.blue500,\n        '--blue-600': colors.blue600,\n        '--blue-700': colors.blue700,\n        '--blue-800': colors.blue800,\n        '--blue-900': colors.blue900,\n\n        '--white': colors.white,\n        '--black': colors.black,\n        '--functional-black': colors.functionalBlack,\n\n        '--grid-gutter': grid.gutter,\n        '--grid-gutter-medium': grid.gutterMedium,\n        '--grid-gutter-large': grid.gutterLarge,\n        '--grid-page-padding': grid.pagePadding,\n        '--grid-page-padding-m': grid.pagePaddingM,\n        '--grid-page-padding-l': grid.pagePaddingL,\n        '--grid-page-padding-xl': grid.pagePaddingXl,\n\n        // The following are not available in JS variables for some reason\n        '--functional-transparent': 'transparent',\n        '--transparent-black-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-black-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-black-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-black-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-black-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-black-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-black-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-black-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-black-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-black-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-black-900': 'rgba(0, 0, 0, 0.9)',\n        '--transparent-white-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-white-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-white-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-white-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-white-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-white-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-white-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-white-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-white-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-white-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-white-900': 'rgba(0, 0, 0, 0.9)',\n\n        '--focus-border': `${focus.focusBorderWidth} solid ${focus.focusColor}`,\n    };\n\n    const variableString = Object.keys(variables)\n        .map((key) => `${key}:${variables[key]};`)\n        .join('');\n\n    element.innerHTML = `\n        :root {\n            ${variableString}\n        }\n    `;\n\n    if (!!existing) {\n        document.head.replaceChild(element, existing);\n        return;\n    }\n    return document.head.append(element);\n};\n"],"names":["addCssVariables","styleId","existing","element","variables","typography","spacing","shadows","motion","layers","borders","breakpoints","colors","grid","focus","variableString","key"],"mappings":";AAeO,MAAMA,IAAkB,MAAM;AACjC,QAAMC,IAAU,8BACVC,IAAW,SAAS,eAAeD,CAAO,GAC1CE,IAAU,SAAS,cAAc,OAAO;AAC9C,EAAAA,EAAQ,KAAKF;AAEb,QAAMG,IAAoC;AAAA,IACtC,wBACI;AAAA,IACJ,qBAAqB;AAAA,IACrB,iBAAiBC,EAAW;AAAA,IAC5B,iBAAiBA,EAAW;AAAA,IAC5B,eAAeA,EAAW;AAAA,IAE1B,eAAeC,EAAQ;AAAA,IACvB,eAAeA,EAAQ;AAAA,IACvB,eAAeA,EAAQ;AAAA,IACvB,eAAeA,EAAQ;AAAA,IACvB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,gBAAgBA,EAAQ;AAAA,IACxB,iBAAiBA,EAAQ;AAAA,IAEzB,qBAAqBC,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAE7B,iBAAiBC,EAAO;AAAA,IACxB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,kBAAkBA,EAAO;AAAA,IACzB,mBAAmBA,EAAO;AAAA,IAC1B,mBAAmBA,EAAO;AAAA,IAE1B,oBAAoBA,EAAO;AAAA,IAC3B,qBAAqBA,EAAO;AAAA,IAC5B,wBAAwBA,EAAO;AAAA,IAE/B,gBAAgBC,EAAO;AAAA,IACvB,oBAAoBA,EAAO;AAAA,IAC3B,kBAAkBA,EAAO;AAAA,IACzB,iBAAiBA,EAAO;AAAA,IAExB,uBAAuBC,EAAQ;AAAA,IAC/B,qBAAqBA,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAC7B,qBAAqBA,EAAQ;AAAA,IAE7B,wBAAwBA,EAAQ;AAAA,IAChC,2BAA2BA,EAAQ;AAAA,IACnC,sBAAsBA,EAAQ;AAAA,IAC9B,sBAAsBA,EAAQ;AAAA,IAC9B,wBAAwBA,EAAQ;AAAA,IAEhC,oBAAoBC,EAAY;AAAA,IAChC,oBAAoBA,EAAY;AAAA,IAChC,oBAAoBA,EAAY;AAAA,IAChC,oBAAoBA,EAAY;AAAA,IAEhC,gBAAgBC,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IAEvB,cAAcA,EAAO;AAAA,IACrB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IAEtB,aAAaA,EAAO;AAAA,IACpB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IAErB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IACtB,eAAeA,EAAO;AAAA,IAEtB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IACpB,aAAaA,EAAO;AAAA,IAEpB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IACvB,gBAAgBA,EAAO;AAAA,IAEvB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IACrB,cAAcA,EAAO;AAAA,IAErB,WAAWA,EAAO;AAAA,IAClB,WAAWA,EAAO;AAAA,IAClB,sBAAsBA,EAAO;AAAA,IAE7B,iBAAiBC,EAAK;AAAA,IACtB,wBAAwBA,EAAK;AAAA,IAC7B,uBAAuBA,EAAK;AAAA,IAC5B,uBAAuBA,EAAK;AAAA,IAC5B,yBAAyBA,EAAK;AAAA,IAC9B,yBAAyBA,EAAK;AAAA,IAC9B,0BAA0BA,EAAK;AAAA;AAAA,IAG/B,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,0BAA0B;AAAA,IAC1B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAC3B,2BAA2B;AAAA,IAE3B,kBAAkB,GAAGC,EAAM,0BAA0BA,EAAM;AAAA,EAAA,GAGzDC,IAAiB,OAAO,KAAKX,CAAS,EACvC,IAAI,CAACY,MAAQ,GAAGA,KAAOZ,EAAUY,CAAG,IAAI,EACxC,KAAK,EAAE;AAQR,MANJb,EAAQ,YAAY;AAAA;AAAA,cAEVY;AAAA;AAAA,OAIJb,GAAU;AACH,aAAA,KAAK,aAAaC,GAASD,CAAQ;AAC5C;AAAA,EACJ;AACO,SAAA,SAAS,KAAK,OAAOC,CAAO;AACvC;"}