@useinsider/ab-components 0.0.1 → 0.0.2

package/dist/index-BOsD8S57.js

@@ -0,0 +1,474 @@
+import { defineComponent as x, ref as h, onMounted as W, openBlock as _, createElementBlock as p, normalizeClass as u, unref as n, toDisplayString as b, createCommentVNode as w, normalizeStyle as H, createElementVNode as z, computed as $, Fragment as M, withDirectives as P, withModifiers as Z, vModelText as J, renderList as R, watch as K, createBlock as T, resolveDynamicComponent as ee, createVNode as te } from "vue";
+const ne = "_wrapper_1pges_169", oe = "_wrapper__field_1pges_174", re = "_wrapper__label_1pges_208", ae = "_wrapper__bottom_1pges_216", le = "_wrapper__errorMessage_1pges_220", se = "_wrapper__counter_1pges_225", C = {
+  wrapper: ne,
+  wrapper__field: oe,
+  wrapper__label: re,
+  wrapper__bottom: ae,
+  wrapper__errorMessage: le,
+  wrapper__counter: se,
+  "wrapper--error": "_wrapper--error_1pges_231"
+}, ue = ["for"], _e = ["id", "maxlength", "name", "placeholder", "value"], ie = ["id", "maxlength", "name", "placeholder", "value"], Qe = /* @__PURE__ */ x({
+  __name: "TextInput",
+  props: {
+    id: {},
+    name: {},
+    modelValue: {},
+    label: { default: "" },
+    placeholder: { default: "" },
+    maxLength: { default: void 0 },
+    maxHeight: { default: void 0 },
+    error: { default: "" },
+    multiline: { type: Boolean, default: !1 },
+    autoGrow: { type: Boolean, default: !1 },
+    counter: { type: Boolean }
+  },
+  emits: ["input", "change", "paste", "focus", "blur"],
+  setup(s, { emit: a }) {
+    const l = s, e = a, o = h(null), d = () => {
+      if (l.autoGrow && o.value) {
+        o.value.style.height = "";
+        const t = Math.min(o.value.scrollHeight, l.maxHeight || o.value.scrollHeight);
+        o.value.style.height = `${t}px`;
+      }
+    }, m = (t) => {
+      e("input", t), d();
+    };
+    return W(() => {
+      d();
+    }), (t, r) => {
+      var y;
+      return _(), p("div", {
+        class: u(n(C).wrapper)
+      }, [
+        t.label ? (_(), p("label", {
+          key: 0,
+          class: u(n(C).wrapper__label),
+          for: t.id
+        }, b(t.label), 11, ue)) : w("", !0),
+        t.multiline ? (_(), p("textarea", {
+          key: 1,
+          id: t.id,
+          ref_key: "textareaRef",
+          ref: o,
+          class: u([
+            n(C).wrapper__field,
+            {
+              [n(C)["wrapper--error"]]: t.error
+            }
+          ]),
+          maxlength: t.maxLength,
+          name: t.name,
+          placeholder: t.placeholder,
+          style: H(t.maxHeight ? { maxHeight: `${t.maxHeight}px` } : void 0),
+          value: t.modelValue,
+          onBlur: r[0] || (r[0] = (i) => e("blur", i)),
+          onChange: r[1] || (r[1] = (i) => t.$emit("change", i)),
+          onFocus: r[2] || (r[2] = (i) => e("focus", i)),
+          onInput: m,
+          onPaste: r[3] || (r[3] = (i) => e("paste", i))
+        }, null, 46, _e)) : (_(), p("input", {
+          key: 2,
+          id: t.id,
+          type: "text",
+          class: u([
+            n(C).wrapper__field,
+            {
+              [n(C)["wrapper--error"]]: t.error
+            }
+          ]),
+          maxlength: t.maxLength,
+          name: t.name,
+          placeholder: t.placeholder,
+          value: t.modelValue,
+          onBlur: r[4] || (r[4] = (i) => e("blur", i)),
+          onChange: r[5] || (r[5] = (i) => t.$emit("change", i)),
+          onFocus: r[6] || (r[6] = (i) => e("focus", i)),
+          onInput: m,
+          onPaste: r[7] || (r[7] = (i) => e("paste", i))
+        }, null, 42, ie)),
+        z("div", {
+          class: u(n(C).wrapper__bottom)
+        }, [
+          t.error ? (_(), p("div", {
+            key: 0,
+            class: u(n(C).wrapper__errorMessage)
+          }, b(t.error), 3)) : w("", !0),
+          t.counter ? (_(), p("div", {
+            key: 1,
+            class: u(n(C).wrapper__counter)
+          }, b(((y = t.modelValue) == null ? void 0 : y.toString().length) || 0), 3)) : w("", !0)
+        ], 2)
+      ], 2);
+    };
+  }
+}), de = {
+  mounted(s, a) {
+    s.clickOutsideEvent = (l) => {
+      [s, ...a.value.exclude || []].some((o) => o && (o === l.target || o.contains(l.target))) || a.value.handler();
+    }, document.addEventListener("click", s.clickOutsideEvent);
+  },
+  unmounted(s) {
+    s.clickOutsideEvent && document.removeEventListener("click", s.clickOutsideEvent);
+  }
+}, ce = (s, a) => {
+  var e;
+  let l = 0;
+  for (const o of s)
+    if (o.toLowerCase() === ((e = a[l]) == null ? void 0 : e.toLowerCase()) && l++, l === a.length)
+      return !0;
+  return !1;
+}, pe = (s, a, l) => {
+  if (!l.trim())
+    return s;
+  const e = l.toLowerCase();
+  return s.filter((o) => {
+    const d = String(o[a]);
+    return ce(d.toLowerCase(), e);
+  }).sort((o, d) => {
+    const m = String(o[a]).toLowerCase(), t = String(d[a]).toLowerCase();
+    return m === e ? -1 : t === e ? 1 : m.startsWith(e) && !t.startsWith(e) ? -1 : !m.startsWith(e) && t.startsWith(e) ? 1 : m.length - t.length;
+  });
+}, me = "_dropdown_zdj6q_169", ve = "_dropdown__valueContent_zdj6q_178", fe = "_dropdown__label_zdj6q_189", he = "_dropdown__value_zdj6q_178", we = "_dropdown__placeholder_zdj6q_196", ge = "_dropdown__arrowIcon_zdj6q_204", be = "_menu_zdj6q_209", ye = "_menu__searchContainer_zdj6q_222", Ce = "_menu__searchInputWrap_zdj6q_226", ke = "_menu__searchInput_zdj6q_226", ze = "_menu__errorMessage_zdj6q_247", Ie = "_menu__addButton_zdj6q_254", qe = "_menu__itemContainer_zdj6q_262", xe = "_menu__item_zdj6q_262", v = {
+  dropdown: me,
+  dropdown__valueContent: ve,
+  "dropdown__valueContent--open": "_dropdown__valueContent--open_zdj6q_186",
+  dropdown__label: fe,
+  dropdown__value: he,
+  dropdown__placeholder: we,
+  dropdown__arrowIcon: ge,
+  menu: be,
+  menu__searchContainer: ye,
+  menu__searchInputWrap: Ce,
+  menu__searchInput: ke,
+  "menu__searchInput--error": "_menu__searchInput--error_zdj6q_244",
+  menu__errorMessage: ze,
+  menu__addButton: Ie,
+  menu__itemContainer: qe,
+  menu__item: xe,
+  "menu__item--active": "_menu__item--active_zdj6q_300"
+}, $e = ["for"], je = ["placeholder"], Be = ["onClick"], Xe = /* @__PURE__ */ x({
+  __name: "DropdownMenu",
+  props: {
+    id: {},
+    label: {},
+    defaultSelected: { default: "" },
+    menuHeight: { default: 154 },
+    placeholder: {},
+    addable: { type: Boolean },
+    addButtonText: {},
+    searchable: { type: Boolean },
+    searchPlaceHolder: {},
+    items: {},
+    validateAddItem: { type: Function, default: () => null }
+  },
+  emits: ["add-error", "item-added", "select-item"],
+  setup(s, { emit: a }) {
+    const l = de, e = s, o = a, d = h(), m = h(), t = h(!0), r = h(null), y = h(""), i = h(null), I = h({ x: 0, y: 0, width: 0, shouldOpenUp: !1, height: e.menuHeight }), j = h([...e.items]), q = h([...e.items]), S = () => {
+      if (!d.value)
+        return;
+      const { offsetTop: c, offsetLeft: f, offsetWidth: g } = d.value, G = window.innerHeight, E = c + d.value.offsetHeight, V = E + e.menuHeight > G;
+      I.value = {
+        x: f + window.scrollX,
+        y: V ? c + window.scrollY : E + window.scrollY,
+        width: g,
+        shouldOpenUp: V,
+        height: e.menuHeight
+      };
+    }, U = () => {
+      S(), t.value = !t.value;
+    }, L = () => {
+      i.value = null, y.value = "", j.value = [...q.value];
+    }, F = () => {
+      t.value = !1, L();
+    }, N = (c) => {
+      r.value = c, y.value = "", F(), o("select-item", c);
+    }, A = () => {
+      const c = y.value.trim(), f = e.validateAddItem(c, q.value);
+      if (f) {
+        i.value = f, o("add-error", f);
+        return;
+      }
+      const g = {
+        text: c,
+        value: c
+      };
+      q.value.push(g), L(), o("item-added", g);
+    }, Y = () => {
+      j.value = pe(q.value, "text", y.value);
+    }, Q = () => {
+      i.value = "";
+    }, X = $(() => ({
+      top: I.value.shouldOpenUp ? `${I.value.y - 10}px` : `${I.value.y}px`,
+      left: `${I.value.x}px`,
+      width: `${I.value.width}px`,
+      height: `${e.menuHeight}px`
+    }));
+    W(() => {
+      if (S(), e.defaultSelected) {
+        const c = q.value.find((f) => f.value === e.defaultSelected);
+        c && (r.value = c, o("select-item", c));
+      }
+    });
+    const O = $(() => r.value ? r.value.text : "");
+    return (c, f) => (_(), p(M, null, [
+      z("div", {
+        ref_key: "dropdownRef",
+        ref: d,
+        class: u(n(v).dropdown)
+      }, [
+        c.label ? (_(), p("label", {
+          key: 0,
+          class: u(n(v).dropdown__label),
+          for: c.id
+        }, b(c.label), 11, $e)) : w("", !0),
+        z("button", {
+          class: u([
+            n(v).dropdown__valueContent,
+            {
+              [n(v)["dropdown__valueContent--open"]]: t.value
+            }
+          ]),
+          onClick: U
+        }, [
+          z("span", {
+            class: u(n(v).dropdown__value)
+          }, b(O.value), 3),
+          c.placeholder && !O.value ? (_(), p("span", {
+            key: 0,
+            class: u(n(v).dropdown__placeholder)
+          }, b(c.placeholder), 3)) : w("", !0),
+          (_(), p("svg", {
+            fill: "none",
+            height: "17",
+            viewBox: "0 0 16 17",
+            width: "16",
+            xmlns: "http://www.w3.org/2000/svg",
+            class: u(n(v).dropdown__arrowIcon)
+          }, f[2] || (f[2] = [
+            z("path", {
+              d: "M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z",
+              fill: "#91949F"
+            }, null, -1)
+          ]), 2))
+        ], 2)
+      ], 2),
+      t.value ? P((_(), p("div", {
+        key: 0,
+        ref_key: "menuRef",
+        ref: m,
+        class: u(n(v).menu),
+        style: H(X.value),
+        onClick: f[1] || (f[1] = Z(() => {
+        }, ["prevent"]))
+      }, [
+        e.searchable ? (_(), p("div", {
+          key: 0,
+          class: u(n(v).menu__searchContainer)
+        }, [
+          z("div", {
+            class: u(n(v).menu__searchInputWrap)
+          }, [
+            P(z("input", {
+              type: "text",
+              class: u([
+                n(v).menu__searchInput,
+                {
+                  [n(v)["menu__searchInput--error"]]: i.value
+                }
+              ]),
+              placeholder: c.searchPlaceHolder,
+              "onUpdate:modelValue": f[0] || (f[0] = (g) => y.value = g),
+              onFocus: Q,
+              onInput: Y
+            }, null, 42, je), [
+              [J, y.value]
+            ]),
+            i.value ? (_(), p("p", {
+              key: 0,
+              class: u(n(v).menu__errorMessage)
+            }, b(i.value), 3)) : w("", !0)
+          ], 2),
+          e.addable ? (_(), p("button", {
+            key: 0,
+            class: u(n(v).menu__addButton),
+            onClick: A
+          }, b(c.addButtonText), 3)) : w("", !0)
+        ], 2)) : w("", !0),
+        z("ul", {
+          class: u(n(v).menu__itemContainer)
+        }, [
+          (_(!0), p(M, null, R(j.value, (g) => (_(), p("li", {
+            key: g.value,
+            class: u([
+              n(v).menu__item,
+              {
+                [n(v)["menu__item--active"]]: r.value && g.value === r.value.value
+              }
+            ]),
+            onClick: (G) => N(g)
+          }, b(g.text), 11, Be))), 128))
+        ], 2)
+      ], 6)), [
+        [n(l), { handler: F, exclude: [d.value, m.value] }]
+      ]) : w("", !0)
+    ], 64));
+  }
+}), Me = (s, a, l) => {
+  const e = s[a];
+  return e ? typeof e == "function" ? e() : Promise.resolve(e) : new Promise((o, d) => {
+    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
+      d.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + a + (a.split("/").length !== l ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+}, He = /* @__PURE__ */ x({
+  __name: "Icon",
+  props: {
+    name: {},
+    size: { default: 16 },
+    color: {}
+  },
+  setup(s) {
+    const a = s, l = h(null);
+    K(
+      () => a.name,
+      async (o) => {
+        try {
+          const d = await Me(/* @__PURE__ */ Object.assign({ "./icons/FilledCautionTriangle.vue": () => import("./FilledCautionTriangle-ORbgUqfx.js"), "./icons/FilledCheckCircle.vue": () => import("./FilledCheckCircle-DgwFiK4_.js"), "./icons/FilledErrorBox.vue": () => import("./FilledErrorBox-Bx6em6H-.js"), "./icons/FilledInfoCircle.vue": () => import("./FilledInfoCircle-cjamS6eU.js"), "./icons/LineCheck.vue": () => import("./LineCheck-SMu9mSFJ.js"), "./icons/LoadingCircle.vue": () => import("./LoadingCircle-CnxCc6n9.js"), "./icons/SmartIcon.vue": () => import("./SmartIcon-C5ZhgY9m.js") }), `./icons/${o}.vue`, 3);
+          l.value = d.default;
+        } catch (d) {
+          console.warn(`Icon "${o}" not found.`, d), l.value = null;
+        }
+      },
+      { immediate: !0 }
+    );
+    const e = $(() => typeof a.size == "number" ? `${a.size}px` : a.size);
+    return (o, d) => l.value ? (_(), T(ee(l.value), {
+      key: 0,
+      class: "icon",
+      style: H({ width: e.value, height: e.value, fill: a.color || "currentColor" })
+    }, null, 8, ["style"])) : w("", !0);
+  }
+}), Se = (s, a) => {
+  const l = s.__vccOpts || s;
+  for (const [e, o] of a)
+    l[e] = o;
+  return l;
+}, D = /* @__PURE__ */ Se(He, [["__scopeId", "data-v-0439f329"]]), Le = "_button__size_default_qxh1r_1", Fe = "_button__size_small_qxh1r_8", Oe = "_button_qxh1r_1", Ge = "_button__label_qxh1r_191", Ee = "_button__solid_qxh1r_328", Ve = "_segmentGroup_qxh1r_335", Pe = "_fill_qxh1r_357", k = {
+  button__size_default: Le,
+  button__size_small: Fe,
+  button: Oe,
+  button__label: Ge,
+  "button--primary": "_button--primary_qxh1r_206",
+  "button--selected": "_button--selected_qxh1r_216",
+  "button--secondary": "_button--secondary_qxh1r_229",
+  "button--danger": "_button--danger_qxh1r_252",
+  "button--warning": "_button--warning_qxh1r_275",
+  "button--smart": "_button--smart_qxh1r_298",
+  button__solid: Ee,
+  segmentGroup: Ve,
+  "segmentGroup--vertical": "_segmentGroup--vertical_qxh1r_338",
+  "segmentGroup--horizontal": "_segmentGroup--horizontal_qxh1r_347",
+  fill: Pe
+}, We = ["disabled", "onClick"], Ze = /* @__PURE__ */ x({
+  __name: "SegmentButton",
+  props: {
+    color: {},
+    size: { default: "default" },
+    align: { default: "horizontal" },
+    disabled: { type: Boolean, default: !1 },
+    segments: {},
+    fill: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(s, { emit: a }) {
+    const l = s, e = a, o = h(""), d = (m) => {
+      l.disabled || m.disabled || (o.value = m.value, e("click", m.value));
+    };
+    return (m, t) => (_(), p("div", {
+      class: u([
+        n(k).segmentGroup,
+        n(k)[`segmentGroup--${m.align}`],
+        { [n(k).fill]: m.fill }
+      ])
+    }, [
+      (_(!0), p(M, null, R(m.segments, (r) => (_(), p("button", {
+        key: r.value,
+        class: u([
+          n(k).button,
+          n(k)[`button--${m.color}`],
+          n(k)[`button__size_${m.size}`],
+          n(k).fill,
+          {
+            [n(k)["button--selected"]]: r.value === o.value
+          }
+        ]),
+        disabled: r.disabled || l.disabled,
+        onClick: (y) => d(r)
+      }, [
+        r.icon ? (_(), T(n(D), {
+          key: 0,
+          name: r.icon
+        }, null, 8, ["name"])) : w("", !0),
+        r.label ? (_(), p("span", {
+          key: 1,
+          class: u(n(k).button__label)
+        }, b(r.label), 3)) : w("", !0)
+      ], 10, We))), 128))
+    ], 2));
+  }
+}), Re = "_container_2joy4_1", Te = "_container__text_2joy4_187", De = "_container__default_2joy4_191", Ue = "_container__warning_2joy4_199", Ne = "_container__alert_2joy4_207", Ae = "_container__success_2joy4_215", B = {
+  container: Re,
+  container__text: Te,
+  container__default: De,
+  container__warning: Ue,
+  container__alert: Ne,
+  container__success: Ae
+}, Je = /* @__PURE__ */ x({
+  __name: "OnPageMessage",
+  props: {
+    variant: { default: "default" },
+    text: {}
+  },
+  setup(s) {
+    const a = s, l = $(() => {
+      switch (a.variant) {
+        case "alert":
+          return "FilledErrorBox";
+        case "warning":
+          return "FilledCautionTriangle";
+        case "success":
+          return "FilledCheckCircle";
+        default:
+          return "FilledInfoCircle";
+      }
+    });
+    return (e, o) => (_(), p("div", {
+      class: u([
+        n(B).container,
+        n(B)[`container__${e.variant}`]
+      ])
+    }, [
+      te(D, {
+        name: l.value,
+        size: 24
+      }, null, 8, ["name"]),
+      z("span", {
+        class: u(n(B).container__text)
+      }, b(e.text), 3)
+    ], 2));
+  }
+});
+export {
+  D as I,
+  Se as _,
+  Qe as a,
+  Xe as b,
+  Ze as c,
+  Je as d
+};
+//# sourceMappingURL=index-BOsD8S57.js.map

package/dist/index-BOsD8S57.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BOsD8S57.js","sources":["../src/components/TextInput/TextInput.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/Icon.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/OnPageMessage/OnPageMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue: string | number;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    maxHeight?: number;\n    error?: string;\n    multiline?: boolean;\n    autoGrow?: boolean;\n    counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    maxHeight: undefined,\n    error: '',\n    multiline: false,\n    autoGrow: false,\n});\n\nconst emit = defineEmits<{\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n    if (props.autoGrow && textareaRef.value) {\n        textareaRef.value.style.height = '';\n\n        const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n        textareaRef.value.style.height = `${newHeight}px`;\n    }\n};\n\nconst handleInput = (event: Event) => {\n    emit('input', event);\n\n    autoGrow();\n};\n\nonMounted(() => {\n    autoGrow();\n});\n</script>\n\n<template>\n    <div :class=\"styles.wrapper\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <template v-if=\"multiline\">\n            <textarea\n                :id=\"id\"\n                ref=\"textareaRef\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\" />\n        </template>\n        <template v-else>\n            <input\n                :id=\"id\"\n                type=\"text\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\">\n        </template>\n\n        <div :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n    clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n    mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n        el.clickOutsideEvent = (event: Event) => {\n            const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n                return element && (element === event.target || element.contains(event.target as Node))\n            });\n\n            if (!isClickInside) {\n                binding.value.handler(); // Close handler\n            }\n        };\n\n        document.addEventListener('click', el.clickOutsideEvent);\n    },\n    unmounted(el: ClickOutsideElement) {\n        if (el.clickOutsideEvent) {\n            document.removeEventListener('click', el.clickOutsideEvent);\n        }\n    },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n    let searchIndex = 0;\n    for (const char of choiceValue) {\n        if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n            searchIndex++;\n        }\n        if (searchIndex === searchTerm.length) {\n            return true;\n        }\n    }\n    return false;\n};\n\n\nexport const fuzzySearch = <T>(\n    choices: T[],\n    key: keyof T,\n    searchTerm: string,\n): T[] => {\n    if (!searchTerm.trim()) {\n        return choices;\n    }\n\n    const normalizedSearchTerm = searchTerm.toLowerCase();\n\n    return choices\n        .filter(choice => {\n            const value = String(choice[key]);\n\n            return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n        })\n        .sort((a, b) => {\n            const aValue =  String(a[key]).toLowerCase();\n            const bValue = String(b[key]).toLowerCase();\n\n            if (aValue === normalizedSearchTerm) return -1;\n            if (bValue === normalizedSearchTerm) return 1;\n\n            if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n                return -1;\n            if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n                return 1;\n\n            return aValue.length - bValue.length;\n        });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n    text: string;\n    value: string;\n}\n\ninterface DropdownProps {\n    id: string;\n    label?: string;\n    defaultSelected?: string;\n    menuHeight?: number;\n    placeholder?: string;\n    addable?: boolean;\n    addButtonText?: string;\n    searchable?: boolean;\n    searchPlaceHolder?: string;\n    items: MenuItem[];\n    validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n    (e: 'add-error', error: string): void;\n    (e: 'item-added', item: MenuItem): void;\n    (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n    menuHeight: 154,\n    searchBar: false,\n    addItem: false,\n    defaultSelected: '',\n    validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(true);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = ref([...props.items]);\nconst allItems = ref([...props.items]);\n\nconst calculateMenuPosition = () => {\n    if (!dropdownRef.value) {\n        return;\n    }\n\n    const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n    const viewportHeight = window.innerHeight;\n    const bottom = top + dropdownRef.value.offsetHeight;\n    const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n    menuPosition.value = {\n        x: left + window.scrollX,\n        y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n        width,\n        shouldOpenUp,\n        height: props.menuHeight,\n    };\n};\n\nconst toggleMenu = () => {\n    calculateMenuPosition();\n    isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n    errorMessage.value = null;\n    searchQuery.value = '';\n    filteredItems.value = [...allItems.value];\n};\n\nconst closeMenu = () => {\n    isOpen.value = false;\n\n    resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n    selectedItem.value = item;\n    searchQuery.value = '';\n\n    closeMenu();\n\n    emit('select-item', item);\n};\n\nconst addItem = () => {\n    const query = searchQuery.value.trim();\n    const error = props.validateAddItem(query, allItems.value);\n\n    if (error) {\n        errorMessage.value = error;\n\n        emit('add-error', error);\n\n        return;\n    }\n\n    const newItem: MenuItem = {\n        text: query,\n        value: query,\n    };\n\n    allItems.value.push(newItem);\n    resetSettings();\n\n    emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n    filteredItems.value = fuzzySearch<MenuItem>(allItems.value, 'text', searchQuery.value);\n};\n\nconst onFocusSearch = () => {\n    errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n    top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n    left: `${menuPosition.value.x}px`,\n    width: `${menuPosition.value.width}px`,\n    height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n    calculateMenuPosition();\n\n    if (props.defaultSelected) {\n        const defaultItem = allItems.value.find(item => item.value === props.defaultSelected);\n\n        if (defaultItem) {\n            selectedItem.value = defaultItem;\n            emit('select-item', defaultItem);\n        }\n    }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n</script>\n\n<template>\n    <div\n        ref=\"dropdownRef\"\n        :class=\"styles.dropdown\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.dropdown__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <button\n            :class=\"[\n                styles.dropdown__valueContent, {\n                    [styles['dropdown__valueContent--open']]: isOpen,\n                },\n            ]\"\n            @click=\"toggleMenu\">\n            <span :class=\"styles.dropdown__value\">\n                {{ selectedValue }}\n            </span>\n            <span\n                v-if=\"placeholder && !selectedValue\"\n                :class=\"styles.dropdown__placeholder\">\n                {{ placeholder }}\n            </span>\n            <svg\n                fill=\"none\"\n                height=\"17\"\n                viewBox=\"0 0 16 17\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                :class=\"styles.dropdown__arrowIcon\">\n                <path\n                    d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n                    fill=\"#91949F\" />\n            </svg>\n        </button>\n    </div>\n\n    <div\n        v-if=\"isOpen\"\n        ref=\"menuRef\"\n        :class=\"styles.menu\"\n        :style=\"menuStyle\"\n        v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n        @click.prevent>\n        <div\n            v-if=\"props.searchable\"\n            :class=\"styles.menu__searchContainer\">\n            <div :class=\"styles.menu__searchInputWrap\">\n                <input\n                    type=\"text\"\n                    :class=\"[\n                        styles.menu__searchInput, {\n                            [styles['menu__searchInput--error']]: errorMessage,\n                        },\n                    ]\"\n                    :placeholder=\"searchPlaceHolder\"\n                    v-model=\"searchQuery\"\n                    @focus=\"onFocusSearch\"\n                    @input=\"onSearch\">\n                <p\n                    v-if=\"errorMessage\"\n                    :class=\"styles.menu__errorMessage\">\n                    {{ errorMessage }}\n                </p>\n            </div>\n            <button\n                v-if=\"props.addable\"\n                :class=\"styles.menu__addButton\"\n                @click=\"addItem\">\n                {{ addButtonText }}\n            </button>\n        </div>\n        <ul :class=\"styles.menu__itemContainer\">\n            <li\n                v-for=\"(item) in filteredItems\"\n                :key=\"item.value\"\n                :class=\"[\n                    styles.menu__item, {\n                        [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n                    },\n                ]\"\n                @click=\"selectItem(item)\">\n                {{ item.text }}\n            </li>\n        </ul>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\n\ninterface IconProps {\n    name: IconNames;\n    size?: 16 | 24;\n    color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n    size: 16,\n});\n\ntype X = (() => Promise<unknown>);\n\nconst iconComponent = ref<null | X>(null);\n\nwatch(\n    () => props.name,\n    async newName => {\n        try {\n            const component = await import(`./icons/${newName}.vue`);\n\n            iconComponent.value = component.default;\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.warn(`Icon \"${newName}\" not found.`, error);\n            iconComponent.value = null;\n        }\n    },\n    { immediate: true }\n);\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n    <component\n        v-if=\"iconComponent\"\n        :is=\"iconComponent\"\n        class=\"icon\"\n        :style=\"{ width: iconSize, height: iconSize, fill: props.color || 'currentColor' }\" />\n</template>\n\n<style scoped>\n.icon {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\ninterface SegmentType {\n    value: string;\n    label: string;\n    disabled?: boolean;\n    icon?: IconNames;\n}\n\ninterface SegmentButtonProps {\n    color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    align?: 'vertical' | 'horizontal';\n    disabled?: boolean;\n    segments: SegmentType[];\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    size: 'default',\n    align: 'horizontal',\n});\n\nconst emit = defineEmits<{\n    click: [event: SegmentType['value']];\n}>();\n\nconst selected = ref<string>('');\n\nconst setSelect = (segment: SegmentType) => {\n    if (props.disabled || segment.disabled) {\n        return;\n    }\n\n    selected.value = segment.value;\n\n    emit('click', segment.value);\n};\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.segmentGroup,\n            styles[`segmentGroup--${align}`],\n            { [styles.fill]: fill },\n        ]\">\n        <button\n            v-for=\"segment in segments\"\n            :key=\"segment.value\"\n            :class=\"[\n                styles.button,\n                styles[`button--${color}`],\n                styles[`button__size_${size}`],\n                styles.fill,\n                {\n                    [styles[`button--selected`]]: segment.value === selected,\n                },\n            ]\"\n            :disabled=\"segment.disabled || props.disabled\"\n            @click=\"setSelect(segment)\">\n            <Icon\n                v-if=\"segment.icon\"\n                :name=\"segment.icon\" />\n            <span\n                v-if=\"segment.label\"\n                :class=\"styles.button__label\">\n                {{ segment.label }}\n            </span>\n        </button>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n    variant?: 'default' | 'warning' | 'alert' | 'success';\n    text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n    variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n    switch (props.variant) {\n        case 'alert': return 'FilledErrorBox';\n        case 'warning': return 'FilledCautionTriangle';\n        case 'success': return 'FilledCheckCircle';\n\n        default: return 'FilledInfoCircle';\n    }\n});\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.container,\n            styles[`container__${variant}`],\n        ]\">\n        <Icon\n            :name=\"IconName\"\n            :size=\"24\" />\n        <span :class=\"styles.container__text\">{{ text }}</span>\n    </div>\n</template>\n"],"names":["props","__props","emit","__emit","textareaRef","ref","autoGrow","newHeight","handleInput","event","onMounted","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","a","b","aValue","bValue","vClickOutside","dropdownRef","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","onFocusSearch","menuStyle","computed","defaultItem","selectedValue","iconComponent","watch","newName","component","__variableDynamicImportRuntimeHelper","iconSize","selected","setSelect","segment","IconName"],"mappings":"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"}

package/dist/index-DLeZOhZ7.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("vue"),L="_wrapper_1pges_169",F="_wrapper__field_1pges_174",D="_wrapper__label_1pges_208",P="_wrapper__bottom_1pges_216",O="_wrapper__errorMessage_1pges_220",G="_wrapper__counter_1pges_225",v={wrapper:L,wrapper__field:F,wrapper__label:D,wrapper__bottom:P,wrapper__errorMessage:O,wrapper__counter:G,"wrapper--error":"_wrapper--error_1pges_231"},W=["for"],R=["id","maxlength","name","placeholder","value"],T=["id","maxlength","name","placeholder","value"],U=e.defineComponent({__name:"TextInput",props:{id:{},name:{},modelValue:{},label:{default:""},placeholder:{default:""},maxLength:{default:void 0},maxHeight:{default:void 0},error:{default:""},multiline:{type:Boolean,default:!1},autoGrow:{type:Boolean,default:!1},counter:{type:Boolean}},emits:["input","change","paste","focus","blur"],setup(s,{emit:l}){const a=s,n=l,o=e.ref(null),i=()=>{if(a.autoGrow&&o.value){o.value.style.height="";const t=Math.min(o.value.scrollHeight,a.maxHeight||o.value.scrollHeight);o.value.style.height=`${t}px`}},_=t=>{n("input",t),i()};return e.onMounted(()=>{i()}),(t,r)=>{var f;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(v).wrapper)},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(e.unref(v).wrapper__label),for:t.id},e.toDisplayString(t.label),11,W)):e.createCommentVNode("",!0),t.multiline?(e.openBlock(),e.createElementBlock("textarea",{key:1,id:t.id,ref_key:"textareaRef",ref:o,class:e.normalizeClass([e.unref(v).wrapper__field,{[e.unref(v)["wrapper--error"]]:t.error}]),maxlength:t.maxLength,name:t.name,placeholder:t.placeholder,style:e.normalizeStyle(t.maxHeight?{maxHeight:`${t.maxHeight}px`}:void 0),value:t.modelValue,onBlur:r[0]||(r[0]=u=>n("blur",u)),onChange:r[1]||(r[1]=u=>t.$emit("change",u)),onFocus:r[2]||(r[2]=u=>n("focus",u)),onInput:_,onPaste:r[3]||(r[3]=u=>n("paste",u))},null,46,R)):(e.openBlock(),e.createElementBlock("input",{key:2,id:t.id,type:"text",class:e.normalizeClass([e.unref(v).wrapper__field,{[e.unref(v)["wrapper--error"]]:t.error}]),maxlength:t.maxLength,name:t.name,placeholder:t.placeholder,value:t.modelValue,onBlur:r[4]||(r[4]=u=>n("blur",u)),onChange:r[5]||(r[5]=u=>t.$emit("change",u)),onFocus:r[6]||(r[6]=u=>n("focus",u)),onInput:_,onPaste:r[7]||(r[7]=u=>n("paste",u))},null,42,T)),e.createElementVNode("div",{class:e.normalizeClass(e.unref(v).wrapper__bottom)},[t.error?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(v).wrapper__errorMessage)},e.toDisplayString(t.error),3)):e.createCommentVNode("",!0),t.counter?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(v).wrapper__counter)},e.toDisplayString(((f=t.modelValue)==null?void 0:f.toString().length)||0),3)):e.createCommentVNode("",!0)],2)],2)}}}),A={mounted(s,l){s.clickOutsideEvent=a=>{[s,...l.value.exclude||[]].some(o=>o&&(o===a.target||o.contains(a.target)))||l.value.handler()},document.addEventListener("click",s.clickOutsideEvent)},unmounted(s){s.clickOutsideEvent&&document.removeEventListener("click",s.clickOutsideEvent)}},Y=(s,l)=>{var n;let a=0;for(const o of s)if(o.toLowerCase()===((n=l[a])==null?void 0:n.toLowerCase())&&a++,a===l.length)return!0;return!1},Q=(s,l,a)=>{if(!a.trim())return s;const n=a.toLowerCase();return s.filter(o=>{const i=String(o[l]);return Y(i.toLowerCase(),n)}).sort((o,i)=>{const _=String(o[l]).toLowerCase(),t=String(i[l]).toLowerCase();return _===n?-1:t===n?1:_.startsWith(n)&&!t.startsWith(n)?-1:!_.startsWith(n)&&t.startsWith(n)?1:_.length-t.length})},X="_dropdown_zdj6q_169",Z="_dropdown__valueContent_zdj6q_178",J="_dropdown__label_zdj6q_189",K="_dropdown__value_zdj6q_178",ee="_dropdown__placeholder_zdj6q_196",ne="_dropdown__arrowIcon_zdj6q_204",te="_menu_zdj6q_209",oe="_menu__searchContainer_zdj6q_222",re="_menu__searchInputWrap_zdj6q_226",le="_menu__searchInput_zdj6q_226",ae="_menu__errorMessage_zdj6q_247",se="_menu__addButton_zdj6q_254",ue="_menu__itemContainer_zdj6q_262",ie="_menu__item_zdj6q_262",d={dropdown:X,dropdown__valueContent:Z,"dropdown__valueContent--open":"_dropdown__valueContent--open_zdj6q_186",dropdown__label:J,dropdown__value:K,dropdown__placeholder:ee,dropdown__arrowIcon:ne,menu:te,menu__searchContainer:oe,menu__searchInputWrap:re,menu__searchInput:le,"menu__searchInput--error":"_menu__searchInput--error_zdj6q_244",menu__errorMessage:ae,menu__addButton:se,menu__itemContainer:ue,menu__item:ie,"menu__item--active":"_menu__item--active_zdj6q_300"},ce=["for"],_e=["placeholder"],de=["onClick"],pe=e.defineComponent({__name:"DropdownMenu",props:{id:{},label:{},defaultSelected:{default:""},menuHeight:{default:154},placeholder:{},addable:{type:Boolean},addButtonText:{},searchable:{type:Boolean},searchPlaceHolder:{},items:{},validateAddItem:{type:Function,default:()=>null}},emits:["add-error","item-added","select-item"],setup(s,{emit:l}){const a=A,n=s,o=l,i=e.ref(),_=e.ref(),t=e.ref(!0),r=e.ref(null),f=e.ref(""),u=e.ref(null),w=e.ref({x:0,y:0,width:0,shouldOpenUp:!1,height:n.menuHeight}),k=e.ref([...n.items]),g=e.ref([...n.items]),y=()=>{if(!i.value)return;const{offsetTop:c,offsetLeft:p,offsetWidth:m}=i.value,I=window.innerHeight,E=c+i.value.offsetHeight,x=E+n.menuHeight>I;w.value={x:p+window.scrollX,y:x?c+window.scrollY:E+window.scrollY,width:m,shouldOpenUp:x,height:n.menuHeight}},S=()=>{y(),t.value=!t.value},z=()=>{u.value=null,f.value="",k.value=[...g.value]},B=()=>{t.value=!1,z()},V=c=>{r.value=c,f.value="",B(),o("select-item",c)},j=()=>{const c=f.value.trim(),p=n.validateAddItem(c,g.value);if(p){u.value=p,o("add-error",p);return}const m={text:c,value:c};g.value.push(m),z(),o("item-added",m)},M=()=>{k.value=Q(g.value,"text",f.value)},N=()=>{u.value=""},H=e.computed(()=>({top:w.value.shouldOpenUp?`${w.value.y-10}px`:`${w.value.y}px`,left:`${w.value.x}px`,width:`${w.value.width}px`,height:`${n.menuHeight}px`}));e.onMounted(()=>{if(y(),n.defaultSelected){const c=g.value.find(p=>p.value===n.defaultSelected);c&&(r.value=c,o("select-item",c))}});const q=e.computed(()=>r.value?r.value.text:"");return(c,p)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"dropdownRef",ref:i,class:e.normalizeClass(e.unref(d).dropdown)},[c.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass(e.unref(d).dropdown__label),for:c.id},e.toDisplayString(c.label),11,ce)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:e.normalizeClass([e.unref(d).dropdown__valueContent,{[e.unref(d)["dropdown__valueContent--open"]]:t.value}]),onClick:S},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(d).dropdown__value)},e.toDisplayString(q.value),3),c.placeholder&&!q.value?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(d).dropdown__placeholder)},e.toDisplayString(c.placeholder),3)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{fill:"none",height:"17",viewBox:"0 0 16 17",width:"16",xmlns:"http://www.w3.org/2000/svg",class:e.normalizeClass(e.unref(d).dropdown__arrowIcon)},p[2]||(p[2]=[e.createElementVNode("path",{d:"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z",fill:"#91949F"},null,-1)]),2))],2)],2),t.value?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"menuRef",ref:_,class:e.normalizeClass(e.unref(d).menu),style:e.normalizeStyle(H.value),onClick:p[1]||(p[1]=e.withModifiers(()=>{},["prevent"]))},[n.searchable?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(d).menu__searchContainer)},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(d).menu__searchInputWrap)},[e.withDirectives(e.createElementVNode("input",{type:"text",class:e.normalizeClass([e.unref(d).menu__searchInput,{[e.unref(d)["menu__searchInput--error"]]:u.value}]),placeholder:c.searchPlaceHolder,"onUpdate:modelValue":p[0]||(p[0]=m=>f.value=m),onFocus:N,onInput:M},null,42,_e),[[e.vModelText,f.value]]),u.value?(e.openBlock(),e.createElementBlock("p",{key:0,class:e.normalizeClass(e.unref(d).menu__errorMessage)},e.toDisplayString(u.value),3)):e.createCommentVNode("",!0)],2),n.addable?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(e.unref(d).menu__addButton),onClick:j},e.toDisplayString(c.addButtonText),3)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),e.createElementVNode("ul",{class:e.normalizeClass(e.unref(d).menu__itemContainer)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,m=>(e.openBlock(),e.createElementBlock("li",{key:m.value,class:e.normalizeClass([e.unref(d).menu__item,{[e.unref(d)["menu__item--active"]]:r.value&&m.value===r.value.value}]),onClick:I=>V(m)},e.toDisplayString(m.text),11,de))),128))],2)],6)),[[e.unref(a),{handler:B,exclude:[i.value,_.value]}]]):e.createCommentVNode("",!0)],64))}}),me=(s,l,a)=>{const n=s[l];return n?typeof n=="function"?n():Promise.resolve(n):new Promise((o,i)=>{(typeof queueMicrotask=="function"?queueMicrotask:setTimeout)(i.bind(null,new Error("Unknown variable dynamic import: "+l+(l.split("/").length!==a?". Note that variables only represent file names one level deep.":""))))})},fe=e.defineComponent({__name:"Icon",props:{name:{},size:{default:16},color:{}},setup(s){const l=s,a=e.ref(null);e.watch(()=>l.name,async o=>{try{const i=await me(Object.assign({"./icons/FilledCautionTriangle.vue":()=>Promise.resolve().then(()=>require("./FilledCautionTriangle-0jUaB44V.cjs")),"./icons/FilledCheckCircle.vue":()=>Promise.resolve().then(()=>require("./FilledCheckCircle-DQLU1TQX.cjs")),"./icons/FilledErrorBox.vue":()=>Promise.resolve().then(()=>require("./FilledErrorBox-CEqyivKn.cjs")),"./icons/FilledInfoCircle.vue":()=>Promise.resolve().then(()=>require("./FilledInfoCircle-BMQIRi8R.cjs")),"./icons/LineCheck.vue":()=>Promise.resolve().then(()=>require("./LineCheck-k-NrQe2a.cjs")),"./icons/LoadingCircle.vue":()=>Promise.resolve().then(()=>require("./LoadingCircle-B0ZkG3El.cjs")),"./icons/SmartIcon.vue":()=>Promise.resolve().then(()=>require("./SmartIcon-CSmtxUQk.cjs"))}),`./icons/${o}.vue`,3);a.value=i.default}catch(i){console.warn(`Icon "${o}" not found.`,i),a.value=null}},{immediate:!0});const n=e.computed(()=>typeof l.size=="number"?`${l.size}px`:l.size);return(o,i)=>a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),{key:0,class:"icon",style:e.normalizeStyle({width:n.value,height:n.value,fill:l.color||"currentColor"})},null,8,["style"])):e.createCommentVNode("",!0)}}),$=(s,l)=>{const a=s.__vccOpts||s;for(const[n,o]of l)a[n]=o;return a},b=$(fe,[["__scopeId","data-v-0439f329"]]),ve="_button__size_default_qxh1r_1",he="_button__size_small_qxh1r_8",we="_button_qxh1r_1",ge="_button__label_qxh1r_191",ke="_button__solid_qxh1r_328",Ce="_segmentGroup_qxh1r_335",be="_fill_qxh1r_357",h={button__size_default:ve,button__size_small:he,button:we,button__label:ge,"button--primary":"_button--primary_qxh1r_206","button--selected":"_button--selected_qxh1r_216","button--secondary":"_button--secondary_qxh1r_229","button--danger":"_button--danger_qxh1r_252","button--warning":"_button--warning_qxh1r_275","button--smart":"_button--smart_qxh1r_298",button__solid:ke,segmentGroup:Ce,"segmentGroup--vertical":"_segmentGroup--vertical_qxh1r_338","segmentGroup--horizontal":"_segmentGroup--horizontal_qxh1r_347",fill:be},ye=["disabled","onClick"],ze=e.defineComponent({__name:"SegmentButton",props:{color:{},size:{default:"default"},align:{default:"horizontal"},disabled:{type:Boolean,default:!1},segments:{},fill:{type:Boolean}},emits:["click"],setup(s,{emit:l}){const a=s,n=l,o=e.ref(""),i=_=>{a.disabled||_.disabled||(o.value=_.value,n("click",_.value))};return(_,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(h).segmentGroup,e.unref(h)[`segmentGroup--${_.align}`],{[e.unref(h).fill]:_.fill}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.segments,r=>(e.openBlock(),e.createElementBlock("button",{key:r.value,class:e.normalizeClass([e.unref(h).button,e.unref(h)[`button--${_.color}`],e.unref(h)[`button__size_${_.size}`],e.unref(h).fill,{[e.unref(h)["button--selected"]]:r.value===o.value}]),disabled:r.disabled||a.disabled,onClick:f=>i(r)},[r.icon?(e.openBlock(),e.createBlock(e.unref(b),{key:0,name:r.icon},null,8,["name"])):e.createCommentVNode("",!0),r.label?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(e.unref(h).button__label)},e.toDisplayString(r.label),3)):e.createCommentVNode("",!0)],10,ye))),128))],2))}}),Be="_container_2joy4_1",qe="_container__text_2joy4_187",Ie="_container__default_2joy4_191",Ee="_container__warning_2joy4_199",xe="_container__alert_2joy4_207",$e="_container__success_2joy4_215",C={container:Be,container__text:qe,container__default:Ie,container__warning:Ee,container__alert:xe,container__success:$e},Se=e.defineComponent({__name:"OnPageMessage",props:{variant:{default:"default"},text:{}},setup(s){const l=s,a=e.computed(()=>{switch(l.variant){case"alert":return"FilledErrorBox";case"warning":return"FilledCautionTriangle";case"success":return"FilledCheckCircle";default:return"FilledInfoCircle"}});return(n,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([e.unref(C).container,e.unref(C)[`container__${n.variant}`]])},[e.createVNode(b,{name:a.value,size:24},null,8,["name"]),e.createElementVNode("span",{class:e.normalizeClass(e.unref(C).container__text)},e.toDisplayString(n.text),3)],2))}});exports.Icon=b;exports._export_sfc=$;exports._sfc_main=U;exports._sfc_main$1=pe;exports._sfc_main$2=ze;exports._sfc_main$3=Se;
+//# sourceMappingURL=index-DLeZOhZ7.cjs.map

package/dist/index-DLeZOhZ7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DLeZOhZ7.cjs","sources":["../src/components/TextInput/TextInput.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/Icon.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/OnPageMessage/OnPageMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue: string | number;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    maxHeight?: number;\n    error?: string;\n    multiline?: boolean;\n    autoGrow?: boolean;\n    counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    maxHeight: undefined,\n    error: '',\n    multiline: false,\n    autoGrow: false,\n});\n\nconst emit = defineEmits<{\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n    if (props.autoGrow && textareaRef.value) {\n        textareaRef.value.style.height = '';\n\n        const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n        textareaRef.value.style.height = `${newHeight}px`;\n    }\n};\n\nconst handleInput = (event: Event) => {\n    emit('input', event);\n\n    autoGrow();\n};\n\nonMounted(() => {\n    autoGrow();\n});\n</script>\n\n<template>\n    <div :class=\"styles.wrapper\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <template v-if=\"multiline\">\n            <textarea\n                :id=\"id\"\n                ref=\"textareaRef\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\" />\n        </template>\n        <template v-else>\n            <input\n                :id=\"id\"\n                type=\"text\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\">\n        </template>\n\n        <div :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n    clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n    mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n        el.clickOutsideEvent = (event: Event) => {\n            const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n                return element && (element === event.target || element.contains(event.target as Node))\n            });\n\n            if (!isClickInside) {\n                binding.value.handler(); // Close handler\n            }\n        };\n\n        document.addEventListener('click', el.clickOutsideEvent);\n    },\n    unmounted(el: ClickOutsideElement) {\n        if (el.clickOutsideEvent) {\n            document.removeEventListener('click', el.clickOutsideEvent);\n        }\n    },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n    let searchIndex = 0;\n    for (const char of choiceValue) {\n        if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n            searchIndex++;\n        }\n        if (searchIndex === searchTerm.length) {\n            return true;\n        }\n    }\n    return false;\n};\n\n\nexport const fuzzySearch = <T>(\n    choices: T[],\n    key: keyof T,\n    searchTerm: string,\n): T[] => {\n    if (!searchTerm.trim()) {\n        return choices;\n    }\n\n    const normalizedSearchTerm = searchTerm.toLowerCase();\n\n    return choices\n        .filter(choice => {\n            const value = String(choice[key]);\n\n            return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n        })\n        .sort((a, b) => {\n            const aValue =  String(a[key]).toLowerCase();\n            const bValue = String(b[key]).toLowerCase();\n\n            if (aValue === normalizedSearchTerm) return -1;\n            if (bValue === normalizedSearchTerm) return 1;\n\n            if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n                return -1;\n            if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n                return 1;\n\n            return aValue.length - bValue.length;\n        });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n    text: string;\n    value: string;\n}\n\ninterface DropdownProps {\n    id: string;\n    label?: string;\n    defaultSelected?: string;\n    menuHeight?: number;\n    placeholder?: string;\n    addable?: boolean;\n    addButtonText?: string;\n    searchable?: boolean;\n    searchPlaceHolder?: string;\n    items: MenuItem[];\n    validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n    (e: 'add-error', error: string): void;\n    (e: 'item-added', item: MenuItem): void;\n    (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n    menuHeight: 154,\n    searchBar: false,\n    addItem: false,\n    defaultSelected: '',\n    validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(true);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = ref([...props.items]);\nconst allItems = ref([...props.items]);\n\nconst calculateMenuPosition = () => {\n    if (!dropdownRef.value) {\n        return;\n    }\n\n    const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n    const viewportHeight = window.innerHeight;\n    const bottom = top + dropdownRef.value.offsetHeight;\n    const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n    menuPosition.value = {\n        x: left + window.scrollX,\n        y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n        width,\n        shouldOpenUp,\n        height: props.menuHeight,\n    };\n};\n\nconst toggleMenu = () => {\n    calculateMenuPosition();\n    isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n    errorMessage.value = null;\n    searchQuery.value = '';\n    filteredItems.value = [...allItems.value];\n};\n\nconst closeMenu = () => {\n    isOpen.value = false;\n\n    resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n    selectedItem.value = item;\n    searchQuery.value = '';\n\n    closeMenu();\n\n    emit('select-item', item);\n};\n\nconst addItem = () => {\n    const query = searchQuery.value.trim();\n    const error = props.validateAddItem(query, allItems.value);\n\n    if (error) {\n        errorMessage.value = error;\n\n        emit('add-error', error);\n\n        return;\n    }\n\n    const newItem: MenuItem = {\n        text: query,\n        value: query,\n    };\n\n    allItems.value.push(newItem);\n    resetSettings();\n\n    emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n    filteredItems.value = fuzzySearch<MenuItem>(allItems.value, 'text', searchQuery.value);\n};\n\nconst onFocusSearch = () => {\n    errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n    top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n    left: `${menuPosition.value.x}px`,\n    width: `${menuPosition.value.width}px`,\n    height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n    calculateMenuPosition();\n\n    if (props.defaultSelected) {\n        const defaultItem = allItems.value.find(item => item.value === props.defaultSelected);\n\n        if (defaultItem) {\n            selectedItem.value = defaultItem;\n            emit('select-item', defaultItem);\n        }\n    }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n</script>\n\n<template>\n    <div\n        ref=\"dropdownRef\"\n        :class=\"styles.dropdown\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.dropdown__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <button\n            :class=\"[\n                styles.dropdown__valueContent, {\n                    [styles['dropdown__valueContent--open']]: isOpen,\n                },\n            ]\"\n            @click=\"toggleMenu\">\n            <span :class=\"styles.dropdown__value\">\n                {{ selectedValue }}\n            </span>\n            <span\n                v-if=\"placeholder && !selectedValue\"\n                :class=\"styles.dropdown__placeholder\">\n                {{ placeholder }}\n            </span>\n            <svg\n                fill=\"none\"\n                height=\"17\"\n                viewBox=\"0 0 16 17\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                :class=\"styles.dropdown__arrowIcon\">\n                <path\n                    d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n                    fill=\"#91949F\" />\n            </svg>\n        </button>\n    </div>\n\n    <div\n        v-if=\"isOpen\"\n        ref=\"menuRef\"\n        :class=\"styles.menu\"\n        :style=\"menuStyle\"\n        v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n        @click.prevent>\n        <div\n            v-if=\"props.searchable\"\n            :class=\"styles.menu__searchContainer\">\n            <div :class=\"styles.menu__searchInputWrap\">\n                <input\n                    type=\"text\"\n                    :class=\"[\n                        styles.menu__searchInput, {\n                            [styles['menu__searchInput--error']]: errorMessage,\n                        },\n                    ]\"\n                    :placeholder=\"searchPlaceHolder\"\n                    v-model=\"searchQuery\"\n                    @focus=\"onFocusSearch\"\n                    @input=\"onSearch\">\n                <p\n                    v-if=\"errorMessage\"\n                    :class=\"styles.menu__errorMessage\">\n                    {{ errorMessage }}\n                </p>\n            </div>\n            <button\n                v-if=\"props.addable\"\n                :class=\"styles.menu__addButton\"\n                @click=\"addItem\">\n                {{ addButtonText }}\n            </button>\n        </div>\n        <ul :class=\"styles.menu__itemContainer\">\n            <li\n                v-for=\"(item) in filteredItems\"\n                :key=\"item.value\"\n                :class=\"[\n                    styles.menu__item, {\n                        [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n                    },\n                ]\"\n                @click=\"selectItem(item)\">\n                {{ item.text }}\n            </li>\n        </ul>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\n\ninterface IconProps {\n    name: IconNames;\n    size?: 16 | 24;\n    color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n    size: 16,\n});\n\ntype X = (() => Promise<unknown>);\n\nconst iconComponent = ref<null | X>(null);\n\nwatch(\n    () => props.name,\n    async newName => {\n        try {\n            const component = await import(`./icons/${newName}.vue`);\n\n            iconComponent.value = component.default;\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.warn(`Icon \"${newName}\" not found.`, error);\n            iconComponent.value = null;\n        }\n    },\n    { immediate: true }\n);\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n    <component\n        v-if=\"iconComponent\"\n        :is=\"iconComponent\"\n        class=\"icon\"\n        :style=\"{ width: iconSize, height: iconSize, fill: props.color || 'currentColor' }\" />\n</template>\n\n<style scoped>\n.icon {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport { Icon } from '@/index';\nimport styles from './SegmentButton.module.scss';\n\ninterface SegmentType {\n    value: string;\n    label: string;\n    disabled?: boolean;\n    icon?: IconNames;\n}\n\ninterface SegmentButtonProps {\n    color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    align?: 'vertical' | 'horizontal';\n    disabled?: boolean;\n    segments: SegmentType[];\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    size: 'default',\n    align: 'horizontal',\n});\n\nconst emit = defineEmits<{\n    click: [event: SegmentType['value']];\n}>();\n\nconst selected = ref<string>('');\n\nconst setSelect = (segment: SegmentType) => {\n    if (props.disabled || segment.disabled) {\n        return;\n    }\n\n    selected.value = segment.value;\n\n    emit('click', segment.value);\n};\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.segmentGroup,\n            styles[`segmentGroup--${align}`],\n            { [styles.fill]: fill },\n        ]\">\n        <button\n            v-for=\"segment in segments\"\n            :key=\"segment.value\"\n            :class=\"[\n                styles.button,\n                styles[`button--${color}`],\n                styles[`button__size_${size}`],\n                styles.fill,\n                {\n                    [styles[`button--selected`]]: segment.value === selected,\n                },\n            ]\"\n            :disabled=\"segment.disabled || props.disabled\"\n            @click=\"setSelect(segment)\">\n            <Icon\n                v-if=\"segment.icon\"\n                :name=\"segment.icon\" />\n            <span\n                v-if=\"segment.label\"\n                :class=\"styles.button__label\">\n                {{ segment.label }}\n            </span>\n        </button>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/components/Icon/types';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n    variant?: 'default' | 'warning' | 'alert' | 'success';\n    text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n    variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n    switch (props.variant) {\n        case 'alert': return 'FilledErrorBox';\n        case 'warning': return 'FilledCautionTriangle';\n        case 'success': return 'FilledCheckCircle';\n\n        default: return 'FilledInfoCircle';\n    }\n});\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.container,\n            styles[`container__${variant}`],\n        ]\">\n        <Icon\n            :name=\"IconName\"\n            :size=\"24\" />\n        <span :class=\"styles.container__text\">{{ text }}</span>\n    </div>\n</template>\n"],"names":["props","__props","emit","__emit","textareaRef","ref","autoGrow","newHeight","handleInput","event","onMounted","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","a","b","aValue","bValue","vClickOutside","dropdownRef","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","onFocusSearch","menuStyle","computed","defaultItem","selectedValue","iconComponent","watch","newName","component","__variableDynamicImportRuntimeHelper","iconSize","selected","setSelect","segment","IconName"],"mappings":"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"}