@milaboratories/uikit 2.6.1 → 2.6.2

package/dist/components/PlDropdown/PlDropdown.vue.js

@@ -1,38 +1,40 @@
-(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
+.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}
 .pl-dropdown__options{--option-hover-bg: var(--btn-sec-hover-grey);z-index:var(--z-dropdown-options);border:1px solid var(--border-color-div-grey);position:absolute;background-color:var(--pl-dropdown-options-bg);border-radius:6px;max-height:244px;box-shadow:0 4px 12px -2px #0f244d14,0 6px 24px -2px #0f244d14;--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown__options .group-container{padding:4px 0}.pl-dropdown{--contour-color: var(--txt-01);--contour-border-width: 1px;--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}.pl-dropdown__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding-left:11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center;cursor:pointer}.pl-dropdown__field .input-value{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:row;align-items:center;padding:0 60px 0 11px;pointer-events:none;line-height:20px;color:var(--txt-01);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit}.pl-dropdown__field input{min-height:calc(var(--control-height) - 2px);line-height:20px;font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown__field input:focus{outline:none}.pl-dropdown__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown__controls .mask-16,.pl-dropdown__controls .mask-24{cursor:pointer}.pl-dropdown__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown__controls .mask-loading{--icon-color: var(--ic-accent);animation:spin 2.5s linear infinite}.pl-dropdown__arrow-wrapper{display:flex;align-items:center;min-height:var(--control-height);padding-right:11px}.pl-dropdown .arrow-icon{cursor:pointer}.pl-dropdown .arrow-icon.arrow-icon-default{transition:transform .2s}.pl-dropdown.open,.pl-dropdown:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown.open .pl-dropdown__container{z-index:1000}.pl-dropdown.open .pl-dropdown__field{border-radius:6px 6px 0 0}.pl-dropdown.open .arrow-icon.arrow-icon-default{transform:rotate(-180deg)}.pl-dropdown:hover{--contour-color: var(--control-hover-color)}.pl-dropdown:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown.disabled{--contour-color: var(--color-dis-01);--icon-color: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}.pl-dropdown.disabled .input-value{color:var(--dis-01)}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-import { defineComponent as le, ref as D, useTemplateRef as ae, reactive as se, computed as s, unref as a, watch as S, watchPostEffect as ie, createElementBlock as m, openBlock as n, createElementVNode as p, createCommentVNode as d, normalizeClass as de, createBlock as u, createVNode as B, withDirectives as ue, vModelText as ce, withCtx as z, createTextVNode as pe, toDisplayString as v, renderSlot as M, withModifiers as P } from "vue";
+import { defineComponent as le, ref as B, useTemplateRef as ae, reactive as se, computed as s, unref as a, watch as P, watchPostEffect as ie, createElementBlock as m, openBlock as n, createElementVNode as c, createCommentVNode as d, normalizeClass as de, createBlock as u, createVNode as D, withDirectives as ue, vModelText as pe, withCtx as $, createTextVNode as ce, toDisplayString as v, renderSlot as x, withModifiers as z } from "vue";
 import fe from "../../assets/images/required.svg.js";
 import { getErrorMessage as me } from "../../helpers/error.js";
 import { tap as ve } from "../../helpers/functions.js";
-import { deepEqual as y } from "../../helpers/objects.js";
+import { deepEqual as k } from "../../helpers/objects.js";
 import { normalizeListOptions as he } from "../../helpers/utils.js";
 import we from "../../utils/DoubleContour.vue.js";
+
 import { useLabelNotch as _e } from "../../utils/useLabelNotch.js";
 import ge from "../LongText.vue.js";
 
 import I from "../PlIcon16/PlIcon16.vue.js";
-import T from "../PlIcon24/PlIcon24.vue.js";
-import ke from "../PlSvg/PlSvg.vue.js";
-import ye from "../PlTooltip/PlTooltip.vue.js";
+import M from "../PlIcon24/PlIcon24.vue.js";
+import ye from "../PlSvg/PlSvg.vue.js";
+import ke from "../PlTooltip/PlTooltip.vue.js";
 import Ie from "./OptionList.vue.js";
 
-import { useGroupBy as be } from "./useGroupBy.js";
-const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class: "pl-dropdown__field" }, Ee = ["disabled", "placeholder"], Re = {
+import { useGroupBy as Ve } from "./useGroupBy.js";
+const be = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class: "pl-dropdown__field" }, Ee = ["disabled", "placeholder"], Re = {
   key: 0,
   class: "input-value"
-}, Oe = { class: "pl-dropdown__controls" }, xe = { key: 0 }, Ae = {
+}, Oe = { class: "pl-dropdown__controls" }, Se = { key: 0 }, Ae = {
   key: 0,
   class: "pl-dropdown__error"
-}, De = {
+}, Be = {
   key: 1,
   class: "pl-dropdown__helper"
-}, Se = {
+}, Pe = {
   key: 2,
   class: "pl-dropdown__helper"
-}, Be = {
+}, De = {
   name: "PlDropdown"
-}, Ye = /* @__PURE__ */ le({
-  ...Be,
+}, Ze = /* @__PURE__ */ le({
+  ...De,
   props: {
     modelValue: {},
     label: { default: "" },
@@ -40,40 +42,42 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
     helper: { default: void 0 },
     loadingOptionsHelper: { default: void 0 },
     error: { default: void 0 },
+    errorStatus: { type: Boolean },
     placeholder: { default: "..." },
     clearable: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     arrowIcon: { default: void 0 },
     arrowIconLarge: { default: void 0 },
-    optionSize: { default: "small" }
+    optionSize: { default: "small" },
+    groupPosition: { default: void 0 }
   },
   emits: ["update:modelValue"],
-  setup($, { emit: F }) {
-    const b = F, r = $, i = D(), w = D(), _ = ae("optionListRef"), o = se({
+  setup(T, { emit: F }) {
+    const V = F, r = T, i = B(), w = B(), _ = ae("optionListRef"), o = se({
       search: "",
       activeIndex: -1,
       open: !1,
       optionsHeight: 0
     }), N = () => ve(
-      R.value.findIndex((e) => y(e.value, r.modelValue)),
+      R.value.findIndex((e) => k(e.value, r.modelValue)),
       (e) => e < 0 ? 0 : e
-    ), q = () => o.activeIndex = N(), h = s(() => r.options === void 0), g = s(() => h.value ? !0 : r.disabled), V = s(() => (r.options ?? []).findIndex((e) => y(e.value, r.modelValue))), L = s(() => {
+    ), q = () => o.activeIndex = N(), h = s(() => r.options === void 0), g = s(() => h.value ? !0 : r.disabled), b = s(() => (r.options ?? []).findIndex((e) => k(e.value, r.modelValue))), L = s(() => {
       if (!h.value) {
         if (r.error)
           return me(r.error);
-        if (r.modelValue !== void 0 && V.value === -1)
+        if (r.modelValue !== void 0 && b.value === -1)
           return "The selected value is not one of the options";
       }
     }), C = s(
       () => he(r.options ?? []).map((e, t) => ({
         ...e,
         index: t,
-        isSelected: t === V.value,
+        isSelected: t === b.value,
         isActive: t === o.activeIndex
       }))
     ), E = s(() => {
-      const t = a(C).find((l) => y(l.value, r.modelValue));
+      const t = a(C).find((l) => k(l.value, r.modelValue));
       return (t == null ? void 0 : t.label) || r.modelValue;
     }), H = s(() => !o.open && r.modelValue !== void 0 ? "" : r.modelValue ? String(E.value) : r.placeholder), U = s(() => r.modelValue !== void 0 && r.modelValue !== null), K = s(() => {
       const e = C.value;
@@ -81,22 +85,22 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
         const l = o.search.toLowerCase();
         return t.label.toLowerCase().includes(l) || t.description && t.description.toLowerCase().includes(l) ? !0 : typeof t.value == "string" ? t.value.toLowerCase().includes(l) : t.value === o.search;
       }) : e;
-    }), { orderedRef: R, groupsRef: G, restRef: W } = be(K, "group"), j = s(() => g.value ? void 0 : "0"), O = (e) => {
+    }), { orderedRef: R, groupsRef: G, restRef: W } = Ve(K, "group"), j = s(() => g.value ? void 0 : "0"), O = (e) => {
       var t;
-      b("update:modelValue", e), o.search = "", o.open = !1, (t = i == null ? void 0 : i.value) == null || t.focus();
+      V("update:modelValue", e), o.search = "", o.open = !1, (t = i == null ? void 0 : i.value) == null || t.focus();
     }, J = (e) => {
       O(e);
-    }, Q = () => b("update:modelValue", void 0), X = () => {
+    }, Q = () => V("update:modelValue", void 0), X = () => {
       var e;
       return (e = w.value) == null ? void 0 : e.focus();
     }, Y = () => {
       o.open = !o.open, o.open || (o.search = "");
     }, Z = () => o.open = !0, ee = (e) => {
-      var l, c, f;
+      var l, p, f;
       const t = e.relatedTarget;
-      !((l = i.value) != null && l.contains(t)) && !((f = (c = _.value) == null ? void 0 : c.listRef) != null && f.contains(t)) && (o.search = "", o.open = !1);
+      !((l = i.value) != null && l.contains(t)) && !((f = (p = _.value) == null ? void 0 : p.listRef) != null && f.contains(t)) && (o.search = "", o.open = !1);
     }, oe = (e) => {
-      var x, A;
+      var S, A;
       if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.code))
         e.preventDefault();
       else
@@ -106,15 +110,15 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
         e.code === "Enter" && (o.open = !0);
         return;
       }
-      e.code === "Escape" && (o.open = !1, (x = i.value) == null || x.focus());
-      const c = R.value, { length: f } = c;
+      e.code === "Escape" && (o.open = !1, (S = i.value) == null || S.focus());
+      const p = R.value, { length: f } = p;
       if (!f)
         return;
-      e.code === "Enter" && O((A = c.find((k) => k.index === l)) == null ? void 0 : A.value);
-      const te = c.findIndex((k) => k.index === l) ?? -1, re = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, ne = Math.abs(te + re + f) % f;
-      o.activeIndex = c[ne].index ?? -1;
+      e.code === "Enter" && O((A = p.find((y) => y.index === l)) == null ? void 0 : A.value);
+      const te = p.findIndex((y) => y.index === l) ?? -1, re = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, ne = Math.abs(te + re + f) % f;
+      o.activeIndex = p[ne].index ?? -1;
     };
-    return _e(i), S(() => r.modelValue, q, { immediate: !0 }), S(
+    return _e(i), P(() => r.modelValue, q, { immediate: !0 }), P(
       () => o.open,
       (e) => {
         var t;
@@ -127,17 +131,17 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
       class: "pl-dropdown__envelope",
       onClick: X
     }, [
-      p("div", {
+      c("div", {
         ref_key: "rootRef",
         ref: i,
         tabindex: j.value,
-        class: de(["pl-dropdown", { open: o.open, error: e.error, disabled: g.value }]),
+        class: de(["pl-dropdown", { open: o.open, error: e.error || e.errorStatus, disabled: g.value }]),
         onKeydown: oe,
         onFocusout: ee
       }, [
-        p("div", Le, [
-          p("div", Ce, [
-            ue(p("input", {
+        c("div", Le, [
+          c("div", Ce, [
+            ue(c("input", {
               ref_key: "input",
               ref: w,
               "onUpdate:modelValue": t[0] || (t[0] = (l) => o.search = l),
@@ -149,18 +153,18 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
               autocomplete: "chrome-off",
               onFocus: Z
             }, null, 40, Ee), [
-              [ce, o.search]
+              [pe, o.search]
             ]),
             o.open ? d("", !0) : (n(), m("div", Re, [
-              B(ge, null, {
-                default: z(() => [
-                  pe(v(E.value), 1)
+              D(ge, null, {
+                default: $(() => [
+                  ce(v(E.value), 1)
                 ]),
                 _: 1
               })
             ])),
-            p("div", Oe, [
-              h.value ? (n(), u(a(T), {
+            c("div", Oe, [
+              h.value ? (n(), u(a(M), {
                 key: 0,
                 name: "loading"
               })) : d("", !0),
@@ -168,14 +172,14 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
                 key: 1,
                 class: "clear",
                 name: "delete-clear",
-                onClick: P(Q, ["stop"])
+                onClick: z(Q, ["stop"])
               })) : d("", !0),
-              M(e.$slots, "append"),
-              p("div", {
+              x(e.$slots, "append"),
+              c("div", {
                 class: "pl-dropdown__arrow-wrapper",
-                onClick: P(Y, ["stop"])
+                onClick: z(Y, ["stop"])
               }, [
-                e.arrowIconLarge ? (n(), u(a(T), {
+                e.arrowIconLarge ? (n(), u(a(M), {
                   key: 0,
                   name: e.arrowIconLarge,
                   class: "arrow-icon"
@@ -191,19 +195,19 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
               ])
             ])
           ]),
-          e.label ? (n(), m("label", xe, [
-            e.required ? (n(), u(a(ke), {
+          e.label ? (n(), m("label", Se, [
+            e.required ? (n(), u(a(ye), {
               key: 0,
               uri: a(fe)
             }, null, 8, ["uri"])) : d("", !0),
-            p("span", null, v(e.label), 1),
-            e.$slots.tooltip ? (n(), u(a(ye), {
+            c("span", null, v(e.label), 1),
+            e.$slots.tooltip ? (n(), u(a(ke), {
               key: 1,
               class: "info",
               position: "top"
             }, {
-              tooltip: z(() => [
-                M(e.$slots, "tooltip")
+              tooltip: $(() => [
+                x(e.$slots, "tooltip")
               ]),
               _: 3
             })) : d("", !0)
@@ -218,14 +222,17 @@ const Ve = ["tabindex"], Le = { class: "pl-dropdown__container" }, Ce = { class:
             "option-size": e.optionSize,
             "select-option": J
           }, null, 8, ["root-ref", "groups", "rest", "option-size"])) : d("", !0),
-          B(we, { class: "pl-dropdown__contour" })
+          D(we, {
+            class: "pl-dropdown__contour",
+            "group-position": e.groupPosition
+          }, null, 8, ["group-position"])
         ])
-      ], 42, Ve),
-      L.value ? (n(), m("div", Ae, v(L.value), 1)) : h.value && e.loadingOptionsHelper ? (n(), m("div", De, v(e.loadingOptionsHelper), 1)) : e.helper ? (n(), m("div", Se, v(e.helper), 1)) : d("", !0)
+      ], 42, be),
+      L.value ? (n(), m("div", Ae, v(L.value), 1)) : h.value && e.loadingOptionsHelper ? (n(), m("div", Be, v(e.loadingOptionsHelper), 1)) : e.helper ? (n(), m("div", Pe, v(e.helper), 1)) : d("", !0)
     ]));
   }
 });
 export {
-  Ye as default
+  Ze as default
 };
 //# sourceMappingURL=PlDropdown.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PlDropdown.vue.js","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 { 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     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * 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  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: 'small',\n    options: 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\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 computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue !== undefined && selectedIndex.value === -1) {\n    return 'The selected value is not one of the options';\n  }\n\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 textValue = computed(() => {\n  const options = unref(optionsRef);\n\n  const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n  return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && props.modelValue !== undefined) {\n    return '';\n  }\n\n  return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\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 (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\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\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"pl-dropdown__container\">\n        <div class=\"pl-dropdown__field\">\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            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\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\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"$slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <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\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"pl-dropdown__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}
+{"version":3,"file":"PlDropdown.vue.js","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 { 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     * 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?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    showErrorMessage: true,\n    placeholder: '...',\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\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 computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue !== undefined && selectedIndex.value === -1) {\n    return 'The selected value is not one of the options';\n  }\n\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 textValue = computed(() => {\n  const options = unref(optionsRef);\n\n  const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n  return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && props.modelValue !== undefined) {\n    return '';\n  }\n\n  return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\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 (!rootRef.value?.contains(relatedTarget) && !optionListRef.value?.listRef?.contains(relatedTarget)) {\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\">\n    <div\n      ref=\"rootRef\"\n      :tabindex=\"tabindex\"\n      class=\"pl-dropdown\"\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\">\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            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" class=\"input-value\">\n            <LongText> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"pl-dropdown__controls\">\n            <PlIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n            <slot name=\"append\" />\n            <div class=\"pl-dropdown__arrow-wrapper\" @click.stop=\"toggleOpen\">\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\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"$slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <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\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"pl-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n    <div v-else-if=\"helper\" class=\"pl-dropdown__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","rootRef","ref","input","optionListRef","useTemplateRef","data","reactive","findActiveIndex","tap","orderedRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","filteredRef","options","search","groupsRef","restRef","useGroupBy","tabindex","selectOption","_a","selectOptionWrapper","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","relatedTarget","_c","_b","handleKeydown","open","activeIndex","ordered","length","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js

@@ -1,10 +1,12 @@
 (function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(`.pl-dropdown-legacy{--contour-color: var(--txt-01);--contour-border-width: 1px;--options-bg: #fff;--option-hover-bg: var(--btn-sec-hover-grey);--label-offset-left-x: 8px;--label-offset-right-x: 8px;--label-color: var(--txt-01);position:relative;outline:none;min-height:var(--control-height);border-radius:6px;font-family:var(--font-family-base);font-size:var(--font-size-base);font-weight:var(--font-weigh-base)}[data-theme=dark] .pl-dropdown-legacy{--options-bg: #1b1b1f}.pl-dropdown-legacy__envelope{font-family:var(--control-font-family);min-width:160px}.pl-dropdown-legacy label{display:flex;align-items:center;gap:4px;position:absolute;top:0;transform:translateY(-60%);left:var(--label-offset-left-x);padding:0 4px;max-width:calc(100% - 16px);overflow:hidden;white-space:pre;text-overflow:ellipsis;cursor:inherit;color:var(--label-color);font-size:12px;font-weight:500;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background:var(--bg-elevated-01)}.pl-dropdown-legacy label>span{overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__container{position:absolute;top:0;left:0;right:0;border-radius:6px;min-height:var(--control-height);color:var(--txt-01)}.pl-dropdown-legacy__contour{border-radius:var(--border-radius-control);border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:0;pointer-events:none}.pl-dropdown-legacy__options{position:relative;background-color:var(--options-bg);border-radius:0 0 6px 6px;max-height:244px;border-top:1px solid var(--color-div-black);--thumb-color: var(--ic-02);overflow-y:auto}.pl-dropdown-legacy__options::-webkit-scrollbar{width:var(--scrollbar-width, 6px);height:5px;background-color:transparent;display:block}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb{background:var(--thumb-color);border-radius:5px}.pl-dropdown-legacy__options::-webkit-scrollbar-thumb:hover{--thumb-color: var(--border-color-focus)}.pl-dropdown-legacy__options .nothing-found{padding:0 10px;height:var(--control-height);line-height:var(--control-height);background-color:#fff;opacity:.5;font-style:italic}.pl-dropdown-legacy__options .option{position:relative;padding:0 30px 0 10px;height:var(--control-height);line-height:var(--control-height);cursor:pointer;-webkit-user-select:none;user-select:none}.pl-dropdown-legacy__options .option .checkmark{position:absolute;display:none;right:10px;top:50%;transform:translateY(-50%)}.pl-dropdown-legacy__options .option>span{display:block;overflow:hidden;white-space:nowrap;max-width:100%;text-overflow:ellipsis}.pl-dropdown-legacy__options .option.selected{background-color:var(--color-active-select)}.pl-dropdown-legacy__options .option.selected .checkmark{display:block}.pl-dropdown-legacy__options .option.active:not(.selected){background-color:var(--option-hover-bg)}.pl-dropdown-legacy__options .option:hover{background-color:var(--option-hover-bg)}.pl-dropdown-legacy__field{position:relative;border-radius:6px;overflow:hidden;background:transparent;padding:0 11px;min-height:var(--control-height);line-height:var(--control-height);display:flex;flex-direction:row;align-items:center}.pl-dropdown-legacy__field .input-value{outline:1px solid red;position:absolute;top:0;left:0;bottom:0;right:0;padding:0 60px 0 11px;pointer-events:none;line-height:var(--control-height);color:var(--contour-color);overflow:hidden;white-space:pre;text-overflow:ellipsis}.pl-dropdown-legacy__field input{min-height:calc(var(--control-height) - 2px);line-height:calc(var(--control-height) - 2px);font-family:inherit;font-size:inherit;background-color:transparent;border:none;padding:0;width:calc(100% - 40px);color:var(--txt-01);caret-color:var(--border-color-focus)}.pl-dropdown-legacy__field input:focus{outline:none}.pl-dropdown-legacy__field input:placeholder-shown{text-overflow:ellipsis}.pl-dropdown-legacy__field input::placeholder{color:var(--color-placeholder)}.pl-dropdown-legacy__helper{font-size:12px;color:var(--txt-03);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-legacy__error{font-size:12px;color:var(--txt-error);padding:2px 0 0;white-space:pre-wrap;text-overflow:ellipsis;font-weight:500;line-height:16px;margin-top:6px}.pl-dropdown-legacy__controls{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}.pl-dropdown-legacy__controls .mask-16,.pl-dropdown-legacy__controls .mask-24{--icon-color: var(--control-mask-fill);cursor:pointer}.pl-dropdown-legacy__controls .clear{--icon-color: var(--ic-02)}.pl-dropdown-legacy__controls .mask-loading{--icon-color: var(#07AD3E);animation:spin 2.5s linear infinite}.pl-dropdown-legacy .arrow-icon{cursor:pointer}.pl-dropdown-legacy .arrow-icon.arrow-icon-default{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2.46967%206.53033L3.53033%205.46967L8%209.93934L12.4697%205.46967L13.5303%206.53033L8%2012.0607L2.46967%206.53033Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-legacy.open,.pl-dropdown-legacy:focus-within{z-index:1;--label-color: var(--txt-focus)}.pl-dropdown-legacy.open .pl-dropdown-legacy__container{z-index:1000}.pl-dropdown-legacy.open .pl-dropdown-legacy__field{border-radius:6px 6px 0 0}.pl-dropdown-legacy.open .arrow-icon{background-color:var(--control-mask-fill);mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%204.93933L13.5303%2010.4697L12.4697%2011.5303L8%207.06065L3.53033%2011.5303L2.46967%2010.4697L8%204.93933Z'%20fill='%23110529'/%3e%3c/svg%3e");mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:16px;-webkit-mask-size:16px;width:16px;height:16px}.pl-dropdown-legacy:hover{--contour-color: var(--control-hover-color)}.pl-dropdown-legacy:focus-within:not(.error){--label-color: var(--txt-focus);--contour-color: var(--border-color-focus);--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--border-color-focus-shadow)}.pl-dropdown-legacy:focus-within.error{--contour-border-width: 2px;--contour-box-shadow: 0 0 0 4px var(--color-error-shadow)}.pl-dropdown-legacy.error{--contour-color: var(--txt-error);--label-color: var(--txt-error)}.pl-dropdown-legacy.disabled{--contour-color: var(--color-dis-01);--control-mask-fill: var(--color-dis-01);--label-color: var(--color-dis-01);cursor:not-allowed;pointer-events:none;-webkit-user-select:none;user-select:none}
-.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+.double-contour.top>div{border-bottom-right-radius:0;border-bottom-left-radius:0}.double-contour.bottom>div{border-top-right-radius:0;border-top-left-radius:0}.double-contour.left>div{border-top-right-radius:0;border-bottom-right-radius:0}.double-contour.right>div{border-top-left-radius:0;border-bottom-left-radius:0}.double-contour.top-left>div{border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.double-contour.top-right>div{border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:0}.double-contour.bottom-left>div{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:0}.double-contour.bottom-right>div{border-top-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0}.double-contour.middle>div{border-radius:0}
+.ui-lt-container{min-width:0;white-space:nowrap;overflow:hidden;position:relative;border-radius:5px}.ui-lt-container span{display:inline-block;overflow:hidden;text-overflow:ellipsis;width:100%;vertical-align:bottom;pointer-events:all!important}.ui-lt-container .ui-lt-animate{position:relative;animation:left-to-right var(--5deba9de) infinite alternate linear;overflow:unset!important;text-overflow:unset!important;width:fit-content!important}@keyframes left-to-right{0%{transform:translate(0);left:0%}to{transform:translate(-101%);left:101%}}`)),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
 import { defineComponent as te, useSlots as ne, ref as V, reactive as re, computed as i, unref as u, watch as B, watchPostEffect as le, createElementBlock as s, openBlock as r, createElementVNode as c, createCommentVNode as d, normalizeClass as b, createVNode as F, withDirectives as se, vModelText as ie, withCtx as M, createTextVNode as ae, toDisplayString as v, createBlock as m, renderSlot as N, withModifiers as h, Fragment as de, renderList as ue } from "vue";
 
 import { tap as ce, tapIf as pe } from "../../helpers/functions.js";
 import fe from "../PlTooltip/PlTooltip.vue.js";
 import ve from "../../utils/DoubleContour.vue.js";
+
 import { useLabelNotch as me } from "../../utils/useLabelNotch.js";
 import { scrollIntoView as he } from "../../helpers/dom.js";
 import { deepEqual as C } from "../../helpers/objects.js";
@@ -17,7 +19,7 @@ import { normalizeListOptions as Ie } from "../../helpers/utils.js";
 import { getErrorMessage as ge } from "../../helpers/error.js";
 import Ve from "../PlSvg/PlSvg.vue.js";
 import be from "../../assets/images/required.svg.js";
-const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class: "ui-dropdown__container" }, Se = { class: "ui-dropdown__field" }, xe = ["disabled", "placeholder"], Ae = { class: "ui-dropdown__controls" }, Oe = { key: 0 }, $e = {
+const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class: "ui-dropdown__container" }, Se = { class: "ui-dropdown__field" }, $e = ["disabled", "placeholder"], xe = { class: "ui-dropdown__controls" }, Ae = { key: 0 }, Oe = {
   key: 0,
   class: "nothing-found"
 }, De = {
@@ -31,7 +33,7 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
   class: "ui-dropdown__helper"
 }, Fe = {
   name: "PlDropdown"
-}, eo = /* @__PURE__ */ te({
+}, oo = /* @__PURE__ */ te({
   ...Fe,
   props: {
     modelValue: {},
@@ -57,30 +59,30 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
     }), H = () => ce(
       p.value.findIndex((e) => C(e.value, n.modelValue)),
       (e) => e < 0 ? 0 : e
-    ), R = () => t.activeIndex = H(), _ = i(() => n.options === void 0), y = i(() => _.value ? !0 : n.disabled), S = i(() => (n.options ?? []).findIndex((e) => C(e.value, n.modelValue))), x = i(() => {
+    ), R = () => t.activeIndex = H(), _ = i(() => n.options === void 0), y = i(() => _.value ? !0 : n.disabled), S = i(() => (n.options ?? []).findIndex((e) => C(e.value, n.modelValue))), $ = i(() => {
       if (!_.value) {
         if (n.error)
           return ge(n.error);
         if (n.modelValue !== void 0 && S.value === -1)
           return "The selected value is not one of the options";
       }
-    }), A = i(
+    }), x = i(
       () => Ie(n.options ?? []).map((e, o) => ({
         ...e,
         index: o,
         isSelected: o === S.value,
         isActive: o === t.activeIndex
       }))
-    ), O = i(() => {
-      const o = u(A).find((l) => C(l.value, n.modelValue));
+    ), A = i(() => {
+      const o = u(x).find((l) => C(l.value, n.modelValue));
       return (o == null ? void 0 : o.label) || n.modelValue;
-    }), U = i(() => !t.open && n.modelValue ? "" : n.modelValue ? String(O.value) : n.placeholder), K = i(() => n.modelValue !== void 0 && n.modelValue !== null), p = i(() => {
-      const e = A.value;
+    }), U = i(() => !t.open && n.modelValue ? "" : n.modelValue ? String(A.value) : n.placeholder), K = i(() => n.modelValue !== void 0 && n.modelValue !== null), p = i(() => {
+      const e = x.value;
       return t.search ? e.filter((o) => {
         const l = t.search.toLowerCase();
         return o.label.toLowerCase().includes(l) || o.description && o.description.toLowerCase().includes(l) ? !0 : typeof o.value == "string" ? o.value.toLowerCase().includes(l) : o.value === t.search;
       }) : e;
-    }), j = i(() => y.value ? void 0 : "0"), $ = (e) => {
+    }), j = i(() => y.value ? void 0 : "0"), O = (e) => {
       var o;
       E("update:modelValue", e), t.search = "", t.open = !1, (o = a == null ? void 0 : a.value) == null || o.focus();
     }, G = () => E("update:modelValue", void 0), J = () => {
@@ -109,7 +111,7 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
       const f = u(p), { length: w } = f;
       if (!w)
         return;
-      e.code === "Enter" && $((z = f.find((g) => g.index === l)) == null ? void 0 : z.value);
+      e.code === "Enter" && O((z = f.find((g) => g.index === l)) == null ? void 0 : z.value);
       const Z = f.findIndex((g) => g.index === l) ?? -1, ee = e.code === "ArrowDown" ? 1 : e.code === "ArrowUp" ? -1 : 0, oe = Math.abs(Z + ee + w) % w;
       t.activeIndex = p.value[oe].index ?? -1;
     };
@@ -143,7 +145,7 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
               spellcheck: "false",
               autocomplete: "chrome-off",
               onFocus: Q
-            }, null, 40, xe), [
+            }, null, 40, $e), [
               [ie, t.search]
             ]),
             t.open ? d("", !0) : (r(), s("div", {
@@ -152,12 +154,12 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
             }, [
               F(we, { class: "input-value" }, {
                 default: M(() => [
-                  ae(v(O.value), 1)
+                  ae(v(A.value), 1)
                 ]),
                 _: 1
               })
             ])),
-            c("div", Ae, [
+            c("div", xe, [
               _.value ? (r(), m(u(ye), {
                 key: 0,
                 name: "loading"
@@ -184,7 +186,7 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
               }))
             ])
           ]),
-          e.label ? (r(), s("label", Oe, [
+          e.label ? (r(), s("label", Ae, [
             e.required ? (r(), m(u(Ve), {
               key: 0,
               uri: u(be)
@@ -213,18 +215,18 @@ const Ce = { class: "ui-dropdown__envelope" }, Ee = ["tabindex"], Le = { class:
               "is-selected": l.isSelected,
               "is-hovered": l.isActive,
               size: e.optionSize,
-              onClick: h((w) => $(l.value), ["stop"])
+              onClick: h((w) => O(l.value), ["stop"])
             }, null, 8, ["option", "is-selected", "is-hovered", "size", "onClick"]))), 128)),
-            p.value.length ? d("", !0) : (r(), s("div", $e, "Nothing found"))
+            p.value.length ? d("", !0) : (r(), s("div", Oe, "Nothing found"))
           ], 512)) : d("", !0),
           F(ve, { class: "ui-dropdown__contour" })
         ])
       ], 42, Ee),
-      x.value ? (r(), s("div", De, v(x.value), 1)) : _.value && e.loadingOptionsHelper ? (r(), s("div", ze, v(e.loadingOptionsHelper), 1)) : e.helper ? (r(), s("div", Be, v(e.helper), 1)) : d("", !0)
+      $.value ? (r(), s("div", De, v($.value), 1)) : _.value && e.loadingOptionsHelper ? (r(), s("div", ze, v(e.loadingOptionsHelper), 1)) : e.helper ? (r(), s("div", Be, v(e.helper), 1)) : d("", !0)
     ]));
   }
 });
 export {
-  eo as default
+  oo as default
 };
 //# sourceMappingURL=PlDropdownLegacy.vue.js.map

package/dist/components/PlDropdownLegacy/PlDropdownLegacy.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlDropdownLegacy.vue.js","sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.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 './pl-dropdown-legacy.scss';\nimport { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';\nimport { tap, tapIf } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { scrollIntoView } from '../../helpers/dom';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { PlSvg } from '../PlSvg';\nimport SvgRequired from '../../assets/images/required.svg?raw';\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     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst slots = useSlots();\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst data = reactive({\n  search: '',\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    filteredRef.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\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 computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue !== undefined && selectedIndex.value === -1) {\n    return 'The selected value is not one of the options';\n  }\n\n  return undefined;\n});\n\nconst optionsRef = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst textValue = computed(() => {\n  const options = unref(optionsRef);\n\n  const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n  return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && props.modelValue) {\n    return '';\n  }\n\n  return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\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 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  root?.value?.focus();\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n  if (!root?.value?.contains(event.relatedTarget as Node | null)) {\n    data.search = '';\n    data.open = false;\n  }\n};\n\nconst scrollIntoActive = () => {\n  const $list = list.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\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    root.value?.focus();\n  }\n\n  const filtered = unref(filteredRef);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = filteredRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(root);\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    scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"ui-dropdown__envelope\">\n    <div\n      ref=\"root\"\n      :tabindex=\"tabindex\"\n      class=\"ui-dropdown\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"ui-dropdown__container\">\n        <div class=\"ui-dropdown__field\">\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            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" @click=\"setFocusOnInput\">\n            <LongText class=\"input-value\"> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"ui-dropdown__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n            <slot name=\"append\" />\n            <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" @click.stop=\"toggleOpen\" />\n            <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" @click.stop=\"toggleOpen\" />\n            <div v-else class=\"arrow-icon arrow-icon-default\" @click.stop=\"toggleOpen\" />\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <div v-if=\"data.open\" ref=\"list\" class=\"ui-dropdown__options\">\n          <DropdownListItem\n            v-for=\"(item, index) in filteredRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n        </div>\n        <DoubleContour class=\"ui-dropdown__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"ui-dropdown__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"ui-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n    <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","slots","useSlots","root","ref","list","input","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","scrollIntoActive","$list","tapIf","scrollIntoView","handleKeydown","open","activeIndex","filtered","length","_b","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIAA,KAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;;;;;;;AAsBA,UAAMC,IAAOC,GAOPC,IAAQC,GAuERC,IAAQC,GAAA,GAERC,IAAOC,EAAA,GACPC,IAAOD,EAAA,GACPE,IAAQF,EAAA,GAERG,IAAOC,GAAS;AAAA,MACpB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,MAAM;AAAA,IAAA,CACP,GAEKC,IAAkB,MACtBC;AAAA,MACEC,EAAY,MAAM,UAAU,CAACC,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC;AAAA,MACvE,CAACe,MAAOA,IAAI,IAAI,IAAIA;AAAA,IAAA,GAGlBC,IAAe,MAAOR,EAAK,cAAcE,EAAA,GAEzCO,IAAmBC,EAAS,MACzBlB,EAAM,YAAY,MAC1B,GAEKmB,IAAaD,EAAS,MACtBD,EAAiB,QACZ,KAGFjB,EAAM,QACd,GAEKoB,IAAgBF,EAAS,OACrBlB,EAAM,WAAW,CAAA,GAAI,UAAU,CAACa,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC,CACnF,GAEKqB,IAAgBH,EAAS,MAAM;AACnC,UAAI,CAAAD,EAAiB,OAIrB;AAAA,YAAIjB,EAAM;AACR,iBAAOsB,GAAgBtB,EAAM,KAAK;AAGpC,YAAIA,EAAM,eAAe,UAAaoB,EAAc,UAAU;AAC5D,iBAAO;AAAA;AAAA,IAIX,CAAC,GAEKG,IAAaL;AAAA,MAAS,MAC1BM,GAAqBxB,EAAM,WAAW,CAAA,CAAE,EAAE,IAAI,CAACyB,GAAKC,OAAW;AAAA,QAC7D,GAAGD;AAAA,QACH,OAAAC;AAAA,QACA,YAAYA,MAAUN,EAAc;AAAA,QACpC,UAAUM,MAAUlB,EAAK;AAAA,MAAA,EACzB;AAAA,IAAA,GAGEmB,IAAYT,EAAS,MAAM;AAG/B,YAAMU,IAFUC,EAAMN,CAAU,EAEa,KAAK,CAACV,MAAMC,EAAUD,EAAE,OAAOb,EAAM,UAAU,CAAC;AAE7F,cAAO4B,KAAA,gBAAAA,EAAM,UAAS5B,EAAM;AAAA,IAC9B,CAAC,GAEK8B,IAAsBZ,EAAS,MAC/B,CAACV,EAAK,QAAQR,EAAM,aACf,KAGFA,EAAM,aAAa,OAAO2B,EAAU,KAAK,IAAI3B,EAAM,WAC3D,GAEK+B,IAAWb,EAAS,MACjBlB,EAAM,eAAe,UAAaA,EAAM,eAAe,IAC/D,GAEKY,IAAcM,EAAS,MAAM;AACjC,YAAMc,IAAUT,EAAW;AAE3B,aAAIf,EAAK,SACAwB,EAAQ,OAAO,CAAC,MAA4B;AACjD,cAAMC,IAASzB,EAAK,OAAO,YAAA;AAM3B,eAJI,EAAE,MAAM,YAAA,EAAc,SAASyB,CAAM,KAIrC,EAAE,eAAe,EAAE,YAAY,cAAc,SAASA,CAAM,IACvD,KAGL,OAAO,EAAE,SAAU,WACd,EAAE,MAAM,YAAA,EAAc,SAASA,CAAM,IAGvC,EAAE,UAAUzB,EAAK;AAAA,MAC1B,CAAC,IAGIwB;AAAA,IACT,CAAC,GAEKE,IAAWhB,EAAS,MAAOC,EAAW,QAAQ,SAAY,GAAI,GAE9DgB,IAAe,CAACpB,MAAqB;;AACzC,MAAAjB,EAAK,qBAAqBiB,CAAC,GAC3BP,EAAK,SAAS,IACdA,EAAK,OAAO,KACZ4B,IAAAhC,KAAA,gBAAAA,EAAM,UAAN,QAAAgC,EAAa;AAAA,IACf,GAEMC,IAAQ,MAAMvC,EAAK,qBAAqB,MAAS,GAEjDwC,IAAkB,MAAA;;AAAM,cAAAF,IAAA7B,EAAM,UAAN,gBAAA6B,EAAa;AAAA,OAErCG,IAAa,MAAO/B,EAAK,OAAO,CAACA,EAAK,MAEtCgC,IAAe,MAAOhC,EAAK,OAAO,IAElCiC,IAAa,CAACC,MAAsB;;AACxC,OAAKN,IAAAhC,KAAA,gBAAAA,EAAM,UAAN,QAAAgC,EAAa,SAASM,EAAM,mBAC/BlC,EAAK,SAAS,IACdA,EAAK,OAAO;AAAA,IAEhB,GAEMmC,IAAmB,MAAM;AAC7B,YAAMC,IAAQtC,EAAK;AAEnB,MAAKsC,KAILC,GAAMD,EAAM,cAAc,eAAe,GAAkB,CAACnB,MAAQ;AAClE,QAAAqB,GAAeF,GAAOnB,CAAG;AAAA,MAC3B,CAAC;AAAA,IACH,GAEMsB,IAAgB,CAAC,MAAgD;;AACrE,UAAK,CAAC,aAAa,WAAW,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI;AAG9D,UAAE,eAAA;AAAA;AAFF;AAKF,YAAM,EAAE,MAAAC,GAAM,aAAAC,EAAA,IAAgBzC;AAE9B,UAAI,CAACwC,GAAM;AACT,QAAI,EAAE,SAAS,YACbxC,EAAK,OAAO;AAEd;AAAA,MACF;AAEA,MAAI,EAAE,SAAS,aACbA,EAAK,OAAO,KACZ4B,IAAAhC,EAAK,UAAL,QAAAgC,EAAY;AAGd,YAAMc,IAAWrB,EAAMjB,CAAW,GAE5B,EAAE,QAAAuC,MAAWD;AAEnB,UAAI,CAACC;AACH;AAGF,MAAI,EAAE,SAAS,WACbhB,GAAaiB,IAAAF,EAAS,KAAK,CAACG,MAAOA,EAAG,UAAUJ,CAAW,MAA9C,gBAAAG,EAAiD,KAAK;AAGrE,YAAME,IAAaJ,EAAS,UAAU,CAACG,MAAOA,EAAG,UAAUJ,CAAW,KAAK,IAErEM,KAAQ,EAAE,SAAS,cAAc,IAAI,EAAE,SAAS,YAAY,KAAK,GAEjEC,KAAW,KAAK,IAAIF,IAAaC,KAAQJ,CAAM,IAAIA;AAEzD,MAAA3C,EAAK,cAAcI,EAAY,MAAM4C,EAAQ,EAAE,SAAS;AAAA,IAC1D;AAEA,WAAAC,GAAcrD,CAAI,GAElBsD,EAAM,MAAM1D,EAAM,YAAYgB,GAAc,EAAE,WAAW,IAAM,GAE/D0C;AAAA,MACE,MAAMlD,EAAK;AAAA,MACX,CAACwC,MAAA;;AAAU,eAAAA,KAAOZ,IAAA7B,EAAM,UAAN,gBAAA6B,EAAa,UAAU;AAAA;AAAA,IAAA,GAG3CuB,GAAgB,MAAM;AAEpB,MAAAnD,EAAK,QAEDA,EAAK,eAAe,KAAKA,EAAK,QAChCmC,EAAA;AAAA,IAEJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PlDropdownLegacy.vue.js","sources":["../../../src/components/PlDropdownLegacy/PlDropdownLegacy.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 './pl-dropdown-legacy.scss';\nimport { computed, reactive, ref, unref, useSlots, watch, watchPostEffect } from 'vue';\nimport { tap, tapIf } from '../../helpers/functions';\nimport { PlTooltip } from '../PlTooltip';\nimport DoubleContour from '../../utils/DoubleContour.vue';\nimport { useLabelNotch } from '../../utils/useLabelNotch';\nimport type { ListOption, ListOptionNormalized } from '../../types';\nimport { scrollIntoView } from '../../helpers/dom';\nimport { deepEqual } from '../../helpers/objects';\nimport DropdownListItem from '../DropdownListItem.vue';\nimport LongText from '../LongText.vue';\nimport { PlIcon16 } from '../PlIcon16';\nimport { PlMaskIcon24 } from '../PlMaskIcon24';\nimport { normalizeListOptions } from '../../helpers/utils';\nimport { getErrorMessage } from '../../helpers/error.ts';\nimport { PlSvg } from '../PlSvg';\nimport SvgRequired from '../../assets/images/required.svg?raw';\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     * Placeholder text shown when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Enables a button to clear the selected value (default: false)\n     */\n    clearable?: boolean;\n    /**\n     * If `true`, the dropdown component is marked as required.\n     */\n    required?: boolean;\n    /**\n     * If `true`, the dropdown component is disabled and cannot be interacted with.\n     */\n    disabled?: boolean;\n    /**\n     * Custom icon (16px) class for the dropdown arrow (optional)\n     */\n    arrowIcon?: string;\n    /**\n     * Custom icon (24px) class for the dropdown arrow (optional)\n     */\n    arrowIconLarge?: string;\n    /**\n     * Option list item size\n     */\n    optionSize?: 'small' | 'medium';\n  }>(),\n  {\n    label: '',\n    helper: undefined,\n    loadingOptionsHelper: undefined,\n    error: undefined,\n    placeholder: '...',\n    clearable: false,\n    required: false,\n    disabled: false,\n    arrowIcon: undefined,\n    arrowIconLarge: undefined,\n    optionSize: 'small',\n    options: undefined,\n  },\n);\n\nconst slots = useSlots();\n\nconst root = ref<HTMLElement | undefined>();\nconst list = ref<HTMLElement | undefined>();\nconst input = ref<HTMLInputElement | undefined>();\n\nconst data = reactive({\n  search: '',\n  activeIndex: -1,\n  open: false,\n});\n\nconst findActiveIndex = () =>\n  tap(\n    filteredRef.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\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 computedError = computed(() => {\n  if (isLoadingOptions.value) {\n    return undefined;\n  }\n\n  if (props.error) {\n    return getErrorMessage(props.error);\n  }\n\n  if (props.modelValue !== undefined && selectedIndex.value === -1) {\n    return 'The selected value is not one of the options';\n  }\n\n  return undefined;\n});\n\nconst optionsRef = computed(() =>\n  normalizeListOptions(props.options ?? []).map((opt, index) => ({\n    ...opt,\n    index,\n    isSelected: index === selectedIndex.value,\n    isActive: index === data.activeIndex,\n  })),\n);\n\nconst textValue = computed(() => {\n  const options = unref(optionsRef);\n\n  const item: ListOption | undefined = options.find((o) => deepEqual(o.value, props.modelValue));\n\n  return item?.label || props.modelValue; // @todo show inner value?\n});\n\nconst computedPlaceholder = computed(() => {\n  if (!data.open && props.modelValue) {\n    return '';\n  }\n\n  return props.modelValue ? String(textValue.value) : props.placeholder;\n});\n\nconst hasValue = computed(() => {\n  return props.modelValue !== undefined && props.modelValue !== null;\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 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  root?.value?.focus();\n};\n\nconst clear = () => emit('update:modelValue', undefined);\n\nconst setFocusOnInput = () => input.value?.focus();\n\nconst toggleOpen = () => (data.open = !data.open);\n\nconst onInputFocus = () => (data.open = true);\n\nconst onFocusOut = (event: FocusEvent) => {\n  if (!root?.value?.contains(event.relatedTarget as Node | null)) {\n    data.search = '';\n    data.open = false;\n  }\n};\n\nconst scrollIntoActive = () => {\n  const $list = list.value;\n\n  if (!$list) {\n    return;\n  }\n\n  tapIf($list.querySelector('.hovered-item') as HTMLElement, (opt) => {\n    scrollIntoView($list, opt);\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    root.value?.focus();\n  }\n\n  const filtered = unref(filteredRef);\n\n  const { length } = filtered;\n\n  if (!length) {\n    return;\n  }\n\n  if (e.code === 'Enter') {\n    selectOption(filtered.find((it) => it.index === activeIndex)?.value);\n  }\n\n  const localIndex = filtered.findIndex((it) => it.index === activeIndex) ?? -1;\n\n  const delta = e.code === 'ArrowDown' ? 1 : e.code === 'ArrowUp' ? -1 : 0;\n\n  const newIndex = Math.abs(localIndex + delta + length) % length;\n\n  data.activeIndex = filteredRef.value[newIndex].index ?? -1;\n};\n\nuseLabelNotch(root);\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    scrollIntoActive();\n  }\n});\n</script>\n\n<template>\n  <div class=\"ui-dropdown__envelope\">\n    <div\n      ref=\"root\"\n      :tabindex=\"tabindex\"\n      class=\"ui-dropdown\"\n      :class=\"{ open: data.open, error, disabled: isDisabled }\"\n      @keydown=\"handleKeydown\"\n      @focusout=\"onFocusOut\"\n    >\n      <div class=\"ui-dropdown__container\">\n        <div class=\"ui-dropdown__field\">\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            @focus=\"onInputFocus\"\n          />\n\n          <div v-if=\"!data.open\" @click=\"setFocusOnInput\">\n            <LongText class=\"input-value\"> {{ textValue }} </LongText>\n          </div>\n\n          <div class=\"ui-dropdown__controls\">\n            <PlMaskIcon24 v-if=\"isLoadingOptions\" name=\"loading\" />\n            <PlIcon16 v-if=\"clearable && hasValue\" class=\"clear\" name=\"delete-clear\" @click.stop=\"clear\" />\n            <slot name=\"append\" />\n            <div v-if=\"arrowIconLarge\" class=\"arrow-icon\" :class=\"[`icon-24 ${arrowIconLarge}`]\" @click.stop=\"toggleOpen\" />\n            <div v-else-if=\"arrowIcon\" class=\"arrow-icon\" :class=\"[`icon-16 ${arrowIcon}`]\" @click.stop=\"toggleOpen\" />\n            <div v-else class=\"arrow-icon arrow-icon-default\" @click.stop=\"toggleOpen\" />\n          </div>\n        </div>\n        <label v-if=\"label\">\n          <PlSvg v-if=\"required\" :uri=\"SvgRequired\" />\n          <span>{{ label }}</span>\n          <PlTooltip v-if=\"slots.tooltip\" class=\"info\" position=\"top\">\n            <template #tooltip>\n              <slot name=\"tooltip\" />\n            </template>\n          </PlTooltip>\n        </label>\n        <div v-if=\"data.open\" ref=\"list\" class=\"ui-dropdown__options\">\n          <DropdownListItem\n            v-for=\"(item, index) in filteredRef\"\n            :key=\"index\"\n            :option=\"item\"\n            :is-selected=\"item.isSelected\"\n            :is-hovered=\"item.isActive\"\n            :size=\"optionSize\"\n            @click.stop=\"selectOption(item.value)\"\n          />\n          <div v-if=\"!filteredRef.length\" class=\"nothing-found\">Nothing found</div>\n        </div>\n        <DoubleContour class=\"ui-dropdown__contour\" />\n      </div>\n    </div>\n    <div v-if=\"computedError\" class=\"ui-dropdown__error\">{{ computedError }}</div>\n    <div v-else-if=\"isLoadingOptions && loadingOptionsHelper\" class=\"ui-dropdown__helper\">{{ loadingOptionsHelper }}</div>\n    <div v-else-if=\"helper\" class=\"ui-dropdown__helper\">{{ helper }}</div>\n  </div>\n</template>\n"],"names":["__default__","emit","__emit","props","__props","slots","useSlots","root","ref","list","input","data","reactive","findActiveIndex","tap","filteredRef","o","deepEqual","v","updateActive","isLoadingOptions","computed","isDisabled","selectedIndex","computedError","getErrorMessage","optionsRef","normalizeListOptions","opt","index","textValue","item","unref","computedPlaceholder","hasValue","options","search","tabindex","selectOption","_a","clear","setFocusOnInput","toggleOpen","onInputFocus","onFocusOut","event","scrollIntoActive","$list","tapIf","scrollIntoView","handleKeydown","open","activeIndex","filtered","length","_b","it","localIndex","delta","newIndex","useLabelNotch","watch","watchPostEffect"],"mappings":"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"}