@milaboratories/uikit 2.15.36 → 2.15.38

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnDanger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Danger button\n */\nexport default {\n  name: \"PlBtnDanger\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-danger.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-danger\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAEU,EAFD,OAAM,iBAAe,EAAS,EAAK,EAAA;oBAClC,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"PlBtnDanger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnDanger/PlBtnDanger.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Danger button\n */\nexport default {\n  name: \"PlBtnDanger\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-danger.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-danger\" class=\"pl-btn-danger\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAEU;GAFD,eAAY;GAAgB,OAAM;KAAwB,EAAK,EAAA;oBAC9D,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlBtnGhost/PlBtnGhost.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGhost.js","names":[],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n  name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n     */\n    loading?: boolean;\n    /**\n     * Size of the button, the default value is 'medium'\n     */\n    size?: Size;\n    /**\n     * If `true` the shape is round.\n     */\n    round?: boolean;\n    /**\n     * Icon to display\n     */\n    icon?: MaskIconName24;\n    /**\n     * If `true`, an icon is displayed before the text.\n     */\n    reverse?: boolean;\n    /**\n     * Justify text at the center (is `false` by default)\n     */\n    justifyCenter?: boolean;\n  }>(),\n  {\n    size: undefined,\n    icon: undefined,\n    justifyCenter: false,\n  },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n  <button\n    ref=\"btnRef\"\n    tabindex=\"0\"\n    class=\"pl-btn-ghost\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"slots.default && !round\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n    <slot name=\"append\" />\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnGhost.js","names":[],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n  name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n     */\n    loading?: boolean;\n    /**\n     * Size of the button, the default value is 'medium'\n     */\n    size?: Size;\n    /**\n     * If `true` the shape is round.\n     */\n    round?: boolean;\n    /**\n     * Icon to display\n     */\n    icon?: MaskIconName24;\n    /**\n     * If `true`, an icon is displayed before the text.\n     */\n    reverse?: boolean;\n    /**\n     * Justify text at the center (is `false` by default)\n     */\n    justifyCenter?: boolean;\n  }>(),\n  {\n    size: undefined,\n    icon: undefined,\n    justifyCenter: false,\n  },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n  <button\n    ref=\"btnRef\"\n    tabindex=\"0\"\n    data-testid=\"pl-btn-ghost\"\n    class=\"pl-btn-ghost\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"slots.default && !round\" data-testid=\"pl-btn-ghost-label\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon24 v-if=\"loading\" data-testid=\"pl-btn-ghost-loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon24 v-else-if=\"icon\" data-testid=\"pl-btn-ghost-icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n    <slot name=\"append\" />\n  </button>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGhost.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"names":[],"mappings":"AAiFA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAMxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEd;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;UAhBhB,IAAI;UAQJ,cAAc;mBAQL,OAAO;;cAoGb,CAAC,KAAK,IAAgB,KAAK,GAAG;;WACjC,CAAC,KAAK,IAAgB,KAAK,GAAG;;aAC5B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAYxC,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":"PlBtnGhost.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"names":[],"mappings":"AAkFA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAMxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEd;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;UAhBhB,IAAI;UAQJ,cAAc;mBAQL,OAAO;;cA0Gb,CAAC,KAAK,IAAgB,KAAK,GAAG;;WACjC,CAAC,KAAK,IAAgB,KAAK,GAAG;;aAC5B,CAAC,KAAK,IAAiB,KAAK,GAAG;EAYxC,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/PlBtnGhost/PlBtnGhost.vue2.js

@@ -4,7 +4,10 @@ import { useRipple as t } from "../../composition/useRipple.js";
 import './pl-btn-ghost.css';/* empty css             */
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, unref as d, useSlots as f } from "vue";
 //#region src/components/PlBtnGhost/PlBtnGhost.vue?vue&type=script&setup=true&lang.ts
-var p = { key: 0 }, m = /* @__PURE__ */ o({
+var p = {
+	key: 0,
+	"data-testid": "pl-btn-ghost-label"
+}, m = /* @__PURE__ */ o({
 	name: "PlBtnGhost",
 	props: {
 		loading: { type: Boolean },
@@ -23,6 +26,7 @@ var p = { key: 0 }, m = /* @__PURE__ */ o({
 			ref_key: "btnRef",
 			ref: _,
 			tabindex: "0",
+			"data-testid": "pl-btn-ghost",
 			class: ["pl-btn-ghost", {
 				loading: o.loading,
 				small: h.value,
@@ -39,10 +43,12 @@ var p = { key: 0 }, m = /* @__PURE__ */ o({
 			d(v).default && !o.round ? (c(), a("span", p, [u(t.$slots, "default")])) : i("", !0),
 			u(t.$slots, "icon", {}, () => [o.loading ? (c(), r(d(e), {
 				key: 0,
+				"data-testid": "pl-btn-ghost-loading",
 				name: "loading",
 				size: o.size
 			}, null, 8, ["size"])) : o.icon ? (c(), r(d(e), {
 				key: 1,
+				"data-testid": "pl-btn-ghost-icon",
 				name: o.icon,
 				size: o.size
 			}, null, 8, ["name", "size"])) : i("", !0)]),

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGhost.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n  name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n     */\n    loading?: boolean;\n    /**\n     * Size of the button, the default value is 'medium'\n     */\n    size?: Size;\n    /**\n     * If `true` the shape is round.\n     */\n    round?: boolean;\n    /**\n     * Icon to display\n     */\n    icon?: MaskIconName24;\n    /**\n     * If `true`, an icon is displayed before the text.\n     */\n    reverse?: boolean;\n    /**\n     * Justify text at the center (is `false` by default)\n     */\n    justifyCenter?: boolean;\n  }>(),\n  {\n    size: undefined,\n    icon: undefined,\n    justifyCenter: false,\n  },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n  <button\n    ref=\"btnRef\"\n    tabindex=\"0\"\n    class=\"pl-btn-ghost\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"slots.default && !round\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon24 v-if=\"loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon24 v-else-if=\"icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n    <slot name=\"append\" />\n  </button>\n</template>\n"],"mappings":";;;;;;;CAKE,MAAM;;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAkCR,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAC9C,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAE9C,IAAS,GAAK,EAEd,IAAQ,GAAU;SAExB,EAAU,EAAO,kBAIf,EAeS,UAfT,EAeS;YAdH;GAAJ,KAAI;GACJ,UAAS;GACT,OAAK,CAAC,gBAAc;IAAA,SACV,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA,CAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA;GAEtD,EAAA,EAAK,CAAC,WAAO,CAAK,EAAA,SAAA,GAAA,EAA9B,EAEO,QAAA,GAAA,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA2D,EAAA,EAAA,EAAA;;IAA9B,MAAK;IAAW,MAAM,EAAA;4BAC1B,EAAA,QAAA,GAAA,EAAzB,EAA2D,EAAA,EAAA,EAAA;;IAA3B,MAAM,EAAA;IAAO,MAAM,EAAA;;GAErD,EAAsB,EAAA,QAAA,SAAA"}
+{"version":3,"file":"PlBtnGhost.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlBtnGhost/PlBtnGhost.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Ghost button\n */\nexport default {\n  name: \"PlBtnGhost\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-ghost.scss\";\nimport type { MaskIconName24, Size } from \"../../types\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { computed, ref, useSlots } from \"vue\";\nimport { useRipple } from \"../../composition/useRipple\";\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n     */\n    loading?: boolean;\n    /**\n     * Size of the button, the default value is 'medium'\n     */\n    size?: Size;\n    /**\n     * If `true` the shape is round.\n     */\n    round?: boolean;\n    /**\n     * Icon to display\n     */\n    icon?: MaskIconName24;\n    /**\n     * If `true`, an icon is displayed before the text.\n     */\n    reverse?: boolean;\n    /**\n     * Justify text at the center (is `false` by default)\n     */\n    justifyCenter?: boolean;\n  }>(),\n  {\n    size: undefined,\n    icon: undefined,\n    justifyCenter: false,\n  },\n);\n\nconst small = computed(() => props.size === \"small\");\nconst large = computed(() => props.size === \"large\");\n\nconst btnRef = ref();\n\nconst slots = useSlots();\n\nuseRipple(btnRef);\n</script>\n\n<template>\n  <button\n    ref=\"btnRef\"\n    tabindex=\"0\"\n    data-testid=\"pl-btn-ghost\"\n    class=\"pl-btn-ghost\"\n    :class=\"{ loading, small, large, round, reverse, justifyCenter, [$attrs.class + '']: true }\"\n    v-bind=\"{ ...$attrs, disabled: Boolean($attrs.disabled) || loading }\"\n  >\n    <span v-if=\"slots.default && !round\" data-testid=\"pl-btn-ghost-label\">\n      <slot />\n    </span>\n    <slot name=\"icon\">\n      <PlMaskIcon24 v-if=\"loading\" data-testid=\"pl-btn-ghost-loading\" name=\"loading\" :size=\"size\" />\n      <PlMaskIcon24 v-else-if=\"icon\" data-testid=\"pl-btn-ghost-icon\" :name=\"icon\" :size=\"size\" />\n    </slot>\n    <slot name=\"append\" />\n  </button>\n</template>\n"],"mappings":";;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;EAWR,IAAM,IAAQ,GAkCR,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAC9C,IAAQ,QAAe,EAAM,SAAS,QAAQ,EAE9C,IAAS,GAAK,EAEd,IAAQ,GAAU;SAExB,EAAU,EAAO,kBAIf,EAgBS,UAhBT,EAgBS;YAfH;GAAJ,KAAI;GACJ,UAAS;GACT,eAAY;GACZ,OAAK,CAAC,gBAAc;IAAA,SACV,EAAA;IAAO,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,OAAE,EAAA;IAAK,SAAE,EAAA;IAAO,eAAE,EAAA;KAAgBA,EAAAA,OAAO,QAAK,KAAA;IAAA,CAAA;;MAChEA,EAAAA;GAAM,UAAY,EAAQA,EAAAA,OAAO,YAAa,EAAA;GAAO,CAAA,EAAA;GAEtD,EAAA,EAAK,CAAC,WAAO,CAAK,EAAA,SAAA,GAAA,EAA9B,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAEV,EAGO,EAAA,QAAA,QAAA,EAAA,QAAA,CAFe,EAAA,WAAA,GAAA,EAApB,EAA8F,EAAA,EAAA,EAAA;;IAAjE,eAAY;IAAuB,MAAK;IAAW,MAAM,EAAA;4BAC7D,EAAA,QAAA,GAAA,EAAzB,EAA2F,EAAA,EAAA,EAAA;;IAA5D,eAAY;IAAqB,MAAM,EAAA;IAAO,MAAM,EAAA;;GAErF,EAAsB,EAAA,QAAA,SAAA"}

package/dist/components/PlBtnGroup/PlBtnGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGroup.js","names":[],"sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlBtnGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-btn-group.scss\";\nimport { computed, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport InnerBorder from \"../../utils/InnerBorder.vue\";\nimport type { SimpleOption } from \"../../types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst slots = useSlots();\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\nconst props = defineProps<{\n  /**\n   * The current selected value.\n   */\n  modelValue?: M;\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<SimpleOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the height of the component is 32px\n   */\n  compact?: boolean;\n  /**\n   * A helper text displayed below the component when there are no errors (optional).\n   */\n  helper?: string;\n  /**\n   * Error message displayed below the component (optional)\n   */\n  error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n  props.options.map((it) => ({\n    label: \"label\" in it ? it.label : it.text,\n    value: it.value,\n  })),\n);\n</script>\n\n<template>\n  <div class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n    <label v-if=\"label\">\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    <InnerBorder class=\"pl-btn-group__container\">\n      <div\n        v-for=\"(opt, i) in normalizedOptions\"\n        :key=\"i\"\n        class=\"pl-btn-group__option text-s\"\n        :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n        :class=\"{ active: modelValue === opt.value }\"\n        @keydown.enter=\"emitModel(opt.value)\"\n        @click=\"emitModel(opt.value)\"\n      >\n        {{ opt.label }}\n      </div>\n    </InnerBorder>\n    <div v-if=\"helper\" class=\"pl-btn-group__helper\">{{ helper }}</div>\n    <div v-else-if=\"error\" class=\"pl-btn-group__error\">{{ getErrorMessage(error) }}</div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnGroup.js","names":[],"sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlBtnGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-btn-group.scss\";\nimport { computed, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport InnerBorder from \"../../utils/InnerBorder.vue\";\nimport type { SimpleOption } from \"../../types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst slots = useSlots();\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\nconst props = defineProps<{\n  /**\n   * The current selected value.\n   */\n  modelValue?: M;\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<SimpleOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the height of the component is 32px\n   */\n  compact?: boolean;\n  /**\n   * A helper text displayed below the component when there are no errors (optional).\n   */\n  helper?: string;\n  /**\n   * Error message displayed below the component (optional)\n   */\n  error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n  props.options.map((it) => ({\n    label: \"label\" in it ? it.label : it.text,\n    value: it.value,\n  })),\n);\n</script>\n\n<template>\n  <div data-testid=\"pl-btn-group\" class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n    <label v-if=\"label\" data-testid=\"pl-btn-group-label\">\n      <span>{{ label }}</span>\n      <PlTooltip\n        v-if=\"slots.tooltip\"\n        data-testid=\"pl-btn-group-tooltip\"\n        class=\"info\"\n        position=\"top\"\n      >\n        <template #tooltip>\n          <slot name=\"tooltip\" />\n        </template>\n      </PlTooltip>\n    </label>\n    <InnerBorder data-testid=\"pl-btn-group-options\" class=\"pl-btn-group__container\">\n      <div\n        v-for=\"(opt, i) in normalizedOptions\"\n        :key=\"i\"\n        data-testid=\"pl-btn-group-option\"\n        class=\"pl-btn-group__option text-s\"\n        :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n        :class=\"{ active: modelValue === opt.value }\"\n        @keydown.enter=\"emitModel(opt.value)\"\n        @click=\"emitModel(opt.value)\"\n      >\n        {{ opt.label }}\n      </div>\n    </InnerBorder>\n    <div v-if=\"helper\" data-testid=\"pl-btn-group-helper\" class=\"pl-btn-group__helper\">\n      {{ helper }}\n    </div>\n    <div v-else-if=\"error\" data-testid=\"pl-btn-group-error\" class=\"pl-btn-group__error\">\n      {{ getErrorMessage(error) }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"names":[],"mappings":"AAiGA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,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;WA+KO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAjKtD;;WAEG;qBACU,CAAC;QACd;;WAEG;gBACK,MAAM;QACd;;WAEG;iBACM,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QACpC;;WAEG;mBACQ,OAAO;QAClB;;WAEG;kBACO,OAAO;QACjB;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;;;KAsI0E,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;;kBARG,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAlKtC,mBAAmB,SAAS,CAAC,KAAG,IAAI;EA8KtC,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":"PlBtnGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"names":[],"mappings":"AA2GA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,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;WAwLO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA1KtD;;WAEG;qBACU,CAAC;QACd;;WAEG;gBACK,MAAM;QACd;;WAEG;iBACM,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QACpC;;WAEG;mBACQ,OAAO;QAClB;;WAEG;kBACO,OAAO;QACjB;;WAEG;iBACM,MAAM;QACf;;WAEG;gBACK,OAAO;;;KA+I0E,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;;kBARG,CAAC,KAAK,IAAgB,KAAK,GAAG;;cA3KtC,mBAAmB,SAAS,CAAC,KAAG,IAAI;EAuLtC,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/PlBtnGroup/PlBtnGroup.vue2.js

@@ -5,15 +5,20 @@ import './pl-btn-group.css';/* empty css             */
 import n from "../../utils/InnerBorder.js";
 import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useSlots as _, withCtx as v, withKeys as y } from "vue";
 //#region src/components/PlBtnGroup/PlBtnGroup.vue?vue&type=script&setup=true&lang.ts
-var b = { key: 0 }, x = [
+var b = {
+	key: 0,
+	"data-testid": "pl-btn-group-label"
+}, x = [
 	"tabindex",
 	"onKeydown",
 	"onClick"
 ], S = {
 	key: 1,
+	"data-testid": "pl-btn-group-helper",
 	class: "pl-btn-group__helper"
 }, C = {
 	key: 2,
+	"data-testid": "pl-btn-group-error",
 	class: "pl-btn-group__error"
 }, w = /* @__PURE__ */ u({
 	name: "PlBtnGroup",
@@ -32,21 +37,29 @@ var b = { key: 0 }, x = [
 			label: "label" in e ? e.label : e.text,
 			value: e.value
 		})));
-		return (i, _) => (f(), s("div", { class: d(["pl-btn-group", {
-			disabled: u.disabled,
-			compact: u.compact
-		}]) }, [
+		return (i, _) => (f(), s("div", {
+			"data-testid": "pl-btn-group",
+			class: d(["pl-btn-group", {
+				disabled: u.disabled,
+				compact: u.compact
+			}])
+		}, [
 			u.label ? (f(), s("label", b, [c("span", null, h(u.label), 1), g(T).tooltip ? (f(), a(g(e), {
 				key: 0,
+				"data-testid": "pl-btn-group-tooltip",
 				class: "info",
 				position: "top"
 			}, {
 				tooltip: v(() => [m(i.$slots, "tooltip")]),
 				_: 3
 			})) : o("", !0)])) : o("", !0),
-			l(n, { class: "pl-btn-group__container" }, {
+			l(n, {
+				"data-testid": "pl-btn-group-options",
+				class: "pl-btn-group__container"
+			}, {
 				default: v(() => [(f(!0), s(r, null, p(k.value, (e, t) => (f(), s("div", {
 					key: t,
+					"data-testid": "pl-btn-group-option",
 					class: d(["pl-btn-group__option text-s", { active: u.modelValue === e.value }]),
 					tabindex: u.modelValue === e.value || u.disabled ? void 0 : 0,
 					onKeydown: y((t) => D(e.value), ["enter"]),

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlBtnGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-btn-group.scss\";\nimport { computed, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport InnerBorder from \"../../utils/InnerBorder.vue\";\nimport type { SimpleOption } from \"../../types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst slots = useSlots();\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\nconst props = defineProps<{\n  /**\n   * The current selected value.\n   */\n  modelValue?: M;\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<SimpleOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the height of the component is 32px\n   */\n  compact?: boolean;\n  /**\n   * A helper text displayed below the component when there are no errors (optional).\n   */\n  helper?: string;\n  /**\n   * Error message displayed below the component (optional)\n   */\n  error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n  props.options.map((it) => ({\n    label: \"label\" in it ? it.label : it.text,\n    value: it.value,\n  })),\n);\n</script>\n\n<template>\n  <div class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n    <label v-if=\"label\">\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    <InnerBorder class=\"pl-btn-group__container\">\n      <div\n        v-for=\"(opt, i) in normalizedOptions\"\n        :key=\"i\"\n        class=\"pl-btn-group__option text-s\"\n        :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n        :class=\"{ active: modelValue === opt.value }\"\n        @keydown.enter=\"emitModel(opt.value)\"\n        @click=\"emitModel(opt.value)\"\n      >\n        {{ opt.label }}\n      </div>\n    </InnerBorder>\n    <div v-if=\"helper\" class=\"pl-btn-group__helper\">{{ helper }}</div>\n    <div v-else-if=\"error\" class=\"pl-btn-group__error\">{{ getErrorMessage(error) }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;EAYR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,KAAa,MAAS,EAAK,qBAAqB,EAAE,EAElD,IAAQ,GA+BR,IAAoB,QACxB,EAAM,QAAQ,KAAK,OAAQ;GACzB,OAAO,WAAW,IAAK,EAAG,QAAQ,EAAG;GACrC,OAAO,EAAG;GACX,EAAE,CACJ;yBAIC,EAwBM,OAAA,EAxBD,OAAK,EAAA,CAAC,gBAAc;GAAA,UAAW,EAAA;GAAQ,SAAE,EAAA;GAAO,CAAA,CAAA,EAAA,EAAA;GACtC,EAAA,SAAA,GAAA,EAAb,EAOQ,SAAA,GAAA,CANN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;IAJoB,OAAM;IAAO,UAAS;;IACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;GAI7B,EAYc,GAAA,EAZD,OAAM,2BAAyB,EAAA;qBAEH,EAAA,EAAA,GAAA,EADvC,EAUM,GAAA,MAAA,EATe,EAAA,QAAX,GAAK,YADf,EAUM,OAAA;KARH,KAAK;KACN,OAAK,EAAA,CAAC,+BAA6B,EAAA,QAEjB,EAAA,eAAe,EAAI,OAAK,CAAA,CAAA;KADzC,UAAU,EAAA,eAAe,EAAI,SAAS,EAAA,WAAW,KAAA,IAAS;KAE1D,WAAO,GAAA,MAAQ,EAAU,EAAI,MAAK,EAAA,CAAA,QAAA,CAAA;KAClC,UAAK,MAAE,EAAU,EAAI,MAAK;SAExB,EAAI,MAAK,EAAA,IAAA,EAAA;;;GAGL,EAAA,UAAA,GAAA,EAAX,EAAkE,OAAlE,GAAkE,EAAf,EAAA,OAAM,EAAA,EAAA,IACzC,EAAA,SAAA,GAAA,EAAhB,EAAqF,OAArF,GAAqF,EAA/B,EAAA,EAAe,CAAC,EAAA,MAAK,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"PlBtnGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnGroup/PlBtnGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlBtnGroup\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport \"./pl-btn-group.scss\";\nimport { computed, useSlots } from \"vue\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport InnerBorder from \"../../utils/InnerBorder.vue\";\nimport type { SimpleOption } from \"../../types\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\n\nconst slots = useSlots();\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\nconst props = defineProps<{\n  /**\n   * The current selected value.\n   */\n  modelValue?: M;\n  /**\n   * The label text for the component (optional)\n   */\n  label?: string;\n  /**\n   * List of available options for the component\n   */\n  options: Readonly<SimpleOption<M>[]>;\n  /**\n   * If `true`, the component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the height of the component is 32px\n   */\n  compact?: boolean;\n  /**\n   * A helper text displayed below the component when there are no errors (optional).\n   */\n  helper?: string;\n  /**\n   * Error message displayed below the component (optional)\n   */\n  error?: unknown;\n}>();\n\nconst normalizedOptions = computed(() =>\n  props.options.map((it) => ({\n    label: \"label\" in it ? it.label : it.text,\n    value: it.value,\n  })),\n);\n</script>\n\n<template>\n  <div data-testid=\"pl-btn-group\" class=\"pl-btn-group\" :class=\"{ disabled, compact }\">\n    <label v-if=\"label\" data-testid=\"pl-btn-group-label\">\n      <span>{{ label }}</span>\n      <PlTooltip\n        v-if=\"slots.tooltip\"\n        data-testid=\"pl-btn-group-tooltip\"\n        class=\"info\"\n        position=\"top\"\n      >\n        <template #tooltip>\n          <slot name=\"tooltip\" />\n        </template>\n      </PlTooltip>\n    </label>\n    <InnerBorder data-testid=\"pl-btn-group-options\" class=\"pl-btn-group__container\">\n      <div\n        v-for=\"(opt, i) in normalizedOptions\"\n        :key=\"i\"\n        data-testid=\"pl-btn-group-option\"\n        class=\"pl-btn-group__option text-s\"\n        :tabindex=\"modelValue === opt.value || disabled ? undefined : 0\"\n        :class=\"{ active: modelValue === opt.value }\"\n        @keydown.enter=\"emitModel(opt.value)\"\n        @click=\"emitModel(opt.value)\"\n      >\n        {{ opt.label }}\n      </div>\n    </InnerBorder>\n    <div v-if=\"helper\" data-testid=\"pl-btn-group-helper\" class=\"pl-btn-group__helper\">\n      {{ helper }}\n    </div>\n    <div v-else-if=\"error\" data-testid=\"pl-btn-group-error\" class=\"pl-btn-group__error\">\n      {{ getErrorMessage(error) }}\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;EAYR,IAAM,IAAQ,GAAU,EAElB,IAAO,GAOP,KAAa,MAAS,EAAK,qBAAqB,EAAE,EAElD,IAAQ,GA+BR,IAAoB,QACxB,EAAM,QAAQ,KAAK,OAAQ;GACzB,OAAO,WAAW,IAAK,EAAG,QAAQ,EAAG;GACrC,OAAO,EAAG;GACX,EAAE,CACJ;yBAIC,EAkCM,OAAA;GAlCD,eAAY;GAAe,OAAK,EAAA,CAAC,gBAAc;IAAA,UAAW,EAAA;IAAQ,SAAE,EAAA;IAAO,CAAA,CAAA;;GACjE,EAAA,SAAA,GAAA,EAAb,EAYQ,SAZR,GAYQ,CAXN,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA,EAEN,EAAA,EAAK,CAAC,WAAA,GAAA,EADd,EASY,EAAA,EAAA,EAAA;;IAPV,eAAY;IACZ,OAAM;IACN,UAAS;;IAEE,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;GAI7B,EAac,GAAA;IAbD,eAAY;IAAuB,OAAM;;qBAEb,EAAA,EAAA,GAAA,EADvC,EAWM,GAAA,MAAA,EAVe,EAAA,QAAX,GAAK,YADf,EAWM,OAAA;KATH,KAAK;KACN,eAAY;KACZ,OAAK,EAAA,CAAC,+BAA6B,EAAA,QAEjB,EAAA,eAAe,EAAI,OAAK,CAAA,CAAA;KADzC,UAAU,EAAA,eAAe,EAAI,SAAS,EAAA,WAAW,KAAA,IAAS;KAE1D,WAAO,GAAA,MAAQ,EAAU,EAAI,MAAK,EAAA,CAAA,QAAA,CAAA;KAClC,UAAK,MAAE,EAAU,EAAI,MAAK;SAExB,EAAI,MAAK,EAAA,IAAA,EAAA;;;GAGL,EAAA,UAAA,GAAA,EAAX,EAEM,OAFN,GAEM,EADD,EAAA,OAAM,EAAA,EAAA,IAEK,EAAA,SAAA,GAAA,EAAhB,EAEM,OAFN,GAEM,EADD,EAAA,EAAe,CAAC,EAAA,MAAK,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/PlBtnLink/PlBtnLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnLink.js","names":[],"sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-btn-link.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnSecondary from \"../PlBtnSecondary/PlBtnSecondary.vue\";\nimport { ref } from \"vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center (is `true` by default)\n   */\n  justifyCenter?: boolean;\n  /**\n   * If `true`, the button is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n}>();\n\nconst hover = ref(false);\n</script>\n\n<template>\n  <div\n    class=\"ui-btn-link\"\n    :class=\"{ disabled, loading, hover }\"\n    @mouseover=\"hover = true\"\n    @mouseleave=\"hover = false\"\n  >\n    <BtnSecondary round :hover=\"hover\" v-bind=\"props\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnLink.js","names":[],"sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-btn-link.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnSecondary from \"../PlBtnSecondary/PlBtnSecondary.vue\";\nimport { ref } from \"vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center (is `true` by default)\n   */\n  justifyCenter?: boolean;\n  /**\n   * If `true`, the button is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n}>();\n\nconst hover = ref(false);\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-btn-link\"\n    class=\"ui-btn-link\"\n    :class=\"{ disabled, loading, hover }\"\n    @mouseover=\"hover = true\"\n    @mouseleave=\"hover = false\"\n  >\n    <BtnSecondary data-testid=\"pl-btn-link-button\" round :hover=\"hover\" v-bind=\"props\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"names":[],"mappings":"AAkDA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuDF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PlBtnLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"names":[],"mappings":"AAmDA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0DF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/PlBtnLink/PlBtnLink.vue2.js

@@ -15,6 +15,7 @@ var l = /* @__PURE__ */ r({
 	setup(r) {
 		let l = r, u = s(!1);
 		return (s, d) => (o(), t("div", {
+			"data-testid": "pl-btn-link",
 			class: a(["ui-btn-link", {
 				disabled: r.disabled,
 				loading: r.loading,
@@ -23,6 +24,7 @@ var l = /* @__PURE__ */ r({
 			onMouseover: d[0] ||= (e) => u.value = !0,
 			onMouseleave: d[1] ||= (e) => u.value = !1
 		}, [n(e, i({
+			"data-testid": "pl-btn-link-button",
 			round: "",
 			hover: u.value
 		}, l), null, 16, ["hover"]), c(s.$slots, "default")], 34));

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnLink.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-btn-link.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnSecondary from \"../PlBtnSecondary/PlBtnSecondary.vue\";\nimport { ref } from \"vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center (is `true` by default)\n   */\n  justifyCenter?: boolean;\n  /**\n   * If `true`, the button is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n}>();\n\nconst hover = ref(false);\n</script>\n\n<template>\n  <div\n    class=\"ui-btn-link\"\n    :class=\"{ disabled, loading, hover }\"\n    @mouseover=\"hover = true\"\n    @mouseleave=\"hover = false\"\n  >\n    <BtnSecondary round :hover=\"hover\" v-bind=\"props\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GA2BR,IAAQ,EAAI,GAAM;yBAItB,EAQM,OAAA;GAPJ,OAAK,EAAA,CAAC,eAAa;IAAA,UACT,EAAA;IAAQ,SAAE,EAAA;IAAO,OAAE,EAAA;IAAK,CAAA,CAAA;GACjC,aAAS,AAAA,EAAA,QAAA,MAAE,EAAA,QAAK;GAChB,cAAU,AAAA,EAAA,QAAA,MAAE,EAAA,QAAK;MAElB,EAAoD,GAApD,EAAoD;GAAtC,OAAA;GAAO,OAAO,EAAA;KAAe,EAAK,EAAA,MAAA,IAAA,CAAA,QAAA,CAAA,EAChD,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"PlBtnLink.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnLink/PlBtnLink.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport \"./pl-btn-link.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnSecondary from \"../PlBtnSecondary/PlBtnSecondary.vue\";\nimport { ref } from \"vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center (is `true` by default)\n   */\n  justifyCenter?: boolean;\n  /**\n   * If `true`, the button is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n}>();\n\nconst hover = ref(false);\n</script>\n\n<template>\n  <div\n    data-testid=\"pl-btn-link\"\n    class=\"ui-btn-link\"\n    :class=\"{ disabled, loading, hover }\"\n    @mouseover=\"hover = true\"\n    @mouseleave=\"hover = false\"\n  >\n    <BtnSecondary data-testid=\"pl-btn-link-button\" round :hover=\"hover\" v-bind=\"props\" />\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAMA,IAAM,IAAQ,GA2BR,IAAQ,EAAI,GAAM;yBAItB,EASM,OAAA;GARJ,eAAY;GACZ,OAAK,EAAA,CAAC,eAAa;IAAA,UACT,EAAA;IAAQ,SAAE,EAAA;IAAO,OAAE,EAAA;IAAK,CAAA,CAAA;GACjC,aAAS,AAAA,EAAA,QAAA,MAAE,EAAA,QAAK;GAChB,cAAU,AAAA,EAAA,QAAA,MAAE,EAAA,QAAK;MAElB,EAAqF,GAArF,EAAqF;GAAvE,eAAY;GAAqB,OAAA;GAAO,OAAO,EAAA;KAAe,EAAK,EAAA,MAAA,IAAA,CAAA,QAAA,CAAA,EACjF,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA"}

package/dist/components/PlBtnPrimary/PlBtnPrimary.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnPrimary.js","names":[],"sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Primary button\n */\nexport default {\n  name: \"PlBtnPrimary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-primary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-primary\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnPrimary.js","names":[],"sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Primary button\n */\nexport default {\n  name: \"PlBtnPrimary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-primary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-primary\" class=\"pl-btn-primary\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnPrimary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"names":[],"mappings":"AAkDA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAoCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,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":"PlBtnPrimary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"names":[],"mappings":"AAkDA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAsCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,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/PlBtnPrimary/PlBtnPrimary.vue2.js

@@ -13,7 +13,10 @@ var s = /* @__PURE__ */ n({
 	},
 	setup(n) {
 		let s = n;
-		return (n, c) => (i(), t(e, r({ class: "pl-btn-primary" }, s), {
+		return (n, c) => (i(), t(e, r({
+			"data-testid": "pl-btn-primary",
+			class: "pl-btn-primary"
+		}, s), {
 			default: o(() => [a(n.$slots, "default")]),
 			_: 3
 		}, 16));

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnPrimary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Primary button\n */\nexport default {\n  name: \"PlBtnPrimary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-primary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase class=\"pl-btn-primary\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAEU,EAFD,OAAM,kBAAgB,EAAS,EAAK,EAAA;oBACnC,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"PlBtnPrimary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnPrimary/PlBtnPrimary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Primary button\n */\nexport default {\n  name: \"PlBtnPrimary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-primary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-primary\" class=\"pl-btn-primary\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAEU;GAFD,eAAY;GAAiB,OAAM;KAAyB,EAAK,EAAA;oBAChE,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlBtnSecondary/PlBtnSecondary.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSecondary.js","names":[],"sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Secondary button\n */\nexport default {\n  name: \"PlBtnSecondary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-secondary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase v-bind=\"props\" class=\"pl-btn-secondary\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnSecondary.js","names":[],"sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Secondary button\n */\nexport default {\n  name: \"PlBtnSecondary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-secondary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-secondary\" v-bind=\"props\" class=\"pl-btn-secondary\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSecondary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"names":[],"mappings":"AAkDA,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAoCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,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":"PlBtnSecondary.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"names":[],"mappings":"AAkDA,OAAO,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxD;;GAEG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY;IAEhB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;IAvBvB;;OAEG;cACO,OAAO;IACjB;;OAEG;WACI,IAAI;IACX;;OAEG;YACK,OAAO;IACf;;OAEG;WACI,cAAc;IACrB;;OAEG;cACO,OAAO;IACjB;;OAEG;oBACa,OAAO;;cAsCX,CAAC,KAAK,IAAgB,KAAK,GAAG;EAOxC,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/PlBtnSecondary/PlBtnSecondary.vue2.js

@@ -13,7 +13,7 @@ var s = /* @__PURE__ */ n({
 	},
 	setup(n) {
 		let s = n;
-		return (n, c) => (i(), t(e, r(s, { class: "pl-btn-secondary" }), {
+		return (n, c) => (i(), t(e, r({ "data-testid": "pl-btn-secondary" }, s, { class: "pl-btn-secondary" }), {
 			default: o(() => [a(n.$slots, "default")]),
 			_: 3
 		}, 16));

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSecondary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Secondary button\n */\nexport default {\n  name: \"PlBtnSecondary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-secondary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase v-bind=\"props\" class=\"pl-btn-secondary\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAAiB,GAAK,EAAE,OAAM,oBAAkB,CAAA,EAAA;oBACtC,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"PlBtnSecondary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnSecondary/PlBtnSecondary.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Secondary button\n */\nexport default {\n  name: \"PlBtnSecondary\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport \"./pl-btn-secondary.scss\";\nimport type { MaskIconName16, Size } from \"../../types\";\nimport BtnBase from \"../../base/BtnBase.vue\";\n\nconst props = defineProps<{\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n  /**\n   * Size of the button, the default value is 'medium'\n   */\n  size?: Size;\n  /**\n   * If `true` the shape is round.\n   */\n  round?: boolean;\n  /**\n   * Icon to display\n   */\n  icon?: MaskIconName16;\n  /**\n   * If `true`, an icon is displayed before the text.\n   */\n  reverse?: boolean;\n  /**\n   * Justify text at the center\n   */\n  justifyCenter?: boolean;\n}>();\n</script>\n\n<template>\n  <BtnBase data-testid=\"pl-btn-secondary\" v-bind=\"props\" class=\"pl-btn-secondary\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;EASR,IAAM,IAAQ;yBA6BZ,EAEU,GAFV,EAEU,EAFD,eAAY,oBAAkB,EAAS,GAAK,EAAE,OAAM,oBAAkB,CAAA,EAAA;oBACrE,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlBtnSplit/PlBtnSplit.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSplit.js","names":[],"sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, unref, watch } from \"vue\";\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\n\nimport \"./pl-btn-split.scss\";\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits([\"click\"]);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: \"0px\",\n  left: \"0px\",\n  width: \"0px\",\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? \"chevron-up\" : \"chevron-down\"));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(\n  () =>\n    items.value.find((o) => deepEqual(o.value, model.value))?.label ??\n    (props.options === undefined ? \"...\" : \"\"),\n);\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + \"px\";\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n  }\n\n  optionsStyle.left = pos.left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits(\"click\");\n}\n\nconst handleKeydown = (e: {\n  code: string;\n  preventDefault(): void;\n  stopPropagation(): void;\n  target: EventTarget | null;\n}) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === \"Enter\") {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div\n      ref=\"menuActivator\"\n      class=\"pl-btn-split__icon-container d-flex align-center justify-center\"\n      tabindex=\"0\"\n      @click=\"data.open = !data.open\"\n    >\n      <PlIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n      <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnSplit.js","names":[],"sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, unref, watch } from \"vue\";\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\n\nimport \"./pl-btn-split.scss\";\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits([\"click\"]);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: \"0px\",\n  left: \"0px\",\n  width: \"0px\",\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? \"chevron-up\" : \"chevron-down\"));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(\n  () =>\n    items.value.find((o) => deepEqual(o.value, model.value))?.label ??\n    (props.options === undefined ? \"...\" : \"\"),\n);\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + \"px\";\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n  }\n\n  optionsStyle.left = pos.left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits(\"click\");\n}\n\nconst handleKeydown = (e: {\n  code: string;\n  preventDefault(): void;\n  stopPropagation(): void;\n  target: EventTarget | null;\n}) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === \"Enter\") {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    data-testid=\"pl-btn-split\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      data-testid=\"pl-btn-split-action\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div\n      ref=\"menuActivator\"\n      data-testid=\"pl-btn-split-toggle\"\n      class=\"pl-btn-split__icon-container d-flex align-center justify-center\"\n      tabindex=\"0\"\n      @click=\"data.open = !data.open\"\n    >\n      <PlIcon16 v-if=\"isLoadingOptions\" data-testid=\"pl-btn-split-loading\" name=\"loading\" />\n      <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div\n        ref=\"list\"\n        data-testid=\"pl-btn-split-menu\"\n        class=\"pl-dropdown__options\"\n        :style=\"optionsStyle\"\n        tabindex=\"-1\"\n      >\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          data-testid=\"pl-btn-split-option\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSplit.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"names":[],"mappings":"AA8NA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,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;WA6UO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QA3UtD;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnC;;WAEG;mBACQ,OAAO;QAElB;;WAEG;kBACO,OAAO;;oBAwJP,CAAC;;;;KAsK8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;WACH,EAAE;UACH,6FAAqC;EAExC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,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":"PlBtnSplit.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"names":[],"mappings":"AAwOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,YAAY,GAAK,CAAC,GAAG,OAAO,EACjC,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;WAqVO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;QAnVtD;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnC;;WAEG;mBACQ,OAAO;QAElB;;WAEG;kBACO,OAAO;;oBAwJP,CAAC;;;;KA8K8E,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;WACH,EAAE;UACH,6FAAqC;EAExC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,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/PlBtnSplit/PlBtnSplit.vue2.js

@@ -83,12 +83,14 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 				disabled: d.disabled || B.value,
 				loading: B.value
 			}, "pl-btn-split d-flex"]),
+			"data-testid": "pl-btn-split",
 			onFocusout: G,
 			onKeydown: W
 		}, [
 			u("div", {
 				ref_key: "buttonAction",
 				ref: P,
+				"data-testid": "pl-btn-split-action",
 				class: "pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn",
 				tabindex: "0",
 				onClick: U,
@@ -97,11 +99,13 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 			u("div", {
 				ref_key: "menuActivator",
 				ref: N,
+				"data-testid": "pl-btn-split-toggle",
 				class: "pl-btn-split__icon-container d-flex align-center justify-center",
 				tabindex: "0",
 				onClick: r[0] ||= (e) => F.open = !F.open
 			}, [B.value ? (h(), s(b(n), {
 				key: 0,
+				"data-testid": "pl-btn-split-loading",
 				name: "loading"
 			})) : (h(), s(b(n), {
 				key: 1,
@@ -114,10 +118,12 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 			}, [u("div", {
 				ref_key: "list",
 				ref: M,
+				"data-testid": "pl-btn-split-menu",
 				class: "pl-dropdown__options",
 				style: m(I),
 				tabindex: "-1"
 			}, [(h(!0), l(i, null, v(z.value, (t, n) => (h(), s(e, {
+				"data-testid": "pl-btn-split-option",
 				key: n,
 				option: t,
 				"is-selected": t.isSelected,

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSplit.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, unref, watch } from \"vue\";\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\n\nimport \"./pl-btn-split.scss\";\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits([\"click\"]);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: \"0px\",\n  left: \"0px\",\n  width: \"0px\",\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? \"chevron-up\" : \"chevron-down\"));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(\n  () =>\n    items.value.find((o) => deepEqual(o.value, model.value))?.label ??\n    (props.options === undefined ? \"...\" : \"\"),\n);\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + \"px\";\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n  }\n\n  optionsStyle.left = pos.left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits(\"click\");\n}\n\nconst handleKeydown = (e: {\n  code: string;\n  preventDefault(): void;\n  stopPropagation(): void;\n  target: EventTarget | null;\n}) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === \"Enter\") {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div\n      ref=\"menuActivator\"\n      class=\"pl-btn-split__icon-container d-flex align-center justify-center\"\n      tabindex=\"0\"\n      @click=\"data.open = !data.open\"\n    >\n      <PlIcon16 v-if=\"isLoadingOptions\" name=\"loading\" />\n      <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div ref=\"list\" class=\"pl-dropdown__options\" :style=\"optionsStyle\" tabindex=\"-1\">\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlBtnSplit.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"M = unknown\">\nimport { deepEqual } from \"@milaboratories/helpers\";\nimport { computed, reactive, ref, unref, watch } from \"vue\";\nimport { useElementPosition } from \"../../composition/usePosition\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\n\nimport \"./pl-btn-split.scss\";\n\nconst props = defineProps<{\n  /**\n   * List of available options for the dropdown menu\n   */\n  options?: Readonly<ListOption<M>[]>;\n\n  /**\n   * If `true`, the dropdown component is disabled and cannot be interacted with.\n   */\n  disabled?: boolean;\n\n  /**\n   * If `true,` the button is disabled, cannot be interacted with, and shows a special 'loading' icon.\n   */\n  loading?: boolean;\n}>();\n\nconst emits = defineEmits([\"click\"]);\n\nconst model = defineModel<M>({ required: true });\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst menuActivator = ref<HTMLElement | undefined>();\nconst buttonAction = ref<HTMLElement | undefined>();\n\nconst data = reactive({\n  open: false,\n  optionsHeight: 0,\n  activeIndex: -1,\n});\n\ndefineExpose({\n  data,\n});\n\nconst optionsStyle = reactive({\n  top: \"0px\",\n  left: \"0px\",\n  width: \"0px\",\n});\n\nwatch(\n  list,\n  (el) => {\n    if (el) {\n      const rect = el.getBoundingClientRect();\n      data.optionsHeight = rect.height;\n      window.dispatchEvent(new CustomEvent(\"adjust\"));\n    }\n  },\n  { immediate: true },\n);\n\nconst iconName = computed(() => (data.open ? \"chevron-up\" : \"chevron-down\"));\n\nconst selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, model.value));\n});\n\nconst items = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst isLoadingOptions = computed(() => props.loading || props.options === undefined);\n\nconst actionName = computed(\n  () =>\n    items.value.find((o) => deepEqual(o.value, model.value))?.label ??\n    (props.options === undefined ? \"...\" : \"\"),\n);\n\nuseElementPosition(root, (pos) => {\n  const focusWidth = 3;\n\n  const downTopOffset = pos.top + pos.height + focusWidth;\n\n  if (downTopOffset + data.optionsHeight > pos.clientHeight) {\n    optionsStyle.top = pos.top - data.optionsHeight - focusWidth + \"px\";\n  } else {\n    optionsStyle.top = downTopOffset + \"px\";\n  }\n\n  optionsStyle.left = pos.left + \"px\";\n  optionsStyle.width = pos.width + \"px\";\n});\n\nconst selectOption = (v: M | undefined) => {\n  model.value = v!;\n  data.open = false;\n  root?.value?.focus();\n};\n\nfunction emitEnter() {\n  emits(\"click\");\n}\n\nconst handleKeydown = (e: {\n  code: string;\n  preventDefault(): void;\n  stopPropagation(): void;\n  target: EventTarget | null;\n}) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  if (e.target === buttonAction.value && e.code === \"Enter\") {\n    emitEnter();\n    return;\n  }\n\n  const { open, activeIndex } = data;\n\n  if (!open && e.target === menuActivator.value) {\n    if (e.code === \"Enter\") {\n      data.open = true;\n    }\n    return;\n  }\n\n  if (e.code === \"Escape\") {\n    data.open = false;\n    root.value?.focus();\n  }\n\n  const filtered = unref(items);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = items.value[newIndex].index ?? -1;\n};\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (!root.value?.contains(relatedTarget) && !list.value?.contains(relatedTarget)) {\n    data.open = false;\n  }\n};\n</script>\n<template>\n  <div\n    ref=\"root\"\n    :class=\"{ disabled: disabled || isLoadingOptions, loading: isLoadingOptions }\"\n    data-testid=\"pl-btn-split\"\n    class=\"pl-btn-split d-flex\"\n    @focusout=\"onFocusOut\"\n    @keydown=\"handleKeydown\"\n  >\n    <div\n      ref=\"buttonAction\"\n      data-testid=\"pl-btn-split-action\"\n      class=\"pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn\"\n      tabindex=\"0\"\n      @click=\"emitEnter\"\n      @keyup.stop.enter=\"emitEnter\"\n    >\n      {{ actionName }}\n    </div>\n    <div\n      ref=\"menuActivator\"\n      data-testid=\"pl-btn-split-toggle\"\n      class=\"pl-btn-split__icon-container d-flex align-center justify-center\"\n      tabindex=\"0\"\n      @click=\"data.open = !data.open\"\n    >\n      <PlIcon16 v-if=\"isLoadingOptions\" data-testid=\"pl-btn-split-loading\" name=\"loading\" />\n      <PlIcon16 v-else :name=\"iconName\" class=\"pl-btn-split__icon\" />\n    </div>\n\n    <Teleport v-if=\"data.open\" to=\"body\">\n      <div\n        ref=\"list\"\n        data-testid=\"pl-btn-split-menu\"\n        class=\"pl-dropdown__options\"\n        :style=\"optionsStyle\"\n        tabindex=\"-1\"\n      >\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          data-testid=\"pl-btn-split-option\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"'medium'\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlChartHistogram/PlChartHistogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlChartHistogram.js","names":[],"sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from \"vue\";\nimport { createHistogramFromBins, createHistogramLinear, createHistogramLog } from \"./histogram\";\nimport type { ChartOptions, PlChartHistogramSettings } from \"./types\";\n\nconst props = defineProps<{\n  settings: PlChartHistogramSettings;\n}>();\n\nconst chart = ref<HTMLElement>();\n\nconst options = computed<ChartOptions>(() => {\n  const {\n    xAxisLabel,\n    yAxisLabel,\n    threshold,\n    compact,\n    totalWidth = 674,\n    totalHeight = 252,\n  } = props.settings;\n\n  const margin = compact\n    ? { top: 0, right: 0, bottom: 0, left: 0 }\n    : { top: 0, right: 30, bottom: 40, left: 85 };\n  const width = totalWidth - margin.left - margin.right;\n  const height = totalHeight - margin.top - margin.bottom;\n\n  return {\n    width,\n    height,\n    margin,\n    compact,\n    nBins: \"nBins\" in props.settings ? props.settings.nBins : 10,\n    xAxisLabel: xAxisLabel,\n    yAxisLabel: yAxisLabel,\n    threshold: threshold,\n  };\n});\n\nconst createHistogram = () => {\n  const settings = props.settings;\n\n  if (settings.type === \"log-bins\") {\n    createHistogramFromBins(chart.value!, options.value, settings.bins);\n    return;\n  }\n\n  if (settings.log) {\n    createHistogramLog(chart.value!, options.value, settings.numbers);\n  } else {\n    createHistogramLinear(chart.value!, options.value, settings.numbers);\n  }\n};\n\nwatch(props, createHistogram);\n\nonMounted(createHistogram);\n</script>\n\n<template>\n  <div :class=\"$style.component\">\n    <div v-if=\"settings.title && !settings.compact\" :class=\"$style.title\">{{ settings.title }}</div>\n    <div ref=\"chart\" />\n  </div>\n</template>\n\n<style module>\n.component {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  svg {\n    font-family: var(--font-family-base);\n  }\n}\n\n.title {\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px; /* 120% */\n  letter-spacing: -0.2px;\n}\n\n:global(.svg-tooltip) {\n  font-family: var(--font-family-base);\n  background: rgba(69, 77, 93, 0.9);\n  border-radius: 0.1rem;\n  color: #fff;\n  display: block;\n  font-size: 14px;\n  max-width: 320px;\n  padding: 0.2rem 0.4rem;\n  position: absolute;\n  text-overflow: ellipsis;\n  white-space: pre;\n  z-index: 300;\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlChartHistogram.js","names":[],"sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from \"vue\";\nimport { createHistogramFromBins, createHistogramLinear, createHistogramLog } from \"./histogram\";\nimport type { ChartOptions, PlChartHistogramSettings } from \"./types\";\n\nconst props = defineProps<{\n  settings: PlChartHistogramSettings;\n}>();\n\nconst chart = ref<HTMLElement>();\n\nconst options = computed<ChartOptions>(() => {\n  const {\n    xAxisLabel,\n    yAxisLabel,\n    threshold,\n    compact,\n    totalWidth = 674,\n    totalHeight = 252,\n  } = props.settings;\n\n  const margin = compact\n    ? { top: 0, right: 0, bottom: 0, left: 0 }\n    : { top: 0, right: 30, bottom: 40, left: 85 };\n  const width = totalWidth - margin.left - margin.right;\n  const height = totalHeight - margin.top - margin.bottom;\n\n  return {\n    width,\n    height,\n    margin,\n    compact,\n    nBins: \"nBins\" in props.settings ? props.settings.nBins : 10,\n    xAxisLabel: xAxisLabel,\n    yAxisLabel: yAxisLabel,\n    threshold: threshold,\n  };\n});\n\nconst createHistogram = () => {\n  const settings = props.settings;\n\n  if (settings.type === \"log-bins\") {\n    createHistogramFromBins(chart.value!, options.value, settings.bins);\n    return;\n  }\n\n  if (settings.log) {\n    createHistogramLog(chart.value!, options.value, settings.numbers);\n  } else {\n    createHistogramLinear(chart.value!, options.value, settings.numbers);\n  }\n};\n\nwatch(props, createHistogram);\n\nonMounted(createHistogram);\n</script>\n\n<template>\n  <div data-testid=\"pl-chart-histogram\" :class=\"$style.component\">\n    <div\n      v-if=\"settings.title && !settings.compact\"\n      data-testid=\"pl-chart-histogram-title\"\n      :class=\"$style.title\"\n    >\n      {{ settings.title }}\n    </div>\n    <div ref=\"chart\" data-testid=\"pl-chart-histogram-chart\" />\n  </div>\n</template>\n\n<style module>\n.component {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  svg {\n    font-family: var(--font-family-base);\n  }\n}\n\n.title {\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px; /* 120% */\n  letter-spacing: -0.2px;\n}\n\n:global(.svg-tooltip) {\n  font-family: var(--font-family-base);\n  background: rgba(69, 77, 93, 0.9);\n  border-radius: 0.1rem;\n  color: #fff;\n  display: block;\n  font-size: 14px;\n  max-width: 320px;\n  padding: 0.2rem 0.4rem;\n  position: absolute;\n  text-overflow: ellipsis;\n  white-space: pre;\n  z-index: 300;\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlChartHistogram.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from \"vue\";\nimport { createHistogramFromBins, createHistogramLinear, createHistogramLog } from \"./histogram\";\nimport type { ChartOptions, PlChartHistogramSettings } from \"./types\";\n\nconst props = defineProps<{\n  settings: PlChartHistogramSettings;\n}>();\n\nconst chart = ref<HTMLElement>();\n\nconst options = computed<ChartOptions>(() => {\n  const {\n    xAxisLabel,\n    yAxisLabel,\n    threshold,\n    compact,\n    totalWidth = 674,\n    totalHeight = 252,\n  } = props.settings;\n\n  const margin = compact\n    ? { top: 0, right: 0, bottom: 0, left: 0 }\n    : { top: 0, right: 30, bottom: 40, left: 85 };\n  const width = totalWidth - margin.left - margin.right;\n  const height = totalHeight - margin.top - margin.bottom;\n\n  return {\n    width,\n    height,\n    margin,\n    compact,\n    nBins: \"nBins\" in props.settings ? props.settings.nBins : 10,\n    xAxisLabel: xAxisLabel,\n    yAxisLabel: yAxisLabel,\n    threshold: threshold,\n  };\n});\n\nconst createHistogram = () => {\n  const settings = props.settings;\n\n  if (settings.type === \"log-bins\") {\n    createHistogramFromBins(chart.value!, options.value, settings.bins);\n    return;\n  }\n\n  if (settings.log) {\n    createHistogramLog(chart.value!, options.value, settings.numbers);\n  } else {\n    createHistogramLinear(chart.value!, options.value, settings.numbers);\n  }\n};\n\nwatch(props, createHistogram);\n\nonMounted(createHistogram);\n</script>\n\n<template>\n  <div :class=\"$style.component\">\n    <div v-if=\"settings.title && !settings.compact\" :class=\"$style.title\">{{ settings.title }}</div>\n    <div ref=\"chart\" />\n  </div>\n</template>\n\n<style module>\n.component {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  svg {\n    font-family: var(--font-family-base);\n  }\n}\n\n.title {\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px; /* 120% */\n  letter-spacing: -0.2px;\n}\n\n:global(.svg-tooltip) {\n  font-family: var(--font-family-base);\n  background: rgba(69, 77, 93, 0.9);\n  border-radius: 0.1rem;\n  color: #fff;\n  display: block;\n  font-size: 14px;\n  max-width: 320px;\n  padding: 0.2rem 0.4rem;\n  position: absolute;\n  text-overflow: ellipsis;\n  white-space: pre;\n  z-index: 300;\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlChartHistogram.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from \"vue\";\nimport { createHistogramFromBins, createHistogramLinear, createHistogramLog } from \"./histogram\";\nimport type { ChartOptions, PlChartHistogramSettings } from \"./types\";\n\nconst props = defineProps<{\n  settings: PlChartHistogramSettings;\n}>();\n\nconst chart = ref<HTMLElement>();\n\nconst options = computed<ChartOptions>(() => {\n  const {\n    xAxisLabel,\n    yAxisLabel,\n    threshold,\n    compact,\n    totalWidth = 674,\n    totalHeight = 252,\n  } = props.settings;\n\n  const margin = compact\n    ? { top: 0, right: 0, bottom: 0, left: 0 }\n    : { top: 0, right: 30, bottom: 40, left: 85 };\n  const width = totalWidth - margin.left - margin.right;\n  const height = totalHeight - margin.top - margin.bottom;\n\n  return {\n    width,\n    height,\n    margin,\n    compact,\n    nBins: \"nBins\" in props.settings ? props.settings.nBins : 10,\n    xAxisLabel: xAxisLabel,\n    yAxisLabel: yAxisLabel,\n    threshold: threshold,\n  };\n});\n\nconst createHistogram = () => {\n  const settings = props.settings;\n\n  if (settings.type === \"log-bins\") {\n    createHistogramFromBins(chart.value!, options.value, settings.bins);\n    return;\n  }\n\n  if (settings.log) {\n    createHistogramLog(chart.value!, options.value, settings.numbers);\n  } else {\n    createHistogramLinear(chart.value!, options.value, settings.numbers);\n  }\n};\n\nwatch(props, createHistogram);\n\nonMounted(createHistogram);\n</script>\n\n<template>\n  <div data-testid=\"pl-chart-histogram\" :class=\"$style.component\">\n    <div\n      v-if=\"settings.title && !settings.compact\"\n      data-testid=\"pl-chart-histogram-title\"\n      :class=\"$style.title\"\n    >\n      {{ settings.title }}\n    </div>\n    <div ref=\"chart\" data-testid=\"pl-chart-histogram-chart\" />\n  </div>\n</template>\n\n<style module>\n.component {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  svg {\n    font-family: var(--font-family-base);\n  }\n}\n\n.title {\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px; /* 120% */\n  letter-spacing: -0.2px;\n}\n\n:global(.svg-tooltip) {\n  font-family: var(--font-family-base);\n  background: rgba(69, 77, 93, 0.9);\n  border-radius: 0.1rem;\n  color: #fff;\n  display: block;\n  font-size: 14px;\n  max-width: 320px;\n  padding: 0.2rem 0.4rem;\n  position: absolute;\n  text-overflow: ellipsis;\n  white-space: pre;\n  z-index: 300;\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"PlChartHistogram.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"names":[],"mappings":"AAwGA,OAAO,KAAK,EAAgB,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEtE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,wBAAwB,CAAC;CACpC,CAAC;AA0FF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"PlChartHistogram.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"names":[],"mappings":"AA8GA,OAAO,KAAK,EAAgB,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAEtE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,wBAAwB,CAAC;CACpC,CAAC;AA6FF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlChartHistogram/PlChartHistogram.vue2.js

@@ -35,12 +35,17 @@ var m = /* @__PURE__ */ s({
 			}
 			r.log ? n(h.value, g.value, r.numbers) : t(h.value, g.value, r.numbers);
 		};
-		return p(m, _), l(_), (e, t) => (u(), a("div", { class: c(e.$style.component) }, [s.settings.title && !s.settings.compact ? (u(), a("div", {
+		return p(m, _), l(_), (e, t) => (u(), a("div", {
+			"data-testid": "pl-chart-histogram",
+			class: c(e.$style.component)
+		}, [s.settings.title && !s.settings.compact ? (u(), a("div", {
 			key: 0,
+			"data-testid": "pl-chart-histogram-title",
 			class: c(e.$style.title)
 		}, f(s.settings.title), 3)) : i("", !0), o("div", {
 			ref_key: "chart",
-			ref: h
+			ref: h,
+			"data-testid": "pl-chart-histogram-chart"
 		}, null, 512)], 2));
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"PlChartHistogram.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from \"vue\";\nimport { createHistogramFromBins, createHistogramLinear, createHistogramLog } from \"./histogram\";\nimport type { ChartOptions, PlChartHistogramSettings } from \"./types\";\n\nconst props = defineProps<{\n  settings: PlChartHistogramSettings;\n}>();\n\nconst chart = ref<HTMLElement>();\n\nconst options = computed<ChartOptions>(() => {\n  const {\n    xAxisLabel,\n    yAxisLabel,\n    threshold,\n    compact,\n    totalWidth = 674,\n    totalHeight = 252,\n  } = props.settings;\n\n  const margin = compact\n    ? { top: 0, right: 0, bottom: 0, left: 0 }\n    : { top: 0, right: 30, bottom: 40, left: 85 };\n  const width = totalWidth - margin.left - margin.right;\n  const height = totalHeight - margin.top - margin.bottom;\n\n  return {\n    width,\n    height,\n    margin,\n    compact,\n    nBins: \"nBins\" in props.settings ? props.settings.nBins : 10,\n    xAxisLabel: xAxisLabel,\n    yAxisLabel: yAxisLabel,\n    threshold: threshold,\n  };\n});\n\nconst createHistogram = () => {\n  const settings = props.settings;\n\n  if (settings.type === \"log-bins\") {\n    createHistogramFromBins(chart.value!, options.value, settings.bins);\n    return;\n  }\n\n  if (settings.log) {\n    createHistogramLog(chart.value!, options.value, settings.numbers);\n  } else {\n    createHistogramLinear(chart.value!, options.value, settings.numbers);\n  }\n};\n\nwatch(props, createHistogram);\n\nonMounted(createHistogram);\n</script>\n\n<template>\n  <div :class=\"$style.component\">\n    <div v-if=\"settings.title && !settings.compact\" :class=\"$style.title\">{{ settings.title }}</div>\n    <div ref=\"chart\" />\n  </div>\n</template>\n\n<style module>\n.component {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  svg {\n    font-family: var(--font-family-base);\n  }\n}\n\n.title {\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px; /* 120% */\n  letter-spacing: -0.2px;\n}\n\n:global(.svg-tooltip) {\n  font-family: var(--font-family-base);\n  background: rgba(69, 77, 93, 0.9);\n  border-radius: 0.1rem;\n  color: #fff;\n  display: block;\n  font-size: 14px;\n  max-width: 320px;\n  padding: 0.2rem 0.4rem;\n  position: absolute;\n  text-overflow: ellipsis;\n  white-space: pre;\n  z-index: 300;\n  visibility: hidden;\n}\n</style>\n"],"mappings":";;;;;;;EAKA,IAAM,IAAQ,GAIR,IAAQ,GAAkB,EAE1B,IAAU,QAA6B;GAC3C,IAAM,EACJ,eACA,eACA,cACA,YACA,gBAAa,KACb,iBAAc,QACZ,EAAM,UAEJ,IAAS,IACX;IAAE,KAAK;IAAG,OAAO;IAAG,QAAQ;IAAG,MAAM;IAAE,GACvC;IAAE,KAAK;IAAG,OAAO;IAAI,QAAQ;IAAI,MAAM;IAAI;AAI/C,UAAO;IACL,OAJY,IAAa,EAAO,OAAO,EAAO;IAK9C,QAJa,IAAc,EAAO,MAAM,EAAO;IAK/C;IACA;IACA,OAAO,WAAW,EAAM,WAAW,EAAM,SAAS,QAAQ;IAC9C;IACA;IACD;IACZ;IACD,EAEI,UAAwB;GAC5B,IAAM,IAAW,EAAM;AAEvB,OAAI,EAAS,SAAS,YAAY;AAChC,MAAwB,EAAM,OAAQ,EAAQ,OAAO,EAAS,KAAK;AACnE;;AAGF,GAAI,EAAS,MACX,EAAmB,EAAM,OAAQ,EAAQ,OAAO,EAAS,QAAQ,GAEjE,EAAsB,EAAM,OAAQ,EAAQ,OAAO,EAAS,QAAQ;;SAIxE,EAAM,GAAO,EAAgB,EAE7B,EAAU,EAAgB,kBAIxB,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,CAChB,EAAA,SAAS,SAAK,CAAK,EAAA,SAAS,WAAA,GAAA,EAAvC,EAAgG,OAAA;;GAA/C,OAAK,EAAEA,EAAAA,OAAO,MAAK;OAAK,EAAA,SAAS,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EACvF,EAAmB,OAAA;YAAV;GAAJ,KAAI"}
+{"version":3,"file":"PlChartHistogram.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartHistogram/PlChartHistogram.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from \"vue\";\nimport { createHistogramFromBins, createHistogramLinear, createHistogramLog } from \"./histogram\";\nimport type { ChartOptions, PlChartHistogramSettings } from \"./types\";\n\nconst props = defineProps<{\n  settings: PlChartHistogramSettings;\n}>();\n\nconst chart = ref<HTMLElement>();\n\nconst options = computed<ChartOptions>(() => {\n  const {\n    xAxisLabel,\n    yAxisLabel,\n    threshold,\n    compact,\n    totalWidth = 674,\n    totalHeight = 252,\n  } = props.settings;\n\n  const margin = compact\n    ? { top: 0, right: 0, bottom: 0, left: 0 }\n    : { top: 0, right: 30, bottom: 40, left: 85 };\n  const width = totalWidth - margin.left - margin.right;\n  const height = totalHeight - margin.top - margin.bottom;\n\n  return {\n    width,\n    height,\n    margin,\n    compact,\n    nBins: \"nBins\" in props.settings ? props.settings.nBins : 10,\n    xAxisLabel: xAxisLabel,\n    yAxisLabel: yAxisLabel,\n    threshold: threshold,\n  };\n});\n\nconst createHistogram = () => {\n  const settings = props.settings;\n\n  if (settings.type === \"log-bins\") {\n    createHistogramFromBins(chart.value!, options.value, settings.bins);\n    return;\n  }\n\n  if (settings.log) {\n    createHistogramLog(chart.value!, options.value, settings.numbers);\n  } else {\n    createHistogramLinear(chart.value!, options.value, settings.numbers);\n  }\n};\n\nwatch(props, createHistogram);\n\nonMounted(createHistogram);\n</script>\n\n<template>\n  <div data-testid=\"pl-chart-histogram\" :class=\"$style.component\">\n    <div\n      v-if=\"settings.title && !settings.compact\"\n      data-testid=\"pl-chart-histogram-title\"\n      :class=\"$style.title\"\n    >\n      {{ settings.title }}\n    </div>\n    <div ref=\"chart\" data-testid=\"pl-chart-histogram-chart\" />\n  </div>\n</template>\n\n<style module>\n.component {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  svg {\n    font-family: var(--font-family-base);\n  }\n}\n\n.title {\n  font-size: 20px;\n  font-weight: 500;\n  line-height: 24px; /* 120% */\n  letter-spacing: -0.2px;\n}\n\n:global(.svg-tooltip) {\n  font-family: var(--font-family-base);\n  background: rgba(69, 77, 93, 0.9);\n  border-radius: 0.1rem;\n  color: #fff;\n  display: block;\n  font-size: 14px;\n  max-width: 320px;\n  padding: 0.2rem 0.4rem;\n  position: absolute;\n  text-overflow: ellipsis;\n  white-space: pre;\n  z-index: 300;\n  visibility: hidden;\n}\n</style>\n"],"mappings":";;;;;;;EAKA,IAAM,IAAQ,GAIR,IAAQ,GAAkB,EAE1B,IAAU,QAA6B;GAC3C,IAAM,EACJ,eACA,eACA,cACA,YACA,gBAAa,KACb,iBAAc,QACZ,EAAM,UAEJ,IAAS,IACX;IAAE,KAAK;IAAG,OAAO;IAAG,QAAQ;IAAG,MAAM;IAAE,GACvC;IAAE,KAAK;IAAG,OAAO;IAAI,QAAQ;IAAI,MAAM;IAAI;AAI/C,UAAO;IACL,OAJY,IAAa,EAAO,OAAO,EAAO;IAK9C,QAJa,IAAc,EAAO,MAAM,EAAO;IAK/C;IACA;IACA,OAAO,WAAW,EAAM,WAAW,EAAM,SAAS,QAAQ;IAC9C;IACA;IACD;IACZ;IACD,EAEI,UAAwB;GAC5B,IAAM,IAAW,EAAM;AAEvB,OAAI,EAAS,SAAS,YAAY;AAChC,MAAwB,EAAM,OAAQ,EAAQ,OAAO,EAAS,KAAK;AACnE;;AAGF,GAAI,EAAS,MACX,EAAmB,EAAM,OAAQ,EAAQ,OAAO,EAAS,QAAQ,GAEjE,EAAsB,EAAM,OAAQ,EAAQ,OAAO,EAAS,QAAQ;;SAIxE,EAAM,GAAO,EAAgB,EAE7B,EAAU,EAAgB,kBAIxB,EASM,OAAA;GATD,eAAY;GAAsB,OAAK,EAAEA,EAAAA,OAAO,UAAS;MAEpD,EAAA,SAAS,SAAK,CAAK,EAAA,SAAS,WAAA,GAAA,EADpC,EAMM,OAAA;;GAJJ,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,MAAK;OAEjB,EAAA,SAAS,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAEnB,EAA0D,OAAA;YAAjD;GAAJ,KAAI;GAAQ,eAAY"}

package/dist/components/PlChartHistogram/createGridlines.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createGridlines.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/createGridlines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,EACrD,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,QAwCpD"}
+{"version":3,"file":"createGridlines.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/createGridlines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,wBAAgB,eAAe,CAC7B,GAAG,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,EACrD,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,QA0CpD"}

package/dist/components/PlChartHistogram/createGridlines.js

@@ -9,7 +9,7 @@ function r(r, i, a, o) {
 	function u() {
 		return o(t(a.x));
 	}
-	r.append("g").attr("class", "grid").attr("font-family", "'Manrope', sans-serif").call(l().tickSize(-s).tickFormat(() => "")), r.append("g").attr("class", "grid").attr("font-family", "'Manrope', sans-serif").attr("transform", `translate(0,${c})`).call(u().tickSize(-c).tickFormat(() => "")), e(".grid line").style("stroke", "#E1E3EB").style("opacity", .7);
+	r.append("g").attr("class", "grid").attr("data-testid", "pl-chart-histogram-grid").attr("font-family", "'Manrope', sans-serif").call(l().tickSize(-s).tickFormat(() => "")), r.append("g").attr("class", "grid").attr("data-testid", "pl-chart-histogram-grid").attr("font-family", "'Manrope', sans-serif").attr("transform", `translate(0,${c})`).call(u().tickSize(-c).tickFormat(() => "")), e(".grid line").style("stroke", "#E1E3EB").style("opacity", .7);
 }
 //#endregion
 export { r as createGridlines };