npm - @milaboratories/uikit - Versions diffs - 2.11.6 → 2.11.8 - Mend

@milaboratories/uikit 2.11.6 → 2.11.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1119) hide show

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.js CHANGED Viewed

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

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js CHANGED Viewed

@@ -17,6 +17,7 @@ import u from "../PlChip/PlChip.js";
 import "../PlChip/index.js";
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as ne, defineComponent as v, normalizeClass as re, openBlock as y, reactive as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, toRef as T, unref as E, useSlots as ie, useTemplateRef as ae, vModelText as D, watch as O, withCtx as k, withDirectives as oe, withModifiers as A } from "vue";
 import se from "canonicalize";
+//#region src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue?vue&type=script&setup=true&lang.ts
 var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue = { class: "pl-autocomplete-multi__field" }, de = ["disabled", "placeholder"], fe = {
 	key: 0,
 	class: "chips-container"
@@ -229,6 +230,7 @@ var ce = ["tabindex"], le = { class: "pl-autocomplete-multi__container" }, ue =
 		])], 42, ce), $.value ? (y(), h("div", j, w($.value), 1)) : v.helper ? (y(), h("div", M, w(v.helper), 1)) : m("", !0)]));
 	}
 });
+//#endregion
 export { N as default };
 //# sourceMappingURL=PlAutocompleteMulti.vue2.js.map

package/dist/components/PlAutocompleteMulti/PlAutocompleteMulti.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlAutocompleteMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n \n @example\n * Basic usage:\n * <PlAutocompleteMulti\n * v-model=\"selectedUsers\"\n * :options-search=\"searchUsers\"\n * :model-search=\"getUsersByIds\"\n * label=\"Select Users\"\n * placeholder=\"Search for users...\"\n * required\n * :debounce=\"300\"\n * helper=\"Choose one or more users from the list\"\n * />\n \n With async functions:\n * const selectedUsers = ref([])\n \n const searchUsers = async (searchTerm) => {\n * const response = await fetch('/api/users/search?q=' + searchTerm)\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n \n const getUsersByIds = async (userIds) => {\n * if (!userIds.length) return []\n * const response = await fetch('/api/users?ids=' + userIds.join(','))\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n /\nexport default {\n name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string \| number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected values.\n /\n modelValue: M[];\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: OptionsSearch<M>;\n /\n Unique identifier for the source of the options, changing it will invalidate the options cache.\n /\n sourceId?: string;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Debounce time in ms for the options search.\n /\n debounce?: number;\n /\n If `true`, the search input is reset and focus is set on it when the new option is selected.\n /\n resetSearchOnSelect?: boolean;\n /\n The text to display when no options are found.\n /\n emptyOptionsText?: string;\n /\n Makes some of corners not rounded\n * */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: \"...\",\n required: false,\n disabled: false,\n debounce: 300,\n emptyOptionsText: \"Nothing found\",\n sourceId: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n search: \"\",\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nwatch(\n () => data.open,\n (v) => {\n if (!v) {\n data.search = \"\";\n }\n },\n { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n () => [data.search, data.open, props.sourceId] as const,\n async ([search, _open]) => {\n return props.optionsSearch(search, \"label\");\n },\n {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n },\n);\n\nconst modelOptionsRef = useWatchFetch(\n () => [props.modelValue, props.sourceId] as const,\n async ([v]) => {\n return props.optionsSearch(v, \"value\");\n },\n {\n debounce,\n },\n);\n\nconst allOptionsRef = computed(() => {\n const modelOptions = modelOptionsRef.value ?? [];\n const searchOptions = searchOptionsRef.value ?? [];\n\n const seenValues = new Set<string \| undefined>();\n const result = [] as ListOptionBase<M>[];\n\n const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n for (const option of options) {\n const canonicalValue = canonicalize(option.value);\n if (!seenValues.has(canonicalValue)) {\n seenValues.add(canonicalValue);\n result.push(option);\n }\n }\n };\n\n addOptions(modelOptions);\n addOptions(searchOptions);\n\n return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value\n .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = searchOptionsRef.value ?? [];\n\n return [...options].map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading \|\| modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n if (modelOptionsRef.value === undefined) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n if (props.resetSearchOnSelect) {\n data.search = \"\";\n }\n inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = data;\n\n if (!open) {\n if (e.code === \"Enter\") {\n data.open = true;\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n inputRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === \"Enter\") {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nconst computedError = computed(() => {\n if (isOptionsLoading.value) {\n return undefined;\n }\n\n if (searchOptionsRef.error) {\n return getErrorMessage(searchOptionsRef.error);\n }\n\n if (modelOptionsRef.error) {\n return getErrorMessage(modelOptionsRef.error);\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n return \"The selected values are not one of the options\";\n }\n\n return undefined;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete-multi\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__container\">\n <div class=\"pl-autocomplete-multi__field\">\n <input\n ref=\"inputRef\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-autocomplete-multi__controls\">\n <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__open-chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">\n {{ emptyOptionsText }}\n </div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"PlAutocompleteMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/*\n A multi-select autocomplete component that allows users to search and select multiple values from a list of options.\n * Supports async data fetching, keyboard navigation, and displays selected items as removable chips.\n \n @example\n * Basic usage:\n * <PlAutocompleteMulti\n * v-model=\"selectedUsers\"\n * :options-search=\"searchUsers\"\n * :model-search=\"getUsersByIds\"\n * label=\"Select Users\"\n * placeholder=\"Search for users...\"\n * required\n * :debounce=\"300\"\n * helper=\"Choose one or more users from the list\"\n * />\n \n With async functions:\n * const selectedUsers = ref([])\n \n const searchUsers = async (searchTerm) => {\n * const response = await fetch('/api/users/search?q=' + searchTerm)\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n \n const getUsersByIds = async (userIds) => {\n * if (!userIds.length) return []\n * const response = await fetch('/api/users?ids=' + userIds.join(','))\n * const users = await response.json()\n * return users.map(user => ({ value: user.id, label: user.name }))\n * }\n /\nexport default {\n name: \"PlAutocompleteMulti\",\n};\n\nexport interface OptionsSearch<T> {\n (s: string, type: \"label\"): Promise<Readonly<ListOptionBase<T>[]>>;\n (s: T[], type: \"value\"): Promise<Readonly<ListOptionBase<T>[]>>;\n}\n</script>\n\n<script lang=\"ts\" setup generic=\"M extends string \| number = string\">\nimport \"./pl-autocomplete-multi.scss\";\n\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport canonicalize from \"canonicalize\";\nimport { computed, reactive, ref, toRef, unref, useSlots, useTemplateRef, watch } from \"vue\";\nimport { useWatchFetch } from \"../../composition/useWatchFetch.ts\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport DropdownOverlay from \"../../utils/DropdownOverlay/DropdownOverlay.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { PlChip } from \"../PlChip\";\nimport { PlMaskIcon24 } from \"../PlMaskIcon24\";\nimport { PlTooltip } from \"../PlTooltip\";\n\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { PlSvg } from \"../PlSvg\";\n\nconst emit = defineEmits<{\n (e: \"update:modelValue\", v: M[]): void;\n}>();\n\nconst emitModel = (v: M[]) => emit(\"update:modelValue\", v);\n\nconst slots = useSlots();\n\nconst props = withDefaults(\n defineProps<{\n /\n The current selected values.\n /\n modelValue: M[];\n /\n Lambda for requesting of available options for the dropdown by search string.\n /\n optionsSearch: OptionsSearch<M>;\n /\n Unique identifier for the source of the options, changing it will invalidate the options cache.\n /\n sourceId?: string;\n /\n The label text for the dropdown field (optional)\n /\n label?: string;\n /\n A helper text displayed below the dropdown when there are no errors (optional).\n /\n helper?: string;\n /\n Error message displayed below the dropdown (optional)\n /\n error?: unknown;\n /\n Placeholder text shown when no value is selected.\n /\n placeholder?: string;\n /\n If `true`, the dropdown component is marked as required.\n /\n required?: boolean;\n /\n If `true`, the dropdown component is disabled and cannot be interacted with.\n /\n disabled?: boolean;\n /\n Debounce time in ms for the options search.\n /\n debounce?: number;\n /\n If `true`, the search input is reset and focus is set on it when the new option is selected.\n /\n resetSearchOnSelect?: boolean;\n /\n The text to display when no options are found.\n /\n emptyOptionsText?: string;\n /\n Makes some of corners not rounded\n * */\n groupPosition?:\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"top-left\"\n \| \"top-right\"\n \| \"bottom-left\"\n \| \"bottom-right\"\n \| \"middle\";\n }>(),\n {\n modelValue: () => [],\n label: undefined,\n helper: undefined,\n error: undefined,\n placeholder: \"...\",\n required: false,\n disabled: false,\n debounce: 300,\n emptyOptionsText: \"Nothing found\",\n sourceId: undefined,\n groupPosition: undefined,\n },\n);\n\nconst rootRef = ref<HTMLElement \| undefined>();\nconst inputRef = ref<HTMLInputElement \| undefined>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst data = reactive({\n search: \"\",\n activeOption: -1,\n open: false,\n optionsHeight: 0,\n});\n\nwatch(\n () => data.open,\n (v) => {\n if (!v) {\n data.search = \"\";\n }\n },\n { flush: \"sync\" },\n);\n\nconst selectedValuesRef = computed(() => (Array.isArray(props.modelValue) ? props.modelValue : []));\n\nconst placeholderRef = computed(() => {\n if (data.open && props.modelValue.length > 0) {\n return props.placeholder;\n }\n\n return props.modelValue.length > 0 ? \"\" : props.placeholder;\n});\n\nconst debounce = toRef(props, \"debounce\");\n\nconst searchOptionsRef = useWatchFetch(\n () => [data.search, data.open, props.sourceId] as const,\n async ([search, _open]) => {\n return props.optionsSearch(search, \"label\");\n },\n {\n filterWatchResult: ([_search, open]) => open,\n debounce,\n },\n);\n\nconst modelOptionsRef = useWatchFetch(\n () => [props.modelValue, props.sourceId] as const,\n async ([v]) => {\n return props.optionsSearch(v, \"value\");\n },\n {\n debounce,\n },\n);\n\nconst allOptionsRef = computed(() => {\n const modelOptions = modelOptionsRef.value ?? [];\n const searchOptions = searchOptionsRef.value ?? [];\n\n const seenValues = new Set<string \| undefined>();\n const result = [] as ListOptionBase<M>[];\n\n const addOptions = (options: Readonly<ListOptionBase<M>[]>) => {\n for (const option of options) {\n const canonicalValue = canonicalize(option.value);\n if (!seenValues.has(canonicalValue)) {\n seenValues.add(canonicalValue);\n result.push(option);\n }\n }\n };\n\n addOptions(modelOptions);\n addOptions(searchOptions);\n\n return result;\n});\n\nconst selectedOptionsRef = computed(() => {\n return selectedValuesRef.value\n .map((v) => allOptionsRef.value.find((opt) => deepEqual(opt.value, v)))\n .filter((v) => v !== undefined);\n});\n\nconst filteredOptionsRef = computed(() => {\n const selectedValues = unref(selectedValuesRef);\n\n const options = searchOptionsRef.value ?? [];\n\n return [...options].map((opt) => ({\n ...opt,\n selected: deepIncludes(selectedValues, opt.value),\n }));\n});\n\nconst isOptionsLoading = computed(() => searchOptionsRef.loading \|\| modelOptionsRef.loading);\n\nconst isDisabled = computed(() => {\n if (modelOptionsRef.value === undefined) {\n return true;\n }\n\n return props.disabled;\n});\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst updateActiveOption = () => {\n data.activeOption = 0;\n};\n\nconst selectOption = (v: M) => {\n const values = unref(selectedValuesRef);\n emitModel(deepIncludes(values, v) ? values.filter((it) => !deepEqual(it, v)) : [...values, v]);\n if (props.resetSearchOnSelect) {\n data.search = \"\";\n }\n inputRef.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => inputRef.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as Node \| null;\n\n if (!rootRef.value?.contains(relatedTarget) && !overlay.value?.listRef?.contains(relatedTarget)) {\n data.open = false;\n }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n const { open, activeOption } = data;\n\n if (!open) {\n if (e.code === \"Enter\") {\n data.open = true;\n }\n return;\n }\n\n if (e.code === \"Escape\") {\n data.open = false;\n inputRef.value?.focus();\n }\n\n const filteredOptions = unref(filteredOptionsRef);\n\n const { length } = filteredOptions;\n\n if (!length) {\n return;\n }\n\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\"].includes(e.code)) {\n e.preventDefault();\n }\n\n if (e.code === \"Enter\") {\n selectOption(filteredOptions[activeOption].value);\n }\n\n const d = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n data.activeOption = Math.abs(activeOption + d + length) % length;\n\n requestAnimationFrame(() => overlay.value?.scrollIntoActive());\n};\n\nuseLabelNotch(rootRef);\n\nwatch(\n () => props.modelValue,\n () => updateActiveOption(),\n { immediate: true },\n);\n\nconst computedError = computed(() => {\n if (isOptionsLoading.value) {\n return undefined;\n }\n\n if (searchOptionsRef.error) {\n return getErrorMessage(searchOptionsRef.error);\n }\n\n if (modelOptionsRef.error) {\n return getErrorMessage(modelOptionsRef.error);\n }\n\n if (props.error) {\n return getErrorMessage(props.error);\n }\n\n if (props.modelValue.length && selectedOptionsRef.value.length !== props.modelValue.length) {\n return \"The selected values are not one of the options\";\n }\n\n return undefined;\n});\n</script>\n\n<template>\n <div class=\"pl-autocomplete-multi__envelope\" @click=\"setFocusOnInput\">\n <div\n ref=\"rootRef\"\n :tabindex=\"tabindex\"\n class=\"pl-autocomplete-multi\"\n :class=\"{ open: data.open, error: Boolean(computedError), disabled: isDisabled }\"\n @keydown=\"handleKeydown\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__container\">\n <div class=\"pl-autocomplete-multi__field\">\n <input\n ref=\"inputRef\"\n v-model=\"data.search\"\n type=\"text\"\n tabindex=\"-1\"\n :disabled=\"isDisabled\"\n :placeholder=\"placeholderRef\"\n spellcheck=\"false\"\n autocomplete=\"chrome-off\"\n @focus=\"data.open = true\"\n />\n <div v-if=\"!data.open\" class=\"chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @click.stop=\"data.open = true\"\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n\n <div class=\"pl-autocomplete-multi__controls\">\n <PlMaskIcon24 v-if=\"isOptionsLoading\" name=\"loading\" />\n <slot name=\"append\" />\n <div class=\"pl-autocomplete-multi__arrow-wrapper\" @click.stop=\"toggleOpen\">\n <div class=\"arrow-icon arrow-icon-default\" />\n </div>\n </div>\n </div>\n <label v-if=\"label\">\n <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n <span>{{ label }}</span>\n <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n <template #tooltip>\n <slot name=\"tooltip\" />\n </template>\n </PlTooltip>\n </label>\n <DropdownOverlay\n v-if=\"data.open\"\n ref=\"overlay\"\n :root=\"rootRef\"\n class=\"pl-autocomplete-multi__options\"\n :gap=\"5\"\n tabindex=\"-1\"\n @focusout=\"onFocusOut\"\n >\n <div class=\"pl-autocomplete-multi__open-chips-container\">\n <PlChip\n v-for=\"(opt, i) in selectedOptionsRef\"\n :key=\"i\"\n closeable\n small\n @close=\"unselectOption(opt.value)\"\n >\n {{ opt.label \|\| opt.value }}\n </PlChip>\n </div>\n <DropdownListItem\n v-for=\"(item, index) in filteredOptionsRef\"\n :key=\"index\"\n :option=\"item\"\n :text-item=\"'text'\"\n :is-selected=\"item.selected\"\n :is-hovered=\"data.activeOption == index\"\n size=\"medium\"\n use-checkbox\n @click.stop=\"selectOption(item.value)\"\n />\n <div v-if=\"!filteredOptionsRef.length && !isOptionsLoading\" class=\"nothing-found\">\n {{ emptyOptionsText }}\n </div>\n </DropdownOverlay>\n <DoubleContour class=\"pl-autocomplete-multi__contour\" :group-position=\"groupPosition\" />\n </div>\n </div>\n <div v-if=\"computedError\" class=\"pl-autocomplete-multi__error\">{{ computedError }}</div>\n <div v-else-if=\"helper\" class=\"pl-autocomplete-multi__helper\">{{ helper }}</div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlBtnAccent/PlBtnAccent.js CHANGED Viewed

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

package/dist/components/PlBtnAccent/PlBtnAccent.vue2.js CHANGED Viewed

@@ -19,6 +19,7 @@ var s = /* @__PURE__ */ n({
 		}, 16));
 	}
 });
+//#endregion
 export { s as default };
 //# sourceMappingURL=PlBtnAccent.vue2.js.map

package/dist/components/PlBtnDanger/PlBtnDanger.js CHANGED Viewed

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

package/dist/components/PlBtnDanger/PlBtnDanger.vue2.js CHANGED Viewed

@@ -19,6 +19,7 @@ var s = /* @__PURE__ */ n({
 		}, 16));
 	}
 });
+//#endregion
 export { s as default };
 //# sourceMappingURL=PlBtnDanger.vue2.js.map

package/dist/components/PlBtnGhost/PlBtnGhost.js CHANGED Viewed

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

package/dist/components/PlBtnGhost/PlBtnGhost.vue2.js CHANGED Viewed

@@ -3,6 +3,7 @@ import "../PlMaskIcon24/index.js";
 import { useRipple as t } from "../../composition/useRipple.js";
 import './pl-btn-ghost.css';/* empty css             */
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, mergeProps as s, openBlock as c, ref as l, renderSlot as u, unref as d, useSlots as f } from "vue";
+//#region src/components/PlBtnGhost/PlBtnGhost.vue?vue&type=script&setup=true&lang.ts
 var p = { key: 0 }, m = /* @__PURE__ */ o({
 	name: "PlBtnGhost",
 	props: {
@@ -49,6 +50,7 @@ var p = { key: 0 }, m = /* @__PURE__ */ o({
 		], 16));
 	}
 });
+//#endregion
 export { m as default };
 //# sourceMappingURL=PlBtnGhost.vue2.js.map

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

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

package/dist/components/PlBtnGroup/PlBtnGroup.js CHANGED Viewed

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

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

@@ -4,6 +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
 var b = { key: 0 }, x = [
 	"tabindex",
 	"onKeydown",
@@ -57,6 +58,7 @@ var b = { key: 0 }, x = [
 		], 2));
 	}
 });
+//#endregion
 export { w as default };
 //# sourceMappingURL=PlBtnGroup.vue2.js.map

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

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

package/dist/components/PlBtnLink/PlBtnLink.js CHANGED Viewed

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

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

@@ -1,6 +1,7 @@
 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({
 	__name: "PlBtnLink",
 	props: {
@@ -27,6 +28,7 @@ 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 CHANGED Viewed

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

package/dist/components/PlBtnPrimary/PlBtnPrimary.js CHANGED Viewed

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

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

@@ -19,6 +19,7 @@ var s = /* @__PURE__ */ n({
 		}, 16));
 	}
 });
+//#endregion
 export { s as default };
 //# sourceMappingURL=PlBtnPrimary.vue2.js.map

package/dist/components/PlBtnSecondary/PlBtnSecondary.js CHANGED Viewed

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

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

@@ -19,6 +19,7 @@ var s = /* @__PURE__ */ n({
 		}, 16));
 	}
 });
+//#endregion
 export { s as default };
 //# sourceMappingURL=PlBtnSecondary.vue2.js.map

package/dist/components/PlBtnSplit/PlBtnSplit.js CHANGED Viewed

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

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

@@ -6,6 +6,7 @@ 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({
 	__name: "PlBtnSplit",
 	props: /* @__PURE__ */ f({
@@ -132,6 +133,7 @@ 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 CHANGED Viewed

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

package/dist/components/PlChartHistogram/PlChartHistogram.js CHANGED Viewed

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

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

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

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

@@ -1,5 +1,6 @@
 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({
 	__name: "PlChartHistogram",
 	props: { settings: {} },
@@ -43,6 +44,7 @@ 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 CHANGED Viewed

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

package/dist/components/PlChartHistogram/createGridlines.js CHANGED Viewed

@@ -1,5 +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
 function r(r, i, a, o) {
 	let { width: s, height: c } = i;
 	function l() {
@@ -10,6 +11,7 @@ function r(r, i, a, o) {
 	}
 	r.append("g").attr("class", "grid").attr("font-family", "'Manrope', sans-serif").call(l().tickSize(-s).tickFormat(() => "")), r.append("g").attr("class", "grid").attr("font-family", "'Manrope', sans-serif").attr("transform", `translate(0,${c})`).call(u().tickSize(-c).tickFormat(() => "")), e(".grid line").style("stroke", "#E1E3EB").style("opacity", .7);
 }
+//#endregion
 export { r as createGridlines };
 //# sourceMappingURL=createGridlines.js.map

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

	@@ -1 +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(\"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(\"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;;AA0BrC,CAvBA,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,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,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"}
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(\"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(\"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;;AA0BrC,CAvBA,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,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,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"}

package/dist/components/PlChartHistogram/createLabels.js CHANGED Viewed

@@ -1,7 +1,9 @@
+//#region 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("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("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 CHANGED Viewed

	@@ -1 +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(\"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(\"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,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,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"}
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(\"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(\"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,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,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"}

package/dist/components/PlChartHistogram/createSvgContainer.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import { select as e } from "d3-selection";
+//#region 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("width", r + a.left + a.right).attr("height", i + a.top + a.bottom).append("g").attr("transform", `translate(${a.left},${a.top})`);
 }
+//#endregion
 export { t as createSvgContainer };
 //# sourceMappingURL=createSvgContainer.js.map

package/dist/components/PlChartHistogram/createSvgContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createSvgContainer.js","names":[],"sources":["../../../src/components/PlChartHistogram/createSvgContainer.ts"],"sourcesContent":["import type { ChartOptions } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function createSvgContainer(el: HTMLElement, options: ChartOptions) {\n const { width, height, margin, compact } = options;\n\n el.replaceChildren();\n\n if (compact) {\n el.style.height = height + \"px\";\n el.style.lineHeight = height + \"px\";\n }\n\n const svg = select(el) // Append the SVG element to the body\n .append(\"svg\")\n .attr(\"width\", width + margin.left + margin.right) // Set the total width\n .attr(\"height\", height + margin.top + margin.bottom) // Set the total height\n .append(\"g\") // Append a group to handle margins\n .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n return svg;\n}\n"],"mappings":";AAGA,SAAgB,EAAmB,GAAiB,GAAuB;CACzE,IAAM,EAAE,UAAO,WAAQ,WAAQ,eAAY;AAgB3C,QAdA,EAAG,iBAAiB,EAEhB,MACF,EAAG,MAAM,SAAS,IAAS,MAC3B,EAAG,MAAM,aAAa,IAAS,OAGrB,EAAO,EAAG,CACnB,OAAO,MAAM,CACb,KAAK,SAAS,IAAQ,EAAO,OAAO,EAAO,MAAM,CACjD,KAAK,UAAU,IAAS,EAAO,MAAM,EAAO,OAAO,CACnD,OAAO,IAAI,CACX,KAAK,aAAa,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI,GAAG"}
1	+ {"version":3,"file":"createSvgContainer.js","names":[],"sources":["../../../src/components/PlChartHistogram/createSvgContainer.ts"],"sourcesContent":["import type { ChartOptions } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function createSvgContainer(el: HTMLElement, options: ChartOptions) {\n const { width, height, margin, compact } = options;\n\n el.replaceChildren();\n\n if (compact) {\n el.style.height = height + \"px\";\n el.style.lineHeight = height + \"px\";\n }\n\n const svg = select(el) // Append the SVG element to the body\n .append(\"svg\")\n .attr(\"width\", width + margin.left + margin.right) // Set the total width\n .attr(\"height\", height + margin.top + margin.bottom) // Set the total height\n .append(\"g\") // Append a group to handle margins\n .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n return svg;\n}\n"],"mappings":";;AAGA,SAAgB,EAAmB,GAAiB,GAAuB;CACzE,IAAM,EAAE,UAAO,WAAQ,WAAQ,eAAY;AAgB3C,QAdA,EAAG,iBAAiB,EAEhB,MACF,EAAG,MAAM,SAAS,IAAS,MAC3B,EAAG,MAAM,aAAa,IAAS,OAGrB,EAAO,EAAG,CACnB,OAAO,MAAM,CACb,KAAK,SAAS,IAAQ,EAAO,OAAO,EAAO,MAAM,CACjD,KAAK,UAAU,IAAS,EAAO,MAAM,EAAO,OAAO,CACnD,OAAO,IAAI,CACX,KAAK,aAAa,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI,GAAG"}

package/dist/components/PlChartHistogram/drawBins.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { select as e } from "d3-selection";
+//#region src/components/PlChartHistogram/drawBins.ts
 function t(t, n, r, i) {
 	let { height: a } = r, { x: o, y: s } = i, c = e("body").append("div").attr("class", "svg-tooltip").style("position", "absolute").style("visibility", "hidden");
 	t.selectAll("rect").data(n).enter().append("rect").attr("x", (e) => o(e.x0)).attr("y", (e) => s(e.length)).attr("width", (e) => o(e.x1) - o(e.x0)).attr("height", (e) => a - s(e.length)).style("fill", "#929BAD").attr("stroke", "#fff").attr("stroke-opacity", .2).attr("stroke-width", .5).on("mouseover", function(e, t) {
@@ -9,6 +10,7 @@ function t(t, n, r, i) {
 		c.style("visibility", "hidden");
 	}).append("title").text((e) => `[${e.x0}, ${e.x1}]\n` + e.length + "\n");
 }
+//#endregion
 export { t as drawBins };
 //# sourceMappingURL=drawBins.js.map

package/dist/components/PlChartHistogram/drawBins.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawBins.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawBins.ts"],"sourcesContent":["import type { BinLike, ChartOptions, Scales, SVG } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function drawBins(svg: SVG, bins: BinLike[], dimension: ChartOptions, scales: Scales) {\n const { height } = dimension;\n\n const { x, y } = scales;\n\n const tooltip = select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n // Three function that change the tooltip when user hover / move / leave a cell\n const mouseover = function (_event: MouseEvent, d: BinLike) {\n tooltip.style(\"visibility\", \"visible\").text(`count: ${d.length}\\nx0: ${d.x0}\\nx1: ${d.x1}`);\n };\n\n const mousemove = function (event: MouseEvent) {\n tooltip.style(\"top\", event.pageY - 10 + \"px\").style(\"left\", event.pageX + 10 + \"px\");\n };\n\n const mouseout = function () {\n tooltip.style(\"visibility\", \"hidden\");\n };\n\n // Add rectangles for the histogram bars\n svg\n .selectAll(\"rect\")\n .data(bins)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d) => x(d.x0!)) // Position the bar based on the bin start\n .attr(\"y\", (d) => y(d.length)) // Height based on bin count\n .attr(\"width\", (d) => x(d.x1!) - x(d.x0!)) // Bar width based on logarithmic intervals\n .attr(\"height\", (d) => height - y(d.length)) // Invert height to fit SVG coordinate system\n .style(\"fill\", \"#929BAD\")\n .attr(\"stroke\", \"#fff\") // Border color\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"stroke-width\", 0.5)\n .on(\"mouseover\", mouseover)\n .on(\"mousemove\", mousemove)\n .on(\"mouseout\", mouseout)\n .append(\"title\")\n .text((d) => `[${d.x0}, ${d.x1}]\\n` + d.length + \"\\n\"); // Set bar color\n}\n"],"mappings":";AAGA,SAAgB,EAAS,GAAU,GAAiB,GAAyB,GAAgB;CAC3F,IAAM,EAAE,cAAW,GAEb,EAAE,MAAG,SAAM,GAEX,IAAU,EAAO,OAAO,CAC3B,OAAO,MAAM,CACb,KAAK,SAAS,cAAc,CAC5B,MAAM,YAAY,WAAW,CAC7B,MAAM,cAAc,SAAS;AAgBhC,GACG,UAAU,OAAO,CACjB,KAAK,EAAK,CACV,OAAO,CACP,OAAO,OAAO,CACd,KAAK,MAAM,MAAM,EAAE,EAAE,GAAI,CAAC,CAC1B,KAAK,MAAM,MAAM,EAAE,EAAE,OAAO,CAAC,CAC7B,KAAK,UAAU,MAAM,EAAE,EAAE,GAAI,GAAG,EAAE,EAAE,GAAI,CAAC,CACzC,KAAK,WAAW,MAAM,IAAS,EAAE,EAAE,OAAO,CAAC,CAC3C,MAAM,QAAQ,UAAU,CACxB,KAAK,UAAU,OAAO,CACtB,KAAK,kBAAkB,GAAI,CAC3B,KAAK,gBAAgB,GAAI,CACzB,GAAG,aA1BY,SAAU,GAAoB,GAAY;AAC1D,IAAQ,MAAM,cAAc,UAAU,CAAC,KAAK,UAAU,EAAE,OAAO,QAAQ,EAAE,GAAG,QAAQ,EAAE,KAAK;GAyBhE,CAC1B,GAAG,aAvBY,SAAU,GAAmB;AAC7C,IAAQ,MAAM,OAAO,EAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,QAAQ,EAAM,QAAQ,KAAK,KAAK;GAsBzD,CAC1B,GAAG,YApBW,WAAY;AAC3B,IAAQ,MAAM,cAAc,SAAS;GAmBZ,CACxB,OAAO,QAAQ,CACf,MAAM,MAAM,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,SAAS,KAAK"}
1	+ {"version":3,"file":"drawBins.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawBins.ts"],"sourcesContent":["import type { BinLike, ChartOptions, Scales, SVG } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function drawBins(svg: SVG, bins: BinLike[], dimension: ChartOptions, scales: Scales) {\n const { height } = dimension;\n\n const { x, y } = scales;\n\n const tooltip = select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n // Three function that change the tooltip when user hover / move / leave a cell\n const mouseover = function (_event: MouseEvent, d: BinLike) {\n tooltip.style(\"visibility\", \"visible\").text(`count: ${d.length}\\nx0: ${d.x0}\\nx1: ${d.x1}`);\n };\n\n const mousemove = function (event: MouseEvent) {\n tooltip.style(\"top\", event.pageY - 10 + \"px\").style(\"left\", event.pageX + 10 + \"px\");\n };\n\n const mouseout = function () {\n tooltip.style(\"visibility\", \"hidden\");\n };\n\n // Add rectangles for the histogram bars\n svg\n .selectAll(\"rect\")\n .data(bins)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d) => x(d.x0!)) // Position the bar based on the bin start\n .attr(\"y\", (d) => y(d.length)) // Height based on bin count\n .attr(\"width\", (d) => x(d.x1!) - x(d.x0!)) // Bar width based on logarithmic intervals\n .attr(\"height\", (d) => height - y(d.length)) // Invert height to fit SVG coordinate system\n .style(\"fill\", \"#929BAD\")\n .attr(\"stroke\", \"#fff\") // Border color\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"stroke-width\", 0.5)\n .on(\"mouseover\", mouseover)\n .on(\"mousemove\", mousemove)\n .on(\"mouseout\", mouseout)\n .append(\"title\")\n .text((d) => `[${d.x0}, ${d.x1}]\\n` + d.length + \"\\n\"); // Set bar color\n}\n"],"mappings":";;AAGA,SAAgB,EAAS,GAAU,GAAiB,GAAyB,GAAgB;CAC3F,IAAM,EAAE,cAAW,GAEb,EAAE,MAAG,SAAM,GAEX,IAAU,EAAO,OAAO,CAC3B,OAAO,MAAM,CACb,KAAK,SAAS,cAAc,CAC5B,MAAM,YAAY,WAAW,CAC7B,MAAM,cAAc,SAAS;AAgBhC,GACG,UAAU,OAAO,CACjB,KAAK,EAAK,CACV,OAAO,CACP,OAAO,OAAO,CACd,KAAK,MAAM,MAAM,EAAE,EAAE,GAAI,CAAC,CAC1B,KAAK,MAAM,MAAM,EAAE,EAAE,OAAO,CAAC,CAC7B,KAAK,UAAU,MAAM,EAAE,EAAE,GAAI,GAAG,EAAE,EAAE,GAAI,CAAC,CACzC,KAAK,WAAW,MAAM,IAAS,EAAE,EAAE,OAAO,CAAC,CAC3C,MAAM,QAAQ,UAAU,CACxB,KAAK,UAAU,OAAO,CACtB,KAAK,kBAAkB,GAAI,CAC3B,KAAK,gBAAgB,GAAI,CACzB,GAAG,aA1BY,SAAU,GAAoB,GAAY;AAC1D,IAAQ,MAAM,cAAc,UAAU,CAAC,KAAK,UAAU,EAAE,OAAO,QAAQ,EAAE,GAAG,QAAQ,EAAE,KAAK;GAyBhE,CAC1B,GAAG,aAvBY,SAAU,GAAmB;AAC7C,IAAQ,MAAM,OAAO,EAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,QAAQ,EAAM,QAAQ,KAAK,KAAK;GAsBzD,CAC1B,GAAG,YApBW,WAAY;AAC3B,IAAQ,MAAM,cAAc,SAAS;GAmBZ,CACxB,OAAO,QAAQ,CACf,MAAM,MAAM,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,SAAS,KAAK"}

package/dist/components/PlChartHistogram/drawThreshold.js CHANGED Viewed

@@ -1,7 +1,9 @@
+//#region src/components/PlChartHistogram/drawThreshold.ts
 function e(e, t, n) {
 	let { threshold: r } = n;
 	r && e.append("line").attr("x1", t.x(r)).attr("x2", t.x(r)).attr("y1", 0).attr("y2", n.height).style("stroke", "#F05670").style("stroke-width", "1").style("stroke-dasharray", "7.4 3.2");
 }
+//#endregion
 export { e as drawThreshold };
 //# sourceMappingURL=drawThreshold.js.map

package/dist/components/PlChartHistogram/drawThreshold.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawThreshold.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawThreshold.ts"],"sourcesContent":["import type { ChartOptions, Scales, SVG } from \"./types\";\n\nexport function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {\n const { threshold } = options;\n\n if (!threshold) {\n return;\n }\n\n svg\n .append(\"line\")\n .attr(\"x1\", scales.x(threshold))\n .attr(\"x2\", scales.x(threshold))\n .attr(\"y1\", 0)\n .attr(\"y2\", options.height)\n .style(\"stroke\", \"#F05670\")\n .style(\"stroke-width\", \"1\")\n .style(\"stroke-dasharray\", \"7.4 3.2\");\n}\n"],"mappings":"AAEA,SAAgB,EAAc,GAAU,GAAgB,GAAuB;CAC7E,IAAM,EAAE,iBAAc;AAEjB,MAIL,EACG,OAAO,OAAO,CACd,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAE,CACb,KAAK,MAAM,EAAQ,OAAO,CAC1B,MAAM,UAAU,UAAU,CAC1B,MAAM,gBAAgB,IAAI,CAC1B,MAAM,oBAAoB,UAAU"}
1	+ {"version":3,"file":"drawThreshold.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawThreshold.ts"],"sourcesContent":["import type { ChartOptions, Scales, SVG } from \"./types\";\n\nexport function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {\n const { threshold } = options;\n\n if (!threshold) {\n return;\n }\n\n svg\n .append(\"line\")\n .attr(\"x1\", scales.x(threshold))\n .attr(\"x2\", scales.x(threshold))\n .attr(\"y1\", 0)\n .attr(\"y2\", options.height)\n .style(\"stroke\", \"#F05670\")\n .style(\"stroke-width\", \"1\")\n .style(\"stroke-dasharray\", \"7.4 3.2\");\n}\n"],"mappings":";AAEA,SAAgB,EAAc,GAAU,GAAgB,GAAuB;CAC7E,IAAM,EAAE,iBAAc;AAEjB,MAIL,EACG,OAAO,OAAO,CACd,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAE,CACb,KAAK,MAAM,EAAQ,OAAO,CAC1B,MAAM,UAAU,UAAU,CAC1B,MAAM,gBAAgB,IAAI,CAC1B,MAAM,oBAAoB,UAAU"}