@milaboratories/uikit 2.10.39 → 2.10.40

package/dist/components/PlDropdownLine/pl-dropdown-line.css

@@ -1 +1 @@
-.pl-line-dropdown{box-sizing:border-box;outline:none;align-items:center;width:fit-content;max-width:256px;padding:8px 0;display:flex;position:relative}.pl-line-dropdown:focus-within:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__prefix,.pl-line-dropdown__input{text-transform:uppercase}.pl-line-dropdown:hover:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown:after{content:"";border-bottom:2px solid var(--color-div-grey);width:100%;position:absolute;bottom:0}.pl-line-dropdown *{color:var(--txt-01);font-family:var(--font-family-base);letter-spacing:.52px;font-size:13px;font-style:normal;font-weight:600;line-height:14px}.pl-line-dropdown__input::placeholder{color:var(--txt-mask)}.pl-line-dropdown__icon{background-color:var(--control-mask-fill);align-items:center;width:16px;min-width:16px;height:16px;display:flex;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-line-dropdown__icon-clear{background-color:var(--color-ic-02);width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-line-dropdown.open .pl-line-dropdown__icon{width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-line-dropdown.open:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__icon-wrapper{padding:4px 2px 4px 0}.pl-line-dropdown.disabled *{color:var(--txt-mask);cursor:not-allowed}.pl-line-dropdown.disabled .pl-line-dropdown__icon{background-color:var(--color-div-grey)!important}.pl-line-dropdown.disabled:after,.pl-line-dropdown.disabled:hover:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown__no-item{padding:8px 12px}.pl-line-dropdown__no-item-title{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--txt-03)!important}.pl-line-dropdown__items{z-index:var(--z-dropdown-options);border:1px solid var(--color-div-grey);box-sizing:border-box;background-color:var(--bg-elevated-01);width:256px;max-height:320px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:12px 0;position:absolute;top:0;overflow-y:auto}.pl-line-dropdown__items::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-line-dropdown__items-tabs{z-index:var(--z-dropdown-options);background-color:var(--color-div-bw);border:1px solid var(--color-div-grey);max-width:400px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:6px 12px 12px;display:flex;position:absolute;top:0;overflow-x:auto}.pl-line-dropdown__items-tabs::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}
+.pl-line-dropdown{box-sizing:border-box;outline:none;align-items:center;width:fit-content;max-width:256px;padding:8px 0;display:flex;position:relative}.pl-line-dropdown:focus-within:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__prefix,.pl-line-dropdown__input{text-transform:uppercase}.pl-line-dropdown:hover:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown:after{content:"";border-bottom:2px solid var(--color-div-grey);width:100%;position:absolute;bottom:0}.pl-line-dropdown *{color:var(--txt-01);font-family:var(--font-family-base);letter-spacing:.52px;font-size:13px;font-style:normal;font-weight:600;line-height:14px}.pl-line-dropdown__input::placeholder{color:var(--txt-mask)}.pl-line-dropdown__icon{background-color:var(--control-mask-fill);align-items:center;width:16px;min-width:16px;height:16px;display:flex;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-line-dropdown__icon-clear{background-color:var(--color-ic-02);width:16px;height:16px;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-line-dropdown.open .pl-line-dropdown__icon{width:16px;height:16px;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-line-dropdown.open:after{border-bottom:2px solid var(--border-color-focus)}.pl-line-dropdown__icon-wrapper{padding:4px 2px 4px 0}.pl-line-dropdown.disabled *{color:var(--txt-mask);cursor:not-allowed}.pl-line-dropdown.disabled .pl-line-dropdown__icon{background-color:var(--color-div-grey)!important}.pl-line-dropdown.disabled:after,.pl-line-dropdown.disabled:hover:after{border-bottom:2px solid var(--color-div-grey)!important}.pl-line-dropdown__no-item{padding:8px 12px}.pl-line-dropdown__no-item-title{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--txt-03)!important}.pl-line-dropdown__items{z-index:var(--z-dropdown-options);border:1px solid var(--color-div-grey);box-sizing:border-box;background-color:var(--bg-elevated-01);width:256px;max-height:320px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:12px 0;position:absolute;top:0;overflow-y:auto}.pl-line-dropdown__items::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-line-dropdown__items-tabs{z-index:var(--z-dropdown-options);background-color:var(--color-div-bw);border:1px solid var(--color-div-grey);max-width:400px;box-shadow:var(--shadow-m);--thumb-color:var(--ic-02);border-radius:6px;padding:6px 12px 12px;display:flex;position:absolute;top:0;overflow-x:auto}.pl-line-dropdown__items-tabs::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-line-dropdown__items-tabs::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}

package/dist/components/PlDropdownLine/resizable-input.css

@@ -1 +1 @@
-.resizable-input{box-sizing:border-box;text-overflow:ellipsis;max-width:100%;padding:0 8px;display:inline-block;position:relative;overflow:hidden}.resizable-input__size-span{white-space:pre;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box;opacity:0;-webkit-user-select:none;user-select:none;vertical-align:top;min-width:2px;display:inline-block;position:relative;left:0}.resizable-input input{text-overflow:ellipsis;height:100%;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box;background:0 0;border:none;outline:none;position:absolute;top:0;left:0;right:0}
+.resizable-input{box-sizing:border-box;text-overflow:ellipsis;max-width:100%;padding:0 8px;display:inline-block;position:relative;overflow:hidden}.resizable-input__size-span{white-space:pre;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box;opacity:0;user-select:none;vertical-align:top;min-width:2px;display:inline-block;position:relative;left:0}.resizable-input input{text-overflow:ellipsis;height:100%;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;box-sizing:border-box;background:0 0;border:none;outline:none;position:absolute;top:0;left:0;right:0}

package/dist/components/PlDropdownMulti/PlDropdownMulti.vue2.js

@@ -1,15 +1,19 @@
 import e from "../DropdownListItem.js";
 import { normalizeListOptions as t } from "../../helpers/utils.js";
 import n from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { getErrorMessage as r } from "../../helpers/error.js";
 import i from "../PlSvg/PlSvg.js";
+import "../PlSvg/index.js";
 import a from "../PlIcon24/PlIcon24.js";
+import "../PlIcon24/index.js";
 import ee from "../../utils/DoubleContour.js";
 import { useLabelNotch as o } from "../../utils/useLabelNotch.js";
 import { deepEqual as s, deepIncludes as c } from "../../helpers/objects.js";
 import te from "../../utils/DropdownOverlay/DropdownOverlay.js";
 import l from "../../assets/images/required.js";
 import u from "../PlChip/PlChip.js";
+import "../PlChip/index.js";
 import './pl-dropdown-multi.css';/* empty css                  */
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, openBlock as x, reactive as ne, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useSlots as re, useTemplateRef as ie, vModelText as ae, watch as oe, watchPostEffect as se, withCtx as D, withDirectives as ce, withModifiers as O } from "vue";
 var le = ["tabindex"], ue = { class: "pl-dropdown-multi__container" }, de = { class: "pl-dropdown-multi__field" }, fe = ["disabled", "placeholder"], pe = {

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: \"PlDropdownMulti\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport {\n  computed,\n  reactive,\n  ref,\n  unref,\n  useSlots,\n  useTemplateRef,\n  watch,\n  watchPostEffect,\n} from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\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 { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-dropdown-multi.scss\";\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     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\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     * 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    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = 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\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 normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value\n    .map((v) => normalizedOptionsRef.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 = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n          const search = data.search.toLowerCase();\n\n          if (opt.label.toLowerCase().includes(search)) {\n            return true;\n          }\n\n          if (typeof opt.value === \"string\") {\n            return opt.value.toLowerCase().includes(search);\n          }\n\n          return opt.value === data.search;\n        })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\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  data.search = \"\";\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\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.search = \"\";\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    rootRef.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\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\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-dropdown-multi__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown-multi__arrow-wrapper\" @click.stop=\"toggleModel\">\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-dropdown-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-dropdown-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\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;EA8BR,IAAM,IAAO,GAIP,KAAa,MAAW,EAAK,qBAAqB,EAAE,EAEpD,IAAQ,IAAU,EAElB,IAAQ,GA6DR,IAAU,GAA8B,EACxC,IAAQ,GAAmC,EAE3C,IAAU,GAAe,UAAU,EAEnC,IAAO,GAAS;GACpB,QAAQ;GACR,cAAc;GACd,MAAM;GACN,eAAe;GAChB,CAAC,EAEI,IAAoB,QAAgB,MAAM,QAAQ,EAAM,WAAW,GAAG,EAAM,aAAa,EAAE,CAAE,EAE7F,KAAiB,QACjB,EAAK,QAAQ,EAAM,WAAW,SAAS,IAClC,EAAM,cAGR,EAAM,WAAW,SAAS,IAAI,KAAK,EAAM,YAChD,EAEI,IAAuB,QAAe,EAAqB,EAAM,WAAW,EAAE,CAAC,CAAC,EAEhF,IAAqB,QAClB,EAAkB,MACtB,KAAK,MAAM,EAAqB,MAAM,MAAM,MAAQ,EAAU,EAAI,OAAO,EAAE,CAAC,CAAA,CAC5E,QAAQ,MAAM,MAAM,KAAA,EAAU,CACjC,EAEI,IAAqB,QAAe;GACxC,IAAM,IAAiB,EAAM,EAAkB,EAEzC,IAAU,EAAM,EAAqB;AAE3C,WACE,EAAK,SACD,EAAQ,QAAQ,MAAQ;IACtB,IAAM,IAAS,EAAK,OAAO,aAAa;AAUxC,WARI,EAAI,MAAM,aAAa,CAAC,SAAS,EAAO,GACnC,KAGL,OAAO,EAAI,SAAU,WAChB,EAAI,MAAM,aAAa,CAAC,SAAS,EAAO,GAG1C,EAAI,UAAU,EAAK;KAC3B,GACD,CAAC,GAAG,EAAO,EACf,KAAK,OAAS;IACd,GAAG;IACH,UAAU,EAAa,GAAgB,EAAI,MAAM;IAClD,EAAE;IACH,EAEI,IAAmB,QAChB,EAAM,YAAY,KAAA,EACzB,EAEI,KAAqB,QAClB,CAAC,EAAM,YAAY,EAAiB,MAC3C,EAEI,IAAa,QACb,EAAiB,QACZ,KAGF,EAAM,SACb,EAEI,KAAW,QAAgB,EAAW,QAAQ,KAAA,IAAY,IAAK,EAE/D,WAA2B;AAC/B,KAAK,eAAe;KAGhB,KAAgB,MAAS;GAC7B,IAAM,IAAS,EAAM,EAAkB;AAGvC,GAFA,EAAU,EAAa,GAAQ,EAAE,GAAG,EAAO,QAAQ,MAAO,CAAC,EAAU,GAAI,EAAE,CAAC,GAAG,CAAC,GAAG,GAAQ,EAAE,CAAC,EAC9F,EAAK,SAAS,IACd,GAAS,OAAO,OAAO;KAGnB,KAAkB,MACtB,EAAU,EAAM,EAAkB,CAAC,QAAQ,MAAM,CAAC,EAAU,GAAG,EAAE,CAAC,CAAC,EAE/D,UAAwB,EAAM,OAAO,OAAO,EAE5C,WAAoB;AAExB,GADA,EAAK,OAAO,CAAC,EAAK,MACb,EAAK,SACR,EAAK,SAAS;KAIZ,KAAc,MAAsB;GACxC,IAAM,IAAgB,EAAM;AAE5B,GAAI,CAAC,EAAQ,OAAO,SAAS,EAAc,IAAI,CAAC,EAAQ,OAAO,SAAS,SAAS,EAAc,KAC7F,EAAK,SAAS,IACd,EAAK,OAAO;KAIV,MAAiB,MAAgD;GACrE,IAAM,EAAE,SAAM,oBAAiB;AAE/B,OAAI,CAAC,GAAM;AACT,IAAI,EAAE,SAAS,YACb,EAAK,OAAO;AAEd;;AAGF,GAAI,EAAE,SAAS,aACb,EAAK,OAAO,IACZ,EAAQ,OAAO,OAAO;GAGxB,IAAM,IAAkB,EAAM,EAAmB,EAE3C,EAAE,cAAW;AAEnB,OAAI,CAAC,EACH;AAOF,GAJI;IAAC;IAAa;IAAW;IAAQ,CAAC,SAAS,EAAE,KAAK,IACpD,EAAE,gBAAgB,EAGhB,EAAE,SAAS,WACb,EAAa,EAAgB,GAAc,MAAM;GAGnD,IAAM,IAAI,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK;AAInE,GAFA,EAAK,eAAe,KAAK,IAAI,IAAe,IAAI,EAAO,GAAG,GAE1D,4BAA4B,EAAQ,OAAO,kBAAkB,CAAC;;SAGhE,EAAc,EAAQ,EAEtB,SACQ,EAAM,kBACN,IAAoB,EAC1B,EAAE,WAAW,IAAM,CACpB,EAED,SAAsB;AAIpB,GAFA,EAAK,QAED,EAAK,QACP,EAAQ,OAAO,kBAAkB;IAEnC,kBAIA,EA0FM,OAAA;GA1FD,OAAM;GAA+B,SAAO;MAC/C,EAsFM,OAAA;YArFA;GAAJ,KAAI;GACH,UAAU,GAAA;GACX,OAAK,EAAA,CAAC,qBAAmB;IAAA,MACT,EAAK;IAAI,OAAE,EAAA;IAAK,UAAY,EAAA;IAAU,CAAA,CAAA;GACrD,WAAS;GACT,YAAU;MAEX,EA6EM,OA7EN,IA6EM;GA5EJ,EAgCM,OAhCN,IAgCM;OA/BJ,EAUE,SAAA;cATI;KAAJ,KAAI;8CACU,SAAM;KACpB,MAAK;KACL,UAAS;KACR,UAAU,EAAA;KACV,aAAa,GAAA;KACd,YAAW;KACX,cAAa;KACZ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK,OAAI;4BAPR,EAAK,OAAM,CAAA,CAAA;IASV,EAAK,oBAAA,GAAA,EAAjB,EAWM,OAXN,IAWM,EAAA,EAAA,GAAA,EAVJ,EASS,GAAA,MAAA,EARY,EAAA,QAAX,GAAK,YADf,EASS,EAAA,EAAA,EAAA;KAPN,KAAK;KACN,WAAA;KACA,OAAA;KACC,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAK,OAAI,IAAA,CAAA,OAAA,CAAA;KACrB,UAAK,MAAE,EAAe,EAAI,MAAK;;sBAEJ,CAAA,EAAA,EAAzB,EAAI,SAAS,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;;IAI7B,EAMM,OANN,GAMM;KALY,GAAA,SAAA,GAAA,EAAhB,EAAqD,EAAA,EAAA,EAAA;;MAAjB,MAAK;;KACzC,EAAsB,EAAA,QAAA,SAAA;KACtB,EAEM,OAAA;MAFD,OAAM;MAAoC,SAAK,EAAO,IAAW,CAAA,OAAA,CAAA;sBACpE,EAA6C,OAAA,EAAxC,OAAM,iCAA+B,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA;;;GAInC,EAAA,SAAA,GAAA,EAAb,EAQQ,SAAA,GAAA;IAPO,EAAA,YAAA,GAAA,EAAb,EAA4C,EAAA,EAAA,EAAA;;KAApB,KAAK,EAAA,EAAW;;IACxC,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;IACG,EAAA,EAAK,CAAC,WAAA,GAAA,EAAvB,EAIY,EAAA,EAAA,EAAA;;KAJoB,OAAM;KAAO,UAAS;;KACzC,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;;GAKrB,EAAK,QAAA,GAAA,EADb,EAgCkB,IAAA;;aA9BZ;IAAJ,KAAI;IACH,MAAM,EAAA;IACP,OAAM;IACL,KAAK;IACN,UAAS;IACR,YAAU;;qBAYL;KAVN,EAUM,OAVN,GAUM,EAAA,EAAA,GAAA,EATJ,EAQS,GAAA,MAAA,EAPY,EAAA,QAAX,GAAK,YADf,EAQS,EAAA,EAAA,EAAA;MANN,KAAK;MACN,WAAA;MACA,OAAA;MACC,UAAK,MAAE,EAAe,EAAI,MAAK;;uBAEJ,CAAA,EAAA,EAAzB,EAAI,SAAS,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;;aAG7B,EAUE,GAAA,MAAA,EATwB,EAAA,QAAhB,GAAM,YADhB,EAUE,GAAA;MARC,KAAK;MACL,QAAQ;MACR,aAAW;MACX,eAAa,EAAK;MAClB,cAAY,EAAK,gBAAgB;MAClC,MAAK;MACL,gBAAA;MACC,SAAK,GAAA,MAAO,EAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;KAE1B,EAAA,MAAmB,SAA2C,EAAA,IAAA,GAAA,IAA3C,GAAA,EAA/B,EAAgF,OAAhF,GAA6D,gBAAa;;;;GAE5E,EAAoF,IAAA;IAArE,OAAM;IAA8B,kBAAgB,EAAA;;gBAG5D,EAAA,SAAA,GAAA,EAAX,EAAqF,OAArF,GAAqF,EAA/B,EAAA,EAAe,CAAC,EAAA,MAAK,CAAA,EAAA,EAAA,IAC3D,EAAA,UAAA,GAAA,EAAhB,EAA4E,OAA5E,GAA4E,EAAf,EAAA,OAAM,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"PlDropdownMulti.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlDropdownMulti/PlDropdownMulti.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting multiple values from a list of options\n */\nexport default {\n  name: \"PlDropdownMulti\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport {\n  computed,\n  reactive,\n  ref,\n  unref,\n  useSlots,\n  useTemplateRef,\n  watch,\n  watchPostEffect,\n} from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { deepEqual, deepIncludes } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption } from \"../../types\";\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 { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport \"./pl-dropdown-multi.scss\";\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     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available options for the dropdown\n     */\n    options?: Readonly<ListOption<M>[]>;\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     * 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    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = 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\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 normalizedOptionsRef = computed(() => normalizeListOptions(props.options ?? []));\n\nconst selectedOptionsRef = computed(() => {\n  return selectedValuesRef.value\n    .map((v) => normalizedOptionsRef.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 = unref(normalizedOptionsRef);\n\n  return (\n    data.search\n      ? options.filter((opt) => {\n          const search = data.search.toLowerCase();\n\n          if (opt.label.toLowerCase().includes(search)) {\n            return true;\n          }\n\n          if (typeof opt.value === \"string\") {\n            return opt.value.toLowerCase().includes(search);\n          }\n\n          return opt.value === data.search;\n        })\n      : [...options]\n  ).map((opt) => ({\n    ...opt,\n    selected: deepIncludes(selectedValues, opt.value),\n  }));\n});\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\nconst showLoadingSpinner = computed(() => {\n  return !props.disabled && isLoadingOptions.value;\n});\n\nconst isDisabled = computed(() => {\n  if (isLoadingOptions.value) {\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  data.search = \"\";\n  rootRef?.value?.focus();\n};\n\nconst unselectOption = (d: M) =>\n  emitModel(unref(selectedValuesRef).filter((v) => !deepEqual(v, d)));\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleModel = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\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.search = \"\";\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    rootRef.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\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search;\n\n  if (data.open) {\n    overlay.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown-multi__envelope\" @click=\"setFocusOnInput\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown-multi\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown-multi__container\">\n        <div class=\"pl-dropdown-multi__field\">\n          <input\n            ref=\"input\"\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-dropdown-multi__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown-multi__arrow-wrapper\" @click.stop=\"toggleModel\">\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-dropdown-multi__options\"\n          :gap=\"5\"\n          tabindex=\"-1\"\n          @focusout=\"onFocusOut\"\n        >\n          <div class=\"pl-dropdown-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\" class=\"nothing-found\">Nothing found</div>\n        </DropdownOverlay>\n        <DoubleContour class=\"pl-dropdown-multi__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"error\" class=\"pl-dropdown-multi__error\">{{ getErrorMessage(error) }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown-multi__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlDropdownMulti/index.js

@@ -0,0 +1 @@
+import "./PlDropdownMulti.js";

package/dist/components/PlDropdownMulti/pl-dropdown-multi.css

@@ -1 +1 @@
-.pl-dropdown-multi{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-dropdown-multi{--options-bg:#1b1b1f}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-dropdown-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-dropdown-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-dropdown-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-dropdown-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-dropdown-multi__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-dropdown-multi__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-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{z-index:1;cursor:pointer;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:16px;mask-size:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.pl-dropdown-multi:hover{--contour-color:var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color:var(--txt-focus);--contour-color:var(--border-color-focus);--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color:var(--color-dis-01);--control-mask-fill:var(--color-dis-01);--label-color:var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}
+.pl-dropdown-multi{--contour-color:var(--txt-01);--contour-border-width:1px;--options-bg:#fff;--option-hover-bg:var(--btn-sec-hover-grey);--label-offset-left-x:8px;--label-offset-right-x:8px;--label-color:var(--txt-01);min-height:var(--control-height);font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base);border-radius:6px;outline:none;position:relative}[data-theme=dark] .pl-dropdown-multi{--options-bg:#1b1b1f}.pl-dropdown-multi__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-multi label{top:-8px;left:var(--label-offset-left-x);white-space:pre;text-overflow:ellipsis;max-width:calc(100% - 16px);cursor:inherit;color:var(--label-color);background:var(--bg-elevated-01);border-bottom-right-radius:4px;border-bottom-left-radius:4px;align-items:center;gap:4px;padding:0 4px;font-size:12px;font-weight:500;display:flex;position:absolute;overflow:hidden}.pl-dropdown-multi label>span{white-space:pre;text-overflow:ellipsis;overflow:hidden}.pl-dropdown-multi__container{min-height:var(--control-height);color:var(--txt-01);border-radius:6px;padding:1px;position:absolute;top:0;left:0;right:0}.pl-dropdown-multi__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-multi__options{z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);background-color:var(--pl-dropdown-options-bg);--thumb-color:var(--ic-02);border-radius:6px;max-height:244px;position:absolute;overflow-y:auto;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14}.pl-dropdown-multi__options::-webkit-scrollbar{width:var(--scrollbar-width,6px);background-color:#0000;height:5px;display:block}.pl-dropdown-multi__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-multi__options::-webkit-scrollbar-thumb:hover{--thumb-color:var(--border-color-focus)}.pl-dropdown-multi__options .nothing-found{height:var(--control-height);opacity:.5;background-color:#fff;padding:0 10px;font-style:italic;line-height:20px}.pl-dropdown-multi__field{min-height:var(--control-height);cursor:pointer;background:0 0;border-radius:6px;flex-direction:row;align-items:center;padding-left:11px;line-height:20px;display:flex;position:relative;overflow:hidden}.pl-dropdown-multi__field .chips-container{color:var(--contour-color);align-items:center;gap:8px;padding:0 60px 0 11px;line-height:20px;display:flex;position:absolute;inset:0 30px 0 0;overflow:hidden}.pl-dropdown-multi__field input{min-height:calc(var(--control-height) - 2px);font-family:inherit;line-height:20px;font-size:inherit;width:calc(100% - 20px);color:var(--txt-01);caret-color:var(--border-color-focus);background-color:#0000;border:none;padding:0}.pl-dropdown-multi__field input:focus{outline:none}.pl-dropdown-multi__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-multi__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-multi__field:hover .clear{display:block}.pl-dropdown-multi__controls{flex-direction:row;align-items:center;gap:6px;margin-left:auto;display:flex}.pl-dropdown-multi__controls .mask-16,.pl-dropdown-multi__controls .mask-24{--icon-color:var(--control-mask-fill);cursor:pointer}.pl-dropdown-multi__controls .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__arrow-wrapper{min-height:var(--control-height);align-items:center;padding-right:11px;display:flex}.pl-dropdown-multi .arrow-icon{cursor:pointer}.pl-dropdown-multi .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);width:16px;height:16px;transition:transform .2s;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-dropdown-multi__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-dropdown-multi__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-dropdown-multi.open .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);transform:rotate(-180deg)}.pl-dropdown-multi .clear{z-index:1;cursor:pointer;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_586_7851)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%2016C12.4183%2016%2016%2012.4183%2016%208C16%203.58172%2012.4183%200%208%200C3.58172%200%200%203.58172%200%208C0%2012.4183%203.58172%2016%208%2016ZM4.46967%205.53033L6.93934%208L4.46967%2010.4697L5.53033%2011.5303L8%209.06066L10.4697%2011.5303L11.5303%2010.4697L9.06066%208L11.5303%205.53033L10.4697%204.46967L8%206.93934L5.53033%204.46967L4.46967%205.53033Z'%20fill='%23CFD1DB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_586_7851'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") 50% no-repeat;width:16px;height:16px;display:none;position:absolute;top:50%;right:36px;transform:translateY(-50%)}.pl-dropdown-multi.open,.pl-dropdown-multi:focus-within{z-index:1}.pl-dropdown-multi.open .pl-dropdown-multi__container .label,.pl-dropdown-multi:focus-within .pl-dropdown-multi__container .label{color:var(--txt-focus)}.pl-dropdown-multi.open .pl-dropdown-multi__container{z-index:1000}.pl-dropdown-multi.open .pl-dropdown-multi__field{border-radius:6px 6px 0 0}.pl-dropdown-multi.open .arrow{background-color:var(--control-mask-fill);width:16px;height:16px;mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-position:50%;mask-size:16px;mask-repeat:no-repeat}.pl-dropdown-multi:hover{--contour-color:var(--control-hover-color)}.pl-dropdown-multi:focus-within:not(.error){--label-color:var(--txt-focus);--contour-color:var(--border-color-focus);--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-multi:focus-within.error{--contour-border-width:2px;--contour-box-shadow:0 0 0 4px var(--color-error-shadow)}.pl-dropdown-multi.error{--contour-color:var(--txt-error);--label-color:var(--txt-error)}.pl-dropdown-multi.disabled{--contour-color:var(--color-dis-01);--control-mask-fill:var(--color-dis-01);--label-color:var(--color-dis-01);cursor:not-allowed;pointer-events:none}.pl-dropdown-multi.disabled .mask-loading{--icon-color:var(--ic-accent);animation:2.5s linear infinite spin}.pl-dropdown-multi__open-chips-container{padding:12px}.pl-dropdown-multi__open-chips-container .pl-chip{margin-bottom:4px;margin-right:4px}

package/dist/components/PlDropdownMultiRef/index.js

@@ -0,0 +1 @@
+import "./PlDropdownMultiRef.js";

package/dist/components/PlDropdownRef/PlDropdownRef.vue2.js

@@ -1,4 +1,5 @@
 import e from "../PlDropdown/PlDropdown.js";
+import "../PlDropdown/index.js";
 import { computed as t, createBlock as n, createSlots as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useSlots as l, withCtx as u } from "vue";
 var d = /* @__PURE__ */ i({
 	name: "PlDropdownRef",

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: 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     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\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     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":";;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAM,IAAa,GAAU,EASvB,IAAQ,GA8DR,IAAU,QACd,EAAM,SAAS,KAAK,MAClB,SAAS,IACJ;GACC,OAAO,EAAI;GACX,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,GACD,EACL,CACF;yBAIC,EAUa,EAAA,EAAA,EAVb,EACU,GAAK;GACZ,SAAS,EAAA;GACT,0BAAwB,EAAA;GACxB,oBAAkB,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"PlDropdownRef.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/PlDropdownRef/PlDropdownRef.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdownRef\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = ModelRef\">\nimport { computed, useSlots } from \"vue\";\nimport type { ListOption, ModelRef, RefOption } from \"../../types\";\nimport { PlDropdown } from \"../PlDropdown\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst slots: any = useSlots();\n\ndefineEmits<{\n  /**\n   * Emitted when the model value is updated.\n   */\n  (e: \"update:modelValue\", value: M | undefined): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The current selected ref of the dropdown.\n     */\n    modelValue: M | undefined;\n    /**\n     * The label text for the dropdown field (optional)\n     */\n    label?: string;\n    /**\n     * List of available ref options for the dropdown\n     */\n    options?: Readonly<RefOption[] | ListOption<M>[]>;\n    /**\n     * A helper text displayed below the dropdown when there are no errors (optional).\n     */\n    helper?: string;\n    /**\n     * A helper text displayed below the dropdown when there are no options yet or options is undefined (optional).\n     */\n    loadingOptionsHelper?: 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     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\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     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\n  }>(),\n  {\n    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: \"...\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    optionSize: \"small\",\n    options: undefined,\n  },\n);\n\nconst options = computed(() =>\n  props.options?.map((opt) =>\n    \"ref\" in opt\n      ? ({\n          label: opt.label,\n          value: opt.ref,\n          group: opt.group,\n        } as ListOption<M>)\n      : opt,\n  ),\n);\n</script>\n\n<template>\n  <PlDropdown\n    v-bind=\"props\"\n    :options=\"options\"\n    :loading-options-helper=\"loadingOptionsHelper\"\n    :arrow-icon-large=\"disabled ? 'link-disabled' : 'link'\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"slots.tooltip\" #tooltip>\n      <slot name=\"tooltip\" />\n    </template>\n  </PlDropdown>\n</template>\n"],"mappings":";;;;CAKE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;EAUR,IAAM,IAAa,GAAU,EASvB,IAAQ,GA8DR,IAAU,QACd,EAAM,SAAS,KAAK,MAClB,SAAS,IACJ;GACC,OAAO,EAAI;GACX,OAAO,EAAI;GACX,OAAO,EAAI;GACZ,GACD,EACL,CACF;yBAIC,EAUa,EAAA,EAAA,EAVb,EACU,GAAK;GACZ,SAAS,EAAA;GACT,0BAAwB,EAAA;GACxB,oBAAkB,EAAA,WAAQ,kBAAA;GAC1B,uBAAkB,AAAA,EAAA,QAAA,MAAEA,EAAAA,MAAK,qBAAsB,EAAM;mBAEtC,EAAA,EAAK,CAAC,UAAA;SAAU;eACP,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/PlDropdownRef/index.js

@@ -0,0 +1 @@
+import "./PlDropdownRef.js";

package/dist/components/PlEditableTitle/index.js

@@ -0,0 +1 @@
+import "./PlEditableTitle.js";

package/dist/components/PlEditableTitle/pl-editable-title.css

@@ -1 +1 @@
-._component_1w6b3_1{--mask-icon-bg-color:transparent;--mask-size:24px;flex-direction:column;gap:0;display:flex;position:relative}._component_1w6b3_1:hover{--mask-icon-bg-color:var(--ic-02)}._component_1w6b3_1:focus-within:not(._component_1w6b3_1:hover){--mask-icon-bg-color:transparent}._component_1w6b3_1 ._container_1w6b3_15{margin-right:calc(var(--mask-size));flex-direction:row;align-items:center;gap:0;display:flex;position:relative}._component_1w6b3_1 ._container_1w6b3_15 span{letter-spacing:-.56px;white-space:nowrap;font-size:28px;font-weight:500;line-height:32px}._component_1w6b3_1 ._container_1w6b3_15 input{text-overflow:ellipsis;cursor:text;field-sizing:content;letter-spacing:-.56px;font-size:28px;font-weight:500;line-height:38px;font-family:var(--font-family-base);white-space:nowrap;border:none;outline:none;margin:0;padding-top:4px;padding-bottom:4px;padding-right:4px;overflow:hidden}._component_1w6b3_1 ._container_1w6b3_15 input::placeholder{color:var(--txt-mask)}._component_1w6b3_1 ._container_1w6b3_15:before{content:"";-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--mask-size);mask-size:var(--mask-size);width:var(--mask-size);height:var(--mask-size);right:calc((var(--mask-size)) * -1);background-color:var(--mask-icon-bg-color);cursor:pointer;position:absolute;bottom:6px}._component_1w6b3_1 ._error_1w6b3_69{white-space:nowrap;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;position:absolute;bottom:-4px;transform:translateY(100%)}
+._component_1w6b3_1{--mask-icon-bg-color:transparent;--mask-size:24px;flex-direction:column;gap:0;display:flex;position:relative}._component_1w6b3_1:hover{--mask-icon-bg-color:var(--ic-02)}._component_1w6b3_1:focus-within:not(._component_1w6b3_1:hover){--mask-icon-bg-color:transparent}._component_1w6b3_1 ._container_1w6b3_15{margin-right:calc(var(--mask-size));flex-direction:row;align-items:center;gap:0;display:flex;position:relative}._component_1w6b3_1 ._container_1w6b3_15 span{letter-spacing:-.56px;white-space:nowrap;font-size:28px;font-weight:500;line-height:32px}._component_1w6b3_1 ._container_1w6b3_15 input{text-overflow:ellipsis;cursor:text;field-sizing:content;letter-spacing:-.56px;font-size:28px;font-weight:500;line-height:38px;font-family:var(--font-family-base);white-space:nowrap;border:none;outline:none;margin:0;padding-top:4px;padding-bottom:4px;padding-right:4px;overflow:hidden}._component_1w6b3_1 ._container_1w6b3_15 input::placeholder{color:var(--txt-mask)}._component_1w6b3_1 ._container_1w6b3_15:before{content:"";mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%3e%3cpath%20fill='%23110529'%20fill-rule='evenodd'%20d='m5.136%2016.377%208.809-8.809%202.12%202.121-8.808%208.809h-2.12zM16.243%205.27l-1.238%201.237%202.121%202.122%201.238-1.238zm3.182%201.06a1.5%201.5%200%200%201%200%202.122L8.318%2019.559a1.5%201.5%200%200%201-1.06.439H4.635a1%201%200%200%201-1-1v-2.621c0-.398.158-.78.44-1.061L15.181%204.209a1.5%201.5%200%200%201%202.121%200zM20%2018.5h-8V20h8z'%20clip-rule='evenodd'/%3e%3c/svg%3e");mask-position:50%;mask-repeat:no-repeat;mask-size:var(--mask-size);width:var(--mask-size);height:var(--mask-size);right:calc((var(--mask-size)) * -1);background-color:var(--mask-icon-bg-color);cursor:pointer;position:absolute;bottom:6px}._component_1w6b3_1 ._error_1w6b3_69{white-space:nowrap;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;position:absolute;bottom:-4px;transform:translateY(100%)}

package/dist/components/PlElementList/PlElementListItem.vue.css

@@ -1 +1 @@
-@use "../../assets/variables.scss" as *;._root_1bqtz_4{--background:#fffc;--border-color:var(--color-div-grey);--head-background:unset;--box-shadow:none;--box-shadow-active:0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent)}._root_1bqtz_4.sortable-drag,._root_1bqtz_4.sortable-chosen{--head-background:var(--gradient-light-lime);--border-color:var(--border-color-focus);--box-shadow:var(--box-shadow-active)}._root_1bqtz_4{border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);box-shadow:var(--box-shadow);flex-direction:column;justify-content:center;transition:box-shadow .15s;display:flex;overflow:hidden}._root_1bqtz_4:hover{--border-color:var(--border-color-focus);--head-background:var(--gradient-light-lime)}._root_1bqtz_4._opened_1bqtz_34{--head-background:var(--gradient-light-lime)}._root_1bqtz_4._disabled_1bqtz_38{--icon-color:var(--ic-02);--border-color:var(--border-color-div-grey);color:var(--txt-03);filter:grayscale()}._root_1bqtz_4._pinned_1bqtz_45{--background:var(--bg-base-light)}._root_1bqtz_4._active_1bqtz_49{--border-color:var(--border-color-focus);--head-background:var(--btn-accent-positive-500)}._head_1bqtz_55{border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background);align-items:center;min-height:40px;padding:8px;display:flex;position:relative}._contentChevron_1bqtz_65{width:16px;height:16px;margin-right:4px;transition:transform .15s;display:block;transform:rotate(-90deg)}._contentChevron_1bqtz_65._opened_1bqtz_34{transform:rotate(0)}._title_1bqtz_78{flex-direction:row;flex:1 1 0;gap:8px;display:flex;overflow:hidden}._body_1bqtz_86{border-radius:0 0 var(--border-radius) var(--border-radius);flex-direction:column;gap:12px;padding:24px;display:flex}._body_1bqtz_86._disabled_1bqtz_38{pointer-events:none}._actions_1bqtz_98{background-color:var(--background);border-radius:var(--border-radius);align-items:center;display:flex;position:absolute;top:8px;right:8px}._action_1bqtz_98{opacity:.6;border-radius:var(--border-radius);width:24px;height:24px;padding:4px;transition:all .15s}._action_1bqtz_98 svg{width:16px;height:16px}._action_1bqtz_98:hover{opacity:1;background-color:var(--bg-elevated-02)}._action_1bqtz_98._activated_1bqtz_126{opacity:.8}._action_1bqtz_98._disable_1bqtz_38{cursor:not-allowed;opacity:.4}._clickable_1bqtz_136{cursor:pointer}._draggable_1bqtz_140{cursor:grab}._showOnHover_1bqtz_144{opacity:0;transition:opacity .15s}._root_1bqtz_4:hover ._showOnHover_1bqtz_144{opacity:1}
+@use "../../assets/variables.scss" as *;._root_1bqtz_4{--background:#fffc;--border-color:var(--color-div-grey);--head-background:unset;--box-shadow:none;--box-shadow-active:0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);&.sortable-drag,&.sortable-chosen{--head-background:var(--gradient-light-lime);--border-color:var(--border-color-focus);--box-shadow:var(--box-shadow-active)}}._root_1bqtz_4{border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:var(--background);box-shadow:var(--box-shadow);flex-direction:column;justify-content:center;transition:box-shadow .15s;display:flex;overflow:hidden;&:hover{--border-color:var(--border-color-focus);--head-background:var(--gradient-light-lime)}&._opened_1bqtz_34{--head-background:var(--gradient-light-lime)}&._disabled_1bqtz_38{--icon-color:var(--ic-02);--border-color:var(--border-color-div-grey);color:var(--txt-03);filter:grayscale()}&._pinned_1bqtz_45{--background:var(--bg-base-light)}&._active_1bqtz_49{--border-color:var(--border-color-focus);--head-background:var(--btn-accent-positive-500)}}._head_1bqtz_55{border-radius:var(--border-radius) var(--border-radius) 0 0;background:var(--head-background);align-items:center;min-height:40px;padding:8px;display:flex;position:relative}._contentChevron_1bqtz_65{width:16px;height:16px;margin-right:4px;transition:transform .15s;display:block;transform:rotate(-90deg);&._opened_1bqtz_34{transform:rotate(0)}}._title_1bqtz_78{flex-direction:row;flex:1 1 0;gap:8px;display:flex;overflow:hidden}._body_1bqtz_86{border-radius:0 0 var(--border-radius) var(--border-radius);flex-direction:column;gap:12px;padding:24px;display:flex;&._disabled_1bqtz_38{pointer-events:none}}._actions_1bqtz_98{background-color:var(--background);border-radius:var(--border-radius);align-items:center;display:flex;position:absolute;top:8px;right:8px}._action_1bqtz_98{opacity:.6;border-radius:var(--border-radius);width:24px;height:24px;padding:4px;transition:all .15s;& svg{width:16px;height:16px}&:hover{opacity:1;background-color:var(--bg-elevated-02)}&._activated_1bqtz_126{opacity:.8}&._disable_1bqtz_38{cursor:not-allowed;opacity:.4}}._clickable_1bqtz_136{cursor:pointer}._draggable_1bqtz_140{cursor:grab}._showOnHover_1bqtz_144{opacity:0;transition:opacity .15s}._root_1bqtz_4:hover ._showOnHover_1bqtz_144{opacity:1}

package/dist/components/PlElementList/PlElementListItem.vue2.js

@@ -1,5 +1,7 @@
 import e from "../PlIcon24/PlIcon24.js";
+import "../PlIcon24/index.js";
 import t from "../PlIcon16/PlIcon16.js";
+import "../PlIcon16/index.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, unref as f, useSlots as p, withModifiers as m } from "vue";
 var h = ["data-draggable"], g = /* @__PURE__ */ c({
 	inheritAttrs: !1,

package/dist/components/PlElementList/PlElementListItem.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div\n          v-if=\"props.showDragHandle\"\n          :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n          :data-draggable=\"props.isDraggable\"\n        >\n          <PlIcon16 name=\"drag-dots\" />\n        </div>\n        <PlIcon16\n          v-if=\"isExpandable\"\n          :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n          name=\"chevron-down\"\n        />\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"PlElementListItem.vue_vue_type_script_setup_true_lang.js","names":["$style","$attrs"],"sources":["../../../src/components/PlElementList/PlElementListItem.vue"],"sourcesContent":["<script generic=\"T extends unknown = unknown\" lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\n\nconst props = defineProps<{\n  item: T;\n  index: number;\n  showDragHandle: boolean;\n  isActive: boolean;\n  isDraggable: boolean;\n  isRemovable: boolean;\n  isExpandable: boolean;\n  isExpanded: boolean;\n  isToggable: boolean;\n  isToggled: boolean;\n  isPinnable: boolean;\n  isPinned: boolean;\n  titleClass: string | string[] | null;\n  contentClass: string | string[] | null;\n  afterClass: string | string[] | null;\n  beforeClass: string | string[] | null;\n}>();\ndefineOptions({ inheritAttrs: false });\n\nconst slots = defineSlots<{\n  title: (props: { item: T; index: number }) => unknown;\n  content?: (props: { item: T; index: number }) => unknown;\n  after?: (props: { item: T; index: number }) => unknown;\n  before?: (props: { item: T; index: number }) => unknown;\n}>();\nconst hasContentSlot = computed(() => slots[\"content\"] !== undefined);\nconst hasAfterSlot = computed(() => slots[\"after\"] !== undefined);\nconst hasBeforeSlot = computed(() => slots[\"before\"] !== undefined);\n\nconst emit = defineEmits<{\n  (e: \"click\", item: MouseEvent): void;\n  (e: \"expand\", item: T, index: number): void;\n  (e: \"toggle\", item: T, index: number): void;\n  (e: \"pin\", item: T, index: number): void;\n  (e: \"remove\", item: T, index: number): void;\n}>();\n</script>\n\n<template>\n  <div @click=\"(event) => emit('click', event)\">\n    <div v-if=\"hasBeforeSlot\" :class=\"beforeClass\">\n      <slot name=\"before\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n    <div\n      :class=\"[\n        $style.root,\n        $attrs.class,\n        {\n          [$style.active]: props.isActive,\n          [$style.pinned]: props.isPinned,\n          [$style.opened]: props.isExpanded,\n          [$style.disabled]: props.isToggled,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          $style.head,\n          titleClass,\n          {\n            [$style.clickable]: hasContentSlot,\n          },\n        ]\"\n        @click=\"isExpandable && emit('expand', props.item, props.index)\"\n      >\n        <div\n          v-if=\"props.showDragHandle\"\n          :class=\"[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable }]\"\n          :data-draggable=\"props.isDraggable\"\n        >\n          <PlIcon16 name=\"drag-dots\" />\n        </div>\n        <PlIcon16\n          v-if=\"isExpandable\"\n          :class=\"[$style.contentChevron, { [$style.opened]: props.isExpanded }]\"\n          name=\"chevron-down\"\n        />\n\n        <div :class=\"$style.title\">\n          <slot name=\"title\" :item=\"props.item\" :index=\"props.index\" />\n        </div>\n\n        <div :class=\"[$style.actions, $style.showOnHover]\">\n          <div\n            v-if=\"props.isToggable\"\n            :class=\"[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]\"\n            @click.stop=\"emit('toggle', props.item, props.index)\"\n          >\n            <PlIcon24 :name=\"props.isToggled === true ? 'view-hide' : 'view-show'\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isPinnable\"\n            :class=\"[\n              $style.action,\n              $style.clickable,\n              {\n                [$style.disable]: !props.isPinnable,\n                [$style.activated]: props.isPinned,\n              },\n            ]\"\n            @click.stop=\"emit('pin', props.item, props.index)\"\n          >\n            <PlIcon24 name=\"pin\" size=\"16\" />\n          </div>\n          <div\n            v-if=\"props.isRemovable\"\n            :class=\"[$style.action, $style.clickable]\"\n            @click.stop=\"emit('remove', props.item, props.index)\"\n          >\n            <PlIcon16 name=\"close\" />\n          </div>\n        </div>\n      </div>\n      <div\n        v-if=\"hasContentSlot && props.isExpanded\"\n        :class=\"[$style.body, contentClass, { [$style.disabled]: props.isToggled }]\"\n      >\n        <slot name=\"content\" :item=\"props.item\" :index=\"props.index\" />\n      </div>\n    </div>\n    <div v-if=\"hasAfterSlot\" :class=\"afterClass\">\n      <slot name=\"after\" :item=\"props.item\" :index=\"props.index\" />\n    </div>\n  </div>\n</template>\n\n<style module>\n@use \"../../assets/variables.scss\" as *;\n\n.root {\n  --background: rgba(255, 255, 255, 0.8);\n  --border-color: var(--color-div-grey);\n  --head-background: unset;\n  --box-shadow: none;\n  --box-shadow-active: 0 0 0 4px color-mix(in srgb, var(--border-color-focus) 50%, transparent);\n\n  &:global(.sortable-drag),\n  &:global(.sortable-chosen) {\n    --head-background: var(--gradient-light-lime);\n    --border-color: var(--border-color-focus);\n    --box-shadow: var(--box-shadow-active);\n  }\n}\n.root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-radius: var(--border-radius);\n  border: 1px solid var(--border-color);\n  background-color: var(--background);\n  transition: box-shadow 0.15s;\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n\n  &:hover {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.opened {\n    --head-background: var(--gradient-light-lime);\n  }\n\n  &.disabled {\n    --icon-color: var(--ic-02);\n    --border-color: var(--border-color-div-grey);\n    color: var(--txt-03);\n    filter: grayscale(1);\n  }\n\n  &.pinned {\n    --background: var(--bg-base-light);\n  }\n\n  &.active {\n    --border-color: var(--border-color-focus);\n    --head-background: var(--btn-accent-positive-500);\n  }\n}\n\n.head {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  min-height: 40px;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  background: var(--head-background);\n}\n\n.contentChevron {\n  display: block;\n  width: 16px;\n  height: 16px;\n  margin-right: 4px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s;\n\n  &.opened {\n    transform: rotate(0deg);\n  }\n}\n\n.title {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n\n  &.disabled {\n    pointer-events: none;\n  }\n}\n\n.actions {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  background-color: var(--background);\n  border-radius: var(--border-radius);\n}\n\n.action {\n  width: 24px;\n  height: 24px;\n  padding: 4px; /* use padding instead of gap on parent, for better accessibility */\n  opacity: 0.6;\n  border-radius: var(--border-radius);\n  transition: all 0.15s;\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  &:hover {\n    opacity: 1;\n    background-color: var(--bg-elevated-02);\n  }\n\n  &.activated {\n    opacity: 0.8;\n  }\n\n  &.disable {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.clickable {\n  cursor: pointer;\n}\n\n.draggable {\n  cursor: grab;\n}\n\n.showOnHover {\n  opacity: 0;\n  transition: opacity 0.15s;\n}\n\n.root:hover .showOnHover {\n  opacity: 1;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/PlElementList/index.js

@@ -0,0 +1 @@
+import "./PlElementList.js";

package/dist/components/PlErrorAlert/PlErrorAlert.vue.css

@@ -1 +1 @@
-._root_o15c5_2{background:var(--bg-error);border:1px var(--border-color-error) solid;border-radius:var(--border-radius-control);flex-direction:column;gap:12px;padding:12px;display:flex;position:relative;overflow:auto}._copy_o15c5_15{opacity:.4;transition:opacity .3s;position:absolute;top:12px;right:12px}._copy_o15c5_15:hover{opacity:1}._title_o15c5_27{align-items:center;gap:10px;max-width:calc(100% - 20px);min-height:24px;font-weight:700;line-height:24px;display:flex;overflow:hidden}._titleIcon_o15c5_38{--icon-color:var(--txt-error)}._titleText_o15c5_42{text-overflow:ellipsis;width:100%;overflow:hidden}._message_o15c5_48{white-space:pre-wrap;word-break:break-word;max-height:100%;font-family:var(--font-family-monospace);overflow:auto}
+._root_o15c5_2{background:var(--bg-error);border:1px var(--border-color-error) solid;border-radius:var(--border-radius-control);flex-direction:column;gap:12px;padding:12px;display:flex;position:relative;overflow:auto}._copy_o15c5_15{opacity:.4;transition:opacity .3s;position:absolute;top:12px;right:12px;&:hover{opacity:1}}._title_o15c5_27{align-items:center;gap:10px;max-width:calc(100% - 20px);min-height:24px;font-weight:700;line-height:24px;display:flex;overflow:hidden}._titleIcon_o15c5_38{--icon-color:var(--txt-error)}._titleText_o15c5_42{text-overflow:ellipsis;width:100%;overflow:hidden}._message_o15c5_48{white-space:pre-wrap;word-break:break-word;max-height:100%;font-family:var(--font-family-monospace);overflow:auto}

package/dist/components/PlErrorAlert/PlErrorAlert.vue2.js

@@ -1,5 +1,7 @@
 import e from "../PlIcon16/PlIcon16.js";
+import "../PlMaskIcon16/index.js";
 import t from "../PlClipboard/PlClipboard.js";
+import "../PlClipboard/index.js";
 import { createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
 var f = /* @__PURE__ */ a({
 	name: "PlErrorAlert",

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

@@ -1 +1 @@
-{"version":3,"file":"PlErrorAlert.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":";;;;CAEE,MAAM;;;;;;;;EAQR,IAAM,IAAQ;EAed,SAAS,IAAS;GAChB,IAAM,IAAQ,EAAM,eAAe,EAAM;AACzC,GAAI,OAAO,KAAU,YACnB,UAAU,UAAU,UAAU,EAAM;;yBAMtC,EAaM,OAAA;GAbA,OAAK,EAAA,EAAA,WAAe,EAAM,WAAS,CAAA;GAAK,OAAK,EAAEA,EAAAA,OAAO,KAAI;;GAC9D,EAAmD,EAAA,EAAA,EAAA;IAArC,OAAK,EAAEA,EAAAA,OAAO,KAAI;IAAS;;GACzC,EAKO,EAAA,QAAA,SAAA,EAAA,QAAA,CAJL,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAAyD,EAAA,EAAA,EAAA;IAA1C,OAAK,EAAEA,EAAAA,OAAO,UAAS;IAAE,MAAK;2BAC7C,EAAsD,OAAA,EAAhD,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,EAAK,EAAM,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;GAGjD,EAIO,EAAA,QAAA,WAAA,EAAA,QAAA,CAHL,EAEM,OAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,EACtB,EAAM,QAAO,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"PlErrorAlert.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlErrorAlert/PlErrorAlert.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"PlErrorAlert\",\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { PlClipboard } from \"../PlClipboard\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string;\n    message?: string;\n    maxHeight?: string;\n    copyMessage?: string;\n  }>(),\n  {\n    title: undefined,\n    message: undefined,\n    maxHeight: \"300px\",\n    copyMessage: undefined,\n  },\n);\n\nfunction onCopy() {\n  const value = props.copyMessage ?? props.message;\n  if (typeof value === \"string\") {\n    navigator.clipboard.writeText(value);\n  }\n}\n</script>\n\n<template>\n  <div :style=\"{ maxHeight: props.maxHeight }\" :class=\"$style.root\">\n    <PlClipboard :class=\"$style.copy\" @copy=\"onCopy\" />\n    <slot name=\"title\">\n      <div :class=\"$style.title\">\n        <PlMaskIcon16 :class=\"$style.titleIcon\" name=\"warning\" />\n        <div :class=\"$style.titleText\">{{ props.title }}</div>\n      </div>\n    </slot>\n    <slot name=\"message\">\n      <div :class=\"$style.message\">\n        {{ props.message }}\n      </div>\n    </slot>\n  </div>\n</template>\n\n<style module>\n.root {\n  position: relative;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-error);\n  border: 1px var(--border-color-error) solid;\n  border-radius: var(--border-radius-control);\n  /* color: var(--txt-error); */\n}\n\n.copy {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  opacity: 0.4;\n  transition: opacity 0.3s;\n\n  &:hover {\n    opacity: 1;\n  }\n}\n\n.title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 20px);\n  min-height: 24px;\n  line-height: 24px;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.titleIcon {\n  --icon-color: var(--txt-error);\n}\n\n.titleText {\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.message {\n  overflow: auto;\n  max-height: 100%;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: var(--font-family-monospace);\n}\n</style>\n"],"mappings":";;;;;;CAEE,MAAM;;;;;;;;EAQR,IAAM,IAAQ;EAed,SAAS,IAAS;GAChB,IAAM,IAAQ,EAAM,eAAe,EAAM;AACzC,GAAI,OAAO,KAAU,YACnB,UAAU,UAAU,UAAU,EAAM;;yBAMtC,EAaM,OAAA;GAbA,OAAK,EAAA,EAAA,WAAe,EAAM,WAAS,CAAA;GAAK,OAAK,EAAEA,EAAAA,OAAO,KAAI;;GAC9D,EAAmD,EAAA,EAAA,EAAA;IAArC,OAAK,EAAEA,EAAAA,OAAO,KAAI;IAAS;;GACzC,EAKO,EAAA,QAAA,SAAA,EAAA,QAAA,CAJL,EAGM,OAAA,EAHA,OAAK,EAAEA,EAAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAAyD,EAAA,EAAA,EAAA;IAA1C,OAAK,EAAEA,EAAAA,OAAO,UAAS;IAAE,MAAK;2BAC7C,EAAsD,OAAA,EAAhD,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,EAAA,EAAK,EAAM,MAAK,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,CAAA;GAGjD,EAIO,EAAA,QAAA,WAAA,EAAA,QAAA,CAHL,EAEM,OAAA,EAFA,OAAK,EAAEA,EAAAA,OAAO,QAAO,EAAA,EAAA,EACtB,EAAM,QAAO,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/PlErrorAlert/index.js

@@ -0,0 +1 @@
+import "./PlErrorAlert.js";

package/dist/components/PlErrorBoundary/PlErrorBoundary.vue2.js

@@ -1,4 +1,5 @@
 import e from "../PlErrorAlert/PlErrorAlert.js";
+import "../PlErrorAlert/index.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, onBeforeUpdate as s, onErrorCaptured as c, openBlock as l, ref as u, renderSlot as d, unref as f } from "vue";
 import { isErrorLike as p, tryDo as m } from "@milaboratories/helpers";
 var h = /* @__PURE__ */ o({

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

@@ -1 +1 @@
-{"version":3,"file":"PlErrorBoundary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":";;;;;;EAKA,IAAM,KAAkB,MAAqC;AACvD,YAAO,KAYX,QARI,EAAY,EAAI,GACX,EAAI,SAAS,QAAQ,EAAI,MAAM,WAAW,IAC7C,EAAI,UACJ,EAAI,MAAM,SAAS,EAAI,QAAO,GAC5B,EAAI,QACJ,EAAI,UAAU,OAAO,EAAI,QAG1B,QACC,KAAK,UAAU,GAAK,MAAM,EAAE,QAC5B,EAAI,UAAU,CACrB;KAGG,IAAO,EAGV,KAAK,EAEF,IAAQ,QAAe,EAAK,OAAO,MAAM,EACzC,IAAU,QAAe,EAAe,EAAM,MAAM,CAAC;EAE3D,SAAS,IAAQ;AACf,KAAK,QAAQ;;EAGf,IAAM,IAAa,EAA8C,KAAK;SAEtE,QAAqB;AAGnB,GAAI,EAAK,UAAU,QAAQ,EAAW,SACpC,GAAO;IAET,EAEF,GAAiB,GAAK,OACpB,EAAK,QAAQ;GACX,OAAO,GAAU,GAAG,MAAM,QAAQ,KAAA;GAClC,OAAO;GACR,EAEM,IACP,EAEF,EAAa;GAAE;GAAO;GAAO,CAAC,8BAI5B,EAAQ,EAAA,QAAA,UAAA,EACY,EAAA,SAAA,GAAA,EAApB,EAAsF,EAAA,EAAA,EAAA;;YAAvD;GAAJ,KAAI;GAAc,SAAS,EAAA;GAAU,OAAO,EAAA,OAAM"}
+{"version":3,"file":"PlErrorBoundary.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlErrorBoundary/PlErrorBoundary.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, onErrorCaptured, ref, onBeforeUpdate } from \"vue\";\nimport { PlErrorAlert } from \"../PlErrorAlert\";\nimport { isErrorLike, tryDo } from \"@milaboratories/helpers\";\n\nconst extractMessage = (err: unknown): undefined | string => {\n  if (err == null) {\n    return undefined;\n  }\n\n  if (isErrorLike(err)) {\n    return err.stack == null || err.stack.length === 0\n      ? err.message\n      : err.stack.includes(err.message)\n        ? err.stack\n        : err.message + \"\\n\" + err.stack;\n  }\n\n  return tryDo(\n    () => JSON.stringify(err, null, 4),\n    () => err.toString(),\n  );\n};\n\nconst data = ref<null | {\n  title: undefined | string;\n  error: Error;\n}>(null);\n\nconst error = computed(() => data.value?.error);\nconst message = computed(() => extractMessage(error.value));\n\nfunction reset() {\n  data.value = null;\n}\n\nconst errorAlert = ref<InstanceType<typeof PlErrorAlert> | null>(null);\n\nonBeforeUpdate(() => {\n  // If an error is currently displayed, and the component updates (e.g., due to slot content changing),\n  // reset the error state.\n  if (data.value !== null && errorAlert.value) {\n    reset();\n  }\n});\n\nonErrorCaptured((err, instance) => {\n  data.value = {\n    title: instance?.$?.type?.name ?? undefined,\n    error: err,\n  };\n  // stop error propagation\n  return false;\n});\n\ndefineExpose({ error, reset });\n</script>\n\n<template>\n  <slot />\n  <PlErrorAlert v-if=\"error\" ref=\"errorAlert\" :message=\"message\" :title=\"data?.title\" />\n</template>\n"],"mappings":";;;;;;;EAKA,IAAM,KAAkB,MAAqC;AACvD,YAAO,KAYX,QARI,EAAY,EAAI,GACX,EAAI,SAAS,QAAQ,EAAI,MAAM,WAAW,IAC7C,EAAI,UACJ,EAAI,MAAM,SAAS,EAAI,QAAO,GAC5B,EAAI,QACJ,EAAI,UAAU,OAAO,EAAI,QAG1B,QACC,KAAK,UAAU,GAAK,MAAM,EAAE,QAC5B,EAAI,UAAU,CACrB;KAGG,IAAO,EAGV,KAAK,EAEF,IAAQ,QAAe,EAAK,OAAO,MAAM,EACzC,IAAU,QAAe,EAAe,EAAM,MAAM,CAAC;EAE3D,SAAS,IAAQ;AACf,KAAK,QAAQ;;EAGf,IAAM,IAAa,EAA8C,KAAK;SAEtE,QAAqB;AAGnB,GAAI,EAAK,UAAU,QAAQ,EAAW,SACpC,GAAO;IAET,EAEF,GAAiB,GAAK,OACpB,EAAK,QAAQ;GACX,OAAO,GAAU,GAAG,MAAM,QAAQ,KAAA;GAClC,OAAO;GACR,EAEM,IACP,EAEF,EAAa;GAAE;GAAO;GAAO,CAAC,8BAI5B,EAAQ,EAAA,QAAA,UAAA,EACY,EAAA,SAAA,GAAA,EAApB,EAAsF,EAAA,EAAA,EAAA;;YAAvD;GAAJ,KAAI;GAAc,SAAS,EAAA;GAAU,OAAO,EAAA,OAAM"}

package/dist/components/PlErrorBoundary/index.js

@@ -0,0 +1 @@
+import "./PlErrorBoundary.js";

package/dist/components/PlFileDialog/Local.vue2.js

@@ -1,4 +1,5 @@
 import e from "../PlIcon24/PlIcon24.js";
+import "../PlIcon24/index.js";
 import t from "./pl-file-dialog.module.js";
 import { normalizeExtensions as n } from "./utils.js";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, reactive as d, toDisplayString as f, unref as p, withModifiers as m } from "vue";

package/dist/components/PlFileDialog/Local.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Local.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n    <PlIcon24 name=\"cloud-upload\" />\n    <span>{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAMR,IAAO,EAAS,EACpB,OAAO,KAAA,GACR,CAAC,EAEI,IAAQ,QACZ,EAAM,QAAQ,2CAA2C,wCAC1D,EAEK,IAAS,OAAO,MAAkB;GACtC,IAAM,IAAqB,GAAyB,EAAE,UAAU;AAEhE,OAAI,CAAC,EACH,QAAO,QAAQ,MACb,6EACD;GAGH,IAAM,IAAa,EAAoB,EAAM,WAAW,EAElD,IAAQ,MAAM,QAAQ,IAC1B,CAAC,GAAI,EAAG,cAAc,SAAS,EAAE,CAAC,CAC/B,QAAQ,MAAM,CAAC,CAAC,EAAC,CACjB,QAAQ,MAAO,IAAa,EAAW,MAAM,MAAQ,EAAE,KAAK,SAAS,EAAI,CAAC,GAAG,GAAK,CAClF,KAAK,MACG,EAAmB,EAAK,CAC/B,CACL;AAED,GAAI,EAAM,UACR,EAAM,YAAY,EAChB,UACD,CAAC;KAIA,IAAmB,YAAY;GACnC,IAAM,IAA8B,EAAM,aACtC,CACE;IACE,MAAM;IACN,YAAY,CAAC,GAAG,EAAM,WAAW;IAClC,CACH,GACA,EAAE;AAEN,GAAI,EAAM,QACR,GAAwB,EACpB,SAAS,4BAA4B;IACrC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,eAAY;AACnB,IAAI,KACF,EAAM,YAAY,EAChB,UACD,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK,GAErC,GAAwB,EACpB,SAAS,yBAAyB;IAClC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,cAAW;AAClB,IAAI,KACF,EAAM,YAAY,EAChB,OAAO,CAAC,EAAK,EACd,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK;;yBAMvC,EAOM,OAAA;GAPA,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GAAS;GAAS,YAAQ,AAAA,EAAA,OAAA,QAAT,IAAiB,CAAA,UAAA,CAAA;GAAE,SAAO;;GACjE,EAAgC,EAAA,EAAA,EAAA,EAAtB,MAAK,gBAAc,CAAA;GAC7B,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;GACF,EAAA,cAAA,GAAA,EAAZ,EAEC,QAAA;;IAFwB,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;MAC5C,wBAAmB,EAAG,EAAA,WAAW,KAAI,KAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAE5B,EAAK,SAAA,GAAA,EAAjB,EAAmE,QAAnE,GAAmE,EAApB,EAAK,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"Local.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Local.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport style from \"./pl-file-dialog.module.scss\";\nimport type { ImportedFiles } from \"../../types\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { computed, reactive } from \"vue\";\nimport { getRawPlatformaInstance, type OpenDialogFilter } from \"@platforma-sdk/model\";\nimport { normalizeExtensions } from \"./utils\";\n\nconst props = defineProps<{\n  importFiles: (value: ImportedFiles) => void;\n  multi?: boolean;\n  extensions?: string[];\n}>();\n\nconst data = reactive({\n  error: undefined as unknown,\n});\n\nconst label = computed(() =>\n  props.multi ? \"Drag & Drop files here or click to add\" : \"Drag & Drop file here or click to add\",\n);\n\nconst onDrop = async (ev: DragEvent) => {\n  const fileToImportHandle = getRawPlatformaInstance()?.lsDriver?.fileToImportHandle;\n\n  if (!fileToImportHandle) {\n    return console.error(\n      \"API getPlatformaRawInstance().lsDriver.fileToImportHandle is not available\",\n    );\n  }\n\n  const extensions = normalizeExtensions(props.extensions);\n\n  const files = await Promise.all(\n    [...(ev.dataTransfer?.files ?? [])]\n      .filter((f) => !!f)\n      .filter((f) => (extensions ? extensions.some((ext) => f.name.endsWith(ext)) : true))\n      .map((file) => {\n        return fileToImportHandle(file);\n      }),\n  );\n\n  if (files.length) {\n    props.importFiles({\n      files,\n    });\n  }\n};\n\nconst openNativeDialog = async () => {\n  const filters: OpenDialogFilter[] = props.extensions\n    ? [\n        {\n          name: \"All Files\",\n          extensions: [...props.extensions],\n        },\n      ]\n    : [];\n\n  if (props.multi) {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenMultipleFilesDialog({\n        title: \"Select files to import\",\n        filters,\n      })\n      .then(({ files }) => {\n        if (files) {\n          props.importFiles({\n            files,\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  } else {\n    getRawPlatformaInstance()\n      ?.lsDriver.showOpenSingleFileDialog({\n        title: \"Select file to import\",\n        filters,\n      })\n      .then(({ file }) => {\n        if (file) {\n          props.importFiles({\n            files: [file],\n          });\n        }\n      })\n      .catch((err) => (data.error = err));\n  }\n};\n</script>\n\n<template>\n  <div :class=\"style.local\" @drop=\"onDrop\" @dragover.prevent @click=\"openNativeDialog\">\n    <PlIcon24 name=\"cloud-upload\" />\n    <span>{{ label }}</span>\n    <span v-if=\"extensions\" :class=\"style.supported\"\n      >Supported formats: {{ extensions.join(\", \") }}</span\n    >\n    <span v-if=\"data.error\" class=\"alert-error\">{{ data.error }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAMR,IAAO,EAAS,EACpB,OAAO,KAAA,GACR,CAAC,EAEI,IAAQ,QACZ,EAAM,QAAQ,2CAA2C,wCAC1D,EAEK,IAAS,OAAO,MAAkB;GACtC,IAAM,IAAqB,GAAyB,EAAE,UAAU;AAEhE,OAAI,CAAC,EACH,QAAO,QAAQ,MACb,6EACD;GAGH,IAAM,IAAa,EAAoB,EAAM,WAAW,EAElD,IAAQ,MAAM,QAAQ,IAC1B,CAAC,GAAI,EAAG,cAAc,SAAS,EAAE,CAAC,CAC/B,QAAQ,MAAM,CAAC,CAAC,EAAC,CACjB,QAAQ,MAAO,IAAa,EAAW,MAAM,MAAQ,EAAE,KAAK,SAAS,EAAI,CAAC,GAAG,GAAK,CAClF,KAAK,MACG,EAAmB,EAAK,CAC/B,CACL;AAED,GAAI,EAAM,UACR,EAAM,YAAY,EAChB,UACD,CAAC;KAIA,IAAmB,YAAY;GACnC,IAAM,IAA8B,EAAM,aACtC,CACE;IACE,MAAM;IACN,YAAY,CAAC,GAAG,EAAM,WAAW;IAClC,CACH,GACA,EAAE;AAEN,GAAI,EAAM,QACR,GAAwB,EACpB,SAAS,4BAA4B;IACrC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,eAAY;AACnB,IAAI,KACF,EAAM,YAAY,EAChB,UACD,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK,GAErC,GAAwB,EACpB,SAAS,yBAAyB;IAClC,OAAO;IACP;IACD,CAAA,CACA,MAAM,EAAE,cAAW;AAClB,IAAI,KACF,EAAM,YAAY,EAChB,OAAO,CAAC,EAAK,EACd,CAAC;KAEL,CACA,OAAO,MAAS,EAAK,QAAQ,EAAK;;yBAMvC,EAOM,OAAA;GAPA,OAAK,EAAE,EAAA,EAAK,CAAC,MAAK;GAAS;GAAS,YAAQ,AAAA,EAAA,OAAA,QAAT,IAAiB,CAAA,UAAA,CAAA;GAAE,SAAO;;GACjE,EAAgC,EAAA,EAAA,EAAA,EAAtB,MAAK,gBAAc,CAAA;GAC7B,EAAwB,QAAA,MAAA,EAAf,EAAA,MAAK,EAAA,EAAA;GACF,EAAA,cAAA,GAAA,EAAZ,EAEC,QAAA;;IAFwB,OAAK,EAAE,EAAA,EAAK,CAAC,UAAS;MAC5C,wBAAmB,EAAG,EAAA,WAAW,KAAI,KAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAE5B,EAAK,SAAA,GAAA,EAAjB,EAAmE,QAAnE,GAAmE,EAApB,EAAK,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/components/PlFileDialog/PlFileDialog.vue2.js

@@ -1,7 +1,11 @@
 import e from "../PlBtnGhost/PlBtnGhost.js";
+import "../PlBtnGhost/index.js";
 import t from "../PlBtnGroup/PlBtnGroup.js";
+import "../PlBtnGroup/index.js";
 import n from "../PlBtnPrimary/PlBtnPrimary.js";
+import "../PlBtnPrimary/index.js";
 import r from "../PlDialogModal/PlDialogModal.js";
+import "../PlDialogModal/index.js";
 import i from "./pl-file-dialog.module.js";
 import a from "./Remote.js";
 import o from "./Local.js";

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

@@ -1 +1 @@
-{"version":3,"file":"PlFileDialog.vue_vue_type_script_setup_true_lang.js","names":["$props"],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary style=\"min-width: 160px\" :disabled=\"!remoteRef?.isReady\" @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost :justify-center=\"false\" @click.stop=\"closeModal\">Cancel</PlBtnGhost>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM,IAAO,GAKP,IAAQ,GA4CR,IAAO,EAAwB,QAAQ,EAEvC,IAAe,QACnB,EAAM,QAAQ,2BAA2B,wBAC1C,EAEK,IAAc,CAClB;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF,EAEK,UAAmB,EAAK,qBAAqB,GAAM,EAEnD,IAAY,EAAe,SAAS,EAEpC,UAAe;AACnB,GAAI,EAAU,OAAO,YACnB,EAAK,gBAAgB,EAAS,EAAU,OAAO,kBAAkB,CAAC,CAAC,EACnE,GAAY;KAIV,KAAe,MAAiC;AAEpD,GADA,EAAK,gBAAgB,EAAc,EACnC,GAAY;;yBAKZ,EAuBgB,EAAA,EAAA,EAAA;GAtBb,sBAAoB;GACpB,0BAAwB,EAAA;GACzB,OAAK,EAAA,CAAC,mBACE,EAAA,EAAK,CAAC,UAAS,CAAA;GACtB,eAAa,EAAA;GACd,OAAM;GACN,QAAO;GACN,uBAAoB;GACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GAEA,OAAK,QAA4B,CAAA,EAAA,EAAxB,EAAA,SAAS,EAAA,MAAY,EAAA,EAAA,CAAA,CAAA;oBAGnC;IAFN,EAEM,OAFN,GAEM,CADJ,EAAoD,EAAA,EAAA,EAAA;iBAA/B,EAAA;8CAAI,QAAA;KAAG,SAAS;;IAEzB,EAAA,UAAI,YAAA,GAAA,EAAlB,EAAiF,GAAjF,EAAiF;;KAAhD,KAAI;OAAiBA,EAAAA,QAAM,EAAW,WAAM,CAAA,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;IAChE,EAAA,UAAI,WAAA,GAAA,EAAjB,EAA6E,GAA7E,EAA6E;;KAA7C,gBAAc;OAAqBA,EAAAA,OAAM,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;;;MACzD,EAAA,UAAI,WAAA;SAAgB;eAGjC,CAFD,EAEC,EAAA,EAAA,EAAA;IAFa,OAAA,EAAA,aAAA,SAAwB;IAAE,UAAQ,CAAG,EAAA,OAAW;IAAU,SAAK,EAAO,GAAM,CAAA,OAAA,CAAA;;qBACjF,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA;;wBAET,EAAgF,EAAA,EAAA,EAAA;IAAnE,kBAAgB;IAAQ,SAAK,EAAO,GAAU,CAAA,OAAA,CAAA;;qBAAQ,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"PlFileDialog.vue_vue_type_script_setup_true_lang.js","names":["$props"],"sources":["../../../src/components/PlFileDialog/PlFileDialog.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport style from \"./pl-file-dialog.module.scss\";\nimport { computed, ref, useTemplateRef } from \"vue\";\nimport { notEmpty } from \"@milaboratories/helpers\";\nimport type { ImportedFiles, SimpleOption } from \"../../types\";\nimport { PlDialogModal } from \"../PlDialogModal\";\nimport { PlBtnPrimary } from \"../PlBtnPrimary\";\nimport { PlBtnGhost } from \"../PlBtnGhost\";\nimport { PlBtnGroup } from \"../PlBtnGroup\";\nimport Remote from \"./Remote.vue\";\nimport Local from \"./Local.vue\";\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Controls the visibility of the modal.\n     *\n     * When `true`, the modal is open. When `false`, the modal is closed.\n     */\n    modelValue: boolean;\n    /**\n     * Specifies the file extensions that are allowed for selection.\n     *\n     * Provide an array of strings representing file extensions (leading dot can be omitted)\n     * If not specified, all file types are allowed.\n     */\n    extensions?: string[];\n    /**\n     * Enables the selection of multiple files.\n     *\n     * When `true`, the user can select multiple files.\n     * When `false` or not specified, only a single file can be selected.\n     */\n    multi?: boolean;\n    /**\n     * The custom title of the dialog.\n     */\n    title?: string;\n    /**\n     * Automatically selects the initial storage option.\n     * When `true`, the default storage is pre-selected for the user (default: `true`)\n     */\n    autoSelectStorage?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n    closeOnOutsideClick: true,\n  },\n);\n\nconst mode = ref<\"local\" | \"remote\">(\"local\");\n\nconst defaultTitle = computed(() =>\n  props.multi ? \"Select Files to Import\" : \"Select File to Import\",\n);\n\nconst modeOptions = [\n  {\n    label: \"My Computer\",\n    value: \"local\",\n  },\n  {\n    label: \"Remote\",\n    value: \"remote\",\n  },\n] satisfies SimpleOption[];\n\nconst closeModal = () => emit(\"update:modelValue\", false);\n\nconst remoteRef = useTemplateRef(\"remote\");\n\nconst submit = () => {\n  if (remoteRef.value?.isReady) {\n    emit(\"import:files\", notEmpty(remoteRef.value?.getFilesToImport()));\n    closeModal();\n  }\n};\n\nconst importFiles = (importedFiles: ImportedFiles) => {\n  emit(\"import:files\", importedFiles);\n  closeModal();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    :no-content-gutters=\"true\"\n    :close-on-outside-click=\"closeOnOutsideClick\"\n    class=\"pl-dialog-modal\"\n    :class=\"style.component\"\n    :model-value=\"modelValue\"\n    width=\"688px\"\n    height=\"720px\"\n    @update:model-value=\"closeModal\"\n    @click.stop\n  >\n    <template #title>{{ title ?? defaultTitle }}</template>\n    <div style=\"margin: 0 24px\">\n      <PlBtnGroup v-model=\"mode\" :options=\"modeOptions\" />\n    </div>\n    <Remote v-if=\"mode === 'remote'\" ref=\"remote\" v-bind=\"$props\" :submit=\"submit\" />\n    <Local v-if=\"mode === 'local'\" :import-files=\"importFiles\" v-bind=\"$props\" />\n    <template v-if=\"mode === 'remote'\" #actions>\n      <PlBtnPrimary style=\"min-width: 160px\" :disabled=\"!remoteRef?.isReady\" @click.stop=\"submit\"\n        >Import</PlBtnPrimary\n      >\n      <PlBtnGhost :justify-center=\"false\" @click.stop=\"closeModal\">Cancel</PlBtnGhost>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM,IAAO,GAKP,IAAQ,GA4CR,IAAO,EAAwB,QAAQ,EAEvC,IAAe,QACnB,EAAM,QAAQ,2BAA2B,wBAC1C,EAEK,IAAc,CAClB;GACE,OAAO;GACP,OAAO;GACR,EACD;GACE,OAAO;GACP,OAAO;GACR,CACF,EAEK,UAAmB,EAAK,qBAAqB,GAAM,EAEnD,IAAY,EAAe,SAAS,EAEpC,UAAe;AACnB,GAAI,EAAU,OAAO,YACnB,EAAK,gBAAgB,EAAS,EAAU,OAAO,kBAAkB,CAAC,CAAC,EACnE,GAAY;KAIV,KAAe,MAAiC;AAEpD,GADA,EAAK,gBAAgB,EAAc,EACnC,GAAY;;yBAKZ,EAuBgB,EAAA,EAAA,EAAA;GAtBb,sBAAoB;GACpB,0BAAwB,EAAA;GACzB,OAAK,EAAA,CAAC,mBACE,EAAA,EAAK,CAAC,UAAS,CAAA;GACtB,eAAa,EAAA;GACd,OAAM;GACN,QAAO;GACN,uBAAoB;GACpB,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GAEA,OAAK,QAA4B,CAAA,EAAA,EAAxB,EAAA,SAAS,EAAA,MAAY,EAAA,EAAA,CAAA,CAAA;oBAGnC;IAFN,EAEM,OAFN,GAEM,CADJ,EAAoD,EAAA,EAAA,EAAA;iBAA/B,EAAA;8CAAI,QAAA;KAAG,SAAS;;IAEzB,EAAA,UAAI,YAAA,GAAA,EAAlB,EAAiF,GAAjF,EAAiF;;KAAhD,KAAI;OAAiBA,EAAAA,QAAM,EAAW,WAAM,CAAA,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;IAChE,EAAA,UAAI,WAAA,GAAA,EAAjB,EAA6E,GAA7E,EAA6E;;KAA7C,gBAAc;OAAqBA,EAAAA,OAAM,EAAA,MAAA,GAAA,IAAA,EAAA,IAAA,GAAA;;;MACzD,EAAA,UAAI,WAAA;SAAgB;eAGjC,CAFD,EAEC,EAAA,EAAA,EAAA;IAFa,OAAA,EAAA,aAAA,SAAwB;IAAE,UAAQ,CAAG,EAAA,OAAW;IAAU,SAAK,EAAO,GAAM,CAAA,OAAA,CAAA;;qBACjF,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA;;wBAET,EAAgF,EAAA,EAAA,EAAA;IAAnE,kBAAgB;IAAQ,SAAK,EAAO,GAAU,CAAA,OAAA,CAAA;;qBAAQ,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAN,UAAM,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/PlFileDialog/Remote.vue2.js

@@ -1,7 +1,11 @@
 import { useEventListener as e } from "../../composition/useEventListener.js";
 import t from "../PlIcon16/PlIcon16.js";
+import "../PlMaskIcon16/index.js";
+import "../PlIcon16/index.js";
 import n from "../PlDropdown/PlDropdown.js";
+import "../PlDropdown/index.js";
 import r from "../PlSearchField/PlSearchField.js";
+import "../PlSearchField/index.js";
 import i from "./pl-file-dialog.module.js";
 import a from "./Shortcuts.js";
 import { defaultData as o, useVisibleItems as s, vTextOverflown as c } from "./remote-helpers.js";

package/dist/components/PlFileDialog/Remote.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Remote.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Remote.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport type { ImportedFiles } from \"../../types\";\nimport { between, notEmpty, tapIf } from \"@milaboratories/helpers\";\nimport { getRawPlatformaInstance, type StorageHandle } from \"@platforma-sdk/model\";\nimport { computed, onMounted, reactive, ref, toRef, watch } from \"vue\";\nimport { PlDropdown } from \"../PlDropdown\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport Shortcuts from \"./Shortcuts.vue\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSearchField } from \"../PlSearchField\";\nimport style from \"./pl-file-dialog.module.scss\";\nimport { defaultData, useVisibleItems, vTextOverflown } from \"./remote-helpers\";\nimport { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from \"./utils\";\n\n// note that on a Mac, a click combined with the control key is intercepted by the operating system and used to open a context menu, so ctrlKey is not detectable on click events.\nconst isCtrlOrMeta = (ev: KeyboardEvent | MouseEvent) => ev.ctrlKey || ev.metaKey;\n\ndefineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean;\n    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']\n    multi?: boolean;\n    title?: string;\n    autoSelectStorage?: boolean;\n    submit: () => void;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n  },\n);\n\nconst data = reactive(defaultData());\n\nconst resetData = () => {\n  data.search = \"\";\n  data.error = \"\";\n  data.lastSelected = undefined;\n};\n\nconst extensions = computed(() => normalizeExtensions(props.extensions));\n\nconst visibleItems = useVisibleItems(data);\n\nconst lookup = computed(() => {\n  return {\n    modelValue: props.modelValue,\n    dirPath: data.dirPath,\n    storageHandle: data.storageEntry?.handle,\n  };\n});\n\nconst query = (storageHandle: StorageHandle, dirPath: string) => {\n  if (!getRawPlatformaInstance()) {\n    return;\n  }\n\n  if (data.currentLoadingPath === dirPath) {\n    return;\n  }\n\n  data.currentLoadingPath = dirPath;\n\n  getRawPlatformaInstance()\n    .lsDriver.listFiles(storageHandle, dirPath)\n    .then((res) => {\n      if (dirPath !== data.dirPath) {\n        return;\n      }\n\n      data.items = notEmpty(res)\n        .entries.map((item) => ({\n          path: item.fullPath,\n          name: item.name,\n          isDir: item.type === \"dir\",\n          canBeSelected:\n            item.type === \"file\" &&\n            (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),\n          handle: item.type === \"file\" ? item.handle : undefined,\n          selected: false,\n        }))\n        .sort((a, b) => {\n          if (a.isDir && !b.isDir) return -1;\n          if (!a.isDir && b.isDir) return 1;\n          // localeCompare for unicode alphabets\n          return a.name.localeCompare(b.name);\n        })\n        .map((it, id) => ({ id, ...it }));\n\n      data.lastSelected = undefined;\n    })\n    .catch((err) => (data.error = String(err)))\n    .finally(() => {\n      data.currentLoadingPath = undefined;\n    });\n};\n\nconst load = () => {\n  resetData();\n  const { storageHandle, dirPath, modelValue } = lookup.value;\n  if (storageHandle && modelValue) {\n    query(storageHandle, dirPath);\n  }\n};\n\nconst breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));\n\nconst selectedFiles = computed(() =>\n  data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir),\n);\n\nconst isReady = computed(() => selectedFiles.value.length > 0 && data.storageEntry?.handle);\n\nconst getFilesToImport = () => ({\n  storageHandle: notEmpty(data.storageEntry?.handle),\n  files: selectedFiles.value.map((f) => f.handle!),\n});\n\nconst setDirPath = (dirPath: string) => {\n  data.dirPath = dirPath;\n};\n\nconst selectFile = (ev: MouseEvent, file: FileDialogItem) => {\n  const { shiftKey } = ev;\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  const { lastSelected } = data;\n\n  ev.preventDefault();\n\n  const items = visibleItems.value;\n\n  if (file.canBeSelected) {\n    if (!props.multi) {\n      items.forEach((f) => (f.selected = false));\n    }\n\n    file.selected = !file.selected;\n\n    if (!props.multi) {\n      return;\n    }\n\n    if (!ctrlOrMetaKey && !shiftKey) {\n      items.forEach((f) => {\n        if (f.id !== file.id) {\n          f.selected = false;\n        }\n      });\n    }\n\n    if (shiftKey && lastSelected !== undefined) {\n      items.forEach((f) => {\n        if (between(f.id, lastSelected, file.id)) {\n          f.selected = true;\n        }\n      });\n    }\n\n    if (file.selected) {\n      data.lastSelected = file.id;\n    }\n  }\n};\n\nconst changeAll = (selected: boolean) => {\n  if (selected && !props.multi) {\n    return;\n  }\n\n  visibleItems.value\n    .filter((f) => f.canBeSelected)\n    .forEach((file) => {\n      file.selected = selected;\n    });\n};\n\nconst selectAll = () => changeAll(true);\n\nconst deselectAll = () => changeAll(false);\n\nconst loadAvailableStorages = () => {\n  resetData();\n  deselectAll();\n  if (!getRawPlatformaInstance()) {\n    console.warn(\"platforma API is not found\");\n    return;\n  }\n  getRawPlatformaInstance()\n    .lsDriver.getStorageList()\n    .then((storageEntries) => {\n      // local storage is always returned by the ML, so we need to remove it from remote dialog manually\n      storageEntries = storageEntries.filter(\n        (it) => it.name !== \"local\" && !it.name.startsWith(\"local_disk_\"),\n      );\n\n      data.storageOptions = storageEntries.map((it) => ({\n        text: it.name,\n        value: it,\n      }));\n\n      if (props.autoSelectStorage) {\n        tapIf(storageEntries[0], (entry) => {\n          data.storageEntry = entry;\n        });\n      }\n    })\n    .catch((err) => (data.error = String(err)));\n};\n\nwatch(\n  toRef(data, \"storageEntry\"),\n  (entry) => {\n    resetData();\n    data.dirPath = entry?.initialFullPath ?? \"\";\n  },\n  { immediate: true },\n);\n\nwatch([() => data.dirPath, () => data.storageEntry], () => {\n  load();\n});\n\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      loadAvailableStorages();\n    } else {\n      Object.assign(data, defaultData());\n    }\n  },\n  { immediate: true },\n);\n\nuseEventListener(document, \"keydown\", (ev: KeyboardEvent) => {\n  if (!props.modelValue) {\n    return;\n  }\n\n  if (ev.target !== document.body) {\n    return;\n  }\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  if (ctrlOrMetaKey && ev.code === \"KeyA\") {\n    ev.preventDefault();\n    selectAll();\n  }\n\n  if (ctrlOrMetaKey && ev.shiftKey && ev.code === \"Period\") {\n    ev.preventDefault();\n    data.showHiddenItems = !data.showHiddenItems;\n  }\n\n  if (ev.code === \"Enter\") {\n    props.submit();\n  }\n});\n\ndefineExpose({\n  isReady,\n  getFilesToImport,\n});\n\nonMounted(loadAvailableStorages);\n\nconst lsContainerRef = ref<HTMLElement | undefined>();\n</script>\n\n<template>\n  <div :class=\"style.remote\" @click.stop=\"deselectAll\">\n    <div :class=\"style.search\">\n      <div>\n        <PlDropdown\n          v-model=\"data.storageEntry\"\n          label=\"Select storage\"\n          :options=\"data.storageOptions\"\n        />\n      </div>\n      <div>\n        <PlSearchField v-model=\"data.search\" label=\"Search in folder\" clearable />\n      </div>\n    </div>\n    <div :class=\"style['ls-container']\" ref=\"lsContainerRef\">\n      <div :class=\"style['ls-head']\">\n        <div :class=\"style['breadcrumbs']\">\n          <template v-for=\"(s, i) in breadcrumbs\" :key=\"i\">\n            <div :title=\"s.path\" @click=\"setDirPath(s.path)\">{{ s.name }}</div>\n            <PlIcon16 v-if=\"s.index !== breadcrumbs.length - 1\" name=\"chevron-right\" />\n          </template>\n        </div>\n        <div :class=\"style.selected\">\n          <span>Selected: {{ selectedFiles.length }}</span>\n          <Shortcuts :container=\"lsContainerRef\" />\n        </div>\n      </div>\n      <div v-if=\"data.currentLoadingPath !== undefined\" class=\"ls-loader\">\n        <i class=\"mask-24 mask-loading loader-icon\" />\n      </div>\n      <div v-else-if=\"!data.storageEntry\" :class=\"style['ls-empty']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">Select storage to preview</div>\n      </div>\n      <div v-else-if=\"data.error\" :class=\"style['ls-error']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">{{ data.error }}</div>\n      </div>\n      <div v-else :class=\"style['ls-body']\">\n        <template v-for=\"file in visibleItems\" :key=\"file.id\">\n          <div v-if=\"file.isDir\" :class=\"style.isDir\" @click=\"setDirPath(file.path)\">\n            <PlIcon16 name=\"chevron-right\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n          <div\n            v-else\n            :class=\"{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }\"\n            @click.stop=\"(ev) => selectFile(ev, file)\"\n          >\n            <PlMaskIcon16 name=\"box\" :class=\"style.isFile\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Remote.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlFileDialog/Remote.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport type { ImportedFiles } from \"../../types\";\nimport { between, notEmpty, tapIf } from \"@milaboratories/helpers\";\nimport { getRawPlatformaInstance, type StorageHandle } from \"@platforma-sdk/model\";\nimport { computed, onMounted, reactive, ref, toRef, watch } from \"vue\";\nimport { PlDropdown } from \"../PlDropdown\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport Shortcuts from \"./Shortcuts.vue\";\nimport { PlMaskIcon16 } from \"../PlMaskIcon16\";\nimport { PlSearchField } from \"../PlSearchField\";\nimport style from \"./pl-file-dialog.module.scss\";\nimport { defaultData, useVisibleItems, vTextOverflown } from \"./remote-helpers\";\nimport { getFilePathBreadcrumbs, normalizeExtensions, type FileDialogItem } from \"./utils\";\n\n// note that on a Mac, a click combined with the control key is intercepted by the operating system and used to open a context menu, so ctrlKey is not detectable on click events.\nconst isCtrlOrMeta = (ev: KeyboardEvent | MouseEvent) => ev.ctrlKey || ev.metaKey;\n\ndefineEmits<{\n  (e: \"update:modelValue\", value: boolean): void;\n  (e: \"import:files\", value: ImportedFiles): void;\n}>();\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean;\n    extensions?: string[]; // with dot, like ['.fastq.gz', '.fastq']\n    multi?: boolean;\n    title?: string;\n    autoSelectStorage?: boolean;\n    submit: () => void;\n  }>(),\n  {\n    extensions: undefined,\n    title: undefined,\n    autoSelectStorage: true,\n  },\n);\n\nconst data = reactive(defaultData());\n\nconst resetData = () => {\n  data.search = \"\";\n  data.error = \"\";\n  data.lastSelected = undefined;\n};\n\nconst extensions = computed(() => normalizeExtensions(props.extensions));\n\nconst visibleItems = useVisibleItems(data);\n\nconst lookup = computed(() => {\n  return {\n    modelValue: props.modelValue,\n    dirPath: data.dirPath,\n    storageHandle: data.storageEntry?.handle,\n  };\n});\n\nconst query = (storageHandle: StorageHandle, dirPath: string) => {\n  if (!getRawPlatformaInstance()) {\n    return;\n  }\n\n  if (data.currentLoadingPath === dirPath) {\n    return;\n  }\n\n  data.currentLoadingPath = dirPath;\n\n  getRawPlatformaInstance()\n    .lsDriver.listFiles(storageHandle, dirPath)\n    .then((res) => {\n      if (dirPath !== data.dirPath) {\n        return;\n      }\n\n      data.items = notEmpty(res)\n        .entries.map((item) => ({\n          path: item.fullPath,\n          name: item.name,\n          isDir: item.type === \"dir\",\n          canBeSelected:\n            item.type === \"file\" &&\n            (!extensions.value || extensions.value.some((ext) => item.fullPath.endsWith(ext))),\n          handle: item.type === \"file\" ? item.handle : undefined,\n          selected: false,\n        }))\n        .sort((a, b) => {\n          if (a.isDir && !b.isDir) return -1;\n          if (!a.isDir && b.isDir) return 1;\n          // localeCompare for unicode alphabets\n          return a.name.localeCompare(b.name);\n        })\n        .map((it, id) => ({ id, ...it }));\n\n      data.lastSelected = undefined;\n    })\n    .catch((err) => (data.error = String(err)))\n    .finally(() => {\n      data.currentLoadingPath = undefined;\n    });\n};\n\nconst load = () => {\n  resetData();\n  const { storageHandle, dirPath, modelValue } = lookup.value;\n  if (storageHandle && modelValue) {\n    query(storageHandle, dirPath);\n  }\n};\n\nconst breadcrumbs = computed(() => getFilePathBreadcrumbs(data.dirPath));\n\nconst selectedFiles = computed(() =>\n  data.items.filter((f) => f.canBeSelected && f.selected && !f.isDir),\n);\n\nconst isReady = computed(() => selectedFiles.value.length > 0 && data.storageEntry?.handle);\n\nconst getFilesToImport = () => ({\n  storageHandle: notEmpty(data.storageEntry?.handle),\n  files: selectedFiles.value.map((f) => f.handle!),\n});\n\nconst setDirPath = (dirPath: string) => {\n  data.dirPath = dirPath;\n};\n\nconst selectFile = (ev: MouseEvent, file: FileDialogItem) => {\n  const { shiftKey } = ev;\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  const { lastSelected } = data;\n\n  ev.preventDefault();\n\n  const items = visibleItems.value;\n\n  if (file.canBeSelected) {\n    if (!props.multi) {\n      items.forEach((f) => (f.selected = false));\n    }\n\n    file.selected = !file.selected;\n\n    if (!props.multi) {\n      return;\n    }\n\n    if (!ctrlOrMetaKey && !shiftKey) {\n      items.forEach((f) => {\n        if (f.id !== file.id) {\n          f.selected = false;\n        }\n      });\n    }\n\n    if (shiftKey && lastSelected !== undefined) {\n      items.forEach((f) => {\n        if (between(f.id, lastSelected, file.id)) {\n          f.selected = true;\n        }\n      });\n    }\n\n    if (file.selected) {\n      data.lastSelected = file.id;\n    }\n  }\n};\n\nconst changeAll = (selected: boolean) => {\n  if (selected && !props.multi) {\n    return;\n  }\n\n  visibleItems.value\n    .filter((f) => f.canBeSelected)\n    .forEach((file) => {\n      file.selected = selected;\n    });\n};\n\nconst selectAll = () => changeAll(true);\n\nconst deselectAll = () => changeAll(false);\n\nconst loadAvailableStorages = () => {\n  resetData();\n  deselectAll();\n  if (!getRawPlatformaInstance()) {\n    console.warn(\"platforma API is not found\");\n    return;\n  }\n  getRawPlatformaInstance()\n    .lsDriver.getStorageList()\n    .then((storageEntries) => {\n      // local storage is always returned by the ML, so we need to remove it from remote dialog manually\n      storageEntries = storageEntries.filter(\n        (it) => it.name !== \"local\" && !it.name.startsWith(\"local_disk_\"),\n      );\n\n      data.storageOptions = storageEntries.map((it) => ({\n        text: it.name,\n        value: it,\n      }));\n\n      if (props.autoSelectStorage) {\n        tapIf(storageEntries[0], (entry) => {\n          data.storageEntry = entry;\n        });\n      }\n    })\n    .catch((err) => (data.error = String(err)));\n};\n\nwatch(\n  toRef(data, \"storageEntry\"),\n  (entry) => {\n    resetData();\n    data.dirPath = entry?.initialFullPath ?? \"\";\n  },\n  { immediate: true },\n);\n\nwatch([() => data.dirPath, () => data.storageEntry], () => {\n  load();\n});\n\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      loadAvailableStorages();\n    } else {\n      Object.assign(data, defaultData());\n    }\n  },\n  { immediate: true },\n);\n\nuseEventListener(document, \"keydown\", (ev: KeyboardEvent) => {\n  if (!props.modelValue) {\n    return;\n  }\n\n  if (ev.target !== document.body) {\n    return;\n  }\n\n  const ctrlOrMetaKey = isCtrlOrMeta(ev);\n\n  if (ctrlOrMetaKey && ev.code === \"KeyA\") {\n    ev.preventDefault();\n    selectAll();\n  }\n\n  if (ctrlOrMetaKey && ev.shiftKey && ev.code === \"Period\") {\n    ev.preventDefault();\n    data.showHiddenItems = !data.showHiddenItems;\n  }\n\n  if (ev.code === \"Enter\") {\n    props.submit();\n  }\n});\n\ndefineExpose({\n  isReady,\n  getFilesToImport,\n});\n\nonMounted(loadAvailableStorages);\n\nconst lsContainerRef = ref<HTMLElement | undefined>();\n</script>\n\n<template>\n  <div :class=\"style.remote\" @click.stop=\"deselectAll\">\n    <div :class=\"style.search\">\n      <div>\n        <PlDropdown\n          v-model=\"data.storageEntry\"\n          label=\"Select storage\"\n          :options=\"data.storageOptions\"\n        />\n      </div>\n      <div>\n        <PlSearchField v-model=\"data.search\" label=\"Search in folder\" clearable />\n      </div>\n    </div>\n    <div :class=\"style['ls-container']\" ref=\"lsContainerRef\">\n      <div :class=\"style['ls-head']\">\n        <div :class=\"style['breadcrumbs']\">\n          <template v-for=\"(s, i) in breadcrumbs\" :key=\"i\">\n            <div :title=\"s.path\" @click=\"setDirPath(s.path)\">{{ s.name }}</div>\n            <PlIcon16 v-if=\"s.index !== breadcrumbs.length - 1\" name=\"chevron-right\" />\n          </template>\n        </div>\n        <div :class=\"style.selected\">\n          <span>Selected: {{ selectedFiles.length }}</span>\n          <Shortcuts :container=\"lsContainerRef\" />\n        </div>\n      </div>\n      <div v-if=\"data.currentLoadingPath !== undefined\" class=\"ls-loader\">\n        <i class=\"mask-24 mask-loading loader-icon\" />\n      </div>\n      <div v-else-if=\"!data.storageEntry\" :class=\"style['ls-empty']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">Select storage to preview</div>\n      </div>\n      <div v-else-if=\"data.error\" :class=\"style['ls-error']\">\n        <div :class=\"style.cat\" />\n        <div :class=\"style.message\">{{ data.error }}</div>\n      </div>\n      <div v-else :class=\"style['ls-body']\">\n        <template v-for=\"file in visibleItems\" :key=\"file.id\">\n          <div v-if=\"file.isDir\" :class=\"style.isDir\" @click=\"setDirPath(file.path)\">\n            <PlIcon16 name=\"chevron-right\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n          <div\n            v-else\n            :class=\"{ [style.canBeSelected]: file.canBeSelected, [style.selected]: file.selected }\"\n            @click.stop=\"(ev) => selectFile(ev, file)\"\n          >\n            <PlMaskIcon16 name=\"box\" :class=\"style.isFile\" />\n            <span v-text-overflown :title=\"file.name\">{{ file.name }}</span>\n          </div>\n        </template>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlFileDialog/Shortcuts.vue2.js

@@ -1,4 +1,5 @@
 import e from "../PlTooltip/PlTooltip.js";
+import "../PlTooltip/index.js";
 import { createBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, unref as o, withCtx as s } from "vue";
 var c = /* @__PURE__ */ r({
 	__name: "Shortcuts",