@milaboratories/uikit 2.15.36 → 2.15.38

package/dist/components/PlTabs/PlTabs.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTabs/PlTabs.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlTabs\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string\">\nimport style from \"./pl-tabs.module.scss\";\nimport type { TabOption } from \"./types\";\nimport Tab from \"./Tab.vue\";\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M): void;\n}>();\n\nconst emitModel = (v: M) => emit(\"update:modelValue\", v);\n\ndefineProps<{\n  /**\n   * The current selected tab value.\n   */\n  modelValue?: M;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<TabOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the `active` line appears on the top of element.\n   */\n  topLine?: boolean;\n  /**\n   * Maximum tab width (css value), can be overridden for each option\n   */\n  maxTabWidth?: string;\n}>();\n</script>\n\n<template>\n  <div :class=\"[style.component, { [style.disabled]: disabled, [style.topLine]: topLine }]\">\n    <Tab\n      v-for=\"(opt, i) in options\"\n      :key=\"i\"\n      :tabindex=\"modelValue === opt.value || disabled || opt.disabled ? undefined : 0\"\n      :option=\"opt\"\n      :class=\"[\n        { [style.active]: modelValue === opt.value, [style.disabled]: opt.disabled },\n        style.tab,\n      ]\"\n      :style=\"{ '--pl-tabs-item-max-width': opt.maxWidth ?? maxTabWidth }\"\n      @keydown.enter=\"emitModel(opt.value)\"\n      @click=\"emitModel(opt.value)\"\n    >\n      <slot :name=\"opt.value\" :option=\"opt\">\n        <span>{{ opt.label }}</span>\n      </slot>\n    </Tab>\n  </div>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAO,GAOP,KAAa,MAAS,EAAK,qBAAqB,EAAE;yBA2BtD,EAkBM,OAAA,EAlBA,OAAK,EAAA,CAAG,EAAA,EAAK,CAAC,WAAS;IAAK,EAAA,EAAK,CAAC,WAAW,EAAA;IAAW,EAAA,EAAK,CAAC,UAAU,EAAA;GAAO,CAAA,CAAA,EAAA,EAAA,EAAA,EAAA,GAAA,EACnF,EAgBM,GAAA,MAAA,EAfe,EAAA,UAAX,GAAK,YADf,EAgBM,GAAA;GAdH,KAAK;GACL,UAAU,EAAA,eAAe,EAAI,SAAS,EAAA,YAAY,EAAI,WAAW,KAAA,IAAS;GAC1E,QAAQ;GACR,OAAK,EAAA,CAAA;KAAe,EAAA,EAAK,CAAC,SAAS,EAAA,eAAe,EAAI;KAAQ,EAAA,EAAK,CAAC,WAAW,EAAI;IAAQ,EAAY,EAAA,EAAK,CAAC,IAAA,CAAA;GAI7G,OAAK,EAAA,EAAA,4BAAgC,EAAI,YAAY,EAAA,aAAW,CAAA;GAChE,WAAO,GAAA,MAAQ,EAAU,EAAI,MAAK,EAAA,CAAA,QAAA,CAAA;GAClC,UAAK,MAAE,EAAU,EAAI,MAAK;;oBAIpB,CAFP,EAEO,EAAA,QAFM,EAAI,OAAK,EAAG,QAAQ,GAAG,QAE7B,CADL,EAA4B,QAAA,MAAA,EAAnB,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"PlTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTabs/PlTabs.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlTabs\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string\">\nimport style from \"./pl-tabs.module.scss\";\nimport type { TabOption } from \"./types\";\nimport Tab from \"./Tab.vue\";\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M): void;\n}>();\n\nconst emitModel = (v: M) => emit(\"update:modelValue\", v);\n\ndefineProps<{\n  /**\n   * The current selected tab value.\n   */\n  modelValue?: M;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<TabOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the `active` line appears on the top of element.\n   */\n  topLine?: boolean;\n  /**\n   * Maximum tab width (css value), can be overridden for each option\n   */\n  maxTabWidth?: string;\n}>();\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-tabs\"\n    :class=\"[style.component, { [style.disabled]: disabled, [style.topLine]: topLine }]\"\n  >\n    <Tab\n      v-for=\"(opt, i) in options\"\n      :key=\"i\"\n      data-testid=\"pl-tabs-tab\"\n      :tabindex=\"modelValue === opt.value || disabled || opt.disabled ? undefined : 0\"\n      :option=\"opt\"\n      :class=\"[\n        { [style.active]: modelValue === opt.value, [style.disabled]: opt.disabled },\n        style.tab,\n      ]\"\n      :style=\"{ '--pl-tabs-item-max-width': opt.maxWidth ?? maxTabWidth }\"\n      @keydown.enter=\"emitModel(opt.value)\"\n      @click=\"emitModel(opt.value)\"\n    >\n      <slot :name=\"opt.value\" :option=\"opt\">\n        <span data-testid=\"pl-tabs-tab-label\">{{ opt.label }}</span>\n      </slot>\n    </Tab>\n  </div>\n</template>\n"],"mappings":";;;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAO,GAOP,KAAa,MAAS,EAAK,qBAAqB,EAAE;yBA2BtD,EAsBM,OAAA;GArBJ,eAAY;GACX,OAAK,EAAA,CAAG,EAAA,EAAK,CAAC,WAAS;KAAK,EAAA,EAAK,CAAC,WAAW,EAAA;KAAW,EAAA,EAAK,CAAC,UAAU,EAAA;IAAO,CAAA,CAAA;cAEhF,EAiBM,GAAA,MAAA,EAhBe,EAAA,UAAX,GAAK,YADf,EAiBM,GAAA;GAfH,KAAK;GACN,eAAY;GACX,UAAU,EAAA,eAAe,EAAI,SAAS,EAAA,YAAY,EAAI,WAAW,KAAA,IAAS;GAC1E,QAAQ;GACR,OAAK,EAAA,CAAA;KAAe,EAAA,EAAK,CAAC,SAAS,EAAA,eAAe,EAAI;KAAQ,EAAA,EAAK,CAAC,WAAW,EAAI;IAAQ,EAAY,EAAA,EAAK,CAAC,IAAA,CAAA;GAI7G,OAAK,EAAA,EAAA,4BAAgC,EAAI,YAAY,EAAA,aAAW,CAAA;GAChE,WAAO,GAAA,MAAQ,EAAU,EAAI,MAAK,EAAA,CAAA,QAAA,CAAA;GAClC,UAAK,MAAE,EAAU,EAAI,MAAK;;oBAIpB,CAFP,EAEO,EAAA,QAFM,EAAI,OAAK,EAAG,QAAQ,GAAG,QAE7B,CADL,EAA4D,QAA5D,GAA4D,EAAnB,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/PlTextArea/PlTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextArea.js","names":[],"sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation */\nexport default {\n  name: \"PlTextArea\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-textarea.scss\";\nimport { computed, onMounted, ref, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst props = defineProps<{\n  /**\n   * The current value of the texarea.\n   */\n  modelValue?: string;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * If `true`, the textarea is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the textarea.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the textarea when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the textarea when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the textarea is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n   */\n  readonly?: boolean;\n  /**\n   * If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n   */\n  dashed?: boolean;\n  /**\n   * The number of visible text lines for the textarea, which controls the height of the textarea.\n   */\n  rows?: number;\n  /**\n   * If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n   */\n  autogrow?: boolean;\n  /**\n   * An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n   */\n  rules?: ((v: string) => boolean | string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n  get() {\n    return props.modelValue ?? \"\";\n  },\n  set(v) {\n    emit(\"update:modelValue\", v);\n  },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules || []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n\n  if (propsError) {\n    errors.push(propsError);\n  }\n\n  errors.push(...validationData.value.errors);\n\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n  if (!props.autogrow) {\n    return;\n  }\n  const el = input.value;\n  if (el) {\n    el.style.height = \"auto\"; // it works, do not delete it\n    el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n  }\n};\n\nonMounted(() => {\n  adjustHeight();\n});\n</script>\n\n<template>\n  <div class=\"ui-text-area__envelope\">\n    <div ref=\"root\" class=\"ui-text-area\" :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\">\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <textarea\n        ref=\"input\"\n        v-model=\"value\"\n        :readonly=\"readonly\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder ?? '...'\"\n        spellcheck=\"false\"\n        @input=\"adjustHeight\"\n      />\n      <div class=\"ui-text-area__append\">\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"ui-text-area__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"ui-text-area__error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-text-area__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlTextArea.js","names":[],"sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation */\nexport default {\n  name: \"PlTextArea\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-textarea.scss\";\nimport { computed, onMounted, ref, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst props = defineProps<{\n  /**\n   * The current value of the texarea.\n   */\n  modelValue?: string;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * If `true`, the textarea is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the textarea.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the textarea when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the textarea when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the textarea is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n   */\n  readonly?: boolean;\n  /**\n   * If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n   */\n  dashed?: boolean;\n  /**\n   * The number of visible text lines for the textarea, which controls the height of the textarea.\n   */\n  rows?: number;\n  /**\n   * If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n   */\n  autogrow?: boolean;\n  /**\n   * An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n   */\n  rules?: ((v: string) => boolean | string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n  get() {\n    return props.modelValue ?? \"\";\n  },\n  set(v) {\n    emit(\"update:modelValue\", v);\n  },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules || []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n\n  if (propsError) {\n    errors.push(propsError);\n  }\n\n  errors.push(...validationData.value.errors);\n\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n  if (!props.autogrow) {\n    return;\n  }\n  const el = input.value;\n  if (el) {\n    el.style.height = \"auto\"; // it works, do not delete it\n    el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n  }\n};\n\nonMounted(() => {\n  adjustHeight();\n});\n</script>\n\n<template>\n  <div class=\"ui-text-area__envelope\" data-testid=\"pl-text-area\">\n    <div\n      ref=\"root\"\n      class=\"ui-text-area\"\n      :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\"\n      data-testid=\"pl-text-area-control\"\n    >\n      <label v-if=\"label\" ref=\"label\" data-testid=\"pl-text-area-label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-text-area-required\" />\n        <span>{{ label }}</span>\n        <PlTooltip\n          v-if=\"slots.tooltip\"\n          class=\"info\"\n          position=\"top\"\n          data-testid=\"pl-text-area-tooltip\"\n        >\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <textarea\n        ref=\"input\"\n        v-model=\"value\"\n        :readonly=\"readonly\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder ?? '...'\"\n        spellcheck=\"false\"\n        data-testid=\"pl-text-area-input\"\n        @input=\"adjustHeight\"\n      />\n      <div class=\"ui-text-area__append\" data-testid=\"pl-text-area-append\">\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"ui-text-area__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"ui-text-area__error\" data-testid=\"pl-text-area-error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-text-area__helper\" data-testid=\"pl-text-area-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlTextArea/PlTextArea.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"names":[],"mappings":"AAkKA,OAAO,oBAAoB,CAAC;AAW5B,wDAAwD;wBACnC,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAYhB;;OAEG;iBACU,MAAM;IACnB;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;WACI,MAAM;IACb;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;;;;IA/C3C;;OAEG;iBACU,MAAM;IACnB;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;WACI,MAAM;IACb;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;;;;cAoL/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAcxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"names":[],"mappings":"AA+KA,OAAO,oBAAoB,CAAC;AAW5B,wDAAwD;wBACnC,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAYhB;;OAEG;iBACU,MAAM;IACnB;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;WACI,MAAM;IACb;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;;;;IA/C3C;;OAEG;iBACU,MAAM;IACnB;;OAEG;YACK,MAAM;IACd;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,OAAO;IACf;;OAEG;aACM,MAAM;IACf;;OAEG;kBACW,MAAM;IACpB;;OAEG;eACQ,OAAO;IAClB;;OAEG;eACQ,OAAO;IAClB;;OAEG;aACM,OAAO;IAChB;;OAEG;WACI,MAAM;IACb;;OAEG;eACQ,OAAO;IAClB;;OAEG;YACK,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,GAAG,MAAM,CAAC,EAAE;;;;cA+L/B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAcxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlTextArea/PlTextArea.vue2.js

@@ -10,20 +10,29 @@ import './pl-textarea.css';/* empty css            */
 import { useValidation as o } from "../../utils/useValidation.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, onMounted as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, vModelText as S, withCtx as C, withDirectives as w } from "vue";
 //#region src/components/PlTextArea/PlTextArea.vue?vue&type=script&setup=true&lang.ts
-var T = { class: "ui-text-area__envelope" }, E = {
+var T = {
+	class: "ui-text-area__envelope",
+	"data-testid": "pl-text-area"
+}, E = {
 	key: 0,
-	ref: "label"
+	ref: "label",
+	"data-testid": "pl-text-area-label"
 }, D = [
 	"readonly",
 	"rows",
 	"disabled",
 	"placeholder"
-], O = { class: "ui-text-area__append" }, k = {
+], O = {
+	class: "ui-text-area__append",
+	"data-testid": "pl-text-area-append"
+}, k = {
 	key: 0,
-	class: "ui-text-area__error"
+	class: "ui-text-area__error",
+	"data-testid": "pl-text-area-error"
 }, A = {
 	key: 1,
-	class: "ui-text-area__helper"
+	class: "ui-text-area__helper",
+	"data-testid": "pl-text-area-helper"
 }, j = /* @__PURE__ */ p({
 	name: "PlTextArea",
 	props: {
@@ -69,18 +78,21 @@ var T = { class: "ui-text-area__envelope" }, E = {
 				disabled: p.disabled,
 				dashed: p.dashed,
 				nonEmpty: R.value
-			}])
+			}]),
+			"data-testid": "pl-text-area-control"
 		}, [
 			p.label ? (g(), u("label", E, [
 				p.required ? (g(), c(b(n), {
 					key: 0,
-					uri: b(a)
+					uri: b(a),
+					"data-testid": "pl-text-area-required"
 				}, null, 8, ["uri"])) : l("", !0),
 				d("span", null, y(p.label), 1),
 				b(M).tooltip ? (g(), c(b(e), {
 					key: 1,
 					class: "info",
-					position: "top"
+					position: "top",
+					"data-testid": "pl-text-area-tooltip"
 				}, {
 					tooltip: C(() => [v(t.$slots, "tooltip")]),
 					_: 3
@@ -95,6 +107,7 @@ var T = { class: "ui-text-area__envelope" }, E = {
 				disabled: p.disabled,
 				placeholder: p.placeholder ?? "...",
 				spellcheck: "false",
+				"data-testid": "pl-text-area-input",
 				onInput: H
 			}, null, 40, D), [[S, L.value]]),
 			d("div", O, [v(t.$slots, "append")]),

package/dist/components/PlTextArea/PlTextArea.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation */\nexport default {\n  name: \"PlTextArea\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-textarea.scss\";\nimport { computed, onMounted, ref, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst props = defineProps<{\n  /**\n   * The current value of the texarea.\n   */\n  modelValue?: string;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * If `true`, the textarea is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the textarea.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the textarea when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the textarea when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the textarea is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n   */\n  readonly?: boolean;\n  /**\n   * If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n   */\n  dashed?: boolean;\n  /**\n   * The number of visible text lines for the textarea, which controls the height of the textarea.\n   */\n  rows?: number;\n  /**\n   * If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n   */\n  autogrow?: boolean;\n  /**\n   * An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n   */\n  rules?: ((v: string) => boolean | string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n  get() {\n    return props.modelValue ?? \"\";\n  },\n  set(v) {\n    emit(\"update:modelValue\", v);\n  },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules || []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n\n  if (propsError) {\n    errors.push(propsError);\n  }\n\n  errors.push(...validationData.value.errors);\n\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n  if (!props.autogrow) {\n    return;\n  }\n  const el = input.value;\n  if (el) {\n    el.style.height = \"auto\"; // it works, do not delete it\n    el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n  }\n};\n\nonMounted(() => {\n  adjustHeight();\n});\n</script>\n\n<template>\n  <div class=\"ui-text-area__envelope\">\n    <div ref=\"root\" class=\"ui-text-area\" :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\">\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <textarea\n        ref=\"input\"\n        v-model=\"value\"\n        :readonly=\"readonly\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder ?? '...'\"\n        spellcheck=\"false\"\n        @input=\"adjustHeight\"\n      />\n      <div class=\"ui-text-area__append\">\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"ui-text-area__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"ui-text-area__error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-text-area__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;CAGE,MAAM;;;;;;;;;;;;;;;;;EAeR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,IAAQ,GAmDR,IAAO,GAAuB,EAC9B,IAAQ,GAA0B,EAElC,IAAQ,EAAS;GACrB,MAAM;AACJ,WAAO,EAAM,cAAc;;GAE7B,IAAI,GAAG;AACL,MAAK,qBAAqB,EAAE;;GAE/B,CAAC,EAEI,IAAW,QAAe,CAAC,CAAC,EAAM,WAAW,EAC7C,IAAiB,EAAc,GAAO,EAAM,SAAS,EAAE,CAAC;AAE9D,IAAc,EAAK;EAEnB,IAAM,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAQ/C,UANI,KACF,EAAO,KAAK,EAAW,EAGzB,EAAO,KAAK,GAAG,EAAe,MAAM,OAAO,EAEpC;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,UAAqB;AACzB,OAAI,CAAC,EAAM,SACT;GAEF,IAAM,IAAK,EAAM;AACjB,GAAI,MACF,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;SAIzC,QAAgB;AACd,MAAc;IACd,kBAIA,EA8BM,OA9BN,GA8BM,CA7BJ,EAwBM,OAAA;YAxBG;GAAJ,KAAI;GAAO,OAAK,EAAA,CAAC,gBAAc;IAAA,OAAkB,EAAA;IAAS,UAAE,EAAA;IAAQ,QAAE,EAAA;IAAM,UAAE,EAAA;IAAQ,CAAA,CAAA;;GAC5E,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;KAI7B,EASE,YAAA;aARI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,MAAM,EAAA;IACN,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACzB,YAAW;IACV,SAAO;yBANC,EAAA,MAAK,CAAA,CAAA;GAQhB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA;GAExB,EAA+C,GAAA,EAAhC,OAAM,yBAAuB,CAAA;SAEnC,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAuE,OAAvE,GAAuE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"PlTextArea.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextArea/PlTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Component for multi-line string data manipulation */\nexport default {\n  name: \"PlTextArea\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-textarea.scss\";\nimport { computed, onMounted, ref, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { useValidation } from \"../../utils/useValidation\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { PlSvg } from \"../PlSvg\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\n\nconst slots = useSlots();\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: string): void;\n}>();\n\nconst props = defineProps<{\n  /**\n   * The current value of the texarea.\n   */\n  modelValue?: string;\n  /**\n   * The label to display above the texarea.\n   */\n  label?: string;\n  /**\n   * If `true`, the textarea is marked as required.\n   */\n  required?: boolean;\n  /**\n   * An error message to display below the textarea.\n   */\n  error?: unknown;\n  /**\n   * A helper text to display below the textarea when there are no errors.\n   */\n  helper?: string;\n  /**\n   * A placeholder text to display inside the textarea when it is empty.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the textarea is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the textarea is in a read-only state and cannot be edited, but it can still be focused and text can be selected.\n   */\n  readonly?: boolean;\n  /**\n   * If `true`, applies a dashed border style to the textarea, likely used for stylistic purposes or to indicate a certain state.\n   */\n  dashed?: boolean;\n  /**\n   * The number of visible text lines for the textarea, which controls the height of the textarea.\n   */\n  rows?: number;\n  /**\n   * If `true`, the textarea automatically adjusts its height to fit the content as the user types.\n   */\n  autogrow?: boolean;\n  /**\n   * An array of validation rules that are applied to the textarea input. Each rule is a function that receives the input value and returns `true` for valid input or an error message string for invalid input.\n   */\n  rules?: ((v: string) => boolean | string)[];\n}>();\n\nconst root = ref<HTMLInputElement>();\nconst input = ref<HTMLTextAreaElement>();\n\nconst value = computed({\n  get() {\n    return props.modelValue ?? \"\";\n  },\n  set(v) {\n    emit(\"update:modelValue\", v);\n  },\n});\n\nconst nonEmpty = computed(() => !!props.modelValue);\nconst validationData = useValidation(value, props.rules || []);\n\nuseLabelNotch(root);\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n\n  if (propsError) {\n    errors.push(propsError);\n  }\n\n  errors.push(...validationData.value.errors);\n\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst adjustHeight = () => {\n  if (!props.autogrow) {\n    return;\n  }\n  const el = input.value;\n  if (el) {\n    el.style.height = \"auto\"; // it works, do not delete it\n    el.style.height = `${el.scrollHeight}px`; // Set height based on scrollHeight\n  }\n};\n\nonMounted(() => {\n  adjustHeight();\n});\n</script>\n\n<template>\n  <div class=\"ui-text-area__envelope\" data-testid=\"pl-text-area\">\n    <div\n      ref=\"root\"\n      class=\"ui-text-area\"\n      :class=\"{ error: hasErrors, disabled, dashed, nonEmpty }\"\n      data-testid=\"pl-text-area-control\"\n    >\n      <label v-if=\"label\" ref=\"label\" data-testid=\"pl-text-area-label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-text-area-required\" />\n        <span>{{ label }}</span>\n        <PlTooltip\n          v-if=\"slots.tooltip\"\n          class=\"info\"\n          position=\"top\"\n          data-testid=\"pl-text-area-tooltip\"\n        >\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <textarea\n        ref=\"input\"\n        v-model=\"value\"\n        :readonly=\"readonly\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder ?? '...'\"\n        spellcheck=\"false\"\n        data-testid=\"pl-text-area-input\"\n        @input=\"adjustHeight\"\n      />\n      <div class=\"ui-text-area__append\" data-testid=\"pl-text-area-append\">\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"ui-text-area__contour\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"ui-text-area__error\" data-testid=\"pl-text-area-error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"ui-text-area__helper\" data-testid=\"pl-text-area-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGE,MAAM;;;;;;;;;;;;;;;;;EAeR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,IAAQ,GAmDR,IAAO,GAAuB,EAC9B,IAAQ,GAA0B,EAElC,IAAQ,EAAS;GACrB,MAAM;AACJ,WAAO,EAAM,cAAc;;GAE7B,IAAI,GAAG;AACL,MAAK,qBAAqB,EAAE;;GAE/B,CAAC,EAEI,IAAW,QAAe,CAAC,CAAC,EAAM,WAAW,EAC7C,IAAiB,EAAc,GAAO,EAAM,SAAS,EAAE,CAAC;AAE9D,IAAc,EAAK;EAEnB,IAAM,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAQ/C,UANI,KACF,EAAO,KAAK,EAAW,EAGzB,EAAO,KAAK,GAAG,EAAe,MAAM,OAAO,EAEpC;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,UAAqB;AACzB,OAAI,CAAC,EAAM,SACT;GAEF,IAAM,IAAK,EAAM;AACjB,GAAI,MACF,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;SAIzC,QAAgB;AACd,MAAc;IACd,kBAIA,EA2CM,OA3CN,GA2CM,CA1CJ,EAmCM,OAAA;YAlCA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,gBAAc;IAAA,OACH,EAAA;IAAS,UAAE,EAAA;IAAQ,QAAE,EAAA;IAAM,UAAE,EAAA;IAAQ,CAAA,CAAA;GACtD,eAAY;;GAEC,EAAA,SAAA,GAAA,EAAb,EAaQ,SAbR,GAaQ;IAZO,EAAA,YAAA,GAAA,EAAb,EAAgF,EAAA,EAAA,EAAA;;KAAxD,KAAK,EAAA,EAAW;KAAE,eAAY;;IACtD,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IAEN,EAAA,EAAK,CAAC,WAAA,GAAA,EADd,EASY,EAAA,EAAA,EAAA;;KAPV,OAAM;KACN,UAAS;KACT,eAAY;;KAED,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;KAI7B,EAUE,YAAA;aATI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,MAAM,EAAA;IACN,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACzB,YAAW;IACX,eAAY;IACX,SAAO;yBAPC,EAAA,MAAK,CAAA,CAAA;GAShB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA;GAExB,EAA+C,GAAA,EAAhC,OAAM,yBAAuB,CAAA;SAEnC,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/components/PlTextField/PlTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: \"PlTextField\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"\n    R extends true | false,\n    V extends undefined | string,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport { computed, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<V>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /** The string specifies whether the field should be a password or not, value could be \"password\" or undefined. */\n  type?: \"password\";\n  /** The label to display above the input field. */\n  label?: string;\n  /** If `true`, the input field is marked as required and will show an error if left empty. */\n  required?: BooleanProp<R>;\n  /** An error message to display below the input field. */\n  error?: unknown;\n  /** A helper text to display below the input field when there are no errors. */\n  helper?: string;\n  /** A placeholder text to display inside the input field when it is empty. */\n  placeholder?: string;\n  /** If `true`, the input field is disabled and cannot be interacted with. */\n  disabled?: boolean;\n  /** If `true`, the input field has a dashed border. */\n  dashed?: boolean;\n  /** A prefix text to display inside the input field before the value. */\n  prefix?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * If a function, calls it to get the reset value.\n   */\n  clearable?: BooleanPropUnless<R> | (() => C);\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: V) => string | undefined;\n  /** Makes some of corners not rounded */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === \"password\") {\n    return showPassword.value ? \"text\" : props.type;\n  } else {\n    return \"text\";\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n\nconst isEmpty = computed(() => model.value === \"\");\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (props.validate) {\n    const error = props.validate(model.value as V);\n    if (error) {\n      errors.push(error);\n    }\n  }\n  if (props.required && isEmpty.value) {\n    errors.push(\"Value is required\");\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty: !isEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlTextField.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: \"PlTextField\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"\n    R extends true | false,\n    V extends undefined | string,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport { computed, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<V>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /** The string specifies whether the field should be a password or not, value could be \"password\" or undefined. */\n  type?: \"password\";\n  /** The label to display above the input field. */\n  label?: string;\n  /** If `true`, the input field is marked as required and will show an error if left empty. */\n  required?: BooleanProp<R>;\n  /** An error message to display below the input field. */\n  error?: unknown;\n  /** A helper text to display below the input field when there are no errors. */\n  helper?: string;\n  /** A placeholder text to display inside the input field when it is empty. */\n  placeholder?: string;\n  /** If `true`, the input field is disabled and cannot be interacted with. */\n  disabled?: boolean;\n  /** If `true`, the input field has a dashed border. */\n  dashed?: boolean;\n  /** A prefix text to display inside the input field before the value. */\n  prefix?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * If a function, calls it to get the reset value.\n   */\n  clearable?: BooleanPropUnless<R> | (() => C);\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: V) => string | undefined;\n  /** Makes some of corners not rounded */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === \"password\") {\n    return showPassword.value ? \"text\" : props.type;\n  } else {\n    return \"text\";\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n\nconst isEmpty = computed(() => model.value === \"\");\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (props.validate) {\n    const error = props.validate(model.value as V);\n    if (error) {\n      errors.push(error);\n    }\n  }\n  if (props.required && isEmpty.value) {\n    errors.push(\"Value is required\");\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\" data-testid=\"pl-text-field\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      data-testid=\"pl-text-field-control\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty: !isEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\" data-testid=\"pl-text-field-label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-text-field-required\" />\n        <span>{{ label }}</span>\n        <PlTooltip\n          v-if=\"slots.tooltip\"\n          class=\"info\"\n          position=\"top\"\n          data-testid=\"pl-text-field-tooltip\"\n        >\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\" data-testid=\"pl-text-field-prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        data-testid=\"pl-text-field-input\"\n      />\n      <div\n        class=\"pl-text-field__append\"\n        data-testid=\"pl-text-field-append\"\n        @click=\"setFocusOnInput\"\n      >\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          data-testid=\"pl-text-field-clear\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          data-testid=\"pl-text-field-password-toggle\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\" data-testid=\"pl-text-field-error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\" data-testid=\"pl-text-field-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlTextField/PlTextField.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AAmMA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAM/E,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GACd,CAAC,SAAS,IAAI,GAAG,KAAK,EACtB,CAAC,SAAS,SAAS,GAAG,MAAM,EAC5B,CAAC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,EAE/D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAiUO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAtTtD,kHAAkH;eAC3G,UAAU;QACjB,kDAAkD;gBAC1C,MAAM;QACd,6FAA6F;mBAClF,WAAW,CAAC,CAAC,CAAC;QACzB,yDAAyD;gBACjD,OAAO;QACf,+EAA+E;iBACtE,MAAM;QACf,6EAA6E;sBAC/D,MAAM;QACpB,4EAA4E;mBACjE,OAAO;QAClB,sDAAsD;iBAC7C,OAAO;QAChB,wEAAwE;iBAC/D,MAAM;QACf;;;WAGG;oBACS,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC5C,yFAAyF;mBAC9E,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS;QACvC,wCAAwC;wBAEpC,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;QA4Dd;;WAEG;oBACS,CAAC;;;KAoN8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBAbG,CAAC,KAAK,IAAiB,KAAK,GAAG;;iBAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;;;EAgBxC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlTextField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTextField/PlTextField.vue"],"names":[],"mappings":"AAkNA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAM/E,OAAO,sBAAsB,CAAC;AAG9B;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GACd,CAAC,SAAS,IAAI,GAAG,KAAK,EACtB,CAAC,SAAS,SAAS,GAAG,MAAM,EAC5B,CAAC,SAAS,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,SAAS,GAAG,KAAK,CAAC,EAE/D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAiVO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAtUtD,kHAAkH;eAC3G,UAAU;QACjB,kDAAkD;gBAC1C,MAAM;QACd,6FAA6F;mBAClF,WAAW,CAAC,CAAC,CAAC;QACzB,yDAAyD;gBACjD,OAAO;QACf,+EAA+E;iBACtE,MAAM;QACf,6EAA6E;sBAC/D,MAAM;QACpB,4EAA4E;mBACjE,OAAO;QAClB,sDAAsD;iBAC7C,OAAO;QAChB,wEAAwE;iBAC/D,MAAM;QACf;;;WAGG;oBACS,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC5C,yFAAyF;mBAC9E,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS;QACvC,wCAAwC;wBAEpC,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,QAAQ;;QA4Dd;;WAEG;oBACS,CAAC;;;KAoO8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;kBAbG,CAAC,KAAK,IAAiB,KAAK,GAAG;;iBAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;;;EAgBxC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;AACzF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/components/PlTextField/PlTextField.vue2.js

@@ -13,22 +13,29 @@ import s from "../../assets/images/required.js";
 import './pl-text-field.css';/* empty css              */
 import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderSlot as y, toDisplayString as b, unref as x, useModel as S, useSlots as C, vModelDynamic as w, withCtx as T, withDirectives as E, withModifiers as D } from "vue";
 //#region src/components/PlTextField/PlTextField.vue?vue&type=script&setup=true&lang.ts
-var O = { class: "pl-text-field__envelope" }, k = {
+var O = {
+	class: "pl-text-field__envelope",
+	"data-testid": "pl-text-field"
+}, k = {
 	key: 0,
-	ref: "label"
+	ref: "label",
+	"data-testid": "pl-text-field-label"
 }, A = {
 	key: 1,
-	class: "pl-text-field__prefix"
+	class: "pl-text-field__prefix",
+	"data-testid": "pl-text-field-prefix"
 }, j = [
 	"disabled",
 	"placeholder",
 	"type"
 ], M = {
 	key: 0,
-	class: "pl-text-field__error"
+	class: "pl-text-field__error",
+	"data-testid": "pl-text-field-error"
 }, N = {
 	key: 1,
-	class: "pl-text-field__helper"
+	class: "pl-text-field__helper",
+	"data-testid": "pl-text-field-helper"
 }, P = /* @__PURE__ */ m({
 	name: "PlTextField",
 	props: /* @__PURE__ */ h({
@@ -68,18 +75,21 @@ var O = { class: "pl-text-field__envelope" }, k = {
 				disabled: m.disabled,
 				dashed: m.dashed,
 				nonEmpty: !H.value
-			}])
+			}]),
+			"data-testid": "pl-text-field-control"
 		}, [
 			m.label ? (_(), d("label", k, [
 				m.required ? (_(), l(x(n), {
 					key: 0,
-					uri: x(s)
+					uri: x(s),
+					"data-testid": "pl-text-field-required"
 				}, null, 8, ["uri"])) : u("", !0),
 				f("span", null, b(m.label), 1),
 				x(h).tooltip ? (_(), l(x(e), {
 					key: 1,
 					class: "info",
-					position: "top"
+					position: "top",
+					"data-testid": "pl-text-field-tooltip"
 				}, {
 					tooltip: T(() => [y(t.$slots, "tooltip")]),
 					_: 3
@@ -93,15 +103,18 @@ var O = { class: "pl-text-field__envelope" }, k = {
 				disabled: m.disabled,
 				placeholder: m.placeholder || "...",
 				type: z.value,
-				spellcheck: "false"
+				spellcheck: "false",
+				"data-testid": "pl-text-field-input"
 			}, null, 8, j), [[w, P.value]]),
 			f("div", {
 				class: "pl-text-field__append",
+				"data-testid": "pl-text-field-append",
 				onClick: q
 			}, [
 				G.value ? (_(), l(x(i), {
 					key: 0,
 					class: "pl-text-field__clearable",
+					"data-testid": "pl-text-field-clear",
 					name: "delete-clear",
 					onClick: D(V, ["stop"])
 				})) : u("", !0),
@@ -109,6 +122,7 @@ var O = { class: "pl-text-field__envelope" }, k = {
 					key: 1,
 					name: B.value,
 					style: { cursor: "pointer" },
+					"data-testid": "pl-text-field-password-toggle",
 					onClick: D(K, ["stop"])
 				}, null, 8, ["name"])) : u("", !0),
 				y(t.$slots, "append")

package/dist/components/PlTextField/PlTextField.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: \"PlTextField\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"\n    R extends true | false,\n    V extends undefined | string,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport { computed, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<V>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /** The string specifies whether the field should be a password or not, value could be \"password\" or undefined. */\n  type?: \"password\";\n  /** The label to display above the input field. */\n  label?: string;\n  /** If `true`, the input field is marked as required and will show an error if left empty. */\n  required?: BooleanProp<R>;\n  /** An error message to display below the input field. */\n  error?: unknown;\n  /** A helper text to display below the input field when there are no errors. */\n  helper?: string;\n  /** A placeholder text to display inside the input field when it is empty. */\n  placeholder?: string;\n  /** If `true`, the input field is disabled and cannot be interacted with. */\n  disabled?: boolean;\n  /** If `true`, the input field has a dashed border. */\n  dashed?: boolean;\n  /** A prefix text to display inside the input field before the value. */\n  prefix?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * If a function, calls it to get the reset value.\n   */\n  clearable?: BooleanPropUnless<R> | (() => C);\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: V) => string | undefined;\n  /** Makes some of corners not rounded */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === \"password\") {\n    return showPassword.value ? \"text\" : props.type;\n  } else {\n    return \"text\";\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n\nconst isEmpty = computed(() => model.value === \"\");\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (props.validate) {\n    const error = props.validate(model.value as V);\n    if (error) {\n      errors.push(error);\n    }\n  }\n  if (props.required && isEmpty.value) {\n    errors.push(\"Value is required\");\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty: !isEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n        <span>{{ label }}</span>\n        <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n      />\n      <div class=\"pl-text-field__append\" @click=\"setFocusOnInput\">\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EAyBR,IAAM,IAAQ,GAAU,EAKlB,IAAQ,EAAc,GAAA,aAE1B,EAEI,IAAQ,GAuCR,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAS,OAAO,EAAM,aAAc,aAAa,EAAM,WAAW,GAAG;KAIzE,IAAU,QAAe,EAAM,UAAU,GAAG,EAE5C,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAI/C,OAHI,KACF,EAAO,KAAK,EAAW,EAErB,EAAM,UAAU;IAClB,IAAM,IAAQ,EAAM,SAAS,EAAM,MAAW;AAC9C,IAAI,KACF,EAAO,KAAK,EAAM;;AAMtB,UAHI,EAAM,YAAY,EAAQ,SAC5B,EAAO,KAAK,oBAAoB,EAE3B;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,CAAC,EAAQ,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAoDM,OApDN,GAoDM,CAnDJ,EA8CM,OAAA;YA7CA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WACI,EAAA;cAAmB,EAAA;YAAkB,EAAA;eAA2B,EAAA;;;GAO5E,EAAA,SAAA,GAAA,EAAb,EAQQ,SARR,GAQQ;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAOE,SAAA;aANI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;wBAJF,EAAA,MAAK,CAAA,CAAA;GAMhB,EAcM,OAAA;IAdD,OAAM;IAAyB,SAAO;;IAEjC,EAAA,SAAA,GAAA,EADR,EAKE,EAAA,EAAA,EAAA;;KAHA,OAAM;KACN,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAKE,EAAA,EAAA,EAAA;;KAHC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACtB,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAAwE,OAAxE,GAAwE,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"PlTextField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlTextField/PlTextField.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for one-line string data manipulation\n */\nexport default {\n  name: \"PlTextField\",\n};\n</script>\n\n<script\n  lang=\"ts\"\n  setup\n  generic=\"\n    R extends true | false,\n    V extends undefined | string,\n    C extends Exclude<V, [R] extends [true] ? undefined : never>\n  \"\n>\nimport { computed, ref, useSlots } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport type { BooleanProp, BooleanPropUnless } from \"../../utils/booleanProps\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-text-field.scss\";\n\nconst slots = useSlots();\n\n/**\n * The current value of the input field.\n */\nconst model = defineModel<V>({\n  required: true,\n});\n\nconst props = defineProps<{\n  /** The string specifies whether the field should be a password or not, value could be \"password\" or undefined. */\n  type?: \"password\";\n  /** The label to display above the input field. */\n  label?: string;\n  /** If `true`, the input field is marked as required and will show an error if left empty. */\n  required?: BooleanProp<R>;\n  /** An error message to display below the input field. */\n  error?: unknown;\n  /** A helper text to display below the input field when there are no errors. */\n  helper?: string;\n  /** A placeholder text to display inside the input field when it is empty. */\n  placeholder?: string;\n  /** If `true`, the input field is disabled and cannot be interacted with. */\n  disabled?: boolean;\n  /** If `true`, the input field has a dashed border. */\n  dashed?: boolean;\n  /** A prefix text to display inside the input field before the value. */\n  prefix?: string;\n  /**\n   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).\n   * If a function, calls it to get the reset value.\n   */\n  clearable?: BooleanPropUnless<R> | (() => C);\n  /** Additional validity check for input value that must return an error text if failed */\n  validate?: (v: V) => string | undefined;\n  /** Makes some of corners not rounded */\n  groupPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"middle\";\n}>();\n\nconst rootRef = ref<HTMLInputElement | undefined>(undefined);\n\nconst inputRef = ref<HTMLInputElement | undefined>();\n\nconst showPassword = ref(false);\n\nconst fieldType = computed(() => {\n  if (props.type && props.type === \"password\") {\n    return showPassword.value ? \"text\" : props.type;\n  } else {\n    return \"text\";\n  }\n});\n\nconst passwordIcon = computed(() => (showPassword.value ? \"view-show\" : \"view-hide\"));\n\nconst clear = () => {\n  if (props.clearable) {\n    model.value = (typeof props.clearable === \"function\" ? props.clearable() : \"\") as V;\n  }\n};\n\nconst isEmpty = computed(() => model.value === \"\");\n\nconst displayErrors = computed(() => {\n  const errors: string[] = [];\n  const propsError = getErrorMessage(props.error);\n  if (propsError) {\n    errors.push(propsError);\n  }\n  if (props.validate) {\n    const error = props.validate(model.value as V);\n    if (error) {\n      errors.push(error);\n    }\n  }\n  if (props.required && isEmpty.value) {\n    errors.push(\"Value is required\");\n  }\n  return errors;\n});\n\nconst hasErrors = computed(() => displayErrors.value.length > 0);\n\nconst canShowClearable = computed(\n  () => props.clearable && !isEmpty.value && props.type !== \"password\" && !props.disabled,\n);\n\nconst togglePasswordVisibility = () => (showPassword.value = !showPassword.value);\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nuseLabelNotch(rootRef);\n</script>\n\n<template>\n  <div class=\"pl-text-field__envelope\" data-testid=\"pl-text-field\">\n    <div\n      ref=\"rootRef\"\n      class=\"pl-text-field\"\n      data-testid=\"pl-text-field-control\"\n      :class=\"{\n        error: hasErrors,\n        disabled,\n        dashed,\n        nonEmpty: !isEmpty,\n      }\"\n    >\n      <label v-if=\"label\" ref=\"label\" data-testid=\"pl-text-field-label\">\n        <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-text-field-required\" />\n        <span>{{ label }}</span>\n        <PlTooltip\n          v-if=\"slots.tooltip\"\n          class=\"info\"\n          position=\"top\"\n          data-testid=\"pl-text-field-tooltip\"\n        >\n          <template #tooltip>\n            <slot name=\"tooltip\" />\n          </template>\n        </PlTooltip>\n      </label>\n      <div v-if=\"prefix\" class=\"pl-text-field__prefix\" data-testid=\"pl-text-field-prefix\">\n        {{ prefix }}\n      </div>\n      <input\n        ref=\"inputRef\"\n        v-model=\"model\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder || '...'\"\n        :type=\"fieldType\"\n        spellcheck=\"false\"\n        data-testid=\"pl-text-field-input\"\n      />\n      <div\n        class=\"pl-text-field__append\"\n        data-testid=\"pl-text-field-append\"\n        @click=\"setFocusOnInput\"\n      >\n        <PlIcon16\n          v-if=\"canShowClearable\"\n          class=\"pl-text-field__clearable\"\n          data-testid=\"pl-text-field-clear\"\n          name=\"delete-clear\"\n          @click.stop=\"clear\"\n        />\n        <PlIcon24\n          v-if=\"type === 'password'\"\n          :name=\"passwordIcon\"\n          style=\"cursor: pointer\"\n          data-testid=\"pl-text-field-password-toggle\"\n          @click.stop=\"togglePasswordVisibility\"\n        />\n        <slot name=\"append\" />\n      </div>\n      <DoubleContour class=\"pl-text-field__contour\" :group-position=\"groupPosition\" />\n    </div>\n    <div v-if=\"hasErrors\" class=\"pl-text-field__error\" data-testid=\"pl-text-field-error\">\n      {{ displayErrors.join(\" \") }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-text-field__helper\" data-testid=\"pl-text-field-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EAyBR,IAAM,IAAQ,GAAU,EAKlB,IAAQ,EAAc,GAAA,aAE1B,EAEI,IAAQ,GAuCR,IAAU,EAAkC,KAAA,EAAU,EAEtD,IAAW,GAAmC,EAE9C,IAAe,EAAI,GAAM,EAEzB,IAAY,QACZ,EAAM,QAAQ,EAAM,SAAS,aACxB,EAAa,QAAQ,SAAS,EAAM,OAEpC,OAET,EAEI,IAAe,QAAgB,EAAa,QAAQ,cAAc,YAAa,EAE/E,UAAc;AAClB,GAAI,EAAM,cACR,EAAM,QAAS,OAAO,EAAM,aAAc,aAAa,EAAM,WAAW,GAAG;KAIzE,IAAU,QAAe,EAAM,UAAU,GAAG,EAE5C,IAAgB,QAAe;GACnC,IAAM,IAAmB,EAAE,EACrB,IAAa,EAAgB,EAAM,MAAM;AAI/C,OAHI,KACF,EAAO,KAAK,EAAW,EAErB,EAAM,UAAU;IAClB,IAAM,IAAQ,EAAM,SAAS,EAAM,MAAW;AAC9C,IAAI,KACF,EAAO,KAAK,EAAM;;AAMtB,UAHI,EAAM,YAAY,EAAQ,SAC5B,EAAO,KAAK,oBAAoB,EAE3B;IACP,EAEI,IAAY,QAAe,EAAc,MAAM,SAAS,EAAE,EAE1D,IAAmB,QACjB,EAAM,aAAa,CAAC,EAAQ,SAAS,EAAM,SAAS,cAAc,CAAC,EAAM,SAChF,EAEK,UAAkC,EAAa,QAAQ,CAAC,EAAa,OAErE,UAAwB,EAAS,OAAO,OAAO;SAErD,EAAc,EAAQ,kBAIpB,EAmEM,OAnEN,GAmEM,CAlEJ,EA2DM,OAAA;YA1DA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,iBAAe;WAEI,EAAA;cAAmB,EAAA;YAAkB,EAAA;eAA2B,EAAA;;GADzF,eAAY;;GAQC,EAAA,SAAA,GAAA,EAAb,EAaQ,SAbR,GAaQ;IAZO,EAAA,YAAA,GAAA,EAAb,EAAiF,EAAA,EAAA,EAAA;;KAAzD,KAAK,EAAA,EAAW;KAAE,eAAY;;IACtD,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IAEN,EAAA,EAAK,CAAC,WAAA,GAAA,EADd,EASY,EAAA,EAAA,EAAA;;KAPV,OAAM;KACN,UAAS;KACT,eAAY;;KAED,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAIlB,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;KAEX,EAQE,SAAA;aAPI;IAAJ,KAAI;6CACU,QAAA;IACb,UAAU,EAAA;IACV,aAAa,EAAA,eAAW;IACxB,MAAM,EAAA;IACP,YAAW;IACX,eAAY;wBALH,EAAA,MAAK,CAAA,CAAA;GAOhB,EAoBM,OAAA;IAnBJ,OAAM;IACN,eAAY;IACX,SAAO;;IAGA,EAAA,SAAA,GAAA,EADR,EAME,EAAA,EAAA,EAAA;;KAJA,OAAM;KACN,eAAY;KACZ,MAAK;KACJ,SAAK,EAAO,GAAK,CAAA,OAAA,CAAA;;IAGZ,EAAA,SAAI,cAAA,GAAA,EADZ,EAME,EAAA,EAAA,EAAA;;KAJC,MAAM,EAAA;KACP,OAAA,EAAA,QAAA,WAAuB;KACvB,eAAY;KACX,SAAK,EAAO,GAAwB,CAAA,OAAA,CAAA;;IAEvC,EAAsB,EAAA,QAAA,SAAA;;GAExB,EAAgF,GAAA;IAAjE,OAAM;IAA0B,kBAAgB,EAAA;;SAEtD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,MAAc,KAAI,IAAA,CAAA,EAAA,EAAA,IAEP,EAAA,UAAA,GAAA,EAAhB,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/components/PlToggleSwitch/PlToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlToggleSwitch.js","names":[],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for manipulating a boolean value\n */\nexport default {\n  name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated\n   *\n   * @param value - The new boolean value of the model\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * The current boolean value of the component (represents 'on' | 'off' states generally).\n   */\n  modelValue?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    tabindex=\"0\"\n    class=\"ui-toggle-switch\"\n    :class=\"{ active: modelValue }\"\n    @click=\"$emit('update:modelValue', !modelValue)\"\n    @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n  >\n    <div class=\"ui-toggle-switch__body\">\n      <div class=\"ui-toggle-switch__handle\" />\n    </div>\n    <span v-if=\"label\" class=\"label\">{{ label }}</span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlToggleSwitch.js","names":[],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for manipulating a boolean value\n */\nexport default {\n  name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated\n   *\n   * @param value - The new boolean value of the model\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * The current boolean value of the component (represents 'on' | 'off' states generally).\n   */\n  modelValue?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    tabindex=\"0\"\n    class=\"ui-toggle-switch\"\n    data-testid=\"pl-toggle-switch\"\n    :class=\"{ active: modelValue }\"\n    @click=\"$emit('update:modelValue', !modelValue)\"\n    @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n  >\n    <div class=\"ui-toggle-switch__body\" data-testid=\"pl-toggle-switch-body\">\n      <div class=\"ui-toggle-switch__handle\" data-testid=\"pl-toggle-switch-handle\" />\n    </div>\n    <span v-if=\"label\" class=\"label\" data-testid=\"pl-toggle-switch-label\">{{ label }}</span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlToggleSwitch/PlToggleSwitch.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlToggleSwitch.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"names":[],"mappings":"AAkDA,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAYhB;;OAEG;YACK,MAAM;IACd;;OAEG;iBACU,OAAO;;;;IAPpB;;OAEG;YACK,MAAM;IACd;;OAEG;iBACU,OAAO;;;kFA2DlB,CAAC"}
+{"version":3,"file":"PlToggleSwitch.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"names":[],"mappings":"AAmDA,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAYhB;;OAEG;YACK,MAAM;IACd;;OAEG;iBACU,OAAO;;;;IAPpB;;OAEG;YACK,MAAM;IACd;;OAEG;iBACU,OAAO;;;kFA+DlB,CAAC"}

package/dist/components/PlToggleSwitch/PlToggleSwitch.vue2.js

@@ -3,7 +3,8 @@ import { createCommentVNode as e, createElementBlock as t, createElementVNode as
 //#region src/components/PlToggleSwitch/PlToggleSwitch.vue?vue&type=script&setup=true&lang.ts
 var c = {
 	key: 0,
-	class: "label"
+	class: "label",
+	"data-testid": "pl-toggle-switch-label"
 }, l = /* @__PURE__ */ r({
 	name: "PlToggleSwitch",
 	props: {
@@ -15,9 +16,16 @@ var c = {
 		return (l, u) => (a(), t("div", {
 			tabindex: "0",
 			class: i(["ui-toggle-switch", { active: r.modelValue }]),
+			"data-testid": "pl-toggle-switch",
 			onClick: u[0] ||= (e) => l.$emit("update:modelValue", !r.modelValue),
 			onKeydown: u[1] ||= s((e) => l.$emit("update:modelValue", !r.modelValue), ["enter"])
-		}, [u[2] ||= n("div", { class: "ui-toggle-switch__body" }, [n("div", { class: "ui-toggle-switch__handle" })], -1), r.label ? (a(), t("span", c, o(r.label), 1)) : e("", !0)], 34));
+		}, [u[2] ||= n("div", {
+			class: "ui-toggle-switch__body",
+			"data-testid": "pl-toggle-switch-body"
+		}, [n("div", {
+			class: "ui-toggle-switch__handle",
+			"data-testid": "pl-toggle-switch-handle"
+		})], -1), r.label ? (a(), t("span", c, o(r.label), 1)) : e("", !0)], 34));
 	}
 });
 //#endregion

package/dist/components/PlToggleSwitch/PlToggleSwitch.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlToggleSwitch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for manipulating a boolean value\n */\nexport default {\n  name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated\n   *\n   * @param value - The new boolean value of the model\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * The current boolean value of the component (represents 'on' | 'off' states generally).\n   */\n  modelValue?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    tabindex=\"0\"\n    class=\"ui-toggle-switch\"\n    :class=\"{ active: modelValue }\"\n    @click=\"$emit('update:modelValue', !modelValue)\"\n    @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n  >\n    <div class=\"ui-toggle-switch__body\">\n      <div class=\"ui-toggle-switch__handle\" />\n    </div>\n    <span v-if=\"label\" class=\"label\">{{ label }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;CAKE,MAAM;;;;;;;yBA6BN,EAWM,OAAA;GAVJ,UAAS;GACT,OAAK,EAAA,CAAC,oBAAkB,EAAA,QACN,EAAA,YAAU,CAAA,CAAA;GAC3B,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU;GAC7C,WAAO,AAAA,EAAA,OAAA,GAAA,MAAQA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU,EAAA,CAAA,QAAA,CAAA;eAEtD,EAEM,OAAA,EAFD,OAAM,0BAAwB,EAAA,CACjC,EAAwC,OAAA,EAAnC,OAAM,4BAA0B,CAAA,CAAA,EAAA,GAAA,EAE3B,EAAA,SAAA,GAAA,EAAZ,EAAmD,QAAnD,GAAmD,EAAf,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"PlToggleSwitch.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlToggleSwitch/PlToggleSwitch.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Component for manipulating a boolean value\n */\nexport default {\n  name: \"PlToggleSwitch\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-toggle-switch.scss\";\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated\n   *\n   * @param value - The new boolean value of the model\n   */\n  (e: \"update:modelValue\", value: boolean): void;\n}>();\n\ndefineProps<{\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * The current boolean value of the component (represents 'on' | 'off' states generally).\n   */\n  modelValue?: boolean;\n}>();\n</script>\n\n<template>\n  <div\n    tabindex=\"0\"\n    class=\"ui-toggle-switch\"\n    data-testid=\"pl-toggle-switch\"\n    :class=\"{ active: modelValue }\"\n    @click=\"$emit('update:modelValue', !modelValue)\"\n    @keydown.enter=\"$emit('update:modelValue', !modelValue)\"\n  >\n    <div class=\"ui-toggle-switch__body\" data-testid=\"pl-toggle-switch-body\">\n      <div class=\"ui-toggle-switch__handle\" data-testid=\"pl-toggle-switch-handle\" />\n    </div>\n    <span v-if=\"label\" class=\"label\" data-testid=\"pl-toggle-switch-label\">{{ label }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;CAKE,MAAM;;;;;;;yBA6BN,EAYM,OAAA;GAXJ,UAAS;GACT,OAAK,EAAA,CAAC,oBAAkB,EAAA,QAEN,EAAA,YAAU,CAAA,CAAA;GAD5B,eAAY;GAEX,SAAK,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU;GAC7C,WAAO,AAAA,EAAA,OAAA,GAAA,MAAQA,EAAAA,MAAK,qBAAA,CAAuB,EAAA,WAAU,EAAA,CAAA,QAAA,CAAA;eAEtD,EAEM,OAAA;GAFD,OAAM;GAAyB,eAAY;MAC9C,EAA8E,OAAA;GAAzE,OAAM;GAA2B,eAAY;YAExC,EAAA,SAAA,GAAA,EAAZ,EAAwF,QAAxF,GAAwF,EAAf,EAAA,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/components/PlTooltip/PlTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.js","names":[],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlTooltip.js","names":[],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlTooltip/PlTooltip.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlTooltip.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"sourcesContent":["<script lang=\"ts\">\n/** Simple tooltip on mouseover */\nexport default {\n  name: \"PlTooltip\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { uniqueId } from \"@milaboratories/helpers\";\nimport { onUnmounted, reactive, ref, watch } from \"vue\";\nimport { tMap } from \"./global\";\nimport * as utils from \"../../helpers/utils\";\nimport { useClickOutside } from \"../../composition/useClickOutside\";\n\nconst emit = defineEmits([\"tooltip:close\"]);\n\nconst tKey = Symbol();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * delay in milliseconds before the tooltip opens\n     */\n    openDelay?: number;\n    /**\n     * delay in milliseconds before the tooltip disappears\n     */\n    closeDelay?: number;\n    /**\n     * Tooltip position\n     */\n    position?: \"top\" | \"left\" | \"bottom\" | \"right\" | \"top-left\";\n    /**\n     * external prop to hide tooltips\n     */\n    hide?: boolean;\n    /**\n     * The gap in pixels between the tooltip and the target element\n     */\n    gap?: number;\n\n    /**\n     * The minimum offset in pixels from the edge of the screen to the tooltip\n     */\n    offsetToTheEdge?: number;\n    /**\n     * base html element for tooltip\n     */\n    element?: \"div\" | \"span\" | \"a\" | \"p\" | \"h1\" | \"h2\" | \"h3\";\n    /**\n     * Max width (css value) of the tooltip container (default is 300px)\n     */\n    maxWidth?: string;\n    /**\n     * The container to insert the tooltip to (body by default)\n     */\n    container?: \"body\" | HTMLElement;\n    /**\n     * Whether the tooltip is shown on hover (default is true); otherwise, it is shown when hide is set to false\n     */\n    hoverable?: boolean;\n  }>(),\n  {\n    openDelay: 100,\n    closeDelay: 1000,\n    gap: 8,\n    offsetToTheEdge: 8,\n    position: \"top\",\n    element: \"div\",\n    maxWidth: \"300px\",\n    container: \"body\",\n    hoverable: true,\n  },\n);\n\nconst data = reactive({\n  open: false,\n  over: false,\n  tooltipOpen: false,\n  key: Symbol(),\n});\n\ntMap.set(tKey, () => closeTooltip());\n\n// Hook to avoid the need to immediately teleport into the body (better performance)\nwatch(\n  () => data.open,\n  (v) => {\n    requestAnimationFrame(() => {\n      data.tooltipOpen = v;\n    });\n  },\n);\n\nlet clearTimeout = () => {};\n\nconst showTooltip = () => {\n  data.open = true;\n\n  for (const [k, f] of tMap.entries()) {\n    if (k !== tKey) {\n      f();\n    }\n  }\n};\n\nconst closeTooltip = () => {\n  data.open = false;\n  emit(\"tooltip:close\");\n};\n\nconst onOver = async () => {\n  if (props.hide || !props.hoverable) {\n    return;\n  }\n\n  data.over = true;\n\n  clearTimeout();\n\n  await utils.delay(props.openDelay ?? 100);\n\n  if (data.over) {\n    showTooltip();\n  }\n};\n\nconst onLeave = () => {\n  if (!props.hoverable) {\n    return;\n  }\n\n  data.over = false;\n  clearTimeout = utils.timeout(() => {\n    if (!data.over) {\n      closeTooltip();\n    }\n  }, props.closeDelay);\n};\n\nwatch(\n  () => props.hide,\n  (hide) => {\n    if (hide) {\n      closeTooltip();\n    } else if (!props.hoverable) {\n      showTooltip();\n    }\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst tooltip = ref<HTMLElement | undefined>();\n\nuseClickOutside([rootRef, tooltip], () => closeTooltip());\n\nonUnmounted(() => {\n  tMap.delete(tKey);\n});\nconst anchorName = `--anchor-${uniqueId()}`;\n</script>\n\n<template>\n  <component\n    :class=\"$style.plTooltipAnchorWrapper\"\n    :is=\"element\"\n    data-testid=\"pl-tooltip\"\n    v-bind=\"$attrs\"\n    ref=\"rootRef\"\n    @click=\"onOver\"\n    @mouseover=\"onOver\"\n    @mouseleave=\"onLeave\"\n  >\n    <!-- anchor element here -->\n    <slot />\n    <Transition name=\"pl-tooltip-fade\">\n      <Teleport v-if=\"$slots['tooltip'] && data.tooltipOpen\" :to=\"container\">\n        <div\n          data-testid=\"pl-tooltip-popup\"\n          :class=\"[\n            $style.plTooltipContainer,\n            {\n              [$style.top]: props.position === 'top',\n              [$style.bottom]: props.position === 'bottom',\n              [$style.left]: props.position === 'left',\n              [$style.right]: props.position === 'right',\n              [$style.topLeft]: props.position === 'top-left',\n            },\n          ]\"\n          :style=\"{\n            '--anchorName': anchorName,\n            '--gap': gap + 'px',\n            '--offsetToTheEdge': offsetToTheEdge + 'px',\n            '--plTooltipMaxWidth': maxWidth,\n          }\"\n        >\n          <div :class=\"$style.plTooltipBox\" @click.stop>\n            <div\n              ref=\"tooltip\"\n              data-testid=\"pl-tooltip-content\"\n              :class=\"[$style.plTooltipContent, position]\"\n              @mouseover=\"onOver\"\n              @mouseleave=\"onLeave\"\n            >\n              <!-- should be one line -->\n              <div><slot name=\"tooltip\" /></div>\n            </div>\n          </div>\n          <div :class=\"$style.plTooltipBeak\" />\n        </div>\n      </Teleport>\n    </Transition>\n  </component>\n</template>\n\n<style module>\n.plTooltipAnchorWrapper {\n  display: inline-block;\n}\n/* just to set anchor-name for the anchor */\n.plTooltipAnchorWrapper > :first-child {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipAnchorWrapper:global(.info) {\n  --anchorName: v-bind(\"anchorName\");\n  anchor-name: var(--anchorName);\n}\n\n.plTooltipContainer {\n  --plTooltipMaxWidth: 300px;\n  --gap: 8px;\n  --tailWidth: 8px;\n  --tailHeight: calc(var(--gap) + 2px);\n\n  --tailClipTop: polygon(\n    0 0,\n    100% 0,\n    100% calc(100% - var(--gap)),\n    50% calc(100% - 3px),\n    0 calc(100% - var(--gap))\n  );\n  --tailClipBottom: polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));\n  --tailClipLeft: polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);\n  --tailClipRight: polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);\n\n  z-index: var(--z-tooltip);\n}\n\n.plTooltipContent {\n  display: inline-block;\n  padding: 8px 12px 9px 12px;\n  background: var(--tooltip-bg);\n  border-radius: 6px;\n  width: max-content;\n  word-break: normal;\n  max-width: var(--plTooltipMaxWidth);\n  color: #fff;\n}\n\n.plTooltipBox {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 1;\n}\n\n.plTooltipBeak {\n  position: absolute;\n  position-anchor: var(--anchorName);\n  z-index: 0;\n  background: var(--tooltip-bg);\n  width: var(--tailWidth);\n  height: var(--tailHeight);\n}\n\n/* top */\n.plTooltipContainer.top .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.top .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n/* bottom */\n.plTooltipContainer.bottom .plTooltipBox {\n  position-area: bottom;\n  top: var(--gap);\n  left: var(--offsetToTheEdge);\n  right: var(--offsetToTheEdge);\n}\n.plTooltipContainer.bottom .plTooltipBeak {\n  position-area: bottom;\n  top: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipBottom);\n}\n\n/* left */\n.plTooltipContainer.left .plTooltipBox {\n  position-area: left;\n  right: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.left .plTooltipBeak {\n  position-area: left;\n  right: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipLeft);\n}\n\n/* right */\n.plTooltipContainer.right .plTooltipBox {\n  position-area: right;\n  left: var(--gap);\n  top: var(--offsetToTheEdge);\n  bottom: var(--offsetToTheEdge);\n}\n\n.plTooltipContainer.right .plTooltipBeak {\n  position-area: right;\n  left: 0;\n  top: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  width: var(--tailHeight);\n  height: var(--tailWidth);\n  clip-path: var(--tailClipRight);\n}\n\n/* top left */\n.plTooltipContainer.topLeft .plTooltipBox {\n  position-area: top;\n  bottom: var(--gap);\n  left: anchor(var(--anchorName) left);\n}\n.plTooltipContainer.topLeft .plTooltipBeak {\n  position-area: top;\n  bottom: 0;\n  left: calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);\n  clip-path: var(--tailClipTop);\n}\n\n:global(.pl-tooltip-fade-leave-active),\n:global(.pl-tooltip-fade-enter-active) {\n  z-index: var(--z-tooltip);\n  transition: opacity 0.2s ease-in-out;\n}\n:global(.pl-tooltip-fade-enter-from),\n:global(.pl-tooltip-fade-leave-to) {\n  opacity: 0;\n}\n\n.plTooltipContent a {\n  color: var(--tooltip-link-color);\n}\n\n.plTooltipContent p {\n  margin-bottom: 8px;\n}\n\n.plTooltipContent ul,\n.plTooltipContent li {\n  margin-left: 6px;\n  padding-left: 6px;\n}\n\n.plTooltipContent li {\n  margin-bottom: 4px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlTooltip/PlTooltip.vue.css

@@ -1 +1 @@
-._plTooltipAnchorWrapper_ttgyk_2{display:inline-block}._plTooltipAnchorWrapper_ttgyk_2>:first-child,._plTooltipAnchorWrapper_ttgyk_2.info{--anchorName:var(--v0ef0814d);anchor-name:var(--anchorName)}._plTooltipContainer_ttgyk_16{--plTooltipMaxWidth:300px;--gap:8px;--tailWidth:8px;--tailHeight:calc(var(--gap) + 2px);--tailClipTop:polygon(0 0, 100% 0, 100% calc(100% - var(--gap)), 50% calc(100% - 3px), 0 calc(100% - var(--gap)));--tailClipBottom:polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));--tailClipLeft:polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);--tailClipRight:polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);z-index:var(--z-tooltip)}._plTooltipContent_ttgyk_36{background:var(--tooltip-bg);word-break:normal;width:max-content;max-width:var(--plTooltipMaxWidth);color:#fff;border-radius:6px;padding:8px 12px 9px;display:inline-block}._plTooltipBox_ttgyk_47{position-anchor:var(--anchorName);z-index:1;position:absolute}._plTooltipBeak_ttgyk_53{position-anchor:var(--anchorName);z-index:0;background:var(--tooltip-bg);width:var(--tailWidth);height:var(--tailHeight);position:absolute}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBox_ttgyk_47{position-area:bottom;top:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBeak_ttgyk_53{position-area:bottom;top:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipBottom)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBox_ttgyk_47{position-area:left;right:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBeak_ttgyk_53{position-area:left;right:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipLeft)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBox_ttgyk_47{position-area:right;left:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBeak_ttgyk_53{position-area:right;left:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipRight)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:anchor(var(--anchorName) left)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}.pl-tooltip-fade-leave-active,.pl-tooltip-fade-enter-active{z-index:var(--z-tooltip);transition:opacity .2s ease-in-out}.pl-tooltip-fade-enter-from,.pl-tooltip-fade-leave-to{opacity:0}._plTooltipContent_ttgyk_36 a{color:var(--tooltip-link-color)}._plTooltipContent_ttgyk_36 p{margin-bottom:8px}._plTooltipContent_ttgyk_36 ul,._plTooltipContent_ttgyk_36 li{margin-left:6px;padding-left:6px}._plTooltipContent_ttgyk_36 li{margin-bottom:4px}
+._plTooltipAnchorWrapper_ttgyk_2{display:inline-block}._plTooltipAnchorWrapper_ttgyk_2>:first-child,._plTooltipAnchorWrapper_ttgyk_2.info{--anchorName:var(--v65bd5cda);anchor-name:var(--anchorName)}._plTooltipContainer_ttgyk_16{--plTooltipMaxWidth:300px;--gap:8px;--tailWidth:8px;--tailHeight:calc(var(--gap) + 2px);--tailClipTop:polygon(0 0, 100% 0, 100% calc(100% - var(--gap)), 50% calc(100% - 3px), 0 calc(100% - var(--gap)));--tailClipBottom:polygon(0 100%, 100% 100%, 100% var(--gap), 50% 3px, 0 var(--gap));--tailClipLeft:polygon(0 0, 0 100%, 2px 100%, calc(100% - 3px) 50%, 2px 0);--tailClipRight:polygon(100% 0, 100% 100%, calc(100% - 2px) 100%, 3px 50%, calc(100% - 2px) 0);z-index:var(--z-tooltip)}._plTooltipContent_ttgyk_36{background:var(--tooltip-bg);word-break:normal;width:max-content;max-width:var(--plTooltipMaxWidth);color:#fff;border-radius:6px;padding:8px 12px 9px;display:inline-block}._plTooltipBox_ttgyk_47{position-anchor:var(--anchorName);z-index:1;position:absolute}._plTooltipBeak_ttgyk_53{position-anchor:var(--anchorName);z-index:0;background:var(--tooltip-bg);width:var(--tailWidth);height:var(--tailHeight);position:absolute}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._top_ttgyk_63 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBox_ttgyk_47{position-area:bottom;top:var(--gap);left:var(--offsetToTheEdge);right:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._bottom_ttgyk_77 ._plTooltipBeak_ttgyk_53{position-area:bottom;top:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipBottom)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBox_ttgyk_47{position-area:left;right:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._left_ttgyk_91 ._plTooltipBeak_ttgyk_53{position-area:left;right:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipLeft)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBox_ttgyk_47{position-area:right;left:var(--gap);top:var(--offsetToTheEdge);bottom:var(--offsetToTheEdge)}._plTooltipContainer_ttgyk_16._right_ttgyk_108 ._plTooltipBeak_ttgyk_53{position-area:right;left:0;top:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);width:var(--tailHeight);height:var(--tailWidth);clip-path:var(--tailClipRight)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBox_ttgyk_47{position-area:top;bottom:var(--gap);left:anchor(var(--anchorName) left)}._plTooltipContainer_ttgyk_16._topLeft_ttgyk_125 ._plTooltipBeak_ttgyk_53{position-area:top;bottom:0;left:calc(anchor(var(--anchorName) center) - var(--tailWidth) / 2);clip-path:var(--tailClipTop)}.pl-tooltip-fade-leave-active,.pl-tooltip-fade-enter-active{z-index:var(--z-tooltip);transition:opacity .2s ease-in-out}.pl-tooltip-fade-enter-from,.pl-tooltip-fade-leave-to{opacity:0}._plTooltipContent_ttgyk_36 a{color:var(--tooltip-link-color)}._plTooltipContent_ttgyk_36 p{margin-bottom:8px}._plTooltipContent_ttgyk_36 ul,._plTooltipContent_ttgyk_36 li{margin-left:6px;padding-left:6px}._plTooltipContent_ttgyk_36 li{margin-bottom:4px}

package/dist/components/PlTooltip/PlTooltip.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"names":[],"mappings":"AAkYA,kCAAkC;wBACb,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAMd;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;IAxCnB;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;SArBb,MAAM;eAiBA,MAAM,GAAG,WAAW;eAjCpB,MAAM;gBAIL,MAAM;cAIR,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;qBAazC,MAAM;aAId,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;cAI9C,MAAM;eAQL,OAAO;;cAyST,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAczC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlTooltip/PlTooltip.vue"],"names":[],"mappings":"AAqYA,kCAAkC;wBACb,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAMd;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;IAxCnB;;OAEG;gBACS,MAAM;IAClB;;OAEG;iBACU,MAAM;IACnB;;OAEG;eACQ,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;IAC3D;;OAEG;WACI,OAAO;IACd;;OAEG;UACG,MAAM;IAEZ;;OAEG;sBACe,MAAM;IACxB;;OAEG;cACO,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;IACzD;;OAEG;eACQ,MAAM;IACjB;;OAEG;gBACS,MAAM,GAAG,WAAW;IAChC;;OAEG;gBACS,OAAO;;;;SArBb,MAAM;eAiBA,MAAM,GAAG,WAAW;eAjCpB,MAAM;gBAIL,MAAM;cAIR,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU;qBAazC,MAAM;aAId,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;cAI9C,MAAM;eAQL,OAAO;;cA6ST,CAAC,KAAK,IAAiB,KAAK,GAAG;;cAC/B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAczC,CAAC;AAWL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlTooltip/PlTooltip.vue2.js

@@ -22,7 +22,7 @@ var T = /* @__PURE__ */ u({
 	},
 	emits: ["tooltip:close"],
 	setup(u, { emit: T }) {
-		b((e) => ({ v0ef0814d: L }));
+		b((e) => ({ v65bd5cda: L }));
 		let E = T, D = Symbol(), O = u, k = g({
 			open: !1,
 			over: !1,
@@ -54,7 +54,10 @@ var T = /* @__PURE__ */ u({
 			e.delete(D);
 		});
 		let L = `--anchor-${w()}`;
-		return (e, t) => (h(), o(y(u.element), d({ class: e.$style.plTooltipAnchorWrapper }, e.$attrs, {
+		return (e, t) => (h(), o(y(u.element), d({
+			class: e.$style.plTooltipAnchorWrapper,
+			"data-testid": "pl-tooltip"
+		}, e.$attrs, {
 			ref_key: "rootRef",
 			ref: F,
 			onClick: N,
@@ -66,6 +69,7 @@ var T = /* @__PURE__ */ u({
 					key: 0,
 					to: u.container
 				}, [c("div", {
+					"data-testid": "pl-tooltip-popup",
 					class: f([e.$style.plTooltipContainer, {
 						[e.$style.top]: O.position === "top",
 						[e.$style.bottom]: O.position === "bottom",
@@ -85,6 +89,7 @@ var T = /* @__PURE__ */ u({
 				}, [c("div", {
 					ref_key: "tooltip",
 					ref: I,
+					"data-testid": "pl-tooltip-content",
 					class: f([e.$style.plTooltipContent, u.position]),
 					onMouseover: N,
 					onMouseleave: P