maz-ui 3.37.3 → 3.37.4

package/components/chunks/MazSelect-Cc8JAFML.mjs

@@ -0,0 +1,731 @@
+import '../assets/MazSelect.css';
+import { getCurrentInstance as Se, computed as r, defineComponent as he, defineAsyncComponent as C, ref as w, onMounted as Ae, useSlots as Le, openBlock as f, createElementBlock as I, normalizeClass as E, normalizeStyle as Y, createElementVNode as D, createCommentVNode as m, renderSlot as H, createBlock as $, unref as z, resolveDynamicComponent as me, withDirectives as Me, mergeProps as ge, toHandlers as De, vModelDynamic as Te, createTextVNode as Ne, toDisplayString as re, withModifiers as W, withCtx as x, createVNode as F, useCssVars as Pe, onBeforeMount as Fe, nextTick as se, Transition as Ee, Fragment as ve, renderList as He } from "vue";
+function Oe(s, u) {
+  let i;
+  return function(...v) {
+    clearTimeout(i), i = setTimeout(() => {
+      s.apply(this, v);
+    }, u);
+  };
+}
+const ze = ({
+  componentName: s,
+  providedId: u
+}) => {
+  const i = Se();
+  return r(() => u ?? `${s}-${i == null ? void 0 : i.uid}`);
+}, qe = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, Ue = { class: "m-input-wrapper-input" }, Re = ["id", "type", "name", "inputmode", "placeholder", "aria-label", "disabled", "readonly", "required"], We = { key: 0 }, Qe = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, je = /* @__PURE__ */ he({
+  inheritAttrs: !1,
+  __name: "MazInput",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { type: [String, Number, null, Boolean], default: void 0 },
+    placeholder: { default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    color: { default: "primary" },
+    type: { default: "text" },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    id: { default: void 0 },
+    error: { type: Boolean, default: !1 },
+    success: { type: Boolean, default: !1 },
+    warning: { type: Boolean, default: !1 },
+    hint: { default: void 0 },
+    inputClasses: { default: void 0 },
+    noBorder: { type: Boolean, default: !1 },
+    noRadius: { type: Boolean, default: !1 },
+    inputmode: { default: "text" },
+    size: { default: "md" },
+    debounce: { type: [Boolean, Number], default: !1 },
+    debounceDelay: { default: 500 },
+    validButton: { type: Boolean, default: !1 },
+    validButtonLoading: { type: Boolean, default: !1 },
+    autoFocus: { type: Boolean, default: !1 },
+    borderActive: { type: Boolean, default: !1 },
+    leftIcon: { default: void 0 },
+    rightIcon: { default: void 0 },
+    roundedSize: { default: void 0 },
+    block: { type: Boolean }
+  },
+  emits: ["update:model-value", "focus", "blur", "click", "change"],
+  setup(s, { emit: u }) {
+    const i = C(() => import("./MazBtn-BQZOiUux.mjs")), v = C(() => import("./MazIcon-Cxrv3_OK.mjs")), b = C(() => import("./eye-slash-tjfxO0LK.mjs")), d = C(() => import("./eye-DqO_Jx56.mjs")), g = C(() => import("./check-7UA4j2f2.mjs")), o = s, V = u, k = w(!1), c = w(!1), T = w(), _ = ze({
+      componentName: "MazInput",
+      providedId: o.id
+    });
+    Ae(() => {
+      var t;
+      o.autoFocus && ((t = T.value) == null || t.focus());
+    });
+    const Q = r(() => o.type === "password"), ee = r(() => k.value ? "text" : o.type), K = r(() => {
+      if (!o.noBorder) {
+        if (o.error)
+          return "maz-border-danger";
+        if (o.success)
+          return "maz-border-success";
+        if (o.warning)
+          return "maz-border-warning";
+        if (c.value || o.borderActive) {
+          if (o.color === "black")
+            return "maz-border-black";
+          if (o.color === "danger")
+            return "maz-border-danger";
+          if (o.color === "info")
+            return "maz-border-info";
+          if (o.color === "primary")
+            return "maz-border-primary";
+          if (o.color === "secondary")
+            return "maz-border-secondary";
+          if (o.color === "success")
+            return "maz-border-success";
+          if (o.color === "warning")
+            return "maz-border-warning";
+          if (o.color === "white")
+            return "maz-border-white";
+        }
+        return "--default-border";
+      }
+    }), O = Le(), j = r(() => {
+      const { required: t, placeholder: y } = o;
+      if (y)
+        return t ? `${y} *` : y;
+    }), G = r(() => S.value !== void 0 && S.value !== ""), L = Oe(
+      (t) => {
+        S.value = t;
+      },
+      typeof o.debounce == "number" ? o.debounce : o.debounceDelay ?? 500
+    ), S = r({
+      get: () => o.modelValue,
+      set: (t) => {
+        if (o.debounce)
+          return L(t);
+        V("update:model-value", t);
+      }
+    }), Z = r(() => (!!o.label || !!o.hint) && (c.value || !!G.value || !!o.placeholder || ["date", "month", "week"].includes(o.type))), J = r(() => !!o.label || !!o.hint);
+    function X() {
+      return !!O["right-icon"] || Q.value || !!O["valid-button"] || o.validButton || !!o.rightIcon;
+    }
+    function A() {
+      return !!O["left-icon"] || !!o.leftIcon;
+    }
+    function U(t) {
+      V("focus", t), c.value = !0;
+    }
+    function oe(t) {
+      V("blur", t), c.value = !1;
+    }
+    function te(t) {
+      return V("change", t);
+    }
+    return (t, y) => (f(), I(
+      "div",
+      {
+        class: E(["m-input", [
+          {
+            "--is-focused": c.value || t.borderActive,
+            "--should-up": Z.value,
+            "--has-label": J.value,
+            "--is-disabled": t.disabled,
+            "--is-readonly": t.readonly,
+            "--has-z-2": t.error || t.warning || t.success,
+            "--has-state": t.error || t.warning || t.success,
+            "--block": t.block
+          },
+          o.class,
+          `--${t.color}`,
+          `--${t.size}`
+        ]]),
+        style: Y(t.style)
+      },
+      [
+        D(
+          "div",
+          {
+            class: E(["m-input-wrapper", [
+              t.inputClasses,
+              K.value,
+              t.roundedSize ? `--rounded-${t.roundedSize}` : { "maz-rounded": !t.noRadius }
+            ]])
+          },
+          [
+            A() ? (f(), I("div", qe, [
+              m(`
+          @slot left-icon - The icon to display on the left of the input
+        `),
+              t.$slots["left-icon"] || t.leftIcon ? H(t.$slots, "left-icon", { key: 0 }, () => [
+                typeof t.leftIcon == "string" ? (f(), $(z(v), {
+                  key: 0,
+                  name: t.leftIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : t.leftIcon ? (f(), $(me(t.leftIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : m("v-if", !0)
+              ], !0) : m("v-if", !0)
+            ])) : m("v-if", !0),
+            D("div", Ue, [
+              Me(D("input", ge({
+                id: z(_),
+                ref_key: "input",
+                ref: T,
+                "onUpdate:modelValue": y[0] || (y[0] = (M) => S.value = M),
+                type: ee.value,
+                name: t.name
+              }, t.$attrs, {
+                inputmode: t.inputmode,
+                placeholder: j.value,
+                "aria-label": t.label || t.placeholder,
+                disabled: t.disabled,
+                readonly: t.readonly,
+                required: t.required,
+                class: "m-input-input"
+              }, De({
+                blur: oe,
+                focus: U,
+                change: te
+              }, !0), {
+                onClick: y[1] || (y[1] = (M) => t.$emit("click", M))
+              }), null, 16, Re), [
+                [Te, S.value]
+              ]),
+              t.label || t.hint ? (f(), I(
+                "span",
+                {
+                  key: 0,
+                  ref: "label",
+                  class: E(["m-input-label", [
+                    {
+                      "maz-text-danger-600": t.error,
+                      "maz-text-success-600": t.success,
+                      "maz-text-warning-600": t.warning
+                    }
+                  ]])
+                },
+                [
+                  Ne(
+                    re(t.hint || t.label) + " ",
+                    1
+                    /* TEXT */
+                  ),
+                  t.required ? (f(), I("sup", We, "*")) : m("v-if", !0)
+                ],
+                2
+                /* CLASS */
+              )) : m("v-if", !0)
+            ]),
+            X() ? (f(), I("div", Qe, [
+              m(`
+          @slot right-icon - The icon to display on the right of the input
+        `),
+              t.$slots["right-icon"] || t.rightIcon ? H(t.$slots, "right-icon", { key: 0 }, () => [
+                typeof t.rightIcon == "string" ? (f(), $(z(v), {
+                  key: 0,
+                  name: t.rightIcon,
+                  class: "maz-text-xl maz-text-muted"
+                }, null, 8, ["name"])) : t.rightIcon ? (f(), $(me(t.rightIcon), {
+                  key: 1,
+                  class: "maz-text-xl maz-text-muted"
+                })) : m("v-if", !0)
+              ], !0) : m("v-if", !0),
+              Q.value ? (f(), $(z(i), {
+                key: 1,
+                color: "transparent",
+                tabindex: "-1",
+                size: "mini",
+                onClick: y[2] || (y[2] = W((M) => k.value = !k.value, ["stop"]))
+              }, {
+                default: x(() => [
+                  k.value ? (f(), $(z(b), {
+                    key: 0,
+                    class: "maz-text-xl maz-text-muted"
+                  })) : (f(), $(z(d), {
+                    key: 1,
+                    class: "maz-text-xl maz-text-muted"
+                  }))
+                ]),
+                _: 1
+                /* STABLE */
+              })) : m("v-if", !0),
+              m(`
+          @slot valid-button - Replace the valid button by your own
+        `),
+              t.$slots["valid-button"] || t.validButton ? H(t.$slots, "valid-button", { key: 2 }, () => [
+                F(z(i), {
+                  color: "transparent",
+                  disabled: t.disabled,
+                  tabindex: "-1",
+                  loading: t.validButtonLoading,
+                  class: "m-input-valid-button",
+                  size: "mini",
+                  type: "submit"
+                }, {
+                  default: x(() => [
+                    F(z(g), { class: "maz-text-2xl maz-text-normal" })
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled", "loading"])
+              ], !0) : m("v-if", !0)
+            ])) : m("v-if", !0)
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+}), Ve = (s, u) => {
+  const i = s.__vccOpts || s;
+  for (const [v, b] of u)
+    i[v] = b;
+  return i;
+}, ye = /* @__PURE__ */ Ve(je, [["__scopeId", "data-v-78090be8"]]);
+let ie = null;
+function Ge(s, u) {
+  ie && clearTimeout(ie), ie = setTimeout(s, u);
+}
+function Ze(s, u) {
+  const i = s.length, v = u.length, b = [];
+  for (let d = 0; d <= i; d++)
+    b[d] = [d];
+  for (let d = 0; d <= v; d++)
+    b[0][d] = d;
+  for (let d = 1; d <= i; d++)
+    for (let g = 1; g <= v; g++) {
+      const o = s[d - 1] === u[g - 1] ? 0 : 1;
+      b[d][g] = Math.min(
+        b[d - 1][g] + 1,
+        b[d][g - 1] + 1,
+        b[d - 1][g - 1] + o
+      );
+    }
+  return b[i][v];
+}
+function be(s) {
+  return s.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").toLowerCase();
+}
+function ke(s, u) {
+  const i = Ze(s, u), v = Math.max(s.length, u.length);
+  return 1 - i / v;
+}
+function Je(s, u, i = 0.75) {
+  return ke(s, u) >= i;
+}
+function ue(s, u, i = 0.75) {
+  const v = r(
+    () => be(typeof s == "string" ? s : s.value)
+  ), b = r(
+    () => be(typeof u == "string" ? u : u.value)
+  ), d = r(() => typeof i == "number" ? i : i.value), g = r(() => ke(v.value, b.value));
+  return {
+    isMatching: r(
+      () => Je(v.value, b.value, d.value)
+    ),
+    score: g
+  };
+}
+const Xe = ["aria-label"], Ye = { class: "m-select-list__no-results" }, xe = {
+  key: 2,
+  class: "m-select-list__scroll-wrapper",
+  tabindex: "-1"
+}, _e = { class: "m-select-list-optgroup" }, eo = ["onClick"], oo = /* @__PURE__ */ he({
+  inheritAttrs: !1,
+  __name: "MazSelect",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    id: { default: void 0 },
+    modelValue: { type: [String, Number, null, Boolean, Array], default: void 0 },
+    options: { default: void 0 },
+    optionValueKey: { default: "value" },
+    optionLabelKey: { default: "label" },
+    optionInputValueKey: { default: "label" },
+    listPosition: { default: "bottom left" },
+    itemHeight: { default: void 0 },
+    maxListHeight: { default: 240 },
+    maxListWidth: { default: void 0 },
+    size: { default: "md" },
+    color: { default: "primary" },
+    search: { type: Boolean },
+    searchPlaceholder: { default: "Search in options" },
+    open: { type: Boolean },
+    multiple: { type: Boolean },
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    block: { type: Boolean }
+  },
+  emits: ["close", "open", "blur", "focus", "change", "update:model-value", "selected-option"],
+  setup(s, { expose: u, emit: i }) {
+    Pe((e) => ({
+      b5e9a382: ee.value,
+      "98e2c384": _.value,
+      "4f69e826": Q.value
+    }));
+    const v = C(() => import("./MazCheckbox-BE7eLIkK.mjs")), b = C(() => import("./magnifying-glass-DZGg7953.mjs")), d = C(() => import("./chevron-down-CzMH-gFW.mjs")), g = C(() => import("./no-symbol-QAqP9IlR.mjs"));
+    u({
+      openList: N,
+      closeList: R
+    });
+    const o = s, V = i, k = w(!1), c = w(), T = r(
+      () => ["black", "transparent", "white"].includes(o.color)
+    ), _ = r(
+      () => T.value ? "var(--maz-color-black)" : `var(--maz-color-${o.color}-800)`
+    ), Q = r(
+      () => T.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-100)`
+    ), ee = r(
+      () => T.value ? "var(--maz-color-muted)" : `var(--maz-color-${o.color}-200)`
+    ), K = r(() => k.value || o.open), O = ze({
+      componentName: "MazSelect",
+      providedId: o.id
+    });
+    function j(e) {
+      return {
+        [o.optionValueKey]: e,
+        [o.optionLabelKey]: e,
+        [o.optionInputValueKey]: e
+      };
+    }
+    function G(e) {
+      return {
+        ...e,
+        [o.optionValueKey]: e[o.optionValueKey],
+        [o.optionLabelKey]: e[o.optionLabelKey],
+        [o.optionInputValueKey]: e[o.optionInputValueKey]
+      };
+    }
+    const L = r(() => {
+      var l;
+      const e = [];
+      if (!((l = o.options) != null && l.length))
+        return [];
+      for (const a of o.options)
+        typeof a == "string" || typeof a == "number" || typeof a == "boolean" ? e.push(j(a)) : "options" in a && Array.isArray(a.options) ? e.push(
+          { label: a.label, isOptGroup: !0 },
+          ...a.options.map(
+            (n) => typeof n == "string" || typeof n == "number" || typeof n == "boolean" ? j(n) : G(n)
+          )
+        ) : e.push(G(a));
+      return e;
+    }), q = r(
+      () => {
+        var e;
+        return ((e = L.value) == null ? void 0 : e.filter((l) => o.multiple ? Array.isArray(o.modelValue) ? o.modelValue.includes(l[o.optionValueKey]) && !A(l[o.optionValueKey]) : !1 : o.modelValue === l[o.optionValueKey] && !A(l[o.optionValueKey]))) ?? [];
+      }
+    );
+    Fe(() => {
+      var e;
+      (e = o.options) != null && e.length || console.warn("[maz-ui](MazSelect) you must provide options"), ne();
+    });
+    const S = w(), Z = w(), J = w(), X = w(), A = (e) => e == null;
+    function U(e) {
+      var a;
+      return (((a = q.value) == null ? void 0 : a.some(
+        (n) => n[o.optionValueKey] === e[o.optionValueKey]
+      )) ?? !1) && !A(e[o.optionValueKey]);
+    }
+    const oe = r(() => {
+      var l;
+      if (o.multiple && o.modelValue && Array.isArray(o.modelValue))
+        return o.modelValue.map(
+          (a) => {
+            var n, p;
+            return (p = (n = L.value) == null ? void 0 : n.find((h) => h[o.optionValueKey] === a)) == null ? void 0 : p[o.optionInputValueKey];
+          }
+        ).join(", ");
+      const e = (l = L.value) == null ? void 0 : l.find(
+        (a) => a[o.optionValueKey] === o.modelValue
+      );
+      return A(o.modelValue) || e == null ? void 0 : e[o.optionInputValueKey];
+    }), te = r(
+      () => o.listPosition.includes("bottom") ? "maz-slide" : "maz-slideinvert"
+    ), t = w(""), y = w("");
+    function M(e) {
+      return e.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[^\dA-Za-z\u0400-\u04FF]/g, "");
+    }
+    const le = (e, l) => l && e && M(e.toString().toLocaleLowerCase().trim()).includes(
+      M(l.toLocaleLowerCase().trim())
+    );
+    function de(e) {
+      var l;
+      return e ? (l = L.value) == null ? void 0 : l.filter((a) => {
+        const n = a[o.optionLabelKey], p = a[o.optionValueKey], h = a[o.optionInputValueKey];
+        return le(n, e) || le(h, e) || le(p, e) || typeof n == "string" && ue(n, e).isMatching.value || typeof h == "string" && ue(h, e).isMatching.value || typeof p == "string" && ue(p, e).isMatching.value;
+      }) : L.value;
+    }
+    const B = r(() => de(t.value));
+    async function R(e) {
+      var l;
+      if (K.value) {
+        if (e && ("relatedTarget" in e && ((l = S.value) != null && l.contains(e.relatedTarget)) || e.type === "keydown"))
+          return e.preventDefault();
+        await se(), k.value = !1, c.value = 0, V("close", e);
+      }
+    }
+    async function N(e) {
+      o.disabled || K.value || (e == null || e.preventDefault(), k.value = !0, await ae(), V("focus", e), V("open", k.value));
+    }
+    function ce() {
+      var e, l;
+      (l = ((e = Z.value) == null ? void 0 : e.$el).querySelector("input")) == null || l.focus();
+    }
+    function we(e) {
+      k.value ? R(e) : ce();
+    }
+    function Ie(e) {
+      var l, a;
+      t.value = e, (a = ((l = J.value) == null ? void 0 : l.$el).querySelector("input")) == null || a.focus();
+    }
+    function Ke(e) {
+      var a;
+      e === "Backspace" && y.value.length > 0 ? y.value = y.value.slice(0, -1) : y.value += e;
+      const l = de(y.value);
+      l != null && l.length && (c.value = (a = B.value) == null ? void 0 : a.findIndex(
+        (n) => n[o.optionValueKey] === l[0][o.optionValueKey]
+      ), typeof c.value == "number" && c.value >= 0 && ae(c.value)), Ge(() => {
+        y.value = "";
+      }, 1e3);
+    }
+    const Be = (e) => {
+      const l = e.key;
+      /^[\dA-Za-z\u0400-\u04FF]$/.test(l) ? (e.preventDefault(), N(e), o.search ? Ie(l) : Ke(l)) : pe(e);
+    }, pe = (e) => {
+      const l = e.code, a = ["ArrowUp", "ArrowDown"].includes(l), n = ["Enter", "Space"].includes(l), p = l === "Escape" && K.value;
+      a ? $e(e, c.value) : n ? Ce(e, c.value) : p && R();
+    }, $e = (e, l) => {
+      var p;
+      e.preventDefault();
+      const a = e.code;
+      K.value || N(e);
+      const n = (p = B.value) == null ? void 0 : p.length;
+      n && (typeof l == "number" ? l === n - 1 && a === "ArrowDown" ? c.value = 0 : l === 0 && a === "ArrowUp" ? c.value = n - 1 : c.value = a === "ArrowDown" ? l + 1 : l - 1 : c.value = a === "ArrowDown" ? 0 : n - 1, ae(c.value));
+    }, Ce = (e, l) => {
+      var n, p, h;
+      if (e.preventDefault(), !K.value)
+        return N(e);
+      const a = l ? ((n = B.value) == null ? void 0 : n[l]) ?? ((p = B.value) == null ? void 0 : p[0]) : (h = B.value) == null ? void 0 : h[0];
+      A(a) || fe(a);
+    };
+    async function ae(e) {
+      var a, n;
+      await se(), typeof e != "number" && ne();
+      const l = e ?? c.value;
+      typeof l == "number" && l >= 0 && ((n = (a = X.value) == null ? void 0 : a.querySelectorAll(".m-select-list-item")[l]) == null || n.scrollIntoView({
+        behavior: "auto",
+        block: "nearest",
+        inline: "start"
+      }));
+    }
+    function ne(e) {
+      var a;
+      const l = (a = B.value) == null ? void 0 : a.findIndex((n) => {
+        var p, h;
+        return o.multiple && Array.isArray(o.modelValue) ? e ? e[o.optionValueKey] === n[o.optionValueKey] : [...o.modelValue].reverse()[0] === n[o.optionValueKey] : ((h = (p = q.value) == null ? void 0 : p[0]) == null ? void 0 : h[o.optionValueKey]) === n[o.optionValueKey];
+      });
+      c.value = l && l >= 0 ? l : 0;
+    }
+    const fe = (e, l = !0) => {
+      var h;
+      l && !o.multiple && se(() => R()), t.value = "";
+      const a = (h = q.value) == null ? void 0 : h.some(
+        (P) => P[o.optionValueKey] === e[o.optionValueKey]
+      );
+      let n = q.value;
+      a && o.multiple ? n = n == null ? void 0 : n.filter(
+        (P) => P[o.optionValueKey] !== e[o.optionValueKey]
+      ) : o.multiple ? n.push(e) : n = [e];
+      const p = n.map((P) => P[o.optionValueKey]);
+      V("update:model-value", o.multiple ? p : p[0]), V("selected-option", e), ne(e), ce();
+    };
+    return (e, l) => (f(), I(
+      "div",
+      {
+        ref_key: "mazSelectElement",
+        ref: S,
+        class: E(["m-select", [
+          { "--is-open": K.value, "--disabled": e.disabled, "--block": e.block },
+          o.class,
+          `--${e.size}`
+        ]]),
+        style: Y(e.style),
+        onBlurCapture: R
+      },
+      [
+        F(ye, ge({
+          id: z(O),
+          ref_key: "mazInputComponent",
+          ref: Z,
+          class: "m-select-input"
+        }, e.$attrs, {
+          required: e.required,
+          "border-active": k.value,
+          color: e.color,
+          "model-value": oe.value,
+          autocomplete: "off",
+          size: e.size,
+          block: "",
+          disabled: e.disabled,
+          onFocus: W(N, ["prevent", "stop"]),
+          onClick: W(N, ["prevent", "stop"]),
+          onChange: l[0] || (l[0] = (a) => V("change", a)),
+          onKeydown: Be
+        }), {
+          "right-icon": x(() => [
+            D("button", {
+              tabindex: "-1",
+              type: "button",
+              class: "m-select-input__toggle-button maz-custom",
+              "aria-label": `${K.value ? "collapse" : "expand"} list of options`,
+              onClick: W(we, ["stop"])
+            }, [
+              F(z(d), { class: "m-select-chevron maz-text-xl" })
+            ], 8, Xe)
+          ]),
+          _: 1
+          /* STABLE */
+        }, 16, ["id", "required", "border-active", "color", "model-value", "size", "disabled"]),
+        F(Ee, { name: te.value }, {
+          default: x(() => [
+            K.value ? (f(), I(
+              "div",
+              {
+                key: 0,
+                ref_key: "optionsListElement",
+                ref: X,
+                class: E(["m-select-list", {
+                  "--top": e.listPosition.includes("top"),
+                  "--left": e.listPosition.includes("left"),
+                  "--right": e.listPosition.includes("right"),
+                  "--bottom": e.listPosition.includes("bottom")
+                }]),
+                style: Y({
+                  maxHeight: `${e.maxListHeight}px`,
+                  maxWidth: `${e.maxListWidth}px`
+                })
+              },
+              [
+                e.search ? (f(), $(ye, {
+                  key: 0,
+                  ref_key: "searchInputComponent",
+                  ref: J,
+                  modelValue: t.value,
+                  "onUpdate:modelValue": [
+                    l[1] || (l[1] = (a) => t.value = a),
+                    l[2] || (l[2] = (a) => c.value = 0)
+                  ],
+                  size: "sm",
+                  color: e.color,
+                  placeholder: e.searchPlaceholder,
+                  name: "search",
+                  autocomplete: "off",
+                  tabindex: "-1",
+                  class: "m-select-list__search-input maz-flex-none",
+                  "left-icon": z(b),
+                  onKeydown: pe
+                }, null, 8, ["modelValue", "color", "placeholder", "left-icon"])) : m("v-if", !0),
+                m(`
+          @slot No results slot - Displayed when no results corresponding with search query
+        `),
+                !B.value || B.value.length <= 0 ? H(e.$slots, "no-results", { key: 1 }, () => [
+                  D("span", Ye, [
+                    F(z(g), { class: "maz-h-6 maz-w-6 maz-text-normal" })
+                  ])
+                ], !0) : (f(), I("div", xe, [
+                  (f(!0), I(
+                    ve,
+                    null,
+                    He(B.value, (a, n) => (f(), I(
+                      ve,
+                      { key: n },
+                      [
+                        m(`
+              @slot Custom optgroup label
+                @binding {String} label - the label of the optgroup
+            `),
+                        a.label && a.isOptGroup ? H(e.$slots, "optgroup", {
+                          key: 0,
+                          label: a.label
+                        }, () => [
+                          D(
+                            "span",
+                            _e,
+                            re(a.label),
+                            1
+                            /* TEXT */
+                          )
+                        ], !0) : (f(), I("button", {
+                          key: 1,
+                          tabindex: "-1",
+                          type: "button",
+                          class: E(["m-select-list-item maz-custom maz-flex-none", [
+                            {
+                              "--is-keyboard-selected": c.value === n,
+                              "--is-selected": U(a),
+                              "--is-none-value": A(a[e.optionValueKey])
+                            }
+                          ]]),
+                          style: Y(e.itemHeight ? { height: `${e.itemHeight}px` } : void 0),
+                          onClick: W((p) => fe(a), ["prevent", "stop"])
+                        }, [
+                          e.multiple ? (f(), $(z(v), {
+                            key: 0,
+                            tabindex: "-1",
+                            "model-value": U(a),
+                            size: "sm",
+                            color: e.color
+                          }, null, 8, ["model-value", "color"])) : m("v-if", !0),
+                          m(`
+                @slot Custom option
+                  @binding {Object} option - the option object
+                  @binding {Boolean} is-selected - if the option is selected
+              `),
+                          H(e.$slots, "default", {
+                            option: a,
+                            isSelected: U(a)
+                          }, () => [
+                            D(
+                              "span",
+                              null,
+                              re(a[e.optionLabelKey]),
+                              1
+                              /* TEXT */
+                            )
+                          ], !0)
+                        ], 14, eo))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    ))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]))
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : m("v-if", !0)
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["name"])
+      ],
+      38
+      /* CLASS, STYLE, NEED_HYDRATION */
+    ));
+  }
+}), lo = /* @__PURE__ */ Ve(oo, [["__scopeId", "data-v-03e7398d"]]);
+export {
+  lo as M,
+  Ve as _,
+  ze as u
+};