@milaboratories/uikit 2.16.0 → 2.16.1

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

@@ -4,7 +4,7 @@ import { getErrorMessage as t } from "../../helpers/error.js";
 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
+// src/components/PlBtnGroup/PlBtnGroup.vue?vue&type=script&setup=true&lang.ts
 var b = {
 	key: 0,
 	"data-testid": "pl-btn-group-label"
@@ -20,7 +20,7 @@ var b = {
 	key: 2,
 	"data-testid": "pl-btn-group-error",
 	class: "pl-btn-group__error"
-}, w = /* @__PURE__ */ u({
+}, w = /*@__PURE__*/ u({
 	name: "PlBtnGroup",
 	props: {
 		modelValue: {},
@@ -71,7 +71,6 @@ var b = {
 		], 2));
 	}
 });
-//#endregion
 export { w as default };
 
 //# sourceMappingURL=PlBtnGroup.vue2.js.map

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 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"}
+{"version":3,"file":"PlBtnGroup.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_unref","_createBlock","PlTooltip","_withCtx","_renderSlot","_createCommentVNode","_createVNode","InnerBorder","_Fragment","_renderList","_withKeys","PlTooltip_default","InnerBorder_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","PlBtnGroup_vue_vue_type_script_setup_true_lang_default","__emit","slots","useSlots","emit","emitModel","v","props","__props","normalizedOptions","computed","it","openBlock","createElementBlock","normalizeClass","createElementVNode","toDisplayString","unref","createBlock","withCtx","renderSlot","_ctx","createCommentVNode","createVNode","Fragment","renderList","i","opt","withKeys","getErrorMessage"],"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,IAAMwB,IAAQC,EAAS,GAEjBC,IAAOH,GAOPI,KAAa,MAASD,EAAK,qBAAqBE,CAAC,GAEjDC,IAAQC,GA+BRC,IAAoBC,QACxBH,EAAM,QAAQ,KAAK,OAAQ;GACzB,OAAO,WAAWI,IAAKA,EAAG,QAAQA,EAAG;GACrC,OAAOA,EAAG;EACZ,EAAE,CACJ;E,kBAIEjC,EAAA,GAAAC,EAkCM,OAAA;GAlCD,eAAY;GAAe,OAAKC,EAAA,CAAC,gBAAc;IAAA,UAAW4B,EAAA;IAAQ,SAAEA,EAAA;GAAO,CAAA,CAAA;;GACjEA,EAAA,SAAb9B,EAAA,GAAAC,EAYQ,SAZRiB,GAYQ,CAXNf,EAAwB,QAAA,MAAAC,EAAf0B,EAAA,KAAK,GAAA,CAAA,GAENzB,EAAAmB,CAAA,CAAK,CAAC,WADdxB,EAAA,GAAAM,EASYD,EAAAE,CAAA,GAAA;;IAPV,eAAY;IACZ,OAAM;IACN,UAAS;;IAEE,SAAOC,QACO,CAAvBC,EAAuBkC,EAAA,QAAA,SAAA,C;;;GAI7BhC,EAacC,GAAA;IAbD,eAAY;IAAuB,OAAM;;IAElD,SAAAJ,QAAqC,EADvCR,EAAA,EAAA,GAAAC,EAWMY,GAAA,MAAAC,EAVeiB,EAAA,QAAX,GAAK,OADf/B,EAAA,GAAAC,EAWM,OAAA;KATH,KAAK+C;KACN,eAAY;KACZ,OAAK9C,EAAA,CAAC,+BAA6B,EAAA,QAEjB4B,EAAA,eAAemB,EAAI,MAAK,CAAA,CAAA;KADzC,UAAUnB,EAAA,eAAemB,EAAI,SAASnB,EAAA,WAAW,KAAA,IAAS;KAE1D,WAAOf,GAAA,MAAQY,EAAUsB,EAAI,KAAK,GAAA,CAAA,OAAA,CAAA;KAClC,UAAK,MAAEtB,EAAUsB,EAAI,KAAK;IAExB,GAAA7C,EAAA6C,EAAI,KAAK,GAAA,IAAA9B,CAAA,E;;;GAGLW,EAAA,UAAX9B,EAAA,GAAAC,EAEM,OAFNmB,GAEMhB,EADD0B,EAAA,MAAM,GAAA,CAAA,KAEKA,EAAA,SAAhB9B,EAAA,GAAAC,EAEM,OAFNoB,GAEMjB,EADDC,EAAA8C,CAAA,CAAe,CAACrB,EAAA,KAAK,CAAA,GAAA,CAAA,K"}

package/dist/components/PlBtnGroup/index.js

@@ -1 +1 @@
-import "./PlBtnGroup.js";
+export { default as PlBtnGroup } from "./PlBtnGroup.js";

package/dist/components/PlBtnLink/PlBtnLink.js

@@ -1,7 +1,6 @@
 import e from "./PlBtnLink.vue2.js";
-//#region src/components/PlBtnLink/PlBtnLink.vue
+// src/components/PlBtnLink/PlBtnLink.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=PlBtnLink.js.map

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    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":""}
+{"version":3,"file":"PlBtnLink.js","names":["_sfc_main","PlBtnLink_vue_vue_type_script_setup_true_lang_default","PlBtnLink_default"],"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.vue2.js

@@ -1,8 +1,8 @@
 import './pl-btn-link.css';/* empty css            */
 import e from "../PlBtnSecondary/PlBtnSecondary.js";
 import { createElementBlock as t, createVNode as n, defineComponent as r, mergeProps as i, normalizeClass as a, openBlock as o, ref as s, renderSlot as c } from "vue";
-//#region src/components/PlBtnLink/PlBtnLink.vue?vue&type=script&setup=true&lang.ts
-var l = /* @__PURE__ */ r({
+// src/components/PlBtnLink/PlBtnLink.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ r({
 	__name: "PlBtnLink",
 	props: {
 		loading: { type: Boolean },
@@ -30,7 +30,6 @@ var l = /* @__PURE__ */ r({
 		}, l), null, 16, ["hover"]), c(s.$slots, "default")], 34));
 	}
 });
-//#endregion
 export { l as default };
 
 //# sourceMappingURL=PlBtnLink.vue2.js.map

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    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"}
+{"version":3,"file":"PlBtnLink.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_createVNode","BtnSecondary","_mergeProps","_renderSlot","PlBtnSecondary_default","PlBtnLink_vue_vue_type_script_setup_true_lang_default","props","__props","hover","ref","openBlock","createElementBlock","normalizeClass","_cache","createVNode","mergeProps","renderSlot","_ctx"],"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,IAAMS,IAAQC,GA2BRC,IAAQC,EAAI,EAAK;E,kBAIrBZ,EAAA,GAAAC,EASM,OAAA;GARJ,eAAY;GACZ,OAAKC,EAAA,CAAC,eAAa;IAAA,UACTQ,EAAA;IAAQ,SAAEA,EAAA;IAAO,OAAEC,EAAA;GAAK,CAAA,CAAA;GACjC,aAAS,AAAAK,EAAA,QAAA,MAAE,EAAA,QAAK;GAChB,cAAU,AAAAA,EAAA,QAAA,MAAE,EAAA,QAAK;E,IAElBb,EAAqFC,GAArFC,EAAqF;GAAvE,eAAY;GAAqB,OAAA;GAAO,OAAOM,EAAA;EAAe,GAAAF,CAAK,GAAA,MAAA,IAAA,CAAA,OAAA,CAAA,GACjFH,EAAQc,EAAA,QAAA,SAAA,C"}

package/dist/components/PlBtnLink/index.js

@@ -1 +1 @@
-import "./PlBtnLink.js";
+export { default as PlBtnLink } from "./PlBtnLink.js";

package/dist/components/PlBtnPrimary/PlBtnPrimary.js

@@ -1,7 +1,6 @@
 import e from "./PlBtnPrimary.vue2.js";
-//#region src/components/PlBtnPrimary/PlBtnPrimary.vue
+// src/components/PlBtnPrimary/PlBtnPrimary.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=PlBtnPrimary.js.map

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 data-testid=\"pl-btn-primary\" class=\"pl-btn-primary\" v-bind=\"props\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnPrimary.js","names":["_sfc_main","PlBtnPrimary_vue_vue_type_script_setup_true_lang_default","PlBtnPrimary_default"],"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.vue2.js

@@ -1,7 +1,7 @@
 import e from "../../base/BtnBase.js";
 import './pl-btn-primary.css';/* empty css               */
 import { createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, withCtx as o } from "vue";
-var s = /* @__PURE__ */ n({
+var s = /*@__PURE__*/ n({
 	name: "PlBtnPrimary",
 	props: {
 		loading: { type: Boolean },
@@ -22,7 +22,6 @@ var s = /* @__PURE__ */ n({
 		}, 16));
 	}
 });
-//#endregion
 export { s as default };
 
 //# sourceMappingURL=PlBtnPrimary.vue2.js.map

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 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"}
+{"version":3,"file":"PlBtnPrimary.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","BtnBase","_mergeProps","_withCtx","_renderSlot","BtnBase_default","PlBtnPrimary_vue_vue_type_script_setup_true_lang_default","props","__props","openBlock","createBlock","mergeProps","withCtx","renderSlot","_ctx"],"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,IAAMQ,IAAQC;E,kBA6BZT,EAAA,GAAAC,EAEUC,GAFVC,EAEU;GAFD,eAAY;GAAiB,OAAM;EAAyB,GAAAK,CAAK,GAAA;GACxE,SAAAJ,QAAQ,CAARC,EAAQU,EAAA,QAAA,SAAA,C"}

package/dist/components/PlBtnPrimary/index.js

@@ -1 +1 @@
-import "./PlBtnPrimary.js";
+export { default as PlBtnPrimary } from "./PlBtnPrimary.js";

package/dist/components/PlBtnSecondary/PlBtnSecondary.js

@@ -1,7 +1,6 @@
 import e from "./PlBtnSecondary.vue2.js";
-//#region src/components/PlBtnSecondary/PlBtnSecondary.vue
+// src/components/PlBtnSecondary/PlBtnSecondary.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=PlBtnSecondary.js.map

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 data-testid=\"pl-btn-secondary\" v-bind=\"props\" class=\"pl-btn-secondary\">\n    <slot />\n  </BtnBase>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlBtnSecondary.js","names":["_sfc_main","PlBtnSecondary_vue_vue_type_script_setup_true_lang_default","PlBtnSecondary_default"],"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.vue2.js

@@ -1,7 +1,7 @@
 import e from "../../base/BtnBase.js";
 import './pl-btn-secondary.css';/* empty css                 */
 import { createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, withCtx as o } from "vue";
-var s = /* @__PURE__ */ n({
+var s = /*@__PURE__*/ n({
 	name: "PlBtnSecondary",
 	props: {
 		loading: { type: Boolean },
@@ -19,7 +19,6 @@ var s = /* @__PURE__ */ n({
 		}, 16));
 	}
 });
-//#endregion
 export { s as default };
 
 //# sourceMappingURL=PlBtnSecondary.vue2.js.map

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 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"}
+{"version":3,"file":"PlBtnSecondary.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","BtnBase","_mergeProps","_withCtx","_renderSlot","BtnBase_default","PlBtnSecondary_vue_vue_type_script_setup_true_lang_default","props","__props","openBlock","createBlock","mergeProps","withCtx","renderSlot","_ctx"],"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,IAAMQ,IAAQC;E,kBA6BZT,EAAA,GAAAC,EAEUC,GAFVC,EAEU,EAFD,eAAY,mBAAkB,GAASK,GAAK,EAAE,OAAM,mBAAkB,CAAA,GAAA;GAC7E,SAAAJ,QAAQ,CAARC,EAAQU,EAAA,QAAA,SAAA,C"}

package/dist/components/PlBtnSecondary/index.js

@@ -1 +1 @@
-import "./PlBtnSecondary.js";
+export { default as PlBtnSecondary } from "./PlBtnSecondary.js";

package/dist/components/PlBtnSplit/PlBtnSplit.js

@@ -1,7 +1,6 @@
 import e from "./PlBtnSplit.vue2.js";
-//#region src/components/PlBtnSplit/PlBtnSplit.vue
+// src/components/PlBtnSplit/PlBtnSplit.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=PlBtnSplit.js.map

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    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":""}
+{"version":3,"file":"PlBtnSplit.js","names":["_sfc_main","PlBtnSplit_vue_vue_type_script_setup_true_lang_default","PlBtnSplit_default"],"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.vue2.js

@@ -6,10 +6,10 @@ import { useElementPosition as r } from "../../composition/usePosition.js";
 import './pl-btn-split.css';/* empty css             */
 import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, normalizeStyle as m, openBlock as h, reactive as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, watch as S, withKeys as C, withModifiers as w } from "vue";
 import { deepEqual as T } from "@milaboratories/helpers";
-//#region src/components/PlBtnSplit/PlBtnSplit.vue?vue&type=script&setup=true&lang.ts
-var E = ["onKeyup"], D = /* @__PURE__ */ d({
+// src/components/PlBtnSplit/PlBtnSplit.vue?vue&type=script&setup=true&lang.ts
+var E = ["onKeyup"], D = /*@__PURE__*/ d({
 	__name: "PlBtnSplit",
-	props: /* @__PURE__ */ f({
+	props: /*@__PURE__*/ f({
 		options: {},
 		disabled: { type: Boolean },
 		loading: { type: Boolean }
@@ -17,7 +17,7 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 		modelValue: { required: !0 },
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ f(["click"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ f(["click"], ["update:modelValue"]),
 	setup(d, { expose: f, emit: D }) {
 		let O = d, k = D, A = x(d, "modelValue"), j = _(), M = _(), N = _(), P = _(), F = g({
 			open: !1,
@@ -31,7 +31,10 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 			width: "0px"
 		});
 		S(M, (e) => {
-			e && (F.optionsHeight = e.getBoundingClientRect().height, window.dispatchEvent(new CustomEvent("adjust")));
+			if (e) {
+				let t = e.getBoundingClientRect();
+				F.optionsHeight = t.height, window.dispatchEvent(new CustomEvent("adjust"));
+			}
 		}, { immediate: !0 });
 		let L = o(() => F.open ? "chevron-up" : "chevron-down"), R = o(() => (O.options ?? []).findIndex((e) => T(e.value, A.value))), z = o(() => t(O.options ?? []).map((e, t) => ({
 			...e,
@@ -139,7 +142,6 @@ var E = ["onKeyup"], D = /* @__PURE__ */ d({
 		], 34));
 	}
 });
-//#endregion
 export { D as default };
 
 //# sourceMappingURL=PlBtnSplit.vue2.js.map

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    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":";;;;;;;;;;;;;;;;;;;;;EAWA,IAAM,IAAQ,GAiBR,IAAQ,GAER,IAAQ,EAAc,GAAA,aAAoB,EAE1C,IAAO,GAA8B,EACrC,IAAO,GAA8B,EACrC,IAAgB,GAA8B,EAC9C,IAAe,GAA8B,EAE7C,IAAO,EAAS;GACpB,MAAM;GACN,eAAe;GACf,aAAa;GACd,CAAC;AAEF,IAAa,EACX,SACD,CAAC;EAEF,IAAM,IAAe,EAAS;GAC5B,KAAK;GACL,MAAM;GACN,OAAO;GACR,CAAC;AAEF,IACE,IACC,MAAO;AACN,GAAI,MAEF,EAAK,gBADQ,EAAG,uBAAuB,CACb,QAC1B,OAAO,cAAc,IAAI,YAAY,SAAS,CAAC;KAGnD,EAAE,WAAW,IAAM,CACpB;EAED,IAAM,IAAW,QAAgB,EAAK,OAAO,eAAe,eAAgB,EAEtE,IAAgB,SACZ,EAAM,WAAW,EAAE,EAAE,WAAW,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,CAC9E,EAEI,IAAQ,QACZ,EAAqB,EAAM,WAAW,EAAE,CAAC,CAAC,KAAK,GAAK,OAAW;GAC7D,GAAG;GACH;GACA,YAAY,MAAU,EAAc;GACpC,UAAU,MAAU,EAAK;GAC1B,EAAE,CACJ,EAEK,IAAmB,QAAe,EAAM,WAAW,EAAM,YAAY,KAAA,EAAU,EAE/E,IAAa,QAEf,EAAM,MAAM,MAAM,MAAM,EAAU,EAAE,OAAO,EAAM,MAAM,CAAC,EAAE,UACzD,EAAM,YAAY,KAAA,IAAY,QAAQ,IAC1C;AAED,IAAmB,IAAO,MAAQ;GAChC,IAEM,IAAgB,EAAI,MAAM,EAAI,SAAS;AAS7C,GAPI,IAAgB,EAAK,gBAAgB,EAAI,eAC3C,EAAa,MAAM,EAAI,MAAM,EAAK,gBAAgB,IAAa,OAE/D,EAAa,MAAM,IAAgB,MAGrC,EAAa,OAAO,EAAI,OAAO,MAC/B,EAAa,QAAQ,EAAI,QAAQ;IACjC;EAEF,IAAM,KAAgB,MAAqB;AAGzC,GAFA,EAAM,QAAQ,GACd,EAAK,OAAO,IACZ,GAAM,OAAO,OAAO;;EAGtB,SAAS,IAAY;AACnB,KAAM,QAAQ;;EAGhB,IAAM,KAAiB,MAKjB;AACJ,OAAK;IAAC;IAAa;IAAW;IAAS;IAAS,CAAC,SAAS,EAAE,KAAK,CAG/D,GAAE,gBAAgB;OAFlB;AAKF,OAAI,EAAE,WAAW,EAAa,SAAS,EAAE,SAAS,SAAS;AACzD,OAAW;AACX;;GAGF,IAAM,EAAE,SAAM,mBAAgB;AAE9B,OAAI,CAAC,KAAQ,EAAE,WAAW,EAAc,OAAO;AAC7C,IAAI,EAAE,SAAS,YACb,EAAK,OAAO;AAEd;;AAGF,GAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ,EAAK,OAAO,OAAO;GAGrB,IAAM,IAAW,EAAM,EAAM,EAEvB,EAAE,cAAW;AAEnB,OAAI,CAAC,EACH;AAGF,GAAI,EAAE,SAAS,WACb,EAAa,EAAS,MAAM,MAAO,EAAG,UAAU,EAAY,EAAE,MAAM;GAGtE,IAAM,IAAa,EAAS,WAAW,MAAO,EAAG,UAAU,EAAY,IAAI,IAErE,IAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjE,IAAW,KAAK,IAAI,IAAa,IAAQ,EAAO,GAAG;AAEzD,KAAK,cAAc,EAAM,MAAM,GAAU,SAAS;KAG9C,KAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GAAI,CAAC,EAAK,OAAO,SAAS,EAAc,IAAI,CAAC,EAAK,OAAO,SAAS,EAAc,KAC9E,EAAK,OAAO;;yBAKd,EAiDM,OAAA;YAhDA;GAAJ,KAAI;GACH,OAAK,EAAA,CAAA;IAAA,UAAc,EAAA,YAAY,EAAA;IAAgB,SAAW,EAAA;IAAgB,EAErE,sBAAqB,CAAA;GAD3B,eAAY;GAEX,YAAU;GACV,WAAS;;GAEV,EASM,OAAA;aARA;IAAJ,KAAI;IACJ,eAAY;IACZ,OAAM;IACN,UAAS;IACR,SAAO;IACP,SAAK,EAAA,EAAa,GAAS,CAAA,OAAA,CAAA,EAAA,CAAA,QAAA,CAAA;QAEzB,EAAA,MAAU,EAAA,IAAA,EAAA;GAEf,EASM,OAAA;aARA;IAAJ,KAAI;IACJ,eAAY;IACZ,OAAM;IACN,UAAS;IACR,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK,OAAI,CAAI,EAAK;OAEV,EAAA,SAAA,GAAA,EAAhB,EAAsF,EAAA,EAAA,EAAA;;IAApD,eAAY;IAAuB,MAAK;eAC1E,EAA+D,EAAA,EAAA,EAAA;;IAA7C,MAAM,EAAA;IAAU,OAAM;;GAG1B,EAAK,QAAA,GAAA,EAArB,EAmBW,GAAA;;IAnBgB,IAAG;OAC5B,EAiBM,OAAA;aAhBA;IAAJ,KAAI;IACJ,eAAY;IACZ,OAAM;IACL,OAAK,EAAE,EAAY;IACpB,UAAS;eAET,EASE,GAAA,MAAA,EARwB,EAAA,QAAhB,GAAM,YADhB,EASE,GAAA;IAPA,eAAY;IACX,KAAK;IACL,QAAQ;IACR,eAAa,EAAK;IAClB,cAAY,EAAK;IACjB,MAAM;IACN,SAAK,GAAA,MAAO,EAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA"}
+{"version":3,"file":"PlBtnSplit.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_withKeys","_withModifiers","_toDisplayString","_createBlock","_unref","PlIcon16","_Teleport","_normalizeStyle","_Fragment","_renderList","DropdownListItem","_createCommentVNode","PlIcon16_default","DropdownListItem_default","_hoisted_1","PlBtnSplit_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emits","model","useModel","root","ref","list","menuActivator","buttonAction","data","reactive","optionsStyle","el","rect","iconName","computed","selectedIndex","deepEqual","o","items","normalizeListOptions","opt","index","isLoadingOptions","actionName","downTopOffset","pos","selectOption","v","emitEnter","handleKeydown","open","filtered","unref","length","it","activeIndex","localIndex","delta","newIndex","onFocusOut","relatedTarget","event","openBlock","createElementBlock","normalizeClass","createElementVNode","withKeys","withModifiers","toDisplayString","_cache","createBlock","Teleport","normalizeStyle","Fragment","renderList","item","createCommentVNode"],"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/PlBtnSplit/index.js

@@ -1 +1 @@
-import "./PlBtnSplit.js";
+export { default as PlBtnSplit } from "./PlBtnSplit.js";

package/dist/components/PlChartHistogram/PlChartHistogram.js

@@ -1,8 +1,7 @@
 import e from "../../_virtual/_plugin-vue_export-helper.js";
 import t from "./PlChartHistogram.vue2.js";
 import n from "./PlChartHistogram.style.js";
-var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
-//#endregion
+var r = /*#__PURE__*/ e(t, [["__cssModules", { $style: n }]]);
 export { r as default };
 
 //# sourceMappingURL=PlChartHistogram.js.map

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 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":""}
+{"version":3,"file":"PlChartHistogram.js","names":["style0","_sfc_main","_plugin_vue_export_helper_default","PlChartHistogram_vue_vue_type_script_setup_true_lang_default","PlChartHistogram_vue_vue_type_style_index_0_lang_module_default","PlChartHistogram_default","\"$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":""}

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

@@ -1,8 +1,8 @@
-import './PlChartHistogram.vue.css';var e = {
-	component: "_component_12ebd_2",
-	title: "_title_12ebd_11"
+import './PlChartHistogram.style.css';// src/components/PlChartHistogram/PlChartHistogram.vue?vue&type=style&index=0&lang.module.css
+var e = "_component_12ebd_2", t = "_title_12ebd_11", n = {
+	component: e,
+	title: t
 };
-//#endregion
-export { e as default };
+export { e as component, n as default, t as title };
 
 //# sourceMappingURL=PlChartHistogram.style.js.map

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 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":""}
+{"version":3,"file":"PlChartHistogram.vue_vue_type_style_index_0_lang.module.js","names":["component","title","PlChartHistogram_vue_vue_type_style_index_0_lang_module_default"],"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.vue2.js

@@ -1,7 +1,7 @@
 import { createHistogramFromBins as e, createHistogramLinear as t, createHistogramLog as n } from "./histogram.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, toDisplayString as f, watch as p } from "vue";
-//#region src/components/PlChartHistogram/PlChartHistogram.vue?vue&type=script&setup=true&lang.ts
-var m = /* @__PURE__ */ s({
+// src/components/PlChartHistogram/PlChartHistogram.vue?vue&type=script&setup=true&lang.ts
+var m = /*@__PURE__*/ s({
 	__name: "PlChartHistogram",
 	props: { settings: {} },
 	setup(s) {
@@ -29,11 +29,7 @@ var m = /* @__PURE__ */ s({
 			};
 		}), _ = () => {
 			let r = m.settings;
-			if (r.type === "log-bins") {
-				e(h.value, g.value, r.bins);
-				return;
-			}
-			r.log ? n(h.value, g.value, r.numbers) : t(h.value, g.value, r.numbers);
+			r.type === "log-bins" ? e(h.value, g.value, r.bins) : 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", {
 			"data-testid": "pl-chart-histogram",
@@ -49,7 +45,6 @@ var m = /* @__PURE__ */ s({
 		}, null, 512)], 2));
 	}
 });
-//#endregion
 export { m as default };
 
 //# sourceMappingURL=PlChartHistogram.vue2.js.map

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 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"}
+{"version":3,"file":"PlChartHistogram.vue_vue_type_script_setup_true_lang.js","names":["$style","_openBlock","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","PlChartHistogram_vue_vue_type_script_setup_true_lang_default","props","__props","chart","ref","options","computed","margin","compact","totalWidth","totalHeight","createHistogram","settings","createHistogramFromBins","createHistogramLog","createHistogramLinear","watch","onMounted","openBlock","createElementBlock","normalizeClass","_ctx","toDisplayString","createCommentVNode","createElementVNode"],"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,IAAMQ,IAAQC,GAIRC,IAAQC,EAAiB,GAEzBC,IAAUC,QAA6B;GAC3C,IAAM,EACJ,eACA,eACA,cACA,YACA,gBAAa,KACb,iBAAc,QACZL,EAAM,UAEJM,IAASC,IACX;IAAE,KAAK;IAAG,OAAO;IAAG,QAAQ;IAAG,MAAM;GAAE,IACvC;IAAE,KAAK;IAAG,OAAO;IAAI,QAAQ;IAAI,MAAM;GAAG;GAI9C,OAAO;IACL,OAJYC,IAAaF,EAAO,OAAOA,EAAO;IAK9C,QAJaG,IAAcH,EAAO,MAAMA,EAAO;IAK/C;IACA;IACA,OAAO,WAAWN,EAAM,WAAWA,EAAM,SAAS,QAAQ;IAC9C;IACA;IACD;GACb;EACF,CAAC,GAEKU,UAAwB;GAC5B,IAAMC,IAAWX,EAAM;GAEvB,AAAIW,EAAS,SAAS,aACpBC,EAAwBV,EAAM,OAAQE,EAAQ,OAAOO,EAAS,IAAI,IAIhEA,EAAS,MACXE,EAAmBX,EAAM,OAAQE,EAAQ,OAAOO,EAAS,OAAO,IAEhEG,EAAsBZ,EAAM,OAAQE,EAAQ,OAAOO,EAAS,OAAO;EAEvE;E,OAEAI,EAAMf,GAAOU,CAAe,GAE5BM,EAAUN,CAAe,I,UAIvBjB,EAAA,GAAAC,EASM,OAAA;GATD,eAAY;GAAsB,OAAKC,EAAEH,EAAAA,OAAO,SAAS;E,IAEpDS,EAAA,SAAS,SAAK,CAAKA,EAAA,SAAS,WADpCR,EAAA,GAAAC,EAMM,OAAA;;GAJJ,eAAY;GACX,OAAKC,EAAEH,EAAAA,OAAO,KAAK;EAEjB,GAAAI,EAAAK,EAAA,SAAS,KAAK,GAAA,CAAA,K,WAEnBH,EAA0D,OAAA;GAAjD,SAAA;GAAJ,KAAII;GAAQ,eAAY"}

package/dist/components/PlChartHistogram/createGridlines.js

@@ -1,6 +1,6 @@
 import { selectAll as e } from "d3-selection";
 import { axisBottom as t, axisLeft as n } from "d3-axis";
-//#region src/components/PlChartHistogram/createGridlines.ts
+// src/components/PlChartHistogram/createGridlines.ts
 function r(r, i, a, o) {
 	let { width: s, height: c } = i;
 	function l() {
@@ -11,7 +11,6 @@ function r(r, i, a, o) {
 	}
 	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 };
 
 //# sourceMappingURL=createGridlines.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"createGridlines.js","names":[],"sources":["../../../src/components/PlChartHistogram/createGridlines.ts"],"sourcesContent":["import type { ChartOptions, Scales } from \"./types\";\nimport type { Selection } from \"d3-selection\";\nimport type { Axis } from \"d3-axis\";\nimport type { NumberValue } from \"d3-scale\";\nimport { selectAll } from \"d3-selection\";\nimport { axisBottom, axisLeft } from \"d3-axis\";\n\nexport function createGridlines(\n  svg: Selection<SVGGElement, unknown, null, undefined>,\n  options: ChartOptions,\n  scales: Scales,\n  xTicks: (d: Axis<NumberValue>) => Axis<NumberValue>,\n) {\n  const { width, height } = options;\n\n  function makeYGridlines() {\n    return axisLeft(scales.y) // Use the y-scale for horizontal gridlines\n      .ticks(6); // Adjust the number of gridlines\n  }\n\n  function makeXGridlines() {\n    return xTicks(axisBottom(scales.x));\n  }\n  // Append horizontal gridlines\n  svg\n    .append(\"g\")\n    .attr(\"class\", \"grid\") // Add a class for styling\n    .attr(\"data-testid\", \"pl-chart-histogram-grid\")\n    .attr(\"font-family\", \"'Manrope', sans-serif\") // Doesn't work\n    .call(\n      makeYGridlines()\n        .tickSize(-width) // Extend gridlines across the chart width\n        .tickFormat(() => \"\"),\n    ); // Remove tick labels\n\n  // Append vertical gridlines\n  svg\n    .append(\"g\")\n    .attr(\"class\", \"grid\") // Add a class for styling\n    .attr(\"data-testid\", \"pl-chart-histogram-grid\")\n    .attr(\"font-family\", \"'Manrope', sans-serif\")\n    .attr(\"transform\", `translate(0,${height})`) // Position at the bottom of the chart\n    .call(\n      makeXGridlines()\n        .tickSize(-height) // Extend gridlines across the chart height\n        .tickFormat(() => \"\"),\n    ); // Remove tick labels\n\n  // Style the gridlines using CSS (or inline styles)\n  selectAll(\".grid line\")\n    .style(\"stroke\", \"#E1E3EB\") // Light gray gridlines\n    // .style('stroke-dasharray', '2,2') // Dashed gridlines\n    .style(\"opacity\", 0.7); // Slightly transparent\n}\n"],"mappings":";;;AAOA,SAAgB,EACd,GACA,GACA,GACA,GACA;CACA,IAAM,EAAE,UAAO,cAAW;CAE1B,SAAS,IAAiB;AACxB,SAAO,EAAS,EAAO,EAAE,CACtB,MAAM,EAAE;;CAGb,SAAS,IAAiB;AACxB,SAAO,EAAO,EAAW,EAAO,EAAE,CAAC;;AA4BrC,CAzBA,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,KAAK,eAAe,0BAA0B,CAC9C,KAAK,eAAe,wBAAwB,CAC5C,KACC,GAAgB,CACb,SAAS,CAAC,EAAM,CAChB,iBAAiB,GAAG,CACxB,EAGH,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,KAAK,eAAe,0BAA0B,CAC9C,KAAK,eAAe,wBAAwB,CAC5C,KAAK,aAAa,eAAe,EAAO,GAAG,CAC3C,KACC,GAAgB,CACb,SAAS,CAAC,EAAO,CACjB,iBAAiB,GAAG,CACxB,EAGH,EAAU,aAAa,CACpB,MAAM,UAAU,UAAU,CAE1B,MAAM,WAAW,GAAI"}
+{"version":3,"file":"createGridlines.js","names":["createGridlines","options","makeYGridlines","axisLeft","scales","makeXGridlines","xTicks","axisBottom","svg","width","height","selectAll"],"sources":["../../../src/components/PlChartHistogram/createGridlines.ts"],"sourcesContent":["import type { ChartOptions, Scales } from \"./types\";\nimport type { Selection } from \"d3-selection\";\nimport type { Axis } from \"d3-axis\";\nimport type { NumberValue } from \"d3-scale\";\nimport { selectAll } from \"d3-selection\";\nimport { axisBottom, axisLeft } from \"d3-axis\";\n\nexport function createGridlines(\n  svg: Selection<SVGGElement, unknown, null, undefined>,\n  options: ChartOptions,\n  scales: Scales,\n  xTicks: (d: Axis<NumberValue>) => Axis<NumberValue>,\n) {\n  const { width, height } = options;\n\n  function makeYGridlines() {\n    return axisLeft(scales.y) // Use the y-scale for horizontal gridlines\n      .ticks(6); // Adjust the number of gridlines\n  }\n\n  function makeXGridlines() {\n    return xTicks(axisBottom(scales.x));\n  }\n  // Append horizontal gridlines\n  svg\n    .append(\"g\")\n    .attr(\"class\", \"grid\") // Add a class for styling\n    .attr(\"data-testid\", \"pl-chart-histogram-grid\")\n    .attr(\"font-family\", \"'Manrope', sans-serif\") // Doesn't work\n    .call(\n      makeYGridlines()\n        .tickSize(-width) // Extend gridlines across the chart width\n        .tickFormat(() => \"\"),\n    ); // Remove tick labels\n\n  // Append vertical gridlines\n  svg\n    .append(\"g\")\n    .attr(\"class\", \"grid\") // Add a class for styling\n    .attr(\"data-testid\", \"pl-chart-histogram-grid\")\n    .attr(\"font-family\", \"'Manrope', sans-serif\")\n    .attr(\"transform\", `translate(0,${height})`) // Position at the bottom of the chart\n    .call(\n      makeXGridlines()\n        .tickSize(-height) // Extend gridlines across the chart height\n        .tickFormat(() => \"\"),\n    ); // Remove tick labels\n\n  // Style the gridlines using CSS (or inline styles)\n  selectAll(\".grid line\")\n    .style(\"stroke\", \"#E1E3EB\") // Light gray gridlines\n    // .style('stroke-dasharray', '2,2') // Dashed gridlines\n    .style(\"opacity\", 0.7); // Slightly transparent\n}\n"],"mappings":";;;AAOA,SAAgBA,EACd,GACA,GACA,GACA,GACA;CACA,IAAM,EAAE,UAAO,cAAWC;CAE1B,SAASC,IAAiB;EACxB,OAAOC,EAASC,EAAO,CAAC,CAAC,CACtB,MAAM,CAAC;CACZ;CAEA,SAASC,IAAiB;EACxB,OAAOC,EAAOC,EAAWH,EAAO,CAAC,CAAC;CACpC;CA2BA,AAzBAI,EACG,OAAO,GAAG,CAAC,CACX,KAAK,SAAS,MAAM,CAAC,CACrB,KAAK,eAAe,yBAAyB,CAAC,CAC9C,KAAK,eAAe,uBAAuB,CAAC,CAC5C,KACCN,EAAe,CAAC,CACb,SAAS,CAACO,CAAK,CAAC,CAChB,iBAAiB,EAAE,CACxB,GAGFD,EACG,OAAO,GAAG,CAAC,CACX,KAAK,SAAS,MAAM,CAAC,CACrB,KAAK,eAAe,yBAAyB,CAAC,CAC9C,KAAK,eAAe,uBAAuB,CAAC,CAC5C,KAAK,aAAa,eAAeE,EAAO,EAAE,CAAC,CAC3C,KACCL,EAAe,CAAC,CACb,SAAS,CAACK,CAAM,CAAC,CACjB,iBAAiB,EAAE,CACxB,GAGFC,EAAU,YAAY,CAAC,CACpB,MAAM,UAAU,SAAS,CAAC,CAE1B,MAAM,WAAW,EAAG;AACzB"}

package/dist/components/PlChartHistogram/createLabels.js

@@ -1,9 +1,8 @@
-//#region src/components/PlChartHistogram/createLabels.ts
+// src/components/PlChartHistogram/createLabels.ts
 function e(e, t) {
 	let { height: n, width: r, margin: i, xAxisLabel: a, yAxisLabel: o, compact: s } = t;
 	s || (e.append("text").attr("class", "x-axis-label").attr("data-testid", "pl-chart-histogram-x-axis-label").attr("font-weight", 500).attr("text-anchor", "middle").attr("x", r / 2).attr("y", n + i.bottom - 5).text(a ?? "Value Range"), e.append("text").attr("class", "y-axis-label").attr("data-testid", "pl-chart-histogram-y-axis-label").attr("font-weight", 500).attr("text-anchor", "middle").attr("x", -n / 2).attr("y", -i.left + 15).attr("transform", "rotate(-90)").text(o ?? "Frequency"));
 }
-//#endregion
 export { e as createLabels };
 
 //# sourceMappingURL=createLabels.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"createLabels.js","names":[],"sources":["../../../src/components/PlChartHistogram/createLabels.ts"],"sourcesContent":["import type { Selection } from \"d3-selection\";\nimport type { ChartOptions } from \"./types\";\n\nexport function createLabels(\n  svg: Selection<SVGGElement, unknown, null, undefined>,\n  options: ChartOptions,\n) {\n  const { height, width, margin, xAxisLabel, yAxisLabel, compact } = options;\n\n  if (compact) {\n    return;\n  }\n\n  // X-axis label\n  svg\n    .append(\"text\")\n    .attr(\"class\", \"x-axis-label\")\n    .attr(\"data-testid\", \"pl-chart-histogram-x-axis-label\")\n    .attr(\"font-weight\", 500)\n    .attr(\"text-anchor\", \"middle\") // Center the text\n    .attr(\"x\", width / 2) // Center horizontally\n    .attr(\"y\", height + margin.bottom - 5) // Position below the X-axis\n    .text(xAxisLabel ?? \"Value Range\"); // Set your custom label text\n\n  // Y-axis label\n  svg\n    .append(\"text\")\n    .attr(\"class\", \"y-axis-label\")\n    .attr(\"data-testid\", \"pl-chart-histogram-y-axis-label\")\n    .attr(\"font-weight\", 500)\n    .attr(\"text-anchor\", \"middle\") // Center the text\n    .attr(\"x\", -height / 2) // Center vertically (rotated axis)\n    .attr(\"y\", -margin.left + 15) // Position to the left of the Y-axis\n    .attr(\"transform\", \"rotate(-90)\") // Rotate text 90 degrees counter-clockwise\n    .text(yAxisLabel ?? \"Frequency\"); // Set your custom label text\n}\n"],"mappings":";AAGA,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,WAAQ,UAAO,WAAQ,eAAY,eAAY,eAAY;AAE/D,OAKJ,EACG,OAAO,OAAO,CACd,KAAK,SAAS,eAAe,CAC7B,KAAK,eAAe,kCAAkC,CACtD,KAAK,eAAe,IAAI,CACxB,KAAK,eAAe,SAAS,CAC7B,KAAK,KAAK,IAAQ,EAAE,CACpB,KAAK,KAAK,IAAS,EAAO,SAAS,EAAE,CACrC,KAAK,KAAc,cAAc,EAGpC,EACG,OAAO,OAAO,CACd,KAAK,SAAS,eAAe,CAC7B,KAAK,eAAe,kCAAkC,CACtD,KAAK,eAAe,IAAI,CACxB,KAAK,eAAe,SAAS,CAC7B,KAAK,KAAK,CAAC,IAAS,EAAE,CACtB,KAAK,KAAK,CAAC,EAAO,OAAO,GAAG,CAC5B,KAAK,aAAa,cAAc,CAChC,KAAK,KAAc,YAAY"}
+{"version":3,"file":"createLabels.js","names":["createLabels","options","compact","svg","width","height","margin","xAxisLabel","yAxisLabel"],"sources":["../../../src/components/PlChartHistogram/createLabels.ts"],"sourcesContent":["import type { Selection } from \"d3-selection\";\nimport type { ChartOptions } from \"./types\";\n\nexport function createLabels(\n  svg: Selection<SVGGElement, unknown, null, undefined>,\n  options: ChartOptions,\n) {\n  const { height, width, margin, xAxisLabel, yAxisLabel, compact } = options;\n\n  if (compact) {\n    return;\n  }\n\n  // X-axis label\n  svg\n    .append(\"text\")\n    .attr(\"class\", \"x-axis-label\")\n    .attr(\"data-testid\", \"pl-chart-histogram-x-axis-label\")\n    .attr(\"font-weight\", 500)\n    .attr(\"text-anchor\", \"middle\") // Center the text\n    .attr(\"x\", width / 2) // Center horizontally\n    .attr(\"y\", height + margin.bottom - 5) // Position below the X-axis\n    .text(xAxisLabel ?? \"Value Range\"); // Set your custom label text\n\n  // Y-axis label\n  svg\n    .append(\"text\")\n    .attr(\"class\", \"y-axis-label\")\n    .attr(\"data-testid\", \"pl-chart-histogram-y-axis-label\")\n    .attr(\"font-weight\", 500)\n    .attr(\"text-anchor\", \"middle\") // Center the text\n    .attr(\"x\", -height / 2) // Center vertically (rotated axis)\n    .attr(\"y\", -margin.left + 15) // Position to the left of the Y-axis\n    .attr(\"transform\", \"rotate(-90)\") // Rotate text 90 degrees counter-clockwise\n    .text(yAxisLabel ?? \"Frequency\"); // Set your custom label text\n}\n"],"mappings":";AAGA,SAAgBA,EACd,GACA,GACA;CACA,IAAM,EAAE,WAAQ,UAAO,WAAQ,eAAY,eAAY,eAAYC;CAEnE,AAAIC,MAKJC,EACG,OAAO,MAAM,CAAC,CACd,KAAK,SAAS,cAAc,CAAC,CAC7B,KAAK,eAAe,iCAAiC,CAAC,CACtD,KAAK,eAAe,GAAG,CAAC,CACxB,KAAK,eAAe,QAAQ,CAAC,CAC7B,KAAK,KAAKC,IAAQ,CAAC,CAAC,CACpB,KAAK,KAAKC,IAASC,EAAO,SAAS,CAAC,CAAC,CACrC,KAAKC,KAAc,aAAa,GAGnCJ,EACG,OAAO,MAAM,CAAC,CACd,KAAK,SAAS,cAAc,CAAC,CAC7B,KAAK,eAAe,iCAAiC,CAAC,CACtD,KAAK,eAAe,GAAG,CAAC,CACxB,KAAK,eAAe,QAAQ,CAAC,CAC7B,KAAK,KAAK,CAACE,IAAS,CAAC,CAAC,CACtB,KAAK,KAAK,CAACC,EAAO,OAAO,EAAE,CAAC,CAC5B,KAAK,aAAa,aAAa,CAAC,CAChC,KAAKE,KAAc,WAAW;AACnC"}

package/dist/components/PlChartHistogram/createSvgContainer.js

@@ -1,10 +1,9 @@
 import { select as e } from "d3-selection";
-//#region src/components/PlChartHistogram/createSvgContainer.ts
+// src/components/PlChartHistogram/createSvgContainer.ts
 function t(t, n) {
 	let { width: r, height: i, margin: a, compact: o } = n;
 	return t.replaceChildren(), o && (t.style.height = i + "px", t.style.lineHeight = i + "px"), e(t).append("svg").attr("data-testid", "pl-chart-histogram-svg").attr("width", r + a.left + a.right).attr("height", i + a.top + a.bottom).append("g").attr("data-testid", "pl-chart-histogram-plot").attr("transform", `translate(${a.left},${a.top})`);
 }
-//#endregion
 export { t as createSvgContainer };
 
 //# sourceMappingURL=createSvgContainer.js.map