@milaboratories/uikit 2.10.37 → 2.10.39

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

@@ -1,5 +1,61 @@
-import f from "./PlBtnGroup.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlBtnGroup.vue2.js.map
+import e from "../PlTooltip/PlTooltip.js";
+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";
+var b = { key: 0 }, x = [
+	"tabindex",
+	"onKeydown",
+	"onClick"
+], S = {
+	key: 1,
+	class: "pl-btn-group__helper"
+}, C = {
+	key: 2,
+	class: "pl-btn-group__error"
+}, w = /* @__PURE__ */ u({
+	name: "PlBtnGroup",
+	props: {
+		modelValue: {},
+		label: {},
+		options: {},
+		disabled: { type: Boolean },
+		compact: { type: Boolean },
+		helper: {},
+		error: {}
+	},
+	emits: ["update:modelValue"],
+	setup(u, { emit: w }) {
+		let T = _(), E = w, D = (e) => E("update:modelValue", e), O = u, k = i(() => O.options.map((e) => ({
+			label: "label" in e ? e.label : e.text,
+			value: e.value
+		})));
+		return (i, _) => (f(), s("div", { class: d(["pl-btn-group", {
+			disabled: u.disabled,
+			compact: u.compact
+		}]) }, [
+			u.label ? (f(), s("label", b, [c("span", null, h(u.label), 1), g(T).tooltip ? (f(), a(g(e), {
+				key: 0,
+				class: "info",
+				position: "top"
+			}, {
+				tooltip: v(() => [m(i.$slots, "tooltip")]),
+				_: 3
+			})) : o("", !0)])) : o("", !0),
+			l(n, { class: "pl-btn-group__container" }, {
+				default: v(() => [(f(!0), s(r, null, p(k.value, (e, t) => (f(), s("div", {
+					key: t,
+					class: d(["pl-btn-group__option text-s", { active: u.modelValue === e.value }]),
+					tabindex: u.modelValue === e.value || u.disabled ? void 0 : 0,
+					onKeydown: y((t) => D(e.value), ["enter"]),
+					onClick: (t) => D(e.value)
+				}, h(e.label), 43, x))), 128))]),
+				_: 1
+			}),
+			u.helper ? (f(), s("div", S, h(u.helper), 1)) : u.error ? (f(), s("div", C, h(g(t)(u.error)), 1)) : o("", !0)
+		], 2));
+	}
+});
+export { w as default };
+
+//# sourceMappingURL=PlBtnGroup.vue2.js.map

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

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

package/dist/components/PlBtnGroup/pl-btn-group.css

@@ -1 +1 @@
-.pl-btn-group{--pl-btn-group-height: 40px;box-sizing:border-box;position:relative;font-family:var(--control-font-family)}.pl-btn-group label{margin-bottom:6px;display:flex;align-items:center;gap:4px;font-weight:500;font-size:var(--font-size-base);line-height:20px}.pl-btn-group__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-btn-group__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-btn-group .inner-border{height:var(--pl-btn-group-height);min-height:var(--pl-btn-group-height)}.pl-btn-group .inner-border:after{border:1px solid var(--color-border-default);border-radius:6px}.pl-btn-group__container{flex:1;display:flex;align-items:center;width:100%;box-sizing:content-box;border-radius:6px;font-weight:500;font-size:10px;text-align:center;-webkit-user-select:none;user-select:none}.pl-btn-group__option{position:relative;display:flex;flex:1;flex-direction:row;justify-content:center;align-items:center;padding:0 12px;align-self:stretch;cursor:pointer;outline:none;text-transform:capitalize;color:var(--btn-switcher-option-color);white-space:nowrap}.pl-btn-group__option:hover:not(.active){background-color:var(--btn-sec-hover-grey)}.pl-btn-group__option:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.pl-btn-group__option:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.pl-btn-group__option:focus-visible{position:relative}.pl-btn-group__option:focus-visible:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border:2px solid var(--border-color-focus);border-radius:inherit;z-index:1}.pl-btn-group__option:not(.active)+.pl-btn-group__option:not(.active):before{content:"";position:absolute;width:1px;height:24px;left:-1px;top:50%;transform:translateY(-50%);background-color:var(--color-border-default)}.pl-btn-group__option.active{background:var(--btn-switcher-bg);border:var(--btn-switcher-active-option-border);box-shadow:var(--btn-group-shape-shadow);color:var(--btn-switcher-active-option-color);border-radius:6px;z-index:1;padding:0 11px}.pl-btn-group.compact{--pl-btn-group-height: 32px}.pl-btn-group.disabled{--color-border-default: var(--color-dis-01);--btn-switcher-bg: var(--color-dis-01);--btn-switcher-option-color: var(--color-dis-01);--btn-switcher-active-option-color: var(--color-dis-00);--btn-switcher-active-option-border: 0px;pointer-events:none;tab-index:unset!important}
+.pl-btn-group{--pl-btn-group-height:40px;box-sizing:border-box;font-family:var(--control-font-family);position:relative}.pl-btn-group label{font-weight:500;font-size:var(--font-size-base);align-items:center;gap:4px;margin-bottom:6px;line-height:20px;display:flex}.pl-btn-group__helper{color:var(--txt-03);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-btn-group__error{color:var(--txt-error);white-space:pre-wrap;text-overflow:ellipsis;margin-top:6px;padding:2px 0 0;font-size:12px;font-weight:500;line-height:16px}.pl-btn-group .inner-border{height:var(--pl-btn-group-height);min-height:var(--pl-btn-group-height)}.pl-btn-group .inner-border:after{border:1px solid var(--color-border-default);border-radius:6px}.pl-btn-group__container{box-sizing:content-box;text-align:center;-webkit-user-select:none;user-select:none;border-radius:6px;flex:1;align-items:center;width:100%;font-size:10px;font-weight:500;display:flex}.pl-btn-group__option{cursor:pointer;text-transform:capitalize;color:var(--btn-switcher-option-color);white-space:nowrap;outline:none;flex-direction:row;flex:1;justify-content:center;align-self:stretch;align-items:center;padding:0 12px;display:flex;position:relative}.pl-btn-group__option:hover:not(.active){background-color:var(--btn-sec-hover-grey)}.pl-btn-group__option:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.pl-btn-group__option:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.pl-btn-group__option:focus-visible{position:relative}.pl-btn-group__option:focus-visible:after{content:"";pointer-events:none;border:2px solid var(--border-color-focus);border-radius:inherit;z-index:1;position:absolute;inset:0}.pl-btn-group__option:not(.active)+.pl-btn-group__option:not(.active):before{content:"";background-color:var(--color-border-default);width:1px;height:24px;position:absolute;top:50%;left:-1px;transform:translateY(-50%)}.pl-btn-group__option.active{background:var(--btn-switcher-bg);border:var(--btn-switcher-active-option-border);box-shadow:var(--btn-group-shape-shadow);color:var(--btn-switcher-active-option-color);z-index:1;border-radius:6px;padding:0 11px}.pl-btn-group.compact{--pl-btn-group-height:32px}.pl-btn-group.disabled{--color-border-default:var(--color-dis-01);--btn-switcher-bg:var(--color-dis-01);--btn-switcher-option-color:var(--color-dis-01);--btn-switcher-active-option-color:var(--color-dis-00);--btn-switcher-active-option-border:0px;pointer-events:none;tab-index:unset!important}

package/dist/components/PlBtnLink/PlBtnLink.js

@@ -0,0 +1,5 @@
+import e from "./PlBtnLink.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlBtnLink.js.map

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

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

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

@@ -1,5 +1,32 @@
-import f from "./PlBtnLink.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlBtnLink.vue2.js.map
+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";
+var l = /* @__PURE__ */ r({
+	__name: "PlBtnLink",
+	props: {
+		loading: { type: Boolean },
+		size: {},
+		icon: {},
+		reverse: { type: Boolean },
+		justifyCenter: { type: Boolean },
+		disabled: { type: Boolean }
+	},
+	setup(r) {
+		let l = r, u = s(!1);
+		return (s, d) => (o(), t("div", {
+			class: a(["ui-btn-link", {
+				disabled: r.disabled,
+				loading: r.loading,
+				hover: u.value
+			}]),
+			onMouseover: d[0] ||= (e) => u.value = !0,
+			onMouseleave: d[1] ||= (e) => u.value = !1
+		}, [n(e, i({
+			round: "",
+			hover: u.value
+		}, l), null, 16, ["hover"]), c(s.$slots, "default")], 34));
+	}
+});
+export { l as default };
+
+//# sourceMappingURL=PlBtnLink.vue2.js.map

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

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

package/dist/components/PlBtnLink/pl-btn-link.css

@@ -1 +1 @@
-.ui-btn-link{display:flex;flex-direction:row;align-items:center;gap:12px;--color-text: var(--txt-01);color:var(--txt-01)}.ui-btn-link.disabled,.ui-btn-link.loading{color:var(--color-dis-01)}.ui-btn-link:hover{cursor:pointer}
+.ui-btn-link{--color-text:var(--txt-01);color:var(--txt-01);flex-direction:row;align-items:center;gap:12px;display:flex}.ui-btn-link.disabled,.ui-btn-link.loading{color:var(--color-dis-01)}.ui-btn-link:hover{cursor:pointer}

package/dist/components/PlBtnPrimary/PlBtnPrimary.js

@@ -0,0 +1,5 @@
+import e from "./PlBtnPrimary.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlBtnPrimary.js.map

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

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

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

@@ -1,5 +1,24 @@
-import f from "./PlBtnPrimary.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlBtnPrimary.vue2.js.map
+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({
+	name: "PlBtnPrimary",
+	props: {
+		loading: { type: Boolean },
+		size: {},
+		round: { type: Boolean },
+		icon: {},
+		reverse: { type: Boolean },
+		justifyCenter: { type: Boolean }
+	},
+	setup(n) {
+		let s = n;
+		return (n, c) => (i(), t(e, r({ class: "pl-btn-primary" }, s), {
+			default: o(() => [a(n.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+export { s as default };
+
+//# sourceMappingURL=PlBtnPrimary.vue2.js.map

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

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

package/dist/components/PlBtnPrimary/pl-btn-primary.css

@@ -1 +1 @@
-.pl-btn-primary{--font-size: 14px;--border-radius: 6px;--button-height: 40px;--focus-shadow: 0 0 0 0 transparent;--btn-disabled-bg: var(--color-dis-01);--color-text: var(--txt-00);--shape-shadow: 0 0 0 0 transparent;--append-shadow: 0 0 0 0 transparent;--drop-shadow: 0 0 0 0 transparent;--active-shadow: 0 0 0 0 transparent;--main-padding: 0 12px;text-transform:capitalize;position:relative;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;align-items:center;white-space:nowrap;gap:8px;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);line-height:16px;height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);outline:none;-webkit-user-select:none;user-select:none;transition:box-shadow .05s ease-in-out;box-shadow:var(--focus-shadow),var(--append-shadow),var(--shape-shadow),var(--active-shadow),var(--drop-shadow);--icon-color: var(--ic-00)}.pl-btn-primary.justifyCenter{justify-content:center}.pl-btn-primary.round{border-radius:50%;width:var(--button-height);min-width:var(--button-height);padding:0;justify-content:center}.pl-btn-primary.small{--button-height: 32px;--main-padding: 0 8px}.pl-btn-primary.medium{--main-padding: 0 16px}.pl-btn-primary.large{--button-height: 56px;--border-radius: 8px;--font-size: 16px;--main-padding: 0 18px}.pl-btn-primary.large .mask{--mask-size: 24px}.pl-btn-primary:disabled{--color-text: var(--dis-00);--icon-color: var(--dis-00)}.pl-btn-primary:disabled *{color:var(--color-text)}.pl-btn-primary:not([disabled]){cursor:pointer}.pl-btn-primary:not([disabled]).hover{background:var(--color-btn-hover)}.pl-btn-primary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-primary:focus-visible{--focus-shadow: inset 0 0 0 2px var(--border-color-focus)}.pl-btn-primary .icon{display:block;width:16px;height:16px}.pl-btn-primary.loading{box-shadow:none!important}.pl-btn-primary.loading .mask-loading{display:block;animation:spin 4s linear infinite}.pl-btn-primary.reverse{flex-direction:row-reverse}.pl-btn-primary>span{display:inline-flex}.pl-btn-primary{--color-btn-hover: var(--color-primary-hover);--color-btn-background: var(--color-primary-default);--btn-disabled-bg: var(--color-dis-01);--shape-shadow: var(--btn-shape-shadow);background-color:var(--color-btn-background);border:none;min-width:160px;--append-shadow: inset 0 0 0 1px #110529}.pl-btn-primary.loading{background:#070529cc}.pl-btn-primary:disabled{background-color:var(--btn-disabled-bg);box-shadow:none!important;cursor:auto}.pl-btn-primary:active{--shape-shadow: 0 0 0 0 transparent}
+.pl-btn-primary{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);--icon-color:var(--ic-00);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-primary.justifyCenter{justify-content:center}.pl-btn-primary.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-primary.small{--button-height:32px;--main-padding:0 8px}.pl-btn-primary.medium{--main-padding:0 16px}.pl-btn-primary.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-primary.large .mask{--mask-size:24px}.pl-btn-primary:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-primary:disabled *{color:var(--color-text)}.pl-btn-primary:not([disabled]){cursor:pointer}.pl-btn-primary:not([disabled]).hover,.pl-btn-primary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-primary:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-primary .icon{width:16px;height:16px;display:block}.pl-btn-primary.loading{box-shadow:none!important}.pl-btn-primary.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-primary.reverse{flex-direction:row-reverse}.pl-btn-primary>span{display:inline-flex}.pl-btn-primary{--color-btn-hover:var(--color-primary-hover);--color-btn-background:var(--color-primary-default);--btn-disabled-bg:var(--color-dis-01);--shape-shadow:var(--btn-shape-shadow);background-color:var(--color-btn-background);--append-shadow:inset 0 0 0 1px #110529;border:none;min-width:160px}.pl-btn-primary.loading{background:#070529cc}.pl-btn-primary:disabled{background-color:var(--btn-disabled-bg);cursor:auto;box-shadow:none!important}.pl-btn-primary:active{--shape-shadow:0 0 0 0 transparent}

package/dist/components/PlBtnSecondary/PlBtnSecondary.js

@@ -0,0 +1,5 @@
+import e from "./PlBtnSecondary.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlBtnSecondary.js.map

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

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

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

@@ -1,5 +1,24 @@
-import f from "./PlBtnSecondary.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlBtnSecondary.vue2.js.map
+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({
+	name: "PlBtnSecondary",
+	props: {
+		loading: { type: Boolean },
+		size: {},
+		round: { type: Boolean },
+		icon: {},
+		reverse: { type: Boolean },
+		justifyCenter: { type: Boolean }
+	},
+	setup(n) {
+		let s = n;
+		return (n, c) => (i(), t(e, r(s, { class: "pl-btn-secondary" }), {
+			default: o(() => [a(n.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+export { s as default };
+
+//# sourceMappingURL=PlBtnSecondary.vue2.js.map

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

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

package/dist/components/PlBtnSecondary/pl-btn-secondary.css

@@ -1 +1 @@
-.pl-btn-secondary{--font-size: 14px;--border-radius: 6px;--button-height: 40px;--focus-shadow: 0 0 0 0 transparent;--btn-disabled-bg: var(--color-dis-01);--color-text: var(--txt-00);--shape-shadow: 0 0 0 0 transparent;--append-shadow: 0 0 0 0 transparent;--drop-shadow: 0 0 0 0 transparent;--active-shadow: 0 0 0 0 transparent;--main-padding: 0 12px;text-transform:capitalize;position:relative;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;align-items:center;white-space:nowrap;gap:8px;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);line-height:16px;height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);outline:none;-webkit-user-select:none;user-select:none;transition:box-shadow .05s ease-in-out;box-shadow:var(--focus-shadow),var(--append-shadow),var(--shape-shadow),var(--active-shadow),var(--drop-shadow)}.pl-btn-secondary.justifyCenter{justify-content:center}.pl-btn-secondary.round{border-radius:50%;width:var(--button-height);min-width:var(--button-height);padding:0;justify-content:center}.pl-btn-secondary.small{--button-height: 32px;--main-padding: 0 8px}.pl-btn-secondary.medium{--main-padding: 0 16px}.pl-btn-secondary.large{--button-height: 56px;--border-radius: 8px;--font-size: 16px;--main-padding: 0 18px}.pl-btn-secondary.large .mask{--mask-size: 24px}.pl-btn-secondary:disabled{--color-text: var(--dis-00);--icon-color: var(--dis-00)}.pl-btn-secondary:disabled *{color:var(--color-text)}.pl-btn-secondary:not([disabled]){cursor:pointer}.pl-btn-secondary:not([disabled]).hover{background:var(--color-btn-hover)}.pl-btn-secondary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-secondary:focus-visible{--focus-shadow: inset 0 0 0 2px var(--border-color-focus)}.pl-btn-secondary .icon{display:block;width:16px;height:16px}.pl-btn-secondary.loading{box-shadow:none!important}.pl-btn-secondary.loading .mask-loading{display:block;animation:spin 4s linear infinite}.pl-btn-secondary.reverse{flex-direction:row-reverse}.pl-btn-secondary>span{display:inline-flex}.pl-btn-secondary{border:1px solid var(--color-border);background:transparent;min-width:160px;--color-border: var(--color-border-default);--color-text: var(--txt-01);--color-btn-hover: var(--btn-sec-hover-grey)}.pl-btn-secondary:disabled{--color-text: var(--color-dis-01);--color-border: var(--color-dis-01);--icon-color: var(--dis-01);box-shadow:none}.pl-btn-secondary:focus-visible{border-width:0}.pl-btn-secondary:active{--drop-shadow: inset 0px 3px 0px rgba(36, 34, 61, .12)}
+.pl-btn-secondary{--font-size:14px;--border-radius:6px;--button-height:40px;--focus-shadow:0 0 0 0 transparent;--btn-disabled-bg:var(--color-dis-01);--color-text:var(--txt-00);--shape-shadow:0 0 0 0 transparent;--append-shadow:0 0 0 0 transparent;--drop-shadow:0 0 0 0 transparent;--active-shadow:0 0 0 0 transparent;--main-padding:0 12px;text-transform:capitalize;white-space:nowrap;padding:var(--main-padding);color:var(--color-text);font-weight:600;font-size:var(--font-size);font-family:var(--font-family-base);height:var(--button-height);min-height:var(--button-height);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none;box-shadow:var(--focus-shadow), var(--append-shadow), var(--shape-shadow), var(--active-shadow), var(--drop-shadow);outline:none;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;line-height:16px;transition:box-shadow 50ms ease-in-out;display:flex;position:relative;overflow:hidden}.pl-btn-secondary.justifyCenter{justify-content:center}.pl-btn-secondary.round{width:var(--button-height);min-width:var(--button-height);border-radius:50%;justify-content:center;padding:0}.pl-btn-secondary.small{--button-height:32px;--main-padding:0 8px}.pl-btn-secondary.medium{--main-padding:0 16px}.pl-btn-secondary.large{--button-height:56px;--border-radius:8px;--font-size:16px;--main-padding:0 18px}.pl-btn-secondary.large .mask{--mask-size:24px}.pl-btn-secondary:disabled{--color-text:var(--dis-00);--icon-color:var(--dis-00)}.pl-btn-secondary:disabled *{color:var(--color-text)}.pl-btn-secondary:not([disabled]){cursor:pointer}.pl-btn-secondary:not([disabled]).hover,.pl-btn-secondary:not([disabled]):hover{background:var(--color-btn-hover)}.pl-btn-secondary:focus-visible{--focus-shadow:inset 0 0 0 2px var(--border-color-focus)}.pl-btn-secondary .icon{width:16px;height:16px;display:block}.pl-btn-secondary.loading{box-shadow:none!important}.pl-btn-secondary.loading .mask-loading{animation:4s linear infinite spin;display:block}.pl-btn-secondary.reverse{flex-direction:row-reverse}.pl-btn-secondary>span{display:inline-flex}.pl-btn-secondary{border:1px solid var(--color-border);--color-border:var(--color-border-default);--color-text:var(--txt-01);--color-btn-hover:var(--btn-sec-hover-grey);background:0 0;min-width:160px}.pl-btn-secondary:disabled{--color-text:var(--color-dis-01);--color-border:var(--color-dis-01);--icon-color:var(--dis-01);box-shadow:none}.pl-btn-secondary:focus-visible{border-width:0}.pl-btn-secondary:active{--drop-shadow:inset 0px 3px 0px #24223d1f}

package/dist/components/PlBtnSplit/PlBtnSplit.js

@@ -0,0 +1,5 @@
+import e from "./PlBtnSplit.vue2.js";
+var t = e;
+export { t as default };
+
+//# sourceMappingURL=PlBtnSplit.js.map

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

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

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

@@ -29,9 +29,7 @@ declare const _default: <M = unknown>(__VLS_props: NonNullable<Awaited<typeof __
     attrs: any;
     slots: {};
     emit: ((event: "click", ...args: any[]) => void) & ((evt: "update:modelValue", value: M) => void);
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"PlBtnSplit.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"names":[],"mappings":"AA6NA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,qBAAqB,CAAC;yBAEZ,CAAC,yBACJ,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA2V1D,mBAAmB,CAAC;;;;oBAvKhB,CAAC;;QAjLX;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnC;;WAEG;mBACQ,OAAO;QAElB;;WAEG;kBACO,OAAO;oBA2U2E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;UAEJ,2FAAqC;;;;YAGA,OAAO,CAAC,OAAO,WAAW,CAAC;;AArWvE,wBAqW4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlBtnSplit.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlBtnSplit/PlBtnSplit.vue"],"names":[],"mappings":"AA6NA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,qBAAqB,CAAC;yBAEZ,CAAC,GAAG,OAAO,EAC3B,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA0VO,mBAAmB,CAAC;;;;oBAvKhB,CAAC;;QAjLX;;WAEG;kBACO,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnC;;WAEG;mBACQ,OAAO;QAElB;;WAEG;kBACO,OAAO;oBA2U2E,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB;;;;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;UAEJ,2FAAqC;EAExC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AArWzE,wBAqW4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -1,5 +1,136 @@
-import f from "./PlBtnSplit.vue.js";
-export {
-  f as default
-};
-//# sourceMappingURL=PlBtnSplit.vue2.js.map
+import e from "../DropdownListItem.js";
+import { normalizeListOptions as t } from "../../helpers/utils.js";
+import n from "../PlIcon16/PlIcon16.js";
+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";
+var E = ["onKeyup"], D = /* @__PURE__ */ d({
+	__name: "PlBtnSplit",
+	props: /* @__PURE__ */ f({
+		options: {},
+		disabled: { type: Boolean },
+		loading: { type: Boolean }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	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,
+			optionsHeight: 0,
+			activeIndex: -1
+		});
+		f({ data: F });
+		let I = g({
+			top: "0px",
+			left: "0px",
+			width: "0px"
+		});
+		S(M, (e) => {
+			e && (F.optionsHeight = e.getBoundingClientRect().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,
+			index: t,
+			isSelected: t === R.value,
+			isActive: t === F.activeIndex
+		}))), B = o(() => O.loading || O.options === void 0), V = o(() => z.value.find((e) => T(e.value, A.value))?.label ?? (O.options === void 0 ? "..." : ""));
+		r(j, (e) => {
+			let t = e.top + e.height + 3;
+			t + F.optionsHeight > e.clientHeight ? I.top = e.top - F.optionsHeight - 3 + "px" : I.top = t + "px", I.left = e.left + "px", I.width = e.width + "px";
+		});
+		let H = (e) => {
+			A.value = e, F.open = !1, j?.value?.focus();
+		};
+		function U() {
+			k("click");
+		}
+		let W = (e) => {
+			if ([
+				"ArrowDown",
+				"ArrowUp",
+				"Enter",
+				"Escape"
+			].includes(e.code)) e.preventDefault();
+			else return;
+			if (e.target === P.value && e.code === "Enter") {
+				U();
+				return;
+			}
+			let { open: t, activeIndex: n } = F;
+			if (!t && e.target === N.value) {
+				e.code === "Enter" && (F.open = !0);
+				return;
+			}
+			e.code === "Escape" && (F.open = !1, j.value?.focus());
+			let r = b(z), { length: i } = r;
+			if (!i) return;
+			e.code === "Enter" && H(r.find((e) => e.index === n)?.value);
+			let a = r.findIndex((e) => e.index === n) ?? -1, o = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, s = Math.abs(a + o + i) % i;
+			F.activeIndex = z.value[s].index ?? -1;
+		}, G = (e) => {
+			let t = e.relatedTarget;
+			!j.value?.contains(t) && !M.value?.contains(t) && (F.open = !1);
+		};
+		return (t, r) => (h(), l("div", {
+			ref_key: "root",
+			ref: j,
+			class: p([{
+				disabled: d.disabled || B.value,
+				loading: B.value
+			}, "pl-btn-split d-flex"]),
+			onFocusout: G,
+			onKeydown: W
+		}, [
+			u("div", {
+				ref_key: "buttonAction",
+				ref: P,
+				class: "pl-btn-split__title flex-grow-1 d-flex align-center text-s-btn",
+				tabindex: "0",
+				onClick: U,
+				onKeyup: C(w(U, ["stop"]), ["enter"])
+			}, y(V.value), 41, E),
+			u("div", {
+				ref_key: "menuActivator",
+				ref: N,
+				class: "pl-btn-split__icon-container d-flex align-center justify-center",
+				tabindex: "0",
+				onClick: r[0] ||= (e) => F.open = !F.open
+			}, [B.value ? (h(), s(b(n), {
+				key: 0,
+				name: "loading"
+			})) : (h(), s(b(n), {
+				key: 1,
+				name: L.value,
+				class: "pl-btn-split__icon"
+			}, null, 8, ["name"]))], 512),
+			F.open ? (h(), s(a, {
+				key: 0,
+				to: "body"
+			}, [u("div", {
+				ref_key: "list",
+				ref: M,
+				class: "pl-dropdown__options",
+				style: m(I),
+				tabindex: "-1"
+			}, [(h(!0), l(i, null, v(z.value, (t, n) => (h(), s(e, {
+				key: n,
+				option: t,
+				"is-selected": t.isSelected,
+				"is-hovered": t.isActive,
+				size: "medium",
+				onClick: w((e) => H(t.value), ["stop"])
+			}, null, 8, [
+				"option",
+				"is-selected",
+				"is-hovered",
+				"onClick"
+			]))), 128))], 4)])) : c("", !0)
+		], 34));
+	}
+});
+export { D as default };
+
+//# sourceMappingURL=PlBtnSplit.vue2.js.map

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

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

package/dist/components/PlBtnSplit/pl-btn-split.css

@@ -1 +1 @@
-.pl-btn-split{--border-color: var(--border-color-default);height:40px;min-width:160px;border-radius:6px;border:1px solid var(--border-color);cursor:pointer}.pl-btn-split.disabled,.pl-btn-split.loading{pointer-events:none;--border-color: var(--border-color-div-grey)}.pl-btn-split.loading .mask-loading{animation:spin 2.5s linear infinite}.pl-btn-split__title{padding:8px 14px;height:100%;color:var(--border-color);transition:all .1s ease-in-out}.pl-btn-split__title:focus-visible{position:relative;outline:none}.pl-btn-split__title:focus-visible:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid var(--border-color-focus);border-radius:6px;z-index:2}.pl-btn-split__title:hover{border-radius:6px;background-color:var(--btn-sec-hover-grey)}.pl-btn-split__title:active{border-radius:6px;background-color:var(--btn-sec-press-grey)}.pl-btn-split__icon,.pl-btn-split .mask-loading{--icon-color: var(--border-color)}.pl-btn-split__icon-container{width:36px;height:100%;position:relative;transition:all .1s ease-in-out}.pl-btn-split__icon-container:focus-visible{position:relative;outline:none}.pl-btn-split__icon-container:focus-visible:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid var(--border-color-focus);border-radius:6px;z-index:2}.pl-btn-split__icon-container:hover{border-radius:6px;background-color:var(--btn-sec-hover-grey)}.pl-btn-split__icon-container:active{border-radius:6px;background-color:var(--btn-sec-press-grey)}.pl-btn-split__icon-container:before{content:"";background:var(--border-color);height:26px;position:absolute;left:0;width:1px}
+.pl-btn-split{--border-color:var(--border-color-default);border:1px solid var(--border-color);cursor:pointer;border-radius:6px;min-width:160px;height:40px}.pl-btn-split.disabled,.pl-btn-split.loading{pointer-events:none;--border-color:var(--border-color-div-grey)}.pl-btn-split.loading .mask-loading{animation:2.5s linear infinite spin}.pl-btn-split__title{height:100%;color:var(--border-color);padding:8px 14px;transition:all .1s ease-in-out}.pl-btn-split__title:focus-visible{outline:none;position:relative}.pl-btn-split__title:focus-visible:after{content:"";border:2px solid var(--border-color-focus);z-index:2;border-radius:6px;position:absolute;inset:-1px}.pl-btn-split__title:hover{background-color:var(--btn-sec-hover-grey);border-radius:6px}.pl-btn-split__title:active{background-color:var(--btn-sec-press-grey);border-radius:6px}.pl-btn-split__icon,.pl-btn-split .mask-loading{--icon-color:var(--border-color)}.pl-btn-split__icon-container{width:36px;height:100%;transition:all .1s ease-in-out;position:relative}.pl-btn-split__icon-container:focus-visible{outline:none;position:relative}.pl-btn-split__icon-container:focus-visible:after{content:"";border:2px solid var(--border-color-focus);z-index:2;border-radius:6px;position:absolute;inset:-1px}.pl-btn-split__icon-container:hover{background-color:var(--btn-sec-hover-grey);border-radius:6px}.pl-btn-split__icon-container:active{background-color:var(--btn-sec-press-grey);border-radius:6px}.pl-btn-split__icon-container:before{content:"";background:var(--border-color);width:1px;height:26px;position:absolute;left:0}

package/dist/components/PlChartHistogram/PlChartHistogram.js

@@ -0,0 +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 }]]);
+export { r as default };
+
+//# sourceMappingURL=PlChartHistogram.js.map

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

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

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

@@ -0,0 +1,7 @@
+import './PlChartHistogram.vue.css';var e = {
+	component: "_component_12ebd_2",
+	title: "_title_12ebd_11"
+};
+export { e as default };
+
+//# sourceMappingURL=PlChartHistogram.style.js.map

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

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

package/dist/components/PlChartHistogram/PlChartHistogram.vue.css

@@ -0,0 +1 @@
+._component_12ebd_2{flex-direction:column;gap:24px;display:flex}._component_12ebd_2 svg{font-family:var(--font-family-base)}._title_12ebd_11{letter-spacing:-.2px;font-size:20px;font-weight:500;line-height:24px}.svg-tooltip{font-family:var(--font-family-base);color:#fff;text-overflow:ellipsis;white-space:pre;z-index:300;visibility:hidden;background:#454d5de6;border-radius:.1rem;max-width:320px;padding:.2rem .4rem;font-size:14px;display:block;position:absolute}