@milaboratories/uikit 2.16.0 → 2.16.2

package/dist/components/PlConfirmDialog.vue2.js

@@ -5,8 +5,8 @@ import "./PlBtnSecondary/index.js";
 import n from "./PlDialogModal/PlDialogModal.js";
 import "./PlDialogModal/index.js";
 import { createBlock as r, createTextVNode as i, createVNode as a, defineComponent as o, openBlock as s, toDisplayString as c, unref as l, withCtx as u, withModifiers as d } from "vue";
-//#region src/components/PlConfirmDialog.vue?vue&type=script&setup=true&lang.ts
-var f = /* @__PURE__ */ o({
+// src/components/PlConfirmDialog.vue?vue&type=script&setup=true&lang.ts
+var f = /*@__PURE__*/ o({
 	__name: "PlConfirmDialog",
 	props: {
 		opened: {
@@ -59,7 +59,6 @@ var f = /* @__PURE__ */ o({
 		}, 8, ["modelValue"]));
 	}
 });
-//#endregion
 export { f as default };
 
 //# sourceMappingURL=PlConfirmDialog.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlConfirmDialog.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/components/PlConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlBtnPrimary } from \"./PlBtnPrimary\";\nimport { PlBtnSecondary } from \"./PlBtnSecondary\";\nimport { PlDialogModal } from \"./PlDialogModal\";\n\nconst props = withDefaults(\n  defineProps<{\n    opened?: boolean;\n    title: string;\n    message: string;\n    confirmLabel: string;\n    cancelLabel: string;\n    onConfirm?: () => void;\n    onCancel?: () => void;\n  }>(),\n  {\n    opened: true,\n    onCancel: undefined,\n    onConfirm: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  confirm: [];\n  cancel: [];\n}>();\n\nconst handleConfirm = () => {\n  emits(\"confirm\");\n  props.onConfirm?.();\n};\n\nconst handleCancel = () => {\n  emits(\"cancel\");\n  props.onCancel?.();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    data-testid=\"pl-confirm-dialog\"\n    v-model=\"props.opened\"\n    :closable=\"false\"\n    @click.stop\n  >\n    <template #title>\n      {{ title }}\n    </template>\n    <template #default>\n      {{ message }}\n    </template>\n    <template #actions>\n      <PlBtnPrimary data-testid=\"pl-confirm-dialog-confirm\" @click.stop=\"handleConfirm\">\n        {{ props.confirmLabel }}\n      </PlBtnPrimary>\n      <PlBtnSecondary data-testid=\"pl-confirm-dialog-cancel\" @click.stop=\"handleCancel\">\n        {{ props.cancelLabel }}\n      </PlBtnSecondary>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAM,IAAQ,GAiBR,IAAQ,GAKR,UAAsB;AAE1B,GADA,EAAM,UAAU,EAChB,EAAM,aAAa;KAGf,UAAqB;AAEzB,GADA,EAAM,SAAS,EACf,EAAM,YAAY;;yBAKlB,EAoBgB,EAAA,EAAA,EAAA;GAnBd,eAAY;eACH,EAAM;4CAAA,SAAM;GACpB,UAAU;GACV,SAAK,AAAA,EAAA,OAAA,QAAN,IAAW,CAAA,OAAA,CAAA;;GAEA,OAAK,QACH,CAAA,EAAA,EAAR,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA;GAEC,SAAO,QACH,CAAA,EAAA,EAAV,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA;GAED,SAAO,QAGD,CAFf,EAEe,EAAA,EAAA,EAAA;IAFD,eAAY;IAA6B,SAAK,EAAO,GAAa,CAAA,OAAA,CAAA;;qBACtD,CAAA,EAAA,EAArB,EAAM,aAAY,EAAA,EAAA,CAAA,CAAA;;OAEvB,EAEiB,EAAA,EAAA,EAAA;IAFD,eAAY;IAA4B,SAAK,EAAO,GAAY,CAAA,OAAA,CAAA;;qBACvD,CAAA,EAAA,EAApB,EAAM,YAAW,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"PlConfirmDialog.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","PlDialogModal","_withModifiers","_withCtx","_createTextVNode","_toDisplayString","_createVNode","PlBtnPrimary","PlBtnSecondary","PlBtnSecondary_default","PlBtnPrimary_default","PlDialogModal_default","PlConfirmDialog_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emits","handleConfirm","handleCancel","openBlock","createBlock","unref","_cache","$event","withModifiers","withCtx","createTextVNode","toDisplayString","createVNode"],"sources":["../../src/components/PlConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { PlBtnPrimary } from \"./PlBtnPrimary\";\nimport { PlBtnSecondary } from \"./PlBtnSecondary\";\nimport { PlDialogModal } from \"./PlDialogModal\";\n\nconst props = withDefaults(\n  defineProps<{\n    opened?: boolean;\n    title: string;\n    message: string;\n    confirmLabel: string;\n    cancelLabel: string;\n    onConfirm?: () => void;\n    onCancel?: () => void;\n  }>(),\n  {\n    opened: true,\n    onCancel: undefined,\n    onConfirm: undefined,\n  },\n);\n\nconst emits = defineEmits<{\n  confirm: [];\n  cancel: [];\n}>();\n\nconst handleConfirm = () => {\n  emits(\"confirm\");\n  props.onConfirm?.();\n};\n\nconst handleCancel = () => {\n  emits(\"cancel\");\n  props.onCancel?.();\n};\n</script>\n\n<template>\n  <PlDialogModal\n    data-testid=\"pl-confirm-dialog\"\n    v-model=\"props.opened\"\n    :closable=\"false\"\n    @click.stop\n  >\n    <template #title>\n      {{ title }}\n    </template>\n    <template #default>\n      {{ message }}\n    </template>\n    <template #actions>\n      <PlBtnPrimary data-testid=\"pl-confirm-dialog-confirm\" @click.stop=\"handleConfirm\">\n        {{ props.confirmLabel }}\n      </PlBtnPrimary>\n      <PlBtnSecondary data-testid=\"pl-confirm-dialog-cancel\" @click.stop=\"handleCancel\">\n        {{ props.cancelLabel }}\n      </PlBtnSecondary>\n    </template>\n  </PlDialogModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMgB,IAAQC,GAiBRC,IAAQH,GAKRI,UAAsB;GAE1B,AADAD,EAAM,SAAS,GACfF,EAAM,YAAY;EACpB,GAEMI,UAAqB;GAEzB,AADAF,EAAM,QAAQ,GACdF,EAAM,WAAW;EACnB;E,kBAIEhB,EAAA,GAAAC,EAoBgBC,EAAAC,CAAA,GAAA;GAnBd,eAAY;GACH,YAAAa,EAAM;GAAN,uBAAA,AAAAQ,EAAA,QAAA,MAAA,EAAM,SAAMC;GACpB,UAAU;GACV,SAAK,AAAAD,EAAA,OAAApB,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;GAEA,OAAKC,QACH,CAARC,EAAAC,EAAAU,EAAA,KAAK,GAAA,CAAA,C;GAEC,SAAOZ,QACH,CAAVC,EAAAC,EAAAU,EAAA,OAAO,GAAA,CAAA,C;GAED,SAAOZ,QAGD,CAFfG,EAEeN,EAAAO,CAAA,GAAA;IAFD,eAAY;IAA6B,SAAKL,EAAOe,GAAa,CAAA,MAAA,CAAA;;IAC9E,SAAAd,QAAwB,CAArBC,EAAAC,EAAAS,EAAM,YAAY,GAAA,CAAA,C;;G,IAEvBR,EAEiBN,EAAAQ,CAAA,GAAA;IAFD,eAAY;IAA4B,SAAKN,EAAOgB,GAAY,CAAA,MAAA,CAAA;;IAC9E,SAAAf,QAAuB,CAApBC,EAAAC,EAAAS,EAAM,WAAW,GAAA,CAAA,C"}

package/dist/components/PlDialogModal/PlDialogModal.js

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

package/dist/components/PlDialogModal/PlDialogModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDialogModal.js","names":[],"sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport \"./pl-dialog-modal.scss\";\nimport { computed, ref } from \"vue\";\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\nimport type { Size } from \"../../types\";\n\nconst slots = defineSlots<{\n  title?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Determines whether the modal is open\n     */\n    modelValue: boolean;\n    /**\n     * css width (default value is `448px`)\n     */\n    width?: string;\n    /**\n     * css height (default value is `auto`)\n     */\n    height?: string;\n    /**\n     * css min-height (default value is `auto`)\n     */\n    minHeight?: string;\n    /**\n     * css min-height (default value is `auto` but recommended is 440px)\n     */\n    maxHeight?: string;\n    /**\n     * Enables a button to close the modal (default: `true`)\n     */\n    closable?: boolean;\n    /**\n     * If `true` content gutters are removed\n     */\n    noContentGutters?: boolean;\n    /**\n     * If `true` top content gutter is removed\n     */\n    noTopContentGutter?: boolean;\n    /**\n     * Actions slot has a top border (default: `true`)\n     */\n    actionsHasTopBorder?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.\n     */\n    size?: Size | undefined;\n  }>(),\n  {\n    width: \"448px\",\n    minHeight: \"auto\",\n    maxHeight: \"auto\",\n    height: \"auto\",\n    closable: true,\n    noContentGutters: false,\n    actionsHasTopBorder: true,\n    closeOnOutsideClick: true,\n    size: undefined,\n  },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n  const { width, height, minHeight, maxHeight, size } = props;\n\n  if (size === \"small\") {\n    return {\n      width: \"448px\",\n      height: \"440px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"medium\") {\n    return {\n      width: \"720px\",\n      height: \"720px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"large\") {\n    return {\n      width: \"1080px\",\n      height: \"880px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n  if (\n    modal.value &&\n    props.closeOnOutsideClick &&\n    document.contains(ev.target as Node) &&\n    !modal.value.contains(ev.target as Node)\n  ) {\n    emit(\"update:modelValue\", false);\n  }\n}\n\nuseEventListener(document.body, \"keyup\", (ev) => {\n  if (props.modelValue && ev.code === \"Escape\") {\n    emit(\"update:modelValue\", false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dialog\">\n      <div\n        v-if=\"modelValue\"\n        data-testid=\"pl-dialog-modal-shadow\"\n        class=\"pl-dialog-modal__shadow\"\n        @click=\"onClickShadow\"\n      >\n        <div\n          data-testid=\"pl-dialog-modal\"\n          v-bind=\"$attrs\"\n          ref=\"modal\"\n          class=\"pl-dialog-modal\"\n          :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n          :style=\"style\"\n        >\n          <PlCloseModalBtn\n            v-if=\"closable\"\n            data-testid=\"pl-dialog-modal-close\"\n            class=\"close-modal-btn\"\n            @click.stop=\"emit('update:modelValue', false)\"\n          />\n          <div\n            v-if=\"slots.title\"\n            data-testid=\"pl-dialog-modal-title\"\n            class=\"pl-dialog-modal__title\"\n          >\n            <slot name=\"title\" />\n          </div>\n          <div\n            data-testid=\"pl-dialog-modal-content\"\n            class=\"pl-dialog-modal__content\"\n            :class=\"{\n              'no-content-gutters': noContentGutters,\n              'no-top-content-gutter': noTopContentGutter,\n            }\"\n          >\n            <slot />\n          </div>\n          <div\n            v-if=\"slots.actions\"\n            data-testid=\"pl-dialog-modal-actions\"\n            class=\"pl-dialog-modal__actions\"\n            :class=\"{ 'has-top-border': actionsHasTopBorder }\"\n          >\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlDialogModal.js","names":["_sfc_main","PlDialogModal_vue_vue_type_script_setup_true_lang_default","PlDialogModal_default"],"sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport \"./pl-dialog-modal.scss\";\nimport { computed, ref } from \"vue\";\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\nimport type { Size } from \"../../types\";\n\nconst slots = defineSlots<{\n  title?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Determines whether the modal is open\n     */\n    modelValue: boolean;\n    /**\n     * css width (default value is `448px`)\n     */\n    width?: string;\n    /**\n     * css height (default value is `auto`)\n     */\n    height?: string;\n    /**\n     * css min-height (default value is `auto`)\n     */\n    minHeight?: string;\n    /**\n     * css min-height (default value is `auto` but recommended is 440px)\n     */\n    maxHeight?: string;\n    /**\n     * Enables a button to close the modal (default: `true`)\n     */\n    closable?: boolean;\n    /**\n     * If `true` content gutters are removed\n     */\n    noContentGutters?: boolean;\n    /**\n     * If `true` top content gutter is removed\n     */\n    noTopContentGutter?: boolean;\n    /**\n     * Actions slot has a top border (default: `true`)\n     */\n    actionsHasTopBorder?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.\n     */\n    size?: Size | undefined;\n  }>(),\n  {\n    width: \"448px\",\n    minHeight: \"auto\",\n    maxHeight: \"auto\",\n    height: \"auto\",\n    closable: true,\n    noContentGutters: false,\n    actionsHasTopBorder: true,\n    closeOnOutsideClick: true,\n    size: undefined,\n  },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n  const { width, height, minHeight, maxHeight, size } = props;\n\n  if (size === \"small\") {\n    return {\n      width: \"448px\",\n      height: \"440px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"medium\") {\n    return {\n      width: \"720px\",\n      height: \"720px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"large\") {\n    return {\n      width: \"1080px\",\n      height: \"880px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n  if (\n    modal.value &&\n    props.closeOnOutsideClick &&\n    document.contains(ev.target as Node) &&\n    !modal.value.contains(ev.target as Node)\n  ) {\n    emit(\"update:modelValue\", false);\n  }\n}\n\nuseEventListener(document.body, \"keyup\", (ev) => {\n  if (props.modelValue && ev.code === \"Escape\") {\n    emit(\"update:modelValue\", false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dialog\">\n      <div\n        v-if=\"modelValue\"\n        data-testid=\"pl-dialog-modal-shadow\"\n        class=\"pl-dialog-modal__shadow\"\n        @click=\"onClickShadow\"\n      >\n        <div\n          data-testid=\"pl-dialog-modal\"\n          v-bind=\"$attrs\"\n          ref=\"modal\"\n          class=\"pl-dialog-modal\"\n          :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n          :style=\"style\"\n        >\n          <PlCloseModalBtn\n            v-if=\"closable\"\n            data-testid=\"pl-dialog-modal-close\"\n            class=\"close-modal-btn\"\n            @click.stop=\"emit('update:modelValue', false)\"\n          />\n          <div\n            v-if=\"slots.title\"\n            data-testid=\"pl-dialog-modal-title\"\n            class=\"pl-dialog-modal__title\"\n          >\n            <slot name=\"title\" />\n          </div>\n          <div\n            data-testid=\"pl-dialog-modal-content\"\n            class=\"pl-dialog-modal__content\"\n            :class=\"{\n              'no-content-gutters': noContentGutters,\n              'no-top-content-gutter': noTopContentGutter,\n            }\"\n          >\n            <slot />\n          </div>\n          <div\n            v-if=\"slots.actions\"\n            data-testid=\"pl-dialog-modal-actions\"\n            class=\"pl-dialog-modal__actions\"\n            :class=\"{ 'has-top-border': actionsHasTopBorder }\"\n          >\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/PlDialogModal/PlDialogModal.vue2.js

@@ -2,12 +2,12 @@ import { useEventListener as e } from "../../composition/useEventListener.js";
 import t from "../../utils/PlCloseModalBtn.js";
 import './pl-dialog-modal.css';/* empty css                */
 import { Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, ref as m, renderSlot as h, useSlots as g, withCtx as _, withModifiers as v } from "vue";
-//#region src/components/PlDialogModal/PlDialogModal.vue?vue&type=script&setup=true&lang.ts
+// src/components/PlDialogModal/PlDialogModal.vue?vue&type=script&setup=true&lang.ts
 var y = {
 	key: 1,
 	"data-testid": "pl-dialog-modal-title",
 	class: "pl-dialog-modal__title"
-}, b = /* @__PURE__ */ u({
+}, b = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "PlDialogModal",
 	props: {
@@ -105,7 +105,6 @@ var y = {
 		})]));
 	}
 });
-//#endregion
 export { b as default };
 
 //# sourceMappingURL=PlDialogModal.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlDialogModal.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport \"./pl-dialog-modal.scss\";\nimport { computed, ref } from \"vue\";\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\nimport type { Size } from \"../../types\";\n\nconst slots = defineSlots<{\n  title?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Determines whether the modal is open\n     */\n    modelValue: boolean;\n    /**\n     * css width (default value is `448px`)\n     */\n    width?: string;\n    /**\n     * css height (default value is `auto`)\n     */\n    height?: string;\n    /**\n     * css min-height (default value is `auto`)\n     */\n    minHeight?: string;\n    /**\n     * css min-height (default value is `auto` but recommended is 440px)\n     */\n    maxHeight?: string;\n    /**\n     * Enables a button to close the modal (default: `true`)\n     */\n    closable?: boolean;\n    /**\n     * If `true` content gutters are removed\n     */\n    noContentGutters?: boolean;\n    /**\n     * If `true` top content gutter is removed\n     */\n    noTopContentGutter?: boolean;\n    /**\n     * Actions slot has a top border (default: `true`)\n     */\n    actionsHasTopBorder?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.\n     */\n    size?: Size | undefined;\n  }>(),\n  {\n    width: \"448px\",\n    minHeight: \"auto\",\n    maxHeight: \"auto\",\n    height: \"auto\",\n    closable: true,\n    noContentGutters: false,\n    actionsHasTopBorder: true,\n    closeOnOutsideClick: true,\n    size: undefined,\n  },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n  const { width, height, minHeight, maxHeight, size } = props;\n\n  if (size === \"small\") {\n    return {\n      width: \"448px\",\n      height: \"440px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"medium\") {\n    return {\n      width: \"720px\",\n      height: \"720px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"large\") {\n    return {\n      width: \"1080px\",\n      height: \"880px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n  if (\n    modal.value &&\n    props.closeOnOutsideClick &&\n    document.contains(ev.target as Node) &&\n    !modal.value.contains(ev.target as Node)\n  ) {\n    emit(\"update:modelValue\", false);\n  }\n}\n\nuseEventListener(document.body, \"keyup\", (ev) => {\n  if (props.modelValue && ev.code === \"Escape\") {\n    emit(\"update:modelValue\", false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dialog\">\n      <div\n        v-if=\"modelValue\"\n        data-testid=\"pl-dialog-modal-shadow\"\n        class=\"pl-dialog-modal__shadow\"\n        @click=\"onClickShadow\"\n      >\n        <div\n          data-testid=\"pl-dialog-modal\"\n          v-bind=\"$attrs\"\n          ref=\"modal\"\n          class=\"pl-dialog-modal\"\n          :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n          :style=\"style\"\n        >\n          <PlCloseModalBtn\n            v-if=\"closable\"\n            data-testid=\"pl-dialog-modal-close\"\n            class=\"close-modal-btn\"\n            @click.stop=\"emit('update:modelValue', false)\"\n          />\n          <div\n            v-if=\"slots.title\"\n            data-testid=\"pl-dialog-modal-title\"\n            class=\"pl-dialog-modal__title\"\n          >\n            <slot name=\"title\" />\n          </div>\n          <div\n            data-testid=\"pl-dialog-modal-content\"\n            class=\"pl-dialog-modal__content\"\n            :class=\"{\n              'no-content-gutters': noContentGutters,\n              'no-top-content-gutter': noTopContentGutter,\n            }\"\n          >\n            <slot />\n          </div>\n          <div\n            v-if=\"slots.actions\"\n            data-testid=\"pl-dialog-modal-actions\"\n            class=\"pl-dialog-modal__actions\"\n            :class=\"{ 'has-top-border': actionsHasTopBorder }\"\n          >\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;CAEE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWhB,IAAM,IAAQ,GAIV,EAEE,IAAO,GAEP,IAAQ,GA4DR,IAAQ,GAAkB,EAE1B,IAAQ,QAAe;GAC3B,IAAM,EAAE,UAAO,WAAQ,cAAW,cAAW,YAAS;AA6BtD,UA3BI,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGC,MAAS,WACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGC,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;IACZ,GAGI;IAAE;IAAO;IAAQ;IAAW;IAAW;IAC9C;EAEF,SAAS,EAAc,GAAW;AAChC,GACE,EAAM,SACN,EAAM,uBACN,SAAS,SAAS,EAAG,OAAe,IACpC,CAAC,EAAM,MAAM,SAAS,EAAG,OAAc,IAEvC,EAAK,qBAAqB,GAAM;;SAIpC,EAAiB,SAAS,MAAM,UAAU,MAAO;AAC/C,GAAI,EAAM,cAAc,EAAG,SAAS,YAClC,EAAK,qBAAqB,GAAM;IAElC,kBAIA,EAkDW,GAAA,EAlDD,IAAG,QAAM,EAAA,CACjB,EAgDa,GAAA,EAhDD,MAAK,UAAQ,EAAA;oBA+CjB,CA7CE,EAAA,cAAA,GAAA,EADR,EA8CM,OAAA;;IA5CJ,eAAY;IACZ,OAAM;IACL,SAAO;OAER,EAuCM,OAvCN,EAuCM,EAtCJ,eAAY,mBAAiB,EACrBA,EAAAA,QAAM;aACV;IAAJ,KAAI;IACJ,OAAK,CAAC,mBAAiB;KAAA,aACA,EAAM;KAAK,eAAiB,EAAM;KAAO,CAAA;IAC/D,OAAO,EAAA;;IAGA,EAAA,YAAA,GAAA,EADR,EAKE,GAAA;;KAHA,eAAY;KACZ,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,EAAI,qBAAA,GAAA,EAAA,CAAA,OAAA,CAAA;;IAGX,EAAM,SAAA,GAAA,EADd,EAMM,OANN,GAMM,CADJ,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAEvB,EASM,OAAA;KARJ,eAAY;KACZ,OAAK,EAAA,CAAC,4BAA0B;4BACc,EAAA;+BAAyD,EAAA;;QAKvG,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA;IAGF,EAAM,WAAA,GAAA,EADd,EAOM,OAAA;;KALJ,eAAY;KACZ,OAAK,EAAA,CAAC,4BAA0B,EAAA,kBACJ,EAAA,qBAAmB,CAAA,CAAA;QAE/C,EAAuB,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"PlDialogModal.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createBlock","_Teleport","_createVNode","_Transition","_withCtx","_createElementBlock","_createElementVNode","_mergeProps","PlCloseModalBtn","_withModifiers","_createCommentVNode","_renderSlot","_normalizeClass","PlCloseModalBtn_default","_hoisted_1","PlDialogModal_vue_vue_type_script_setup_true_lang_default","__emit","slots","useSlots","emit","props","__props","modal","ref","style","computed","size","onClickShadow","ev","useEventListener","openBlock","createBlock","Teleport","createVNode","Transition","withCtx","createElementBlock","createElementVNode","mergeProps","_ctx","_cache","withModifiers","createCommentVNode","renderSlot","normalizeClass"],"sources":["../../../src/components/PlDialogModal/PlDialogModal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { useEventListener } from \"../../composition/useEventListener\";\nimport \"./pl-dialog-modal.scss\";\nimport { computed, ref } from \"vue\";\nimport PlCloseModalBtn from \"../../utils/PlCloseModalBtn.vue\";\nimport type { Size } from \"../../types\";\n\nconst slots = defineSlots<{\n  title?: () => unknown;\n  default?: () => unknown;\n  actions?: () => unknown;\n}>();\n\nconst emit = defineEmits([\"update:modelValue\"]);\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Determines whether the modal is open\n     */\n    modelValue: boolean;\n    /**\n     * css width (default value is `448px`)\n     */\n    width?: string;\n    /**\n     * css height (default value is `auto`)\n     */\n    height?: string;\n    /**\n     * css min-height (default value is `auto`)\n     */\n    minHeight?: string;\n    /**\n     * css min-height (default value is `auto` but recommended is 440px)\n     */\n    maxHeight?: string;\n    /**\n     * Enables a button to close the modal (default: `true`)\n     */\n    closable?: boolean;\n    /**\n     * If `true` content gutters are removed\n     */\n    noContentGutters?: boolean;\n    /**\n     * If `true` top content gutter is removed\n     */\n    noTopContentGutter?: boolean;\n    /**\n     * Actions slot has a top border (default: `true`)\n     */\n    actionsHasTopBorder?: boolean;\n    /**\n     * If `true`, the modal window closes when clicking outside the modal area (default: `true`)\n     */\n    closeOnOutsideClick?: boolean;\n    /**\n     * Predefined size (standard small | medium | large). Takes precedence over (min|max)(width|height) properties. Not defined by default.\n     */\n    size?: Size | undefined;\n  }>(),\n  {\n    width: \"448px\",\n    minHeight: \"auto\",\n    maxHeight: \"auto\",\n    height: \"auto\",\n    closable: true,\n    noContentGutters: false,\n    actionsHasTopBorder: true,\n    closeOnOutsideClick: true,\n    size: undefined,\n  },\n);\n\nconst modal = ref<HTMLElement>();\n\nconst style = computed(() => {\n  const { width, height, minHeight, maxHeight, size } = props;\n\n  if (size === \"small\") {\n    return {\n      width: \"448px\",\n      height: \"440px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"medium\") {\n    return {\n      width: \"720px\",\n      height: \"720px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  if (size === \"large\") {\n    return {\n      width: \"1080px\",\n      height: \"880px\",\n      minHeight: \"auto\",\n      maxHeight: \"auto\",\n    };\n  }\n\n  return { width, height, minHeight, maxHeight };\n});\n\nfunction onClickShadow(ev: Event) {\n  if (\n    modal.value &&\n    props.closeOnOutsideClick &&\n    document.contains(ev.target as Node) &&\n    !modal.value.contains(ev.target as Node)\n  ) {\n    emit(\"update:modelValue\", false);\n  }\n}\n\nuseEventListener(document.body, \"keyup\", (ev) => {\n  if (props.modelValue && ev.code === \"Escape\") {\n    emit(\"update:modelValue\", false);\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"dialog\">\n      <div\n        v-if=\"modelValue\"\n        data-testid=\"pl-dialog-modal-shadow\"\n        class=\"pl-dialog-modal__shadow\"\n        @click=\"onClickShadow\"\n      >\n        <div\n          data-testid=\"pl-dialog-modal\"\n          v-bind=\"$attrs\"\n          ref=\"modal\"\n          class=\"pl-dialog-modal\"\n          :class=\"{ 'has-title': slots.title, 'has-content': slots.default }\"\n          :style=\"style\"\n        >\n          <PlCloseModalBtn\n            v-if=\"closable\"\n            data-testid=\"pl-dialog-modal-close\"\n            class=\"close-modal-btn\"\n            @click.stop=\"emit('update:modelValue', false)\"\n          />\n          <div\n            v-if=\"slots.title\"\n            data-testid=\"pl-dialog-modal-title\"\n            class=\"pl-dialog-modal__title\"\n          >\n            <slot name=\"title\" />\n          </div>\n          <div\n            data-testid=\"pl-dialog-modal-content\"\n            class=\"pl-dialog-modal__content\"\n            :class=\"{\n              'no-content-gutters': noContentGutters,\n              'no-top-content-gutter': noTopContentGutter,\n            }\"\n          >\n            <slot />\n          </div>\n          <div\n            v-if=\"slots.actions\"\n            data-testid=\"pl-dialog-modal-actions\"\n            class=\"pl-dialog-modal__actions\"\n            :class=\"{ 'has-top-border': actionsHasTopBorder }\"\n          >\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;CAEE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWhB,IAAMoB,IAAQnB,EAAA,GAMRqB,IAAOH,GAEPI,IAAQC,GA4DRC,IAAQC,EAAiB,GAEzBC,IAAQC,QAAe;GAC3B,IAAM,EAAE,UAAO,WAAQ,cAAW,cAAW,YAASL;GA6BtD,OA3BIM,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;GACb,IAGEA,MAAS,WACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;GACb,IAGEA,MAAS,UACJ;IACL,OAAO;IACP,QAAQ;IACR,WAAW;IACX,WAAW;GACb,IAGK;IAAE;IAAO;IAAQ;IAAW;GAAU;EAC/C,CAAC;EAED,SAASC,EAAc,GAAW;GAChC,AACEL,EAAM,SACNF,EAAM,uBACN,SAAS,SAASQ,EAAG,MAAc,KACnC,CAACN,EAAM,MAAM,SAASM,EAAG,MAAc,KAEvCT,EAAK,qBAAqB,EAAK;EAEnC;E,OAEAU,EAAiB,SAAS,MAAM,UAAU,MAAO;GAC/C,AAAIT,EAAM,cAAcQ,EAAG,SAAS,YAClCT,EAAK,qBAAqB,EAAK;EAEnC,CAAC,I,UAICpB,EAAA,GAAAC,EAkDWC,GAAA,EAlDD,IAAG,OAAM,GAAA,CACjBC,EAgDaC,GAAA,EAhDD,MAAK,SAAQ,GAAA;GACvB,SAAAC,QA8CM,CA7CEiB,EAAA,cADRtB,EAAA,GAAAM,EA8CM,OAAA;;IA5CJ,eAAY;IACZ,OAAM;IACL,SAAOsB;G,IAERrB,EAuCM,OAvCNC,EAuCM,EAtCJ,eAAY,kBAAiB,GACrBV,EAAAA,QAAM;IACV,SAAA;IAAJ,KAAIyB;IACJ,OAAK,CAAC,mBAAiB;KAAA,aACAL,EAAM;KAAK,eAAiBA,EAAM;IAAO,CAAA;IAC/D,OAAOO,EAAA;;IAGAH,EAAA,YADRtB,EAAA,GAAAC,EAKEQ,GAAA;;KAHA,eAAY;KACZ,OAAM;KACL,SAAK,AAAAgC,EAAA,OAAA/B,GAAA,MAAOU,EAAI,qBAAA,EAAA,GAAA,CAAA,MAAA,CAAA;;IAGXF,EAAM,SADdlB,EAAA,GAAAM,EAMM,OANNS,GAMM,CADJH,EAAqB4B,EAAA,QAAA,OAAA,C;IAEvBjC,EASM,OAAA;KARJ,eAAY;KACZ,OAAKM,EAAA,CAAC,4BAA0B;MACc,sBAAAS,EAAA;MAAyD,yBAAAA,EAAA;;I,IAKvGV,EAAQ4B,EAAA,QAAA,SAAA,C;IAGFtB,EAAM,WADdlB,EAAA,GAAAM,EAOM,OAAA;;KALJ,eAAY;KACZ,OAAKO,EAAA,CAAC,4BAA0B,EAAA,kBACJS,EAAA,oBAAmB,CAAA,CAAA;I,IAE/CV,EAAuB4B,EAAA,QAAA,SAAA,C"}

package/dist/components/PlDialogModal/index.js

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

package/dist/components/PlDropdown/OptionList.js

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

package/dist/components/PlDropdown/OptionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.js","names":[],"sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport TextLabel from \"../../utils/TextLabel.vue\";\nimport { computed, useTemplateRef } from \"vue\";\nimport type { LOption } from \"./types\";\n\nconst props = defineProps<{\n  rootRef: HTMLElement;\n  groups: Map<string, LOption[]>;\n  rest: LOption[];\n  optionSize: \"small\" | \"medium\";\n  selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n  let totalGroupItems = 0;\n  for (const items of props.groups.values()) {\n    totalGroupItems += items.length;\n  }\n  return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n  overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n</script>\n\n<template>\n  <DropdownOverlay\n    ref=\"overlay\"\n    :root=\"rootRef\"\n    class=\"pl-dropdown__options\"\n    data-testid=\"pl-dropdown-options\"\n    tabindex=\"-1\"\n    :gap=\"3\"\n  >\n    <div\n      v-for=\"[group, items] in groups.entries()\"\n      :key=\"group\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel data-testid=\"pl-dropdown-option-group-label\">{{ group }}</TextLabel>\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"rest.length\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel />\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in rest\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"!optionsLength\" class=\"nothing-found\" data-testid=\"pl-dropdown-options-empty\">\n      Nothing found\n    </div>\n  </DropdownOverlay>\n</template>\n"],"mappings":""}
+{"version":3,"file":"OptionList.js","names":["_sfc_main","OptionList_vue_vue_type_script_setup_true_lang_default","OptionList_default"],"sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport TextLabel from \"../../utils/TextLabel.vue\";\nimport { computed, useTemplateRef } from \"vue\";\nimport type { LOption } from \"./types\";\n\nconst props = defineProps<{\n  rootRef: HTMLElement;\n  groups: Map<string, LOption[]>;\n  rest: LOption[];\n  optionSize: \"small\" | \"medium\";\n  selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n  let totalGroupItems = 0;\n  for (const items of props.groups.values()) {\n    totalGroupItems += items.length;\n  }\n  return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n  overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n</script>\n\n<template>\n  <DropdownOverlay\n    ref=\"overlay\"\n    :root=\"rootRef\"\n    class=\"pl-dropdown__options\"\n    data-testid=\"pl-dropdown-options\"\n    tabindex=\"-1\"\n    :gap=\"3\"\n  >\n    <div\n      v-for=\"[group, items] in groups.entries()\"\n      :key=\"group\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel data-testid=\"pl-dropdown-option-group-label\">{{ group }}</TextLabel>\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"rest.length\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel />\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in rest\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"!optionsLength\" class=\"nothing-found\" data-testid=\"pl-dropdown-options-empty\">\n      Nothing found\n    </div>\n  </DropdownOverlay>\n</template>\n"],"mappings":""}

package/dist/components/PlDropdown/OptionList.vue2.js

@@ -3,12 +3,12 @@ import t from "../../utils/DropdownOverlay/DropdownOverlay.js";
 import "../../utils/DropdownOverlay/index.js";
 import n from "../../utils/TextLabel.js";
 import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, renderList as m, toDisplayString as h, unref as g, useTemplateRef as _, withCtx as v, withModifiers as y } from "vue";
-//#region src/components/PlDropdown/OptionList.vue?vue&type=script&setup=true&lang.ts
+// src/components/PlDropdown/OptionList.vue?vue&type=script&setup=true&lang.ts
 var b = {
 	key: 1,
 	class: "nothing-found",
 	"data-testid": "pl-dropdown-options-empty"
-}, x = /* @__PURE__ */ d({
+}, x = /*@__PURE__*/ d({
 	__name: "OptionList",
 	props: {
 		rootRef: {},
@@ -85,7 +85,6 @@ var b = {
 		}, 8, ["root"]));
 	}
 });
-//#endregion
 export { x as default };
 
 //# sourceMappingURL=OptionList.vue2.js.map

package/dist/components/PlDropdown/OptionList.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionList.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport TextLabel from \"../../utils/TextLabel.vue\";\nimport { computed, useTemplateRef } from \"vue\";\nimport type { LOption } from \"./types\";\n\nconst props = defineProps<{\n  rootRef: HTMLElement;\n  groups: Map<string, LOption[]>;\n  rest: LOption[];\n  optionSize: \"small\" | \"medium\";\n  selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n  let totalGroupItems = 0;\n  for (const items of props.groups.values()) {\n    totalGroupItems += items.length;\n  }\n  return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n  overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n</script>\n\n<template>\n  <DropdownOverlay\n    ref=\"overlay\"\n    :root=\"rootRef\"\n    class=\"pl-dropdown__options\"\n    data-testid=\"pl-dropdown-options\"\n    tabindex=\"-1\"\n    :gap=\"3\"\n  >\n    <div\n      v-for=\"[group, items] in groups.entries()\"\n      :key=\"group\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel data-testid=\"pl-dropdown-option-group-label\">{{ group }}</TextLabel>\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"rest.length\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel />\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in rest\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"!optionsLength\" class=\"nothing-found\" data-testid=\"pl-dropdown-options-empty\">\n      Nothing found\n    </div>\n  </DropdownOverlay>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAQR,IAAU,EAAe,UAAU,EAEnC,IAAU,QAAe,EAAQ,OAAO,QAAQ,EAEhD,IAAY,QAAe,EAAM,OAAO,OAAO,EAAE,EAEjD,IAAgB,QAAe;GACnC,IAAI,IAAkB;AACtB,QAAK,IAAM,KAAS,EAAM,OAAO,QAAQ,CACvC,MAAmB,EAAM;AAE3B,UAAO,IAAkB,EAAM,KAAK;IACpC;SAMF,EAAa;GACX,wBAL6B;AAC7B,MAAQ,OAAO,kBAAkB;;GAKjC;GACD,CAAC,kBAIA,EAkDkB,EAAA,EAAA,EAAA;YAjDZ;GAAJ,KAAI;GACH,MAAM,EAAA;GACP,OAAM;GACN,eAAY;GACZ,UAAS;GACR,KAAK;;oBAGsC;YAD5C,EAmBM,GAAA,MAAA,EAlBqB,EAAA,OAAO,SAAO,GAAA,CAA/B,GAAO,aADjB,EAmBM,OAAA;KAjBH,KAAK;KACL,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;KACtC,eAAY;QAEZ,EAA+E,GAAA,EAApE,eAAY,kCAAgC,EAAA;sBAAY,CAAA,EAAA,EAAR,EAAK,EAAA,EAAA,CAAA,CAAA;;cAChE,EAWM,OAAA,MAAA,EAAA,EAAA,GAAA,EAVJ,EASE,GAAA,MAAA,EARwB,IAAhB,GAAM,YADhB,EASE,GAAA;KAPC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACP,eAAY;KACX,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAKlC,EAAA,KAAK,UAAA,GAAA,EADb,EAkBM,OAAA;;KAhBH,OAAK,EAAA,EAAA,mBAAuB,EAAA,OAAS,CAAA;KACtC,eAAY;QAEZ,EAAa,EAAA,EACb,EAWM,OAAA,MAAA,EAAA,EAAA,GAAA,EAVJ,EASE,GAAA,MAAA,EARwB,EAAA,OAAhB,GAAM,YADhB,EASE,GAAA;KAPC,KAAK;KACL,QAAQ;KACR,eAAa,EAAK;KAClB,cAAY,EAAK;KACjB,MAAM,EAAA;KACP,eAAY;KACX,SAAK,GAAA,MAAO,EAAA,aAAa,EAAK,MAAK,EAAA,CAAA,OAAA,CAAA;;;;;;;;IAI9B,EAAA,QAEZ,EAAA,IAAA,GAAA,IAFY,GAAA,EAAZ,EAEM,OAFN,GAAyF,kBAEzF"}
+{"version":3,"file":"OptionList.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","DropdownOverlay","_withCtx","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createVNode","TextLabel","_createTextVNode","_toDisplayString","_createElementVNode","DropdownListItem","_withModifiers","_createCommentVNode","DropdownListItem_default","DropdownOverlay_default","TextLabel_default","_hoisted_1","OptionList_vue_vue_type_script_setup_true_lang_default","__expose","props","__props","overlay","useTemplateRef","listRef","computed","hasGroups","optionsLength","totalGroupItems","items","openBlock","createBlock","unref","withCtx","createElementBlock","Fragment","renderList","group","normalizeClass","createVNode","createTextVNode","toDisplayString","createElementVNode","index","item","withModifiers","createCommentVNode"],"sources":["../../../src/components/PlDropdown/OptionList.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport DropdownListItem from \"../DropdownListItem.vue\";\nimport { DropdownOverlay } from \"../../utils/DropdownOverlay\";\nimport TextLabel from \"../../utils/TextLabel.vue\";\nimport { computed, useTemplateRef } from \"vue\";\nimport type { LOption } from \"./types\";\n\nconst props = defineProps<{\n  rootRef: HTMLElement;\n  groups: Map<string, LOption[]>;\n  rest: LOption[];\n  optionSize: \"small\" | \"medium\";\n  selectOption: (v: unknown) => void;\n}>();\n\nconst overlay = useTemplateRef(\"overlay\");\n\nconst listRef = computed(() => overlay.value?.listRef);\n\nconst hasGroups = computed(() => props.groups.size > 0);\n\nconst optionsLength = computed(() => {\n  let totalGroupItems = 0;\n  for (const items of props.groups.values()) {\n    totalGroupItems += items.length;\n  }\n  return totalGroupItems + props.rest.length;\n});\n\nconst scrollIntoActive = () => {\n  overlay.value?.scrollIntoActive();\n};\n\ndefineExpose({\n  scrollIntoActive,\n  listRef,\n});\n</script>\n\n<template>\n  <DropdownOverlay\n    ref=\"overlay\"\n    :root=\"rootRef\"\n    class=\"pl-dropdown__options\"\n    data-testid=\"pl-dropdown-options\"\n    tabindex=\"-1\"\n    :gap=\"3\"\n  >\n    <div\n      v-for=\"[group, items] in groups.entries()\"\n      :key=\"group\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel data-testid=\"pl-dropdown-option-group-label\">{{ group }}</TextLabel>\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"rest.length\"\n      :class=\"{ 'group-container': hasGroups }\"\n      data-testid=\"pl-dropdown-option-group\"\n    >\n      <TextLabel />\n      <div>\n        <DropdownListItem\n          v-for=\"(item, index) in rest\"\n          :key=\"index\"\n          :option=\"item\"\n          :is-selected=\"item.isSelected\"\n          :is-hovered=\"item.isActive\"\n          :size=\"optionSize\"\n          data-testid=\"pl-dropdown-option\"\n          @click.stop=\"selectOption(item.value)\"\n        />\n      </div>\n    </div>\n    <div v-if=\"!optionsLength\" class=\"nothing-found\" data-testid=\"pl-dropdown-options-empty\">\n      Nothing found\n    </div>\n  </DropdownOverlay>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EAOA,IAAMuB,IAAQC,GAQRC,IAAUC,EAAe,SAAS,GAElCC,IAAUC,QAAeH,EAAQ,OAAO,OAAO,GAE/CI,IAAYD,QAAeL,EAAM,OAAO,OAAO,CAAC,GAEhDO,IAAgBF,QAAe;GACnC,IAAIG,IAAkB;GACtB,KAAK,IAAMC,KAAST,EAAM,OAAO,OAAO,GACtC,KAAmBS,EAAM;GAE3B,OAAOD,IAAkBR,EAAM,KAAK;EACtC,CAAC;E,OAMDD,EAAa;GACX,wBAL6B;IAC7B,EAAQ,OAAO,iBAAiB;GAClC;GAIE;EACF,CAAC,I,UAICtB,EAAA,GAAAC,EAkDkBC,EAAAC,CAAA,GAAA;GAjDZ,SAAA;GAAJ,KAAIsB;GACH,MAAMD,EAAA;GACP,OAAM;GACN,eAAY;GACZ,UAAS;GACR,KAAK;;GAGJ,SAAApB,QAA0C;KAD5CJ,EAAA,EAAA,GAAAK,EAmBMC,GAAA,MAAAC,EAlBqBiB,EAAA,OAAO,QAAO,IAAA,CAA/BgB,GAAOR,QADjBhC,EAAA,GAAAK,EAmBM,OAAA;KAjBH,KAAKmC;KACL,OAAKhC,EAAA,EAAA,mBAAuBqB,EAAA,MAAS,CAAA;KACtC,eAAY;I,IAEZpB,EAA+EC,GAAA,EAApE,eAAY,iCAAgC,GAAA;KAAC,SAAAN,QAAW,CAARO,EAAAC,EAAA4B,CAAK,GAAA,CAAA,C;;I,UAChE3B,EAWM,OAAA,MAAA,EAVJb,EAAA,EAAA,GAAAK,EASEC,GAAA,MAAAC,EARwByB,IAAhB,GAAM,OADhBhC,EAAA,GAAAC,EASEa,GAAA;KAPC,KAAKgC;KACL,QAAQC;KACR,eAAaA,EAAK;KAClB,cAAYA,EAAK;KACjB,MAAMvB,EAAA;KACP,eAAY;KACX,SAAKT,GAAA,MAAOS,EAAA,aAAauB,EAAK,KAAK,GAAA,CAAA,MAAA,CAAA;;;;;;;;IAKlCvB,EAAA,KAAK,UADbxB,EAAA,GAAAK,EAkBM,OAAA;;KAhBH,OAAKG,EAAA,EAAA,mBAAuBqB,EAAA,MAAS,CAAA;KACtC,eAAY;I,IAEZpB,EAAaC,CAAA,GACbG,EAWM,OAAA,MAAA,EAVJb,EAAA,EAAA,GAAAK,EASEC,GAAA,MAAAC,EARwBiB,EAAA,OAAhB,GAAM,OADhBxB,EAAA,GAAAC,EASEa,GAAA;KAPC,KAAKgC;KACL,QAAQC;KACR,eAAaA,EAAK;KAClB,cAAYA,EAAK;KACjB,MAAMvB,EAAA;KACP,eAAY;KACX,SAAKT,GAAA,MAAOS,EAAA,aAAauB,EAAK,KAAK,GAAA,CAAA,MAAA,CAAA;;;;;;;;IAI9BjB,EAAA,Q,aAAZ9B,EAAA,GAAAK,EAEM,OAFNe,GAAyF,iBAEzF"}

package/dist/components/PlDropdown/PlDropdown.js

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

package/dist/components/PlDropdown/PlDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdown.js","names":[],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlColumnLabel } from \"../PlColumnLabel\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\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 value of the dropdown.\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     * 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     * Shows red border even without an error message\n     */\n    errorStatus?: boolean;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when `modelValue` has no matching option — e.g. its\n     * upstream block was deleted. Rendered italic in error color.\n     */\n    missingValueLabel?: 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     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: MaskIconName16;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: MaskIconName24;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\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    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: \"...\",\n    missingValueLabel: \"Value not available\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n  search: \"\",\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\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 selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n  return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  // The field renders the missing state via `missingValueLabel`; no need to\n  // duplicate it as a helper error.\n  return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst selectedOption = computed(() =>\n  unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),\n);\n\nconst textValue = computed(() => selectedOption.value?.label);\n\n// Native tooltip with the full selected value and its link hint. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  if (isMissing.value) return props.missingValueLabel;\n  if (textValue.value === undefined) return undefined;\n  const hint = selectedOption.value?.linkHint;\n  return hint ? `${textValue.value}\\n${hint}` : String(textValue.value);\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && hasValue.value) {\n    return \"\";\n  }\n\n  return textValue.value ? String(textValue.value) : props.placeholder;\n});\n\nconst filteredRef = computed(() => {\n  const options = optionsRef.value;\n\n  if (data.search) {\n    return options.filter((o: ListOptionNormalized) => {\n      const search = data.search.toLowerCase();\n\n      if (o.label.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (o.description && o.description.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (typeof o.value === \"string\") {\n        return o.value.toLowerCase().includes(search);\n      }\n\n      return o.value === data.search;\n    });\n  }\n\n  return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, \"group\");\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M | undefined) => {\n  emit(\"update:modelValue\", v);\n  data.search = \"\";\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n  selectOption(v as M | undefined);\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !optionListRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = 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 ordered = orderedRef.value;\n\n  const { length } = ordered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    optionListRef.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      data-testid=\"pl-dropdown-control\"\n      :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n            <LongText\n              v-if=\"isMissing\"\n              class=\"input-value--missing\"\n              data-testid=\"pl-dropdown-value-missing\"\n            >\n              {{ missingValueLabel }}\n            </LongText>\n            <PlColumnLabel v-else-if=\"textValue !== undefined\" :option=\"selectedOption\">\n              <LongText>{{ textValue }}</LongText>\n            </PlColumnLabel>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown__arrow-wrapper\"\n              data-testid=\"pl-dropdown-arrow\"\n              @click.stop=\"toggleOpen\"\n            >\n              <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n              <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n              <PlIcon16 v-else name=\"chevron-down\" class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"$slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <OptionList\n          v-if=\"data.open\"\n          ref=\"optionListRef\"\n          :root-ref=\"rootRef!\"\n          :groups=\"groupsRef\"\n          :rest=\"restRef\"\n          :option-size=\"optionSize\"\n          :select-option=\"selectOptionWrapper\"\n        />\n        <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\" data-testid=\"pl-dropdown-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n      class=\"pl-dropdown__helper\"\n      data-testid=\"pl-dropdown-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PlDropdown.js","names":["_sfc_main","PlDropdown_vue_vue_type_script_setup_true_lang_default","PlDropdown_default"],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlColumnLabel } from \"../PlColumnLabel\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\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 value of the dropdown.\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     * 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     * Shows red border even without an error message\n     */\n    errorStatus?: boolean;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when `modelValue` has no matching option — e.g. its\n     * upstream block was deleted. Rendered italic in error color.\n     */\n    missingValueLabel?: 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     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: MaskIconName16;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: MaskIconName24;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\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    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: \"...\",\n    missingValueLabel: \"Value not available\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n  search: \"\",\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\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 selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n  return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  // The field renders the missing state via `missingValueLabel`; no need to\n  // duplicate it as a helper error.\n  return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst selectedOption = computed(() =>\n  unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),\n);\n\nconst textValue = computed(() => selectedOption.value?.label);\n\n// Native tooltip with the full selected value and its link hint. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  if (isMissing.value) return props.missingValueLabel;\n  if (textValue.value === undefined) return undefined;\n  const hint = selectedOption.value?.linkHint;\n  return hint ? `${textValue.value}\\n${hint}` : String(textValue.value);\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && hasValue.value) {\n    return \"\";\n  }\n\n  return textValue.value ? String(textValue.value) : props.placeholder;\n});\n\nconst filteredRef = computed(() => {\n  const options = optionsRef.value;\n\n  if (data.search) {\n    return options.filter((o: ListOptionNormalized) => {\n      const search = data.search.toLowerCase();\n\n      if (o.label.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (o.description && o.description.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (typeof o.value === \"string\") {\n        return o.value.toLowerCase().includes(search);\n      }\n\n      return o.value === data.search;\n    });\n  }\n\n  return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, \"group\");\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M | undefined) => {\n  emit(\"update:modelValue\", v);\n  data.search = \"\";\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n  selectOption(v as M | undefined);\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !optionListRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = 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 ordered = orderedRef.value;\n\n  const { length } = ordered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    optionListRef.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      data-testid=\"pl-dropdown-control\"\n      :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n            <LongText\n              v-if=\"isMissing\"\n              class=\"input-value--missing\"\n              data-testid=\"pl-dropdown-value-missing\"\n            >\n              {{ missingValueLabel }}\n            </LongText>\n            <PlColumnLabel v-else-if=\"textValue !== undefined\" :option=\"selectedOption\">\n              <LongText>{{ textValue }}</LongText>\n            </PlColumnLabel>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown__arrow-wrapper\"\n              data-testid=\"pl-dropdown-arrow\"\n              @click.stop=\"toggleOpen\"\n            >\n              <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n              <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n              <PlIcon16 v-else name=\"chevron-down\" class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"$slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <OptionList\n          v-if=\"data.open\"\n          ref=\"optionListRef\"\n          :root-ref=\"rootRef!\"\n          :groups=\"groupsRef\"\n          :rest=\"restRef\"\n          :option-size=\"optionSize\"\n          :select-option=\"selectOptionWrapper\"\n        />\n        <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\" data-testid=\"pl-dropdown-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n      class=\"pl-dropdown__helper\"\n      data-testid=\"pl-dropdown-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/PlDropdown/PlDropdown.vue2.js

@@ -20,7 +20,7 @@ import ee from "./OptionList.js";
 import './pl-dropdown.css';/* empty css            */
 import { useGroupBy as p } from "./useGroupBy.js";
 import { computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createTextVNode as y, createVNode as b, defineComponent as x, normalizeClass as S, openBlock as C, reactive as te, ref as w, renderSlot as T, toDisplayString as E, unref as D, useTemplateRef as O, vModelText as k, watch as A, watchPostEffect as ne, withCtx as j, withDirectives as re, withModifiers as M } from "vue";
-//#region src/components/PlDropdown/PlDropdown.vue?vue&type=script&setup=true&lang.ts
+// src/components/PlDropdown/PlDropdown.vue?vue&type=script&setup=true&lang.ts
 var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"], se = ["disabled", "placeholder"], ce = {
 	key: 0,
 	class: "input-value",
@@ -40,7 +40,7 @@ var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"],
 	key: 2,
 	class: "pl-dropdown__helper",
 	"data-testid": "pl-dropdown-helper"
-}, N = /* @__PURE__ */ x({
+}, N = /*@__PURE__*/ x({
 	name: "PlDropdown",
 	props: {
 		modelValue: {},
@@ -89,22 +89,22 @@ var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"],
 			if (X.value === void 0) return;
 			let e = Y.value?.linkHint;
 			return e ? `${X.value}\n${e}` : String(X.value);
-		}), ge = m(() => !z.open && G.value ? "" : X.value ? String(X.value) : F.placeholder), { orderedRef: Z, groupsRef: _e, restRef: ve } = p(m(() => {
+		}), ge = m(() => !z.open && G.value ? "" : X.value ? String(X.value) : F.placeholder), _e = m(() => {
 			let e = J.value;
 			return z.search ? e.filter((e) => {
 				let t = z.search.toLowerCase();
 				return e.label.toLowerCase().includes(t) || e.description && e.description.toLowerCase().includes(t) ? !0 : typeof e.value == "string" ? e.value.toLowerCase().includes(t) : e.value === z.search;
 			}) : e;
-		}), "group"), ye = m(() => U.value ? void 0 : "0"), Q = (e) => {
+		}), { orderedRef: Z, groupsRef: ve, restRef: ye } = p(_e, "group"), be = m(() => U.value ? void 0 : "0"), Q = (e) => {
 			P("update:modelValue", e), z.search = "", z.open = !1, I?.value?.focus();
-		}, be = (e) => {
+		}, $ = (e) => {
 			Q(e);
-		}, $ = () => P("update:modelValue", void 0), xe = () => L.value?.focus(), Se = () => {
+		}, xe = () => P("update:modelValue", void 0), Se = () => L.value?.focus(), Ce = () => {
 			z.open = !z.open, z.open || (z.search = "");
-		}, Ce = () => z.open = !0, we = (e) => {
+		}, we = () => z.open = !0, Te = (e) => {
 			let t = e.relatedTarget;
 			!I.value?.contains(t) && !R.value?.listRef?.contains(t) && (z.search = "", z.open = !1);
-		}, Te = (e) => {
+		}, Ee = (e) => {
 			if ([
 				"ArrowDown",
 				"ArrowUp",
@@ -121,27 +121,27 @@ var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"],
 			let r = Z.value, { length: i } = r;
 			if (!i) return;
 			e.code === "Enter" && Q(r.find((e) => e.index === n)?.value);
-			let a = r.findIndex((e) => e.index === n) ?? -1, o = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0;
-			z.activeIndex = r[Math.abs(a + o + i) % i].index ?? -1;
+			let a = r.findIndex((e) => e.index === n) ?? -1, o = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, s = Math.abs(a + o + i) % i;
+			z.activeIndex = r[s].index ?? -1;
 		};
 		return u(I), A(() => F.modelValue, me, { immediate: !0 }), A(() => z.open, (e) => e ? L.value?.focus() : ""), ne(() => {
 			z.search, z.activeIndex >= 0 && z.open && R.value?.scrollIntoActive();
 		}), (n, r) => (C(), _("div", {
 			class: "pl-dropdown__envelope",
-			onClick: xe,
+			onClick: Se,
 			"data-testid": "pl-dropdown"
 		}, [v("div", {
 			ref_key: "rootRef",
 			ref: I,
-			tabindex: ye.value,
+			tabindex: be.value,
 			class: S(["pl-dropdown", {
 				open: z.open,
 				error: x.error || x.errorStatus,
 				disabled: U.value
 			}]),
 			"data-testid": "pl-dropdown-control",
-			onKeydown: Te,
-			onFocusout: we
+			onKeydown: Ee,
+			onFocusout: Te
 		}, [v("div", ae, [
 			v("div", {
 				class: "pl-dropdown__field",
@@ -158,7 +158,7 @@ var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"],
 					spellcheck: "false",
 					autocomplete: "chrome-off",
 					"data-testid": "pl-dropdown-input",
-					onFocus: Ce
+					onFocus: we
 				}, null, 40, se), [[k, z.search]]),
 				z.open ? g("", !0) : (C(), _("div", ce, [K.value ? (C(), h(s, {
 					key: 0,
@@ -188,13 +188,13 @@ var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"],
 						class: "clear",
 						"data-testid": "pl-dropdown-clear",
 						name: "delete-clear",
-						onClick: M($, ["stop"])
+						onClick: M(xe, ["stop"])
 					})) : g("", !0),
 					T(n.$slots, "append"),
 					v("div", {
 						class: "pl-dropdown__arrow-wrapper",
 						"data-testid": "pl-dropdown-arrow",
-						onClick: M(Se, ["stop"])
+						onClick: M(Ce, ["stop"])
 					}, [x.arrowIconLarge ? (C(), h(D(c), {
 						key: 0,
 						name: x.arrowIconLarge,
@@ -232,10 +232,10 @@ var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"],
 				ref_key: "optionListRef",
 				ref: R,
 				"root-ref": I.value,
-				groups: D(_e),
-				rest: D(ve),
+				groups: D(ve),
+				rest: D(ye),
 				"option-size": x.optionSize,
-				"select-option": be
+				"select-option": $
 			}, null, 8, [
 				"root-ref",
 				"groups",
@@ -249,7 +249,6 @@ var ie = ["tabindex"], ae = { class: "pl-dropdown__container" }, oe = ["title"],
 		])], 42, ie), q.value ? (C(), _("div", de, E(q.value), 1)) : H.value && x.loadingOptionsHelper ? (C(), _("div", fe, E(x.loadingOptionsHelper), 1)) : x.helper ? (C(), _("div", pe, E(x.helper), 1)) : g("", !0)]));
 	}
 });
-//#endregion
 export { N as default };
 
 //# sourceMappingURL=PlDropdown.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdown.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlColumnLabel } from \"../PlColumnLabel\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\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 value of the dropdown.\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     * 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     * Shows red border even without an error message\n     */\n    errorStatus?: boolean;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when `modelValue` has no matching option — e.g. its\n     * upstream block was deleted. Rendered italic in error color.\n     */\n    missingValueLabel?: 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     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: MaskIconName16;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: MaskIconName24;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\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    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: \"...\",\n    missingValueLabel: \"Value not available\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n  search: \"\",\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\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 selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n  return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  // The field renders the missing state via `missingValueLabel`; no need to\n  // duplicate it as a helper error.\n  return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst selectedOption = computed(() =>\n  unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),\n);\n\nconst textValue = computed(() => selectedOption.value?.label);\n\n// Native tooltip with the full selected value and its link hint. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  if (isMissing.value) return props.missingValueLabel;\n  if (textValue.value === undefined) return undefined;\n  const hint = selectedOption.value?.linkHint;\n  return hint ? `${textValue.value}\\n${hint}` : String(textValue.value);\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && hasValue.value) {\n    return \"\";\n  }\n\n  return textValue.value ? String(textValue.value) : props.placeholder;\n});\n\nconst filteredRef = computed(() => {\n  const options = optionsRef.value;\n\n  if (data.search) {\n    return options.filter((o: ListOptionNormalized) => {\n      const search = data.search.toLowerCase();\n\n      if (o.label.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (o.description && o.description.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (typeof o.value === \"string\") {\n        return o.value.toLowerCase().includes(search);\n      }\n\n      return o.value === data.search;\n    });\n  }\n\n  return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, \"group\");\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M | undefined) => {\n  emit(\"update:modelValue\", v);\n  data.search = \"\";\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n  selectOption(v as M | undefined);\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !optionListRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = 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 ordered = orderedRef.value;\n\n  const { length } = ordered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    optionListRef.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      data-testid=\"pl-dropdown-control\"\n      :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n            <LongText\n              v-if=\"isMissing\"\n              class=\"input-value--missing\"\n              data-testid=\"pl-dropdown-value-missing\"\n            >\n              {{ missingValueLabel }}\n            </LongText>\n            <PlColumnLabel v-else-if=\"textValue !== undefined\" :option=\"selectedOption\">\n              <LongText>{{ textValue }}</LongText>\n            </PlColumnLabel>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown__arrow-wrapper\"\n              data-testid=\"pl-dropdown-arrow\"\n              @click.stop=\"toggleOpen\"\n            >\n              <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n              <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n              <PlIcon16 v-else name=\"chevron-down\" class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"$slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <OptionList\n          v-if=\"data.open\"\n          ref=\"optionListRef\"\n          :root-ref=\"rootRef!\"\n          :groups=\"groupsRef\"\n          :rest=\"restRef\"\n          :option-size=\"optionSize\"\n          :select-option=\"selectOptionWrapper\"\n        />\n        <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\" data-testid=\"pl-dropdown-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n      class=\"pl-dropdown__helper\"\n      data-testid=\"pl-dropdown-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"PlDropdown.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_withDirectives","_vModelText","_createBlock","LongText","_withCtx","_createTextVNode","_toDisplayString","_unref","PlColumnLabel","_createVNode","_createCommentVNode","PlIcon24","PlIcon16","_withModifiers","_renderSlot","PlSvg","SvgRequired","PlTooltip","OptionList","DoubleContour","PlSvg_default","PlIcon16_default","PlTooltip_default","PlColumnLabel_default","LongText_default","PlIcon24_default","DoubleContour_default","required_default","OptionList_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","PlDropdown_vue_vue_type_script_setup_true_lang_default","__emit","emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","deepEqual","o","v","updateActive","isLoadingOptions","computed","showLoadingSpinner","isDisabled","selectedIndex","hasValue","isMissing","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","selectedOption","unref","textValue","fieldTitle","hint","computedPlaceholder","filteredRef","options","search","useGroupBy","tabindex","selectOption","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","relatedTarget","event","handleKeydown","open","ordered","length","it","activeIndex","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect","openBlock","createElementBlock","createElementVNode","normalizeClass","withDirectives","_cache","$event","vModelText","createCommentVNode","createBlock","withCtx","createTextVNode","toDisplayString","createVNode","withModifiers","renderSlot","_ctx","groupsRef","restRef"],"sources":["../../../src/components/PlDropdown/PlDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * A component for selecting one value from a list of options\n */\nexport default {\n  name: \"PlDropdown\",\n};\n</script>\n\n<script lang=\"ts\" setup generic=\"M = unknown\">\nimport { computed, reactive, ref, unref, useTemplateRef, watch, watchPostEffect } from \"vue\";\nimport SvgRequired from \"../../assets/images/required.svg?raw\";\nimport { getErrorMessage } from \"../../helpers/error.ts\";\nimport { tap } from \"../../helpers/functions\";\nimport { deepEqual } from \"../../helpers/objects\";\nimport { normalizeListOptions } from \"../../helpers/utils\";\nimport type { ListOption, ListOptionNormalized, MaskIconName16, MaskIconName24 } from \"../../types\";\nimport DoubleContour from \"../../utils/DoubleContour.vue\";\nimport { useLabelNotch } from \"../../utils/useLabelNotch\";\nimport LongText from \"../LongText.vue\";\nimport { PlColumnLabel } from \"../PlColumnLabel\";\nimport { PlIcon16 } from \"../PlIcon16\";\nimport { PlIcon24 } from \"../PlIcon24\";\nimport { PlSvg } from \"../PlSvg\";\nimport { PlTooltip } from \"../PlTooltip\";\nimport OptionList from \"./OptionList.vue\";\nimport \"./pl-dropdown.scss\";\nimport type { LOption } from \"./types\";\nimport { useGroupBy } from \"./useGroupBy\";\n\nconst emit = defineEmits<{\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 value of the dropdown.\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     * 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     * Shows red border even without an error message\n     */\n    errorStatus?: boolean;\n    /**\n     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Text shown in the field when `modelValue` has no matching option — e.g. its\n     * upstream block was deleted. Rendered italic in error color.\n     */\n    missingValueLabel?: 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     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: MaskIconName16;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: MaskIconName24;\n    /**\n     * Option list item size\n     */\n    optionSize?: \"small\" | \"medium\";\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    label: \"\",\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: \"...\",\n    missingValueLabel: \"Value not available\",\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: \"small\",\n    options: undefined,\n    groupPosition: undefined,\n  },\n);\n\nconst rootRef = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst optionListRef = useTemplateRef<InstanceType<typeof OptionList>>(\"optionListRef\");\n\nconst data = reactive({\n  search: \"\",\n  activeIndex: -1,\n  open: false,\n  optionsHeight: 0,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    orderedRef.value.findIndex((o) => deepEqual(o.value, props.modelValue)),\n    (v) => (v < 0 ? 0 : v),\n  );\n\nconst updateActive = () => (data.activeIndex = findActiveIndex());\n\nconst isLoadingOptions = computed(() => {\n  return props.options === undefined;\n});\n\n/**\n * Loading spinner should not be shown when the dropdown is explicitly disabled,\n * even if options are undefined. The disabled state takes precedence.\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 selectedIndex = computed(() => {\n  return (props.options ?? []).findIndex((o) => deepEqual(o.value, props.modelValue));\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\n});\n\nconst isMissing = computed(() => {\n  return hasValue.value && selectedIndex.value === -1 && !isLoadingOptions.value;\n});\n\nconst computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  // The field renders the missing state via `missingValueLabel`; no need to\n  // duplicate it as a helper error.\n  return undefined;\n});\n\nconst optionsRef = computed<LOption<M>[]>(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst selectedOption = computed(() =>\n  unref(optionsRef).find((o) => deepEqual(o.value, props.modelValue)),\n);\n\nconst textValue = computed(() => selectedOption.value?.label);\n\n// Native tooltip with the full selected value and its link hint. The `.input-value` layer has\n// `pointer-events: none`, so the title must sit on the field wrapper, which is\n// what actually receives the hover.\nconst fieldTitle = computed(() => {\n  if (data.open) return undefined;\n  if (isMissing.value) return props.missingValueLabel;\n  if (textValue.value === undefined) return undefined;\n  const hint = selectedOption.value?.linkHint;\n  return hint ? `${textValue.value}\\n${hint}` : String(textValue.value);\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && hasValue.value) {\n    return \"\";\n  }\n\n  return textValue.value ? String(textValue.value) : props.placeholder;\n});\n\nconst filteredRef = computed(() => {\n  const options = optionsRef.value;\n\n  if (data.search) {\n    return options.filter((o: ListOptionNormalized) => {\n      const search = data.search.toLowerCase();\n\n      if (o.label.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (o.description && o.description.toLowerCase().includes(search)) {\n        return true;\n      }\n\n      if (typeof o.value === \"string\") {\n        return o.value.toLowerCase().includes(search);\n      }\n\n      return o.value === data.search;\n    });\n  }\n\n  return options;\n});\n\nconst { orderedRef, groupsRef, restRef } = useGroupBy(filteredRef, \"group\");\n\nconst tabindex = computed(() => (isDisabled.value ? undefined : \"0\"));\n\nconst selectOption = (v: M | undefined) => {\n  emit(\"update:modelValue\", v);\n  data.search = \"\";\n  data.open = false;\n  rootRef?.value?.focus();\n};\n\nconst selectOptionWrapper = (v: unknown) => {\n  selectOption(v as M | undefined);\n};\n\nconst clear = () => emit(\"update:modelValue\", undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => {\n  data.open = !data.open;\n  if (!data.open) {\n    data.search = \"\";\n  }\n};\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n  const relatedTarget = event.relatedTarget as Node | null;\n\n  if (\n    !rootRef.value?.contains(relatedTarget) &&\n    !optionListRef.value?.listRef?.contains(relatedTarget)\n  ) {\n    data.search = \"\";\n    data.open = false;\n  }\n};\n\nconst handleKeydown = (e: { code: string; preventDefault(): void }) => {\n  if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \"Escape\"].includes(e.code)) {\n    return;\n  } else {\n    e.preventDefault();\n  }\n\n  const { open, activeIndex } = 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 ordered = orderedRef.value;\n\n  const { length } = ordered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === \"Enter\") {\n    selectOption(ordered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = ordered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === \"ArrowDown\" ? 1 : e.code === \"ArrowUp\" ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = ordered[newIndex].index ?? -1;\n};\n\nuseLabelNotch(rootRef);\n\nwatch(() => props.modelValue, updateActive, { immediate: true });\n\nwatch(\n  () => data.open,\n  (open) => (open ? input.value?.focus() : \"\"),\n);\n\nwatchPostEffect(() => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n  data.search; // to watch\n\n  if (data.activeIndex >= 0 && data.open) {\n    optionListRef.value?.scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"pl-dropdown__envelope\" @click=\"setFocusOnInput\" data-testid=\"pl-dropdown\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      data-testid=\"pl-dropdown-control\"\n      :class=\"{ open: data.open, error: error || errorStatus, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\" :title=\"fieldTitle\">\n          <input\n            ref=\"input\"\n            v-model=\"data.search\"\n            type=\"text\"\n            tabindex=\"-1\"\n            :disabled=\"isDisabled\"\n            :placeholder=\"computedPlaceholder\"\n            spellcheck=\"false\"\n            autocomplete=\"chrome-off\"\n            data-testid=\"pl-dropdown-input\"\n            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\" data-testid=\"pl-dropdown-value\">\n            <LongText\n              v-if=\"isMissing\"\n              class=\"input-value--missing\"\n              data-testid=\"pl-dropdown-value-missing\"\n            >\n              {{ missingValueLabel }}\n            </LongText>\n            <PlColumnLabel v-else-if=\"textValue !== undefined\" :option=\"selectedOption\">\n              <LongText>{{ textValue }}</LongText>\n            </PlColumnLabel>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"showLoadingSpinner\" name=\"loading\" data-testid=\"pl-dropdown-loading\" />\n            <PlIcon16\n              v-if=\"clearable && hasValue\"\n              class=\"clear\"\n              data-testid=\"pl-dropdown-clear\"\n              name=\"delete-clear\"\n              @click.stop=\"clear\"\n            />\n            <slot name=\"append\" />\n            <div\n              class=\"pl-dropdown__arrow-wrapper\"\n              data-testid=\"pl-dropdown-arrow\"\n              @click.stop=\"toggleOpen\"\n            >\n              <PlIcon24 v-if=\"arrowIconLarge\" :name=\"arrowIconLarge\" class=\"arrow-icon\" />\n              <PlIcon16 v-else-if=\"arrowIcon\" :name=\"arrowIcon\" class=\"arrow-icon\" />\n              <PlIcon16 v-else name=\"chevron-down\" class=\"arrow-icon arrow-icon-default\" />\n            </div>\n          </div>\n        </div>\n        <label v-if=\"label\" data-testid=\"pl-dropdown-label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" data-testid=\"pl-dropdown-required\" />\n          <span>{{ label }}</span>\n          <PlTooltip\n            v-if=\"$slots.tooltip\"\n            class=\"info\"\n            position=\"top\"\n            data-testid=\"pl-dropdown-tooltip\"\n          >\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <OptionList\n          v-if=\"data.open\"\n          ref=\"optionListRef\"\n          :root-ref=\"rootRef!\"\n          :groups=\"groupsRef\"\n          :rest=\"restRef\"\n          :option-size=\"optionSize\"\n          :select-option=\"selectOptionWrapper\"\n        />\n        <DoubleContour class=\"pl-dropdown__contour\" :group-position=\"groupPosition\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\" data-testid=\"pl-dropdown-error\">\n      {{ computedError }}\n    </div>\n    <div\n      v-else-if=\"showLoadingSpinner && loadingOptionsHelper\"\n      class=\"pl-dropdown__helper\"\n      data-testid=\"pl-dropdown-helper\"\n    >\n      {{ loadingOptionsHelper }}\n    </div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\" data-testid=\"pl-dropdown-helper\">\n      {{ helper }}\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/PlDropdown/index.js

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

package/dist/components/PlDropdown/useGroupBy.js

@@ -1,5 +1,5 @@
 import { computed as e } from "vue";
-//#region src/components/PlDropdown/useGroupBy.ts
+// src/components/PlDropdown/useGroupBy.ts
 function t(e, t) {
 	let n = /* @__PURE__ */ new Map();
 	if (!e) return {
@@ -26,7 +26,6 @@ function n(n, r) {
 		restRef: e(() => i.value.rest)
 	};
 }
-//#endregion
 export { n as useGroupBy };
 
 //# sourceMappingURL=useGroupBy.js.map