@onereach/ui-components 20.1.0 → 20.1.2

package/dist/esm/components/OrAutocompleteV3-8c6de221.js

@@ -0,0 +1,910 @@
+import { useAttrs, computed, inject, isRef, ref, watch, getCurrentInstance, onMounted, defineComponent, reactive, toRef, nextTick, resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createSlots, createElementVNode, mergeProps, createVNode, Fragment, renderList, vShow } from 'vue';
+import { useMutationObserver, useResizeObserver, refDebounced, useMediaQuery, computedAsync, watchTriggerable } from '@vueuse/core';
+import O from '@onereach/styles/screens.json';
+import Y$1 from '@onereach/styles/tailwind.config.json';
+import r$1 from 'lodash/get';
+import n$1 from 'lodash/isElement';
+import { OrErrorV3 as script$1 } from './or-error-v3/index.js';
+import { OrHintV3 as script$2 } from './or-hint-v3/index.js';
+import { OrIconButtonV3 as script$3 } from './or-icon-button-v3/index.js';
+import { OrInputBoxV3 as script$4, InputBoxVariant } from './or-input-box-v3/index.js';
+import { OrInputV3 as script$5 } from './or-input-v3/index.js';
+import { OrLabelV3 as script$6 } from './or-label-v3/index.js';
+import { OrLoaderV3 as script$7 } from './or-loader-v3/index.js';
+import { OrMenuItemV3 as script$8 } from './or-menu-item-v3/index.js';
+import { OrPopoverV3 as script$9 } from './or-popover-v3/index.js';
+import { OrTagInputV3 as script$a } from './or-tag-input-v3/index.js';
+import { TagsOverflow } from './or-tags-v3/index.js';
+
+var r = /* @__PURE__ */ ((u) => (u.Short = "short", u.Medium = "medium", u.Long = "long", u))(r || {}), h$1 = /* @__PURE__ */ ((u) => (u.Auto = "auto", u.H12 = "h12", u.H23 = "h23", u))(h$1 || {});
+
+const s$1 = typeof window < "u" ? window : null, g$1 = (s$1 == null ? void 0 : s$1.MutationObserver) || (s$1 == null ? void 0 : s$1.WebKitMutationObserver) || (s$1 == null ? void 0 : s$1.MozMutationObserver) || null, A = ((s$1 == null ? void 0 : s$1.requestAnimationFrame) || (s$1 == null ? void 0 : s$1.webkitRequestAnimationFrame) || (s$1 == null ? void 0 : s$1.mozRequestAnimationFrame) || (s$1 == null ? void 0 : s$1.msRequestAnimationFrame) || (s$1 == null ? void 0 : s$1.oRequestAnimationFrame) || // Fallback, but not a true polyfill
+// Only needed for Opera Mini
+((t) => setTimeout(t, 16))).bind(s$1), y$1 = ((s$1 == null ? void 0 : s$1.cancelAnimationFrame) || (s$1 == null ? void 0 : s$1.mozCancelAnimationFrame)).bind(s$1), b$1 = (t) => {
+  t && t.parentNode && t.parentNode.removeChild(t);
+}, w$1 = (t) => r$1(t, ["offsetHeight"], null), F$1 = (t, e) => [...(e && n$1(e) ? e : document).querySelectorAll(t)], h = (t, e) => (e && n$1(e) ? e : document).querySelector(t) || null, v$1 = (t, e) => t && typeof t.contains == "function" ? t.contains(e) : !1, C$1 = (t) => document.getElementById(/^#/.test(t) ? t.slice(1) : t) || null, S$1 = (t, e) => {
+  e && n$1(t) && t.classList && t.classList.add(e);
+}, q$2 = (t, e) => {
+  e && n$1(t) && t.classList && t.classList.remove(e);
+}, E$1 = (t, e) => e && n$1(t) && t.classList ? t.classList.contains(e) : !1, L$2 = (t, e, o) => {
+  e && n$1(t) && t.setAttribute(e, o);
+}, x$1 = (t, e) => {
+  e && n$1(t) && t.removeAttribute(e);
+}, M = (t, e) => e && n$1(t) ? t.getAttribute(e) : null, R$1 = (t, e) => e && n$1(t) ? t.hasAttribute(e) : null, z$1 = (t, e, o) => {
+  e && n$1(t) && (t.style[e] = o);
+}, T$1 = (t, e) => {
+  e && n$1(t) && (t.style[e] = "");
+}, B$1 = (t, e) => e && n$1(t) && t.style[e] || null, m$1 = (t) => n$1(t) ? t.getBoundingClientRect() : null, c$2 = (t) => r$1(s$1, "getComputedStyle", null) && n$1(t) ? getComputedStyle(t) : {}, u = (t) => {
+  const e = {
+    top: 0,
+    left: 0
+  };
+  if (!n$1(t) || t.getClientRects().length === 0)
+    return e;
+  const o = m$1(t);
+  if (o) {
+    const i = t.ownerDocument.defaultView;
+    e.top = o.top + r$1(i, "pageYOffset", 0), e.left = o.left + r$1(i, "pageXOffset", 0);
+  }
+  return e;
+}, P$1 = (t) => {
+  let e = {
+    top: 0,
+    left: 0
+  };
+  if (!n$1(t))
+    return e;
+  let o = {
+    top: 0,
+    left: 0
+  };
+  const i = c$2(t);
+  if (i.position === "fixed")
+    e = m$1(t) || e;
+  else {
+    e = u(t);
+    const f = t.ownerDocument;
+    let a = t.offsetParent || f.documentElement;
+    for (; a && (a === f.body || a === f.documentElement) && c$2(a).position === "static"; )
+      a = a.parentNode;
+    if (a && a !== t && a.nodeType === Node.ELEMENT_NODE) {
+      o = u(a);
+      const l = c$2(a);
+      o.top += parseFloat(l.borderTopWidth), o.left += parseFloat(l.borderLeftWidth);
+    }
+  }
+  return {
+    top: e.top - o.top - parseFloat(i.marginTop),
+    left: e.left - o.left - parseFloat(i.marginLeft)
+  };
+}, _$2 = (t) => {
+  let e = 0;
+  for (; t; ) {
+    const i = c$2(t).zIndex;
+    i !== "auto" && (e = +i > e ? +i : e), t = t.parentElement;
+  }
+  return e;
+};
+
+const t$1 = (e) => e.getClientRects().length > 0;
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const isVue3 = true;
+const isVue2 = !isVue3;
+
+const _$1 = () => {
+  const e = useAttrs();
+  return {
+    readonly: computed(() => e.readonly),
+    disabled: computed(() => e.disabled),
+    "force-state": computed(() => e["force-state"])
+  };
+}, q$1 = Symbol(), L$1 = Symbol(), N$1 = Symbol(), k$1 = (e) => computed(() => e.value ?? inject(q$1, r.Short)), G$1 = (e, t) => computed(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
+  dateStyle: e.value,
+  timeZone: "UTC"
+}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
+  switch (n.type) {
+    case "year":
+      return r + n.value.replace(/^\d{2}$/, "YY").replace(/^\d{4}$/, "YYYY");
+    case "month":
+      switch (e.value) {
+        case "short":
+          return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
+        case "medium":
+          return r + "MMM";
+        case "long":
+          return r + "MMMM";
+        default:
+          throw new Error("[useDateMask]: `format` has an invalid value.");
+      }
+    case "day":
+      return r + n.value.replace(/^\d{1}$/, "D").replace(/^\d{2}$/, "DD");
+    default:
+      return r + n.value;
+  }
+}, "") : e.value(void 0, t.value)), J$1 = (e, t) => {
+  const s = isRef(e) ? e : ref(e), r = isRef(t) ? t : ref();
+  function n(a) {
+    return [...document.body.querySelectorAll("*")].filter(t$1).filter((u) => !u.isEqualNode(a)).map((u) => getComputedStyle(u)).map((u) => Number(u.zIndex)).filter((u) => !isNaN(u));
+  }
+  function l(a) {
+    a.style.zIndex = String(Math.max(0, ...n(a)) + 1);
+  }
+  watch([s, r], ([a]) => {
+    a && l(a);
+  }, { immediate: !0 });
+}, K$1 = () => {
+  const e = useAttrs(), t = getCurrentInstance();
+  return computed(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
+}, X$1 = (e) => computed(() => e.value ?? inject(L$1, navigator.language)), ee = (e, t = {}) => {
+  const { hide: s = !0, threshold: r = 0 } = t, n = isRef(e) ? e : ref(e), l = ref([]), a = ref([]);
+  function u() {
+    const i = n.value;
+    if (i) {
+      const d = [...i.children].reduce(({ innerItems: v, outerItems: y }, T) => {
+        const f = T, { x: D, width: I } = f.getBoundingClientRect(), { x: A, width: w } = i.getBoundingClientRect();
+        return D + I > A + w + r ? (s && f.style.setProperty("visibility", "hidden"), {
+          innerItems: v,
+          outerItems: [...y, f]
+        }) : (s && f.style.removeProperty("visibility"), {
+          innerItems: [...v, f],
+          outerItems: y
+        });
+      }, {
+        innerItems: [],
+        outerItems: []
+      });
+      l.value = d.innerItems, a.value = d.outerItems;
+    } else
+      l.value = [], a.value = [];
+  }
+  return watch(n, u, {
+    immediate: !0
+  }), useMutationObserver(n, u, {
+    childList: !0
+  }), useResizeObserver(n, () => A(u)), {
+    innerItems: l,
+    outerItems: a
+  };
+}, te = (e, t, s = {}) => {
+  const r = ref(e.value ? "open" : "closed");
+  watch(e, (i) => {
+    r.value = i ? "open" : "closed";
+  });
+  const n = refDebounced(r, s.debounce ?? 0);
+  watch(n, (i) => {
+    switch (t("update:state", i), i) {
+      case "open":
+        t("open");
+        break;
+      case "closed":
+        t("close");
+        break;
+    }
+  });
+  function l() {
+    r.value = "open";
+  }
+  function a() {
+    r.value = "closed";
+  }
+  function u() {
+    r.value = r.value === "open" ? "closed" : "open";
+  }
+  return {
+    state: n,
+    open: l,
+    close: a,
+    toggle: u
+  };
+};
+function re(e, t, s = {}) {
+  const { defaultValue: r } = s;
+  return r ? computed({
+    get: () => e.value ?? r.value,
+    set: (n) => {
+      t("update:modelValue", n);
+    }
+  }) : computed({
+    get: () => e.value,
+    set: (n) => {
+      t("update:modelValue", n);
+    }
+  });
+}
+function ne(e) {
+  const t = getCurrentInstance(), s = ref();
+  e ? watch(e, (u) => {
+    s.value = u;
+  }) : onMounted(() => {
+    if (t) {
+      const u = t.vnode["el" ];
+      u instanceof Element && (s.value = u);
+    }
+  });
+  const r = computed(() => a(s.value) || l.value), n = computed(() => !r.value), l = useMediaQuery(`(min-width: ${O.md})`);
+  function a(u) {
+    var d;
+    if (!u)
+      return !1;
+    const i = (d = u.getAttribute("force-screen")) == null ? void 0 : d.split(/\s+/);
+    return i != null && i.some((v) => ["md", "lg", "xl"].includes(v)) ? !0 : a(u.parentElement ?? void 0);
+  }
+  return {
+    isDesktop: r,
+    isMobile: n
+  };
+}
+const ue = () => Y$1.theme, oe = (e) => computed(() => e.value ?? inject(N$1, h$1.Auto)), se = (e, t) => computed(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
+  timeStyle: "short",
+  hourCycle: e.value !== h$1.Auto ? e.value : void 0,
+  timeZone: "UTC"
+}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
+  switch (n.type) {
+    case "hour":
+      return r + n.value.replace(/^\d{1}$/, "H").replace(/^\d{2}$/, "HH");
+    case "minute":
+      return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
+    case "dayPeriod":
+      return r + "A";
+    default:
+      return r + n.value;
+  }
+}, "") : e.value(void 0, t.value));
+function ae(e = !1) {
+  const t = ref(e);
+  function s() {
+    t.value = !0;
+  }
+  function r() {
+    t.value = !1;
+  }
+  function n() {
+    t.value = !t.value;
+  }
+  return {
+    isActiveToggle: t,
+    show: s,
+    hide: r,
+    toggle: n
+  };
+}
+const ie = () => {
+  const e = useAttrs();
+  return {
+    required: computed(() => e.required),
+    minlength: computed(() => e.minlength),
+    maxlength: computed(() => e.maxlength),
+    pattern: computed(() => e.pattern),
+    min: computed(() => e.min),
+    max: computed(() => e.max),
+    step: computed(() => e.step)
+  };
+};
+
+const t = (a, d) => {
+  a.addEventListener("keydown", (e) => {
+    ["Escape"].includes(e.key) && d.value(e);
+  });
+}, s = {
+  ["created" ]: t
+}, n = (a, d) => {
+  a.addEventListener("keydown", (e) => {
+    ["Enter", " "].includes(e.key) && d.value(e);
+  }), a.addEventListener("click", (e) => {
+    e.stopPropagation(), e.preventDefault(), d.value(e);
+  });
+}, c$1 = {
+  ["created" ]: n
+};
+
+const i$1 = (e) => e === void 0;
+
+const R = {
+  h: {
+    min: 0,
+    max: 360
+  },
+  s: {
+    min: 50,
+    max: 75
+  },
+  l: {
+    min: 60,
+    max: 80
+  }
+}, H = 8, $ = 19, y = 46, B = 40, F = 35, m = 13, G = 27, b = 36, U = 37, l = 34, x = 33, j = 39, K = 32, V = 38, W = "top-start", k = "top-end", w = "bottom-start", z = "bottom-end", Y = "right-start", Z = "right-end", q = "left-start", Q = "left-end", J = /\[(\d+)]/g, v = /^(BV?)/, ss = /^\d+$/, ns = /^\..+/, ts = /^#/, rs = /^#[A-Za-z]+[\w\-:.]*$/, as = /(<([^>]+)>)/gi, os = /\B([A-Z])/g, es = /([a-z])([A-Z])/g, cs = /^[0-9]*\.?[0-9]+$/, Es = /\+/g, _s = /[-/\\^$*+?.()|[\]{}]/g, Rs = /[\s\uFEFF\xA0]+/g, Ts = /\s+/, us = /\/\*$/, As = /(\s|^)(\w)/g, fs = /^\s+/, Os = /\s+$/, Cs = /_/g, gs = /-(\w)/g, C = /[\p{Alpha}\p{Nd}]+/gu, Ns = /^\d+-\d\d?-\d\d?(?:\s|T|$)/, Ss = /-|\s|T/, Ds = /^([0-1]?[0-9]|2[0-3]):[0-5]?[0-9](:[0-5]?[0-9])?$/, Xs = /^.*(#[^#]+)$/, is = /%2C/g, ps = /[!'()*]/g, Ps = /^(\?|#|&)/, g = /^#?([a-f\d])([a-f\d])([a-f\d])$/i, N = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i, ds = (s, n) => n.filter((t) => t !== s);
+function S(s) {
+  return Math.abs(
+    s.split("").reduce((n, t) => t.charCodeAt(0) + ((n << 5) - n), 0)
+  );
+}
+function c(s, n, t) {
+  return Math.floor(s % (t - n) + n);
+}
+function Is(s) {
+  s = s.replace(g, (t, r, a, o) => r + r + a + a + o + o);
+  const n = N.exec(s);
+  return n ? {
+    r: parseInt(n[1], 16),
+    g: parseInt(n[2], 16),
+    b: parseInt(n[3], 16)
+  } : null;
+}
+function E(s) {
+  const n = s.toString(16);
+  return n.length == 1 ? "0" + n : n;
+}
+function Ls(s, n, t) {
+  return "#" + E(s) + E(n) + E(t);
+}
+function D(s, n = R) {
+  const t = n != null && n.h ? [n.h.min, n.h.max] : [0, 360], r = n != null && n.s ? [n.s.min, n.s.max] : [0, 100], a = n != null && n.l ? [n.l.min, n.l.max] : [0, 100], o = S(s), u = c(o, ...t), A = c(o, ...r), f = c(o, ...a);
+  return {
+    h: u,
+    s: A,
+    l: f
+  };
+}
+function X(s) {
+  return `hsl(${s.h}, ${s.s}%, ${s.l}%)`;
+}
+function Ms(s, n = R) {
+  return X(D(s, n));
+}
+function i(s = []) {
+  return s.flatMap((n) => Array.isArray(n) ? i(n) : n);
+}
+const hs = (s) => s === 0 ? "0" : `${s / 16}rem`;
+function Hs(s, n) {
+  return typeof s != "string" || !s ? "" : (s.match(C) ?? []).reduce((t, r) => t + (+r == 0 || parseInt(r) ? parseInt(r) : r[0] || ""), "").toUpperCase().substring(0, n);
+}
+const $s = (s, n) => n.concat(s), p = (s, n) => {
+  const { parentElement: t } = n;
+  return t ? s === t ? !0 : p(s, t) : !1;
+}, e = (s) => Array.isArray(s), P = (s, n) => {
+  const { parentElement: t } = s;
+  return t ? n === t ? !0 : P(t, n) : !1;
+}, ys = (s) => T(s) ? !0 : L(s) || e(s) ? s.length === 0 : _(s) ? Object.keys(s).length === 0 : !1, d = (s, n) => {
+  if (Object.is(s, n))
+    return !0;
+  if (e(s) && e(n))
+    return s.length === n.length && s.every((t, r) => t === n[r]);
+  if (_(s) && _(n)) {
+    const t = Object.keys(s), r = Object.keys(n);
+    return d(t, r) && t.every((a) => s[a] === n[a]);
+  }
+  return !1;
+}, T = (s) => I(s) || i$1(s), I = (s) => s === null, Bs = (s) => typeof s == "number", _ = (s) => typeof s == "object" && (s == null ? void 0 : s.constructor) === Object, L = (s) => typeof s == "string", Fs = (s) => T(s) ? [] : e(s) ? s : [s];
+function ms(s) {
+  return s.replace(/var\((.*)\)/, (n, t) => t);
+}
+
+const Autocomplete = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const AutocompleteControl = [
+// Box
+'w-full',
+// Typography
+'typography-inherit',
+// Theme
+'theme-background-transparent', 'dark:theme-background-transparent-dark', 'outline-none',
+// Theme (placeholder)
+'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
+const AutocompleteDropdown = [
+// Overflow
+'overflow-y-auto',
+// Box
+'max-h-[172px]',
+// equals 5 items
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark'];
+const AutocompleteDropdownDefault = [
+// Shape
+'rounded-b-md',
+// Theme
+'!border-t-0'];
+const AutocompleteDropdownFlipped = [
+// Shape
+'rounded-t-md',
+// Theme
+'!border-b-0'];
+const AutocompleteDropdownItem = [
+// Typography
+'!typography-body-2-regular',
+// Padding Override todo: check design
+'py-md px-lg md:!pt-[6px] md:pb-[7px]',
+// Typography (selected)
+'selected:!typography-body-2-semibold',
+// Theme
+'!theme-foreground-default dark:!theme-foreground-default-dark'];
+const AutocompleteLoader = [
+// Layout
+'w-fit',
+// Typography
+'typography-body-2-regular',
+// Theme
+'text-outline dark:text-outline-dark'];
+const AutocompleteLoaderContainer = [
+// Spacing
+'py-md px-lg  md:px-sm+ md:py-xs'];
+const AutocompleteInputBoxOpen = ['rounded-b-0'];
+const AutocompleteInputBoxOpenFlipped = ['rounded-t-0'];
+
+var script = defineComponent({
+  name: 'OrAutocomplete',
+  components: {
+    OrError: script$1,
+    OrHint: script$2,
+    OrIconButton: script$3,
+    OrInputBox: script$4,
+    OrInput: script$5,
+    OrLabel: script$6,
+    OrLoader: script$7,
+    OrMenuItem: script$8,
+    OrPopover: script$9,
+    OrTagInput: script$a
+  },
+  directives: {
+    DropdownClose: s,
+    DropdownOpen: c$1
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    overflow: {
+      type: String,
+      default: () => TagsOverflow.Hidden
+    },
+    variant: {
+      type: String,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: undefined
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingText: {
+      type: String,
+      default: 'Loading'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    enableClear: {
+      type: Boolean,
+      default: false
+    },
+    searchFunction: {
+      type: Function,
+      default: async (value, items) => {
+        return value.length > 0 ? items.filter(item => new RegExp(value, 'i').test(item)) : [];
+      }
+    }
+  },
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
+  expose: ['root', 'popover', 'popoverState', 'reset', 'clear', 'focus', 'blur'],
+  setup(props, context) {
+    const attributes = reactive({
+      id: K$1(),
+      ..._$1(),
+      ...ie()
+    });
+    // Refs
+    const root = ref();
+    const tagInput = ref();
+    const tagInputRoot = computed(() => {
+      var _a;
+      return (_a = tagInput.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const inputBox = ref();
+    const inputBoxRoot = computed(() => {
+      var _a;
+      return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const control = ref();
+    const mobileSingleControl = ref();
+    const mobileMultipleControl = ref();
+    const popover = ref();
+    const popoverRoot = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const popoverState = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
+    const popoverFlipped = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped;
+    });
+    const activated = ref(false);
+    // Helpers
+    const {
+      isMobile
+    } = ne();
+    // Styles
+    const rootStyles = computed(() => ['or-autocomplete-v3', ...Autocomplete, ...(props.variant === InputBoxVariant.Embedded ? ['grow'] : [])]);
+    const controlStyles = computed(() => [...AutocompleteControl]);
+    const dropdownStyles = computed(() => {
+      var _a;
+      return ['or-autocomplete-popover-v3', ...AutocompleteDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? AutocompleteDropdownFlipped : AutocompleteDropdownDefault)];
+    });
+    const dropdownItemStyles = computed(() => [...AutocompleteDropdownItem]);
+    const loaderStyles = computed(() => [...AutocompleteLoader]);
+    const loaderContainerStyles = computed(() => [...AutocompleteLoaderContainer]);
+    const boxOpenStyles = computed(() => [...(popoverState.value === 'open' && !isMobile.value ? popoverFlipped.value ? AutocompleteInputBoxOpenFlipped : AutocompleteInputBoxOpen : [])]);
+    // State
+    const model = re(toRef(props, 'modelValue'), context.emit);
+    const searchText = ref();
+    const filteredItems = computedAsync(async () => {
+      return searchText.value ? (await props.searchFunction(searchText.value, props.items)).filter(item => {
+        var _a;
+        return !((_a = model.value) === null || _a === void 0 ? void 0 : _a.includes(item));
+      }) : [];
+    }, []);
+    // Handlers
+    function onInput(event) {
+      searchText.value = event.target.value;
+    }
+    // Methods
+    function add(value) {
+      if (props.multiple) {
+        model.value = $s(value, T(model.value) ? [] : Fs(model.value));
+      } else {
+        model.value = value;
+        if (isMobile.value) {
+          closeMobilePopover();
+        }
+      }
+      clear();
+    }
+    function remove(value) {
+      model.value = ds(value, T(model.value) ? [] : Fs(model.value));
+    }
+    function reset() {
+      model.value = undefined;
+      clear();
+    }
+    function clear() {
+      var _a, _b, _c, _d;
+      searchText.value = undefined;
+      if (isMobile.value) {
+        (_b = (_a = mobileMultipleControl.value) === null || _a === void 0 ? void 0 : _a.clear) === null || _b === void 0 ? void 0 : _b.call(_a);
+      } else {
+        (_d = (_c = tagInput.value) === null || _c === void 0 ? void 0 : _c.clear) === null || _d === void 0 ? void 0 : _d.call(_c);
+      }
+    }
+    function focus() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function blur() {
+      var _a;
+      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    function focusMobileControl() {
+      var _a, _b;
+      if (props.multiple) {
+        (_a = mobileMultipleControl.value) === null || _a === void 0 ? void 0 : _a.activate();
+      } else {
+        (_b = mobileSingleControl.value) === null || _b === void 0 ? void 0 : _b.focus();
+      }
+    }
+    function onFocus(event) {
+      activated.value = true;
+      context.emit('focus', event);
+      if (isMobile.value) return;
+      triggerPopover();
+    }
+    function onBlur(event) {
+      activated.value = false;
+      context.emit('blur', event);
+    }
+    function openMobilePopover() {
+      var _a;
+      if (!isMobile.value) return;
+      if (!props.readonly && !props.disabled) {
+        (_a = popover.value) === null || _a === void 0 ? void 0 : _a.open();
+        nextTick(() => {
+          setTimeout(() => focusMobileControl());
+        });
+      }
+    }
+    function closeMobilePopover() {
+      var _a;
+      if (!isMobile.value) return;
+      (_a = popover.value) === null || _a === void 0 ? void 0 : _a.close();
+    }
+    const {
+      trigger: triggerPopover
+    } = watchTriggerable([filteredItems, toRef(props, 'loading')], ([items, loading]) => {
+      var _a, _b;
+      if (isMobile.value) return;
+      if ((items.length > 0 || loading) && activated.value) {
+        (_a = popover.value) === null || _a === void 0 ? void 0 : _a.open();
+      } else {
+        (_b = popover.value) === null || _b === void 0 ? void 0 : _b.close();
+      }
+    });
+    return {
+      attributes,
+      root,
+      rootStyles,
+      tagInput,
+      tagInputRoot,
+      inputBox,
+      inputBoxRoot,
+      boxOpenStyles,
+      control,
+      mobileSingleControl,
+      mobileMultipleControl,
+      controlStyles,
+      popover,
+      popoverRoot,
+      popoverState,
+      loaderStyles,
+      loaderContainerStyles,
+      dropdownStyles,
+      dropdownItemStyles,
+      model,
+      searchText,
+      filteredItems,
+      activated,
+      onFocus,
+      onBlur,
+      onInput,
+      add,
+      remove,
+      reset,
+      clear,
+      triggerPopover,
+      openMobilePopover,
+      closeMobilePopover,
+      focus,
+      blur,
+      isMobile
+    };
+  }
+});
+
+const _hoisted_1 = ["value", "placeholder", "required", "readonly", "disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: "py-sm px-lg"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrLabel = resolveComponent("OrLabel");
+  const _component_OrTagInput = resolveComponent("OrTagInput");
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrInputBox = resolveComponent("OrInputBox");
+  const _component_OrInput = resolveComponent("OrInput");
+  const _component_OrLoader = resolveComponent("OrLoader");
+  const _component_OrMenuItem = resolveComponent("OrMenuItem");
+  const _component_OrPopover = resolveComponent("OrPopover");
+  const _component_OrHint = resolveComponent("OrHint");
+  const _component_OrError = resolveComponent("OrError");
+  const _directive_dropdown_open = resolveDirective("dropdown-open");
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.$slots.label || _ctx.$slots.addon || _ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
+    key: 0,
+    "control-id": _ctx.attributes.id,
+    variant: 'input',
+    required: _ctx.required,
+    disabled: _ctx.disabled
+  }, {
+    addon: withCtx(() => [renderSlot(_ctx.$slots, "addon")]),
+    default: withCtx(() => [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), _ctx.multiple ? withDirectives((openBlock(), createBlock(_component_OrTagInput, {
+    key: 1,
+    ref: 'tagInput',
+    modelValue: _ctx.model,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.model = $event),
+    overflow: _ctx.overflow,
+    variant: _ctx.variant,
+    "additional-input-box-styles": _ctx.boxOpenStyles,
+    placeholder: _ctx.placeholder,
+    error: !!_ctx.error,
+    required: _ctx.required,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled,
+    "enable-clear": _ctx.enableClear,
+    onInput: _cache[1] || (_cache[1] = $event => _ctx.onInput($event)),
+    onFocus: _cache[2] || (_cache[2] = $event => {
+      _ctx.onFocus($event);
+    })
+  }, {
+    tag: withCtx(({
+      item
+    }) => [renderSlot(_ctx.$slots, "tag", {
+      item: item
+    }, () => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["modelValue", "overflow", "variant", "additional-input-box-styles", "placeholder", "error", "required", "readonly", "disabled", "enable-clear"])), [[_directive_dropdown_open, _ctx.openMobilePopover]]) : (openBlock(), createBlock(_component_OrInputBox, {
+    key: 2,
+    ref: 'inputBox',
+    class: normalizeClass(_ctx.boxOpenStyles),
+    variant: _ctx.variant,
+    size: _ctx.size,
+    invalid: !!_ctx.error,
+    readonly: _ctx.readonly,
+    disabled: _ctx.disabled
+  }, createSlots({
+    default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
+      ref: 'control'
+    }, _ctx.attributes, {
+      class: _ctx.controlStyles,
+      type: 'text',
+      value: _ctx.searchText || _ctx.model,
+      autocomplete: 'off',
+      placeholder: _ctx.placeholder,
+      required: _ctx.required,
+      readonly: _ctx.readonly,
+      disabled: _ctx.disabled,
+      onInput: _cache[3] || (_cache[3] = $event => {
+        _ctx.$emit('input', $event);
+        _ctx.onInput($event);
+        _ctx.model = _ctx.searchText;
+      }),
+      onKeydown: _cache[4] || (_cache[4] = $event => _ctx.$emit('keydown', $event)),
+      onKeyup: _cache[5] || (_cache[5] = $event => _ctx.$emit('keyup', $event)),
+      onFocus: _cache[6] || (_cache[6] = $event => {
+        _ctx.onFocus($event);
+      }),
+      onBlur: _cache[7] || (_cache[7] = $event => {
+        _ctx.onBlur($event);
+      })
+    }), null, 16 /* FULL_PROPS */, _hoisted_1), [[_directive_dropdown_open, _ctx.openMobilePopover]])]),
+    _: 2 /* DYNAMIC */
+  }, [_ctx.enableClear && !_ctx.readonly && !_ctx.disabled ? {
+    name: "addon",
+    fn: withCtx(() => [_ctx.model && _ctx.model.length > 0 ? (openBlock(), createBlock(_component_OrIconButton, {
+      key: 0,
+      icon: 'close',
+      color: 'inherit',
+      onClick: _cache[8] || (_cache[8] = $event => _ctx.reset())
+    })) : createCommentVNode("v-if", true)]),
+    key: "0"
+  } : undefined]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "variant", "size", "invalid", "readonly", "disabled"])), createVNode(_component_OrPopover, {
+    ref: 'popover',
+    class: normalizeClass(_ctx.dropdownStyles),
+    "custom-styles": _ctx.dropdownStyles,
+    trigger: _ctx.tagInputRoot || _ctx.inputBoxRoot,
+    placement: 'bottom',
+    offset: 0,
+    "full-width": true,
+    "disable-default-styles": true,
+    "bottom-sheet-props": {
+      isFullscreen: true
+    }
+  }, {
+    default: withCtx(() => [_ctx.isMobile ? (openBlock(), createElementBlock("div", _hoisted_2, [_ctx.multiple ? (openBlock(), createBlock(_component_OrTagInput, {
+      key: 0,
+      ref: 'mobileMultipleControl',
+      modelValue: _ctx.model,
+      "onUpdate:modelValue": _cache[9] || (_cache[9] = $event => _ctx.model = $event),
+      overflow: 'scroll',
+      placeholder: _ctx.placeholder,
+      error: !!_ctx.error,
+      "enable-clear": false,
+      onInput: _cache[10] || (_cache[10] = $event => _ctx.onInput($event))
+    }, {
+      tag: withCtx(({
+        item
+      }) => [renderSlot(_ctx.$slots, "tag", {
+        item: item
+      }, () => [createTextVNode(toDisplayString(item.label), 1 /* TEXT */)])]),
+      appendInner: withCtx(() => [createVNode(_component_OrIconButton, {
+        icon: 'check',
+        color: 'inherit',
+        onClick: _ctx.closeMobilePopover
+      }, null, 8 /* PROPS */, ["onClick"])]),
+      _: 3 /* FORWARDED */
+    }, 8 /* PROPS */, ["modelValue", "placeholder", "error"])) : (openBlock(), createBlock(_component_OrInput, {
+      key: 1,
+      ref: "mobileSingleControl",
+      "model-value": _ctx.searchText || _ctx.model && _ctx.model.toString(),
+      placeholder: _ctx.placeholder,
+      onInput: _cache[11] || (_cache[11] = $event => {
+        _ctx.$emit('input', $event);
+        _ctx.onInput($event);
+        _ctx.model = _ctx.searchText;
+      })
+    }, {
+      appendInner: withCtx(() => [createVNode(_component_OrIconButton, {
+        icon: 'check',
+        color: 'inherit',
+        onClick: _ctx.closeMobilePopover
+      }, null, 8 /* PROPS */, ["onClick"])]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["model-value", "placeholder"]))])) : createCommentVNode("v-if", true), _ctx.loading ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(_ctx.loaderContainerStyles)
+    }, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(_component_OrLoader, {
+      class: normalizeClass(_ctx.loaderStyles),
+      variant: "text",
+      text: _ctx.loadingText
+    }, null, 8 /* PROPS */, ["class", "text"])])], 2 /* CLASS */)) : (openBlock(), createElementBlock("div", {
+      key: 2,
+      class: normalizeClass(_ctx.isMobile ? 'overflow-auto' : 'contains')
+    }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filteredItems, (item, i) => {
+      return openBlock(), createBlock(_component_OrMenuItem, {
+        key: i,
+        class: normalizeClass(_ctx.dropdownItemStyles),
+        onClick: $event => _ctx.add(item)
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+          item: item
+        }, () => [createTextVNode(toDisplayString(item), 1 /* TEXT */)])]),
+        _: 2 /* DYNAMIC */
+      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["class", "onClick"]);
+    }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */))]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["class", "custom-styles", "trigger"]), _ctx.$slots.hint || _ctx.hint ? withDirectives((openBlock(), createBlock(_component_OrHint, {
+    key: 3,
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [renderSlot(_ctx.$slots, "hint", {}, () => [createTextVNode(toDisplayString(_ctx.hint), 1 /* TEXT */)])]),
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["disabled"])), [[vShow, !_ctx.error]]) : createCommentVNode("v-if", true), withDirectives(createVNode(_component_OrError, {
+    disabled: _ctx.disabled
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.error), 1 /* TEXT */)]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["disabled"]), [[vShow, typeof _ctx.error === 'string' && _ctx.error.length > 0]])], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-autocomplete-v3/OrAutocomplete.vue";
+
+export { $s as $, y as A, B, F as C, D, m as E, Fs as F, G$1 as G, H, G as I, J$1 as J, K$1 as K, b as L, l as M, x as N, j as O, K as P, q$1 as Q, r as R, R as S, T, U, V, L$1 as W, X, g$1 as Y, z as Z, _$1 as _, i as a, x$1 as a$, w as a0, Q as a1, q as a2, Z as a3, Y as a4, k as a5, W as a6, C as a7, J as a8, v as a9, gs as aA, N$1 as aB, S$1 as aC, y$1 as aD, v$1 as aE, ms as aF, Ms as aG, Hs as aH, M as aI, m$1 as aJ, C$1 as aK, c$2 as aL, S as aM, _$2 as aN, B$1 as aO, R$1 as aP, E$1 as aQ, Is as aR, P as aS, I as aT, Bs as aU, L as aV, t$1 as aW, c as aX, u as aY, P$1 as aZ, w$1 as a_, Ns as aa, Ss as ab, ss as ac, is as ad, ps as ae, ns as af, ts as ag, rs as ah, Xs as ai, as as aj, os as ak, N as al, es as am, cs as an, Es as ao, Ps as ap, _s as aq, g as ar, Rs as as, Ts as at, us as au, As as av, Ds as aw, fs as ax, Os as ay, Cs as az, i$1 as b, q$2 as b0, b$1 as b1, T$1 as b2, A as b3, Ls as b4, h as b5, F$1 as b6, L$2 as b7, z$1 as b8, ae as b9, ie as c, ds as d, e, X$1 as f, c$1 as g, h$1 as h, isVue3 as i, se as j, k$1 as k, isVue2 as l, d as m, ne as n, oe as o, p, hs as q, re as r, s, te as t, ue as u, ee as v, _ as w, script as x, ys as y, $ as z };