bitboss-ui 2.0.5 → 2.0.8

package/dist/index72.js

@@ -1,130 +1,314 @@
-import { defineComponent as c, computed as v, openBlock as B, createElementBlock as k, normalizeClass as y, createVNode as l, mergeProps as h, withCtx as o, renderSlot as d, createSlots as C, createElementVNode as m, toDisplayString as P, normalizeProps as n, guardReactiveProps as a, renderList as D } from "vue";
-import g from "./index12.js";
+import { defineComponent as Y, computed as M, ref as v, openBlock as D, createElementBlock as H, mergeProps as I, createElementVNode as $, renderSlot as _, normalizeProps as Z, guardReactiveProps as ee, unref as c, createBlock as te, Teleport as oe, normalizeClass as ne, normalizeStyle as z, Fragment as N, renderList as ae, createVNode as le, withCtx as se, createCommentVNode as ie } from "vue";
+import { findRightIndex as S } from "./index244.js";
+import { useFloating as re, arrow as ue } from "./index202.js";
+import { useId as de } from "./index9.js";
+import { wait as U } from "./index128.js";
+import { useIntersectionObserver as ce } from "./index129.js";
+import fe from "./index14.js";
 /* empty css        */
-import L from "./index70.js";
-/* empty css        */
-const S = { class: "bb-dropdown-button__dropdown-label" }, _ = /* @__PURE__ */ m("svg", {
-  class: "bb-dropdown-button__dropdown-chevron",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
-}, [
-  /* @__PURE__ */ m("path", {
-    d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z",
-    fill: "currentColor"
-  })
-], -1), R = /* @__PURE__ */ c({
-  __name: "BbDropdownButton",
+import V from "./index245.js";
+import { autoUpdate as pe, flip as be, offset as me, shift as ve } from "./index217.js";
+const we = ["id", "aria-labelledby"], ye = { class: "bb-dropdown__items-container" }, He = /* @__PURE__ */ Y({
+  __name: "BbDropdown",
   props: {
-    arrowPadding: {},
+    arrowPadding: { default: 10 },
     block: { type: Boolean },
     disabled: { type: Boolean },
     eager: { type: Boolean },
     id: {},
-    items: {},
-    offset: {},
-    padding: {},
-    placement: {},
+    offset: { default: 3 },
+    padding: { default: 6 },
+    placement: { default: "bottom" },
     theme: { default: "default" },
-    transitionDuration: {},
-    width: {}
+    transitionDuration: { default: 150 },
+    items: {},
+    width: { default: 200 }
   },
-  setup($) {
-    const s = $, i = v(() => {
-      const e = { ...s.items[0] };
-      return e.disabled = e.disabled || s.disabled, e;
-    });
-    return (e, z) => (B(), k("span", {
-      class: y(["bb-dropdown-button", {
-        "bb-dropdown-button--block": e.block,
-        [`bb-dropdown-button--theme-${s.theme}`]: s.theme
-      }])
-    }, [
-      l(g, h(i.value, { class: "bb-dropdown-button__main-btn" }), {
-        default: o(() => [
-          d(e.$slots, "left-btn", {
-            disabled: i.value.disabled,
-            text: i.value.text
+  setup(j) {
+    const a = j, b = a.id ?? `bb_${de().id.value}`, w = M(() => {
+      let e = a.items.findIndex((t) => !t.disabled), n = S(
+        a.items,
+        (t) => !t.disabled
+      );
+      return a.items.map((t, o) => {
+        const d = `${b}-item-${t.key}`, { onClick: K, ...P } = t, W = async () => {
+          await g();
+          const i = document.querySelector(`#${b}`);
+          if (i) i instanceof HTMLElement && i.focus();
+          else return;
+          K && K();
+        }, X = (i) => {
+          if (i.target instanceof HTMLElement && i.target.dataset.dropdownItem) {
+            if (!l.value) return;
+            if (i.key === "ArrowDown") {
+              if (i.preventDefault(), l.value && o !== n) {
+                const p = l.value.querySelector(
+                  V.map((k) => `#${d} ~ ${k}`).join(",")
+                );
+                p && p instanceof HTMLElement && p.focus();
+              }
+            } else if (i.key === "ArrowUp") {
+              if (i.preventDefault(), l.value && o !== e) {
+                const p = S(a.items, (E, T) => T < o && !E.disabled), h = Array.from(
+                  l.value.querySelectorAll(".bb-dropdown__item")
+                )[p];
+                h && h instanceof HTMLElement && h.focus();
+              }
+            } else if (i.key === "Tab") {
+              if (o === n && !i.shiftKey) {
+                const p = V.join(","), k = Array.from(
+                  document.querySelectorAll(p)
+                ), h = k.findIndex(
+                  (T) => T.id === b
+                ), E = k[h + 1];
+                if (E) E instanceof HTMLElement && (i.preventDefault(), g(), E.focus());
+                else return;
+              } else if (o === e && i.shiftKey) {
+                const p = document.querySelector(`#${b}`);
+                if (p) p instanceof HTMLElement && (i.preventDefault(), p.focus());
+                else return;
+              }
+            }
+          }
+        };
+        return {
+          ...P,
+          disabled: P.disabled || a.disabled,
+          id: d,
+          onClick: W,
+          onKeydown: X
+        };
+      });
+    }), y = v(), l = v(), F = v(), { floatingStyles: R, placement: m, middlewareData: q } = re(
+      y,
+      l,
+      {
+        placement: a.placement,
+        whileElementsMounted: pe,
+        middleware: [
+          be(),
+          me(a.offset),
+          ve({ padding: a.padding }),
+          ue({
+            element: F,
+            padding: a.arrowPadding
           })
-        ]),
-        _: 3
-      }, 16),
-      l(L, {
-        id: e.id,
-        "arrow-padding": e.arrowPadding,
-        disabled: e.disabled,
-        eager: e.eager,
-        items: e.items,
-        offset: e.offset,
-        padding: e.padding,
-        placement: e.placement,
-        theme: e.theme,
-        "transition-duration": e.transitionDuration,
-        width: e.width
-      }, C({
-        activator: o(({
-          props: t,
-          opening: r,
-          open: p,
-          closed: b,
-          closing: u,
-          disabled: w,
-          placement: f
-        }) => [
-          d(e.$slots, "activator", {
-            closed: b,
-            closing: u,
-            disabled: w,
-            open: p,
-            opening: r,
-            placement: f,
-            props: t
-          }, () => [
-            l(g, h(t, { class: "bb-dropdown-button__dropdown-btn" }), {
-              default: o(() => [
-                m("span", S, P(p || r ? "Chiudi" : "Apri") + " il menu", 1),
-                d(e.$slots, "right-btn", {
-                  closed: b,
-                  closing: u,
-                  disabled: w,
-                  open: p,
-                  opening: r,
-                  placement: f
-                }, () => [
-                  _
-                ])
-              ]),
-              _: 2
-            }, 1040)
-          ])
-        ]),
-        prepend: o((t) => [
-          d(e.$slots, "prepend", n(a(t)))
-        ]),
-        "item:prepend": o((t) => [
-          d(e.$slots, "item:prepend", n(a(t)))
-        ]),
-        item: o((t) => [
-          d(e.$slots, "item", n(a(t)))
-        ]),
-        "item:append": o((t) => [
-          d(e.$slots, "item:append", n(a(t)))
-        ]),
-        append: o((t) => [
-          d(e.$slots, "append", n(a(t)))
-        ]),
-        _: 2
+        ]
+      }
+    );
+    ce(
+      y,
+      ([{ intersectionRatio: e }]) => {
+        e !== 1 && s.value && g();
+      },
+      { threshold: [0, 1] }
+    );
+    const r = v(!1), s = v(!1), u = v(!1), f = v(!0), x = M(() => {
+      if (q.value.arrow) {
+        const { x: e, y: n } = q.value.arrow;
+        return {
+          style: {
+            left: `${e}px`,
+            top: `${n}px`
+          }
+        };
+      }
+    }), G = () => {
+      r.value || u.value || (s.value ? g() : L());
+    }, J = async (e) => {
+      let n = a.items.findIndex((o) => !o.disabled), t = S(
+        a.items,
+        (o) => !o.disabled
+      );
+      if (e.key === "ArrowDown") {
+        if (e.preventDefault(), u.value || r.value) return;
+        if (f.value && await L(), l.value && w.value.length && n !== -1) {
+          const o = w.value[n].id, d = l.value.querySelector(`#${o}`);
+          d && d instanceof HTMLElement && d.focus();
+        }
+      } else if (e.key === "ArrowUp") {
+        if (e.preventDefault(), u.value || r.value) return;
+        if (f.value && await L(), l.value && w.value.length && t !== -1) {
+          const o = w.value[t].id, d = l.value.querySelector(`#${o}`);
+          d && d instanceof HTMLElement && d.focus();
+        }
+      } else if (e.key === "Tab" && s.value && !e.shiftKey && (e.preventDefault(), l.value && w.value.length && n !== -1)) {
+        const o = w.value[n].id, d = l.value.querySelector(`#${o}`);
+        d && d instanceof HTMLElement && d.focus();
+      }
+    }, A = (e) => {
+      const n = e.target;
+      if (n && n instanceof HTMLElement) {
+        let t = !0;
+        y.value && y.value.contains(n) && (t = !1), l.value && l.value.contains(n) && (t = !1), t && g();
+      }
+    }, C = (e) => {
+      const n = e.target;
+      if (n && n instanceof HTMLElement) {
+        let t = !0;
+        y.value && y.value.contains(n) && (t = !1), l.value && l.value.contains(n) && (t = !1), t && g();
+      }
+    }, B = (e) => {
+      var n;
+      if (s.value && e.key === "Escape") {
+        if (((n = document.activeElement) == null ? void 0 : n.id) !== b) {
+          const t = document.querySelector(`#${b}`);
+          t instanceof HTMLElement && t.focus();
+        }
+        g();
+      }
+    }, O = v(!1), L = async () => {
+      O.value = !0, f.value = !1, u.value = !1, r.value = !0, await U(50), s.value = !0, r.value = !1, document.addEventListener("click", A, { passive: !0 }), document.addEventListener("focusin", C, { passive: !0 }), document.addEventListener("keydown", B, { passive: !0 });
+    }, g = async () => {
+      s.value = !1, r.value = !1, u.value = !0, await U(a.transitionDuration), u.value = !1, f.value = !0, document.removeEventListener("click", A), document.removeEventListener("focusin", C), document.removeEventListener("keydown", B);
+    }, Q = M(() => ({
+      class: {
+        "bb-dropdown--block": a.block,
+        [`bb-dropdown--theme-${a.theme}`]: a.theme
+      }
+    }));
+    return (e, n) => (D(), H("span", I({ class: "bb-dropdown" }, Q.value), [
+      $("span", {
+        ref_key: "wrapper",
+        ref: y,
+        class: "bb-dropdown__wrapper"
       }, [
-        D(e.items, (t) => ({
-          name: t.key,
-          fn: o((r) => [
-            d(e.$slots, t.key, n(a(r)))
-          ])
-        }))
-      ]), 1032, ["id", "arrow-padding", "disabled", "eager", "items", "offset", "padding", "placement", "theme", "transition-duration", "width"])
-    ], 2));
+        _(e.$slots, "activator", Z(ee({
+          props: {
+            "aria-expanded": s.value,
+            "aria-controls": `menu_${c(b)}`,
+            id: c(b),
+            onClick: G,
+            onKeydown: J,
+            disabled: e.disabled
+          },
+          closed: f.value,
+          closing: u.value,
+          disabled: e.disabled,
+          open: s.value,
+          opening: r.value,
+          placement: c(m)
+        })))
+      ], 512),
+      O.value || e.eager ? (D(), te(oe, {
+        key: 0,
+        to: "body"
+      }, [
+        $("span", {
+          id: `menu_${c(b)}`,
+          ref_key: "content",
+          ref: l,
+          "aria-labelledby": c(b),
+          "aria-role": "menu",
+          class: ne(["bb-dropdown__bubble-container", {
+            [`bb-dropdown__bubble-container--${c(m)}`]: !0,
+            [`bb-dropdown__bubble-container--${e.theme}`]: e.theme,
+            "bb-dropdown__bubble-container--hidden": f.value,
+            "bb-dropdown__bubble-container--closing": u.value,
+            "bb-dropdown__bubble-container--opening": r.value,
+            "bb-dropdown__bubble-container--open": s.value
+          }]),
+          style: z({
+            ...c(R),
+            transitionDuration: `${a.transitionDuration}ms`
+          })
+        }, [
+          $("span", I({
+            ref_key: "bubblearrow",
+            ref: F,
+            class: "bb-dropdown__arrow"
+          }, x.value), null, 16),
+          $("span", {
+            class: "bb-dropdown__bubble",
+            style: z({ width: `${e.width}px` })
+          }, [
+            _(e.$slots, "prepend", {
+              closed: f.value,
+              closing: u.value,
+              disabled: e.disabled,
+              open: s.value,
+              opening: r.value,
+              placement: c(m)
+            }),
+            $("span", ye, [
+              (D(!0), H(N, null, ae(w.value, (t, o) => (D(), H(N, {
+                key: t.key
+              }, [
+                _(e.$slots, "item:prepend", {
+                  closed: f.value,
+                  closing: u.value,
+                  disabled: t.disabled,
+                  index: o,
+                  item: e.items[o],
+                  open: s.value,
+                  opening: r.value,
+                  placement: c(m),
+                  text: t.text
+                }),
+                le(fe, I({
+                  "aria-role": "menuitem",
+                  class: ["bb-dropdown__item", {
+                    "bb-dropdown__item--first": o === 0,
+                    "bb-dropdown__item--last": o === e.items.length - 1
+                  }],
+                  "data-dropdown-item": !0,
+                  ref_for: !0
+                }, t), {
+                  default: se(() => [
+                    _(e.$slots, t.key, {
+                      closed: f.value,
+                      closing: u.value,
+                      disabled: t.disabled,
+                      index: o,
+                      item: t,
+                      open: s.value,
+                      opening: r.value,
+                      placement: c(m),
+                      text: t.text
+                    }, () => [
+                      _(e.$slots, "item", {
+                        closed: f.value,
+                        closing: u.value,
+                        disabled: t.disabled,
+                        index: o,
+                        item: t,
+                        open: s.value,
+                        opening: r.value,
+                        placement: c(m),
+                        text: t.text
+                      })
+                    ])
+                  ]),
+                  _: 2
+                }, 1040, ["class"]),
+                _(e.$slots, "item:append", {
+                  closed: f.value,
+                  closing: u.value,
+                  disabled: t.disabled,
+                  index: o,
+                  item: e.items[o],
+                  open: s.value,
+                  opening: r.value,
+                  placement: c(m),
+                  text: t.text
+                })
+              ], 64))), 128))
+            ]),
+            _(e.$slots, "append", {
+              closed: f.value,
+              closing: u.value,
+              disabled: e.disabled,
+              open: s.value,
+              opening: r.value,
+              placement: c(m)
+            })
+          ], 4)
+        ], 14, we)
+      ])) : ie("", !0)
+    ], 16));
   }
 });
 export {
-  R as default
+  He as default
 };
 //# sourceMappingURL=index72.js.map

package/dist/index72.js.map

@@ -1 +1 @@
-{"version":3,"file":"index72.js","sources":["../src/components/BbDropdownButton/BbDropdownButton.vue"],"sourcesContent":["<template>\n\t<span\n\t\tclass=\"bb-dropdown-button\"\n\t\t:class=\"{\n\t\t\t'bb-dropdown-button--block': block,\n\t\t\t[`bb-dropdown-button--theme-${props.theme}`]: props.theme,\n\t\t}\"\n\t>\n\t\t<BaseButton v-bind=\"mainBtn\" class=\"bb-dropdown-button__main-btn\">\n\t\t\t<slot\n\t\t\t\t:disabled=\"mainBtn.disabled\"\n\t\t\t\tname=\"left-btn\"\n\t\t\t\t:text=\"mainBtn.text\"\n\t\t\t></slot>\n\t\t</BaseButton>\n\t\t<BbDropdown\n\t\t\t:id=\"id\"\n\t\t\t:arrow-padding=\"arrowPadding\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:eager=\"eager\"\n\t\t\t:items=\"items\"\n\t\t\t:offset=\"offset\"\n\t\t\t:padding=\"padding\"\n\t\t\t:placement=\"placement\"\n\t\t\t:theme=\"theme\"\n\t\t\t:transition-duration=\"transitionDuration\"\n\t\t\t:width=\"width\"\n\t\t>\n\t\t\t<template\n\t\t\t\t#activator=\"{\n\t\t\t\t\tprops,\n\t\t\t\t\topening,\n\t\t\t\t\topen,\n\t\t\t\t\tclosed,\n\t\t\t\t\tclosing,\n\t\t\t\t\tdisabled,\n\t\t\t\t\tplacement,\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t<slot\n\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\tname=\"activator\"\n\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t:props=\"props\"\n\t\t\t\t>\n\t\t\t\t\t<BaseButton v-bind=\"props\" class=\"bb-dropdown-button__dropdown-btn\">\n\t\t\t\t\t\t<span class=\"bb-dropdown-button__dropdown-label\"\n\t\t\t\t\t\t\t>{{ open || opening ? 'Chiudi' : 'Apri' }} il menu</span\n\t\t\t\t\t\t>\n\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\tname=\"right-btn\"\n\t\t\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclass=\"bb-dropdown-button__dropdown-chevron\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z\"\n\t\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\t/></svg></slot></BaseButton></slot\n\t\t\t></template>\n\t\t\t<template #prepend=\"data\"><slot name=\"prepend\" v-bind=\"data\" /></template>\n\t\t\t<template #item:prepend=\"data\">\n\t\t\t\t<slot name=\"item:prepend\" v-bind=\"data\" />\n\t\t\t</template>\n\t\t\t<template #item=\"data\"><slot name=\"item\" v-bind=\"data\" /></template>\n\t\t\t<template v-for=\"item in items\" #[item.key]=\"data\">\n\t\t\t\t<slot :name=\"item.key\" v-bind=\"data\" />\n\t\t\t</template>\n\t\t\t<template #item:append=\"data\">\n\t\t\t\t<slot name=\"item:append\" v-bind=\"data\" />\n\t\t\t</template>\n\t\t\t<template #append=\"data\"><slot name=\"append\" v-bind=\"data\" /></template>\n\t\t</BbDropdown>\n\t</span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport BbDropdown from '../BbDropdown/BbDropdown.vue';\nimport type { BbDropdownProps, MappedItem } from '../BbDropdown/BbDropdown.vue';\n\nexport type BbDropdownButtonProps = Pick<\n\tBbDropdownProps,\n\t| 'arrowPadding'\n\t| 'block'\n\t| 'disabled'\n\t| 'eager'\n\t| 'id'\n\t| 'items'\n\t| 'offset'\n\t| 'padding'\n\t| 'placement'\n\t| 'theme'\n\t| 'transitionDuration'\n\t| 'width'\n>;\n\nconst props = withDefaults(defineProps<BbDropdownButtonProps>(), {\n\ttheme: 'default',\n});\n\ndefineSlots<\n\t{\n\t\t'left-btn'?: (props: {\n\t\t\tdisabled?: boolean;\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t\tactivator?: (props: {\n\t\t\tprops: {\n\t\t\t\t'aria-expanded': boolean;\n\t\t\t\t'aria-controls': string;\n\t\t\t\tid: string;\n\t\t\t\tonClick: MappedItem['onClick'];\n\t\t\t\tonKeydown: MappedItem['onKeydown'];\n\t\t\t\tdisabled?: BbDropdownButtonProps['disabled'];\n\t\t\t};\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: boolean;\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t}) => any;\n\t\tprepend?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: boolean;\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t}) => any;\n\t\t'item:prepend'?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownButtonProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t\titem?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownButtonProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t\t'item:append'?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownButtonProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t\tappend?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: boolean;\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t}) => any;\n\t\t'right-btn'?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: boolean;\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t}) => any;\n\t} & {\n\t\t[key: string]: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownButtonProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownButtonProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t}\n>();\n\nconst mainBtn = computed(() => {\n\tconst base = { ...props.items[0] };\n\tbase.disabled = base.disabled || props.disabled;\n\treturn base;\n});\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbDropdownButton';\n</style>\n"],"names":["props","__props","mainBtn","computed","base"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,UAAMA,IAAQC,GAkGRC,IAAUC,EAAS,MAAM;AAC9B,YAAMC,IAAO,EAAE,GAAGJ,EAAM,MAAM,CAAC,EAAE;AAC5B,aAAAI,EAAA,WAAWA,EAAK,YAAYJ,EAAM,UAChCI;AAAA,IAAA,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index72.js","sources":["../src/components/BbDropdown/BbDropdown.vue"],"sourcesContent":["<template>\n\t<span class=\"bb-dropdown\" v-bind=\"attributes\">\n\t\t<span ref=\"wrapper\" class=\"bb-dropdown__wrapper\">\n\t\t\t<slot\n\t\t\t\tname=\"activator\"\n\t\t\t\tv-bind=\"{\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t'aria-expanded': open,\n\t\t\t\t\t\t'aria-controls': `menu_${id}`,\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tonClick,\n\t\t\t\t\t\tonKeydown,\n\t\t\t\t\t\tdisabled,\n\t\t\t\t\t},\n\t\t\t\t\tclosed: closed,\n\t\t\t\t\tclosing: closing,\n\t\t\t\t\tdisabled: disabled,\n\t\t\t\t\topen: open,\n\t\t\t\t\topening: opening,\n\t\t\t\t\tplacement: placement,\n\t\t\t\t}\"\n\t\t\t></slot>\n\t\t</span>\n\t\t<teleport v-if=\"hasOpenedOnce || eager\" to=\"body\">\n\t\t\t<span\n\t\t\t\t:id=\"`menu_${id}`\"\n\t\t\t\tref=\"content\"\n\t\t\t\t:aria-labelledby=\"id\"\n\t\t\t\taria-role=\"menu\"\n\t\t\t\tclass=\"bb-dropdown__bubble-container\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t[`bb-dropdown__bubble-container--${placement}`]: true,\n\t\t\t\t\t[`bb-dropdown__bubble-container--${theme}`]: theme,\n\t\t\t\t\t'bb-dropdown__bubble-container--hidden': closed,\n\t\t\t\t\t'bb-dropdown__bubble-container--closing': closing,\n\t\t\t\t\t'bb-dropdown__bubble-container--opening': opening,\n\t\t\t\t\t'bb-dropdown__bubble-container--open': open,\n\t\t\t\t}\"\n\t\t\t\t:style=\"{\n\t\t\t\t\t...floatingStyles,\n\t\t\t\t\ttransitionDuration: `${props.transitionDuration}ms`,\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tref=\"bubblearrow\"\n\t\t\t\t\tclass=\"bb-dropdown__arrow\"\n\t\t\t\t\tv-bind=\"arrowAttributes\"\n\t\t\t\t></span>\n\t\t\t\t<span class=\"bb-dropdown__bubble\" :style=\"{ width: `${width}px` }\">\n\t\t\t\t\t<slot\n\t\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\tname=\"prepend\"\n\t\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t></slot>\n\t\t\t\t\t<span class=\"bb-dropdown__items-container\">\n\t\t\t\t\t\t<template v-for=\"(item, index) in mappedItems\" :key=\"item.key\">\n\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t\t\t\t\t:index=\"index\"\n\t\t\t\t\t\t\t\t:item=\"items[index]\"\n\t\t\t\t\t\t\t\t:name=\"`item:prepend`\"\n\t\t\t\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t\t\t\t:text=\"item.text\"\n\t\t\t\t\t\t\t></slot>\n\t\t\t\t\t\t\t<BaseButton\n\t\t\t\t\t\t\t\t:aria-role=\"'menuitem'\"\n\t\t\t\t\t\t\t\tclass=\"bb-dropdown__item\"\n\t\t\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t\t\t'bb-dropdown__item--first': index === 0,\n\t\t\t\t\t\t\t\t\t'bb-dropdown__item--last': index === items.length - 1,\n\t\t\t\t\t\t\t\t}\"\n\t\t\t\t\t\t\t\t:data-dropdown-item=\"true\"\n\t\t\t\t\t\t\t\tv-bind=\"item\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t\t\t\t\t\t:index=\"index\"\n\t\t\t\t\t\t\t\t\t:item=\"item\"\n\t\t\t\t\t\t\t\t\t:name=\"item.key\"\n\t\t\t\t\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t\t\t\t\t:text=\"item.text\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t\t\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t\t\t\t\t\t\t:index=\"index\"\n\t\t\t\t\t\t\t\t\t\t:item=\"item\"\n\t\t\t\t\t\t\t\t\t\tname=\"item\"\n\t\t\t\t\t\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t\t\t\t\t\t:text=\"item.text\"\n\t\t\t\t\t\t\t\t\t></slot>\n\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t</BaseButton>\n\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t\t\t\t:disabled=\"item.disabled\"\n\t\t\t\t\t\t\t\t:index=\"index\"\n\t\t\t\t\t\t\t\t:item=\"items[index]\"\n\t\t\t\t\t\t\t\t:name=\"`item:append`\"\n\t\t\t\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t\t\t\t:text=\"item.text\"\n\t\t\t\t\t\t\t></slot>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</span>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t:closed=\"closed\"\n\t\t\t\t\t\t:closing=\"closing\"\n\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\tname=\"append\"\n\t\t\t\t\t\t:open=\"open\"\n\t\t\t\t\t\t:opening=\"opening\"\n\t\t\t\t\t\t:placement=\"placement\"\n\t\t\t\t\t></slot>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</teleport>\n\t</span>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { findRightIndex } from '@/utilities/functions/findRightIndex';\nimport {\n\tuseFloating,\n\tautoUpdate,\n\tflip,\n\tshift,\n\tarrow,\n\toffset,\n} from '@floating-ui/vue';\nimport { useId } from '@/composables/useId';\nimport { wait } from '@/utilities/functions/wait';\nimport { useIntersectionObserver } from '@vueuse/core';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport selectors from 'focusable-selectors';\nimport type { BaseButtonProps } from '../BaseButton/BaseButton.vue';\nimport type { CommonProps } from '@/types/CommonProps';\n\nexport type BbDropdownProps = Pick<\n\tCommonProps,\n\t| 'arrowPadding'\n\t| 'block'\n\t| 'disabled'\n\t| 'eager'\n\t| 'id'\n\t| 'offset'\n\t| 'padding'\n\t| 'placement'\n\t| 'theme'\n\t| 'transitionDuration'\n> & {\n\t/**\n\t * Array used to render each dropdown button.\n\t * They can act as `button`, as `a`, or as `router-link`\n\t * as they are based on the functionality provided by\n\t * `BaseButton`\n\t */\n\titems: Item[];\n\t/**\n\t * Width of the dropdown in pixels.\n\t */\n\twidth?: number;\n};\n\ndefineSlots<\n\t{\n\t\tactivator?: (props: {\n\t\t\tprops: {\n\t\t\t\t'aria-expanded': boolean;\n\t\t\t\t'aria-controls': string;\n\t\t\t\tid: string;\n\t\t\t\tonClick: MappedItem['onClick'];\n\t\t\t\tonKeydown: MappedItem['onKeydown'];\n\t\t\t\tdisabled?: BbDropdownProps['disabled'];\n\t\t\t};\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: boolean;\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownProps['placement'];\n\t\t}) => any;\n\t\tprepend?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: boolean;\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownProps['placement'];\n\t\t}) => any;\n\t\t'item:prepend'?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t\titem?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t\t'item:append'?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t\tappend?: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: boolean;\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownProps['placement'];\n\t\t}) => any;\n\t} & {\n\t\t[key: string]: (props: {\n\t\t\tclosed: boolean;\n\t\t\tclosing: boolean;\n\t\t\tdisabled?: MappedItem['disabled'];\n\t\t\tindex: number;\n\t\t\titem: BbDropdownProps['items'][number];\n\t\t\topen: boolean;\n\t\t\topening: boolean;\n\t\t\tplacement: BbDropdownProps['placement'];\n\t\t\ttext: MappedItem['text'];\n\t\t}) => any;\n\t}\n>();\n\nexport type Item = Omit<BaseButtonProps, 'block' | 'tag' | 'type'> & {\n\t/**\n\t * Click handler of the item.\n\t */\n\tonClick?: (...args: any[]) => any;\n\t/**\n\t * Key used to identify the element.\n\t */\n\tkey: string;\n};\n\nexport type MappedItem = Item & {\n\t/**\n\t * Identifier of the element among it's siblings.\n\t */\n\tid: string;\n\t/**\n\t * Keydown event used to handle accessibility.\n\t */\n\tonKeydown: (event: KeyboardEvent) => void;\n};\n\nconst props = withDefaults(defineProps<BbDropdownProps>(), {\n\tarrowPadding: 10,\n\tplacement: 'bottom',\n\ttheme: 'default',\n\ttransitionDuration: 150,\n\twidth: 200,\n\tpadding: 6,\n\toffset: 3,\n});\n\nconst id = props.id ?? `bb_${useId().id.value}`;\n\nconst mappedItems = computed<MappedItem[]>(() => {\n\tlet firstFocusableIndex: number = props.items.findIndex((el) => !el.disabled);\n\tlet lastFocusableIndex: number = findRightIndex(\n\t\tprops.items,\n\t\t(item) => !item.disabled\n\t);\n\n\treturn props.items.map((item, index) => {\n\t\tconst itemid = `${id}-item-${item.key}`;\n\t\tconst { onClick: handler, ...rest } = item;\n\n\t\t/* Id a click handler has been passed close the dropdown\n\t\t *  return focus and run the handler\n\t\t */\n\t\tconst onClick = async () => {\n\t\t\tawait closeDropdown();\n\t\t\tconst nextElement = document.querySelector(`#${id}`);\n\t\t\tif (!nextElement) return;\n\t\t\telse if (nextElement instanceof HTMLElement) {\n\t\t\t\tnextElement.focus();\n\t\t\t}\n\t\t\tif (handler) handler();\n\t\t};\n\n\t\t/**\n\t\t * On keydown\n\t\t * arrow down move to the next focusable element if it's not the last\n\t\t * arrow up move to the previous focusable element if it's not the first\n\t\t * on tab search the next focusable element after the button that opens the dropdown\n\t\t * if an element is found focus on that\n\t\t * (the menu is attached to body so it's not in order)\n\t\t */\n\t\tconst onKeydown = (event: KeyboardEvent) => {\n\t\t\tif (\n\t\t\t\tevent.target instanceof HTMLElement &&\n\t\t\t\tevent.target.dataset['dropdownItem']\n\t\t\t) {\n\t\t\t\tif (!content.value) return;\n\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (content.value && index !== lastFocusableIndex) {\n\t\t\t\t\t\tconst option = content.value.querySelector(\n\t\t\t\t\t\t\tselectors.map((selector) => `#${itemid} ~ ${selector}`).join(',')\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\t\t\t\toption.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else if (event.key === 'ArrowUp') {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (content.value && index !== firstFocusableIndex) {\n\t\t\t\t\t\tconst indexOfPrevious = findRightIndex(props.items, (item, i) => {\n\t\t\t\t\t\t\treturn i < index && !item.disabled;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\tconst options = Array.from(\n\t\t\t\t\t\t\tcontent.value.querySelectorAll(`.bb-dropdown__item`)\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tconst option = options[indexOfPrevious];\n\n\t\t\t\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\t\t\t\toption.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else if (event.key === 'Tab') {\n\t\t\t\t\tif (index === lastFocusableIndex && !event.shiftKey) {\n\t\t\t\t\t\tconst selector = selectors.join(',');\n\t\t\t\t\t\tconst focusableElements = Array.from(\n\t\t\t\t\t\t\tdocument.querySelectorAll(selector)\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst indexOfButton = focusableElements.findIndex(\n\t\t\t\t\t\t\t(el) => el.id === id\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst nextElement = focusableElements[indexOfButton + 1];\n\t\t\t\t\t\tif (!nextElement) return;\n\t\t\t\t\t\telse if (nextElement instanceof HTMLElement) {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tcloseDropdown();\n\t\t\t\t\t\t\tnextElement.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else if (index === firstFocusableIndex && event.shiftKey) {\n\t\t\t\t\t\tconst nextElement = document.querySelector(`#${id}`);\n\t\t\t\t\t\tif (!nextElement) return;\n\t\t\t\t\t\telse if (nextElement instanceof HTMLElement) {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tnextElement.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\treturn {\n\t\t\t...rest,\n\t\t\tdisabled: rest.disabled || props.disabled,\n\t\t\tid: itemid,\n\t\t\tonClick,\n\t\t\tonKeydown,\n\t\t};\n\t});\n});\n\nconst wrapper = ref<HTMLElement>();\nconst content = ref<HTMLElement>();\nconst bubblearrow = ref<HTMLElement>();\n\nconst { floatingStyles, placement, middlewareData } = useFloating(\n\twrapper,\n\tcontent,\n\t{\n\t\tplacement: props.placement,\n\t\twhileElementsMounted: autoUpdate,\n\t\tmiddleware: [\n\t\t\tflip(),\n\t\t\toffset(props.offset),\n\t\t\tshift({ padding: props.padding }),\n\t\t\tarrow({\n\t\t\t\telement: bubblearrow,\n\t\t\t\tpadding: props.arrowPadding,\n\t\t\t}),\n\t\t],\n\t}\n);\n\nuseIntersectionObserver(\n\twrapper,\n\t([{ intersectionRatio }]) => {\n\t\tif (intersectionRatio !== 1 && open.value) closeDropdown();\n\t},\n\t{ threshold: [0, 1] }\n);\n\nconst opening = ref(false);\nconst open = ref(false);\nconst closing = ref(false);\nconst closed = ref(true);\n\nconst arrowAttributes = computed(() => {\n\tif (middlewareData.value.arrow) {\n\t\tconst { x, y } = middlewareData.value.arrow;\n\t\treturn {\n\t\t\tstyle: {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t},\n\t\t};\n\t}\n\treturn undefined;\n});\n\n/* On click of the trigger attach elements  */\nconst onClick = () => {\n\tif (opening.value || closing.value) return;\n\tif (open.value) {\n\t\tcloseDropdown();\n\t} else {\n\t\topenDropdown();\n\t}\n};\n\nconst onKeydown = async (event: KeyboardEvent) => {\n\tlet firstFocusableIndex: number = props.items.findIndex((el) => !el.disabled);\n\tlet lastFocusableIndex: number = findRightIndex(\n\t\tprops.items,\n\t\t(item) => !item.disabled\n\t);\n\tif (event.key === 'ArrowDown') {\n\t\tevent.preventDefault();\n\t\tif (closing.value || opening.value) return;\n\t\tif (closed.value) {\n\t\t\tawait openDropdown();\n\t\t}\n\t\tif (\n\t\t\tcontent.value &&\n\t\t\tmappedItems.value.length &&\n\t\t\tfirstFocusableIndex !== -1\n\t\t) {\n\t\t\tconst idToFocus = mappedItems.value[firstFocusableIndex].id;\n\t\t\tconst option = content.value.querySelector(`#${idToFocus}`);\n\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\toption.focus();\n\t\t\t}\n\t\t}\n\t} else if (event.key === 'ArrowUp') {\n\t\tevent.preventDefault();\n\t\tif (closing.value || opening.value) return;\n\t\tif (closed.value) {\n\t\t\tawait openDropdown();\n\t\t}\n\t\tif (\n\t\t\tcontent.value &&\n\t\t\tmappedItems.value.length &&\n\t\t\tlastFocusableIndex !== -1\n\t\t) {\n\t\t\tconst idToFocus = mappedItems.value[lastFocusableIndex].id;\n\t\t\tconst option = content.value.querySelector(`#${idToFocus}`);\n\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\toption.focus();\n\t\t\t}\n\t\t}\n\t} else if (event.key === 'Tab') {\n\t\tif (open.value && !event.shiftKey) {\n\t\t\tevent.preventDefault();\n\t\t\tif (\n\t\t\t\tcontent.value &&\n\t\t\t\tmappedItems.value.length &&\n\t\t\t\tfirstFocusableIndex !== -1\n\t\t\t) {\n\t\t\t\tconst idToFocus = mappedItems.value[firstFocusableIndex].id;\n\t\t\t\tconst option = content.value.querySelector(`#${idToFocus}`);\n\t\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\t\toption.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nconst onClickDocument = (event: Event) => {\n\tconst target = event.target;\n\tif (!target) return;\n\tif (target instanceof HTMLElement) {\n\t\tlet isOutside = true;\n\n\t\tif (wrapper.value) {\n\t\t\tif (wrapper.value.contains(target)) {\n\t\t\t\tisOutside = false;\n\t\t\t}\n\t\t}\n\t\tif (content.value) {\n\t\t\tif (content.value.contains(target)) {\n\t\t\t\tisOutside = false;\n\t\t\t}\n\t\t}\n\n\t\tif (isOutside) {\n\t\t\tcloseDropdown();\n\t\t}\n\t}\n};\n\nconst onDocumentFocus = (event: FocusEvent) => {\n\tconst target = event.target;\n\tif (!target) return;\n\tif (target instanceof HTMLElement) {\n\t\tlet isOutside = true;\n\n\t\tif (wrapper.value) {\n\t\t\tif (wrapper.value.contains(target)) {\n\t\t\t\tisOutside = false;\n\t\t\t}\n\t\t}\n\t\tif (content.value) {\n\t\t\tif (content.value.contains(target)) {\n\t\t\t\tisOutside = false;\n\t\t\t}\n\t\t}\n\n\t\tif (isOutside) {\n\t\t\tcloseDropdown();\n\t\t}\n\t}\n};\n\nconst onEsc = (event: KeyboardEvent) => {\n\tif (open.value) {\n\t\tif (event.key === 'Escape') {\n\t\t\tif (document.activeElement?.id !== id) {\n\t\t\t\tconst button = document.querySelector(`#${id}`);\n\t\t\t\tif (button instanceof HTMLElement) {\n\t\t\t\t\tbutton.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcloseDropdown();\n\t\t}\n\t}\n};\nconst hasOpenedOnce = ref(false);\nconst openDropdown = async () => {\n\thasOpenedOnce.value = true;\n\tclosed.value = false;\n\tclosing.value = false;\n\topening.value = true;\n\tawait wait(50);\n\topen.value = true;\n\topening.value = false;\n\t/* Attach listeners to document so we don't have to track them one by one */\n\tdocument.addEventListener('click', onClickDocument, { passive: true });\n\tdocument.addEventListener('focusin', onDocumentFocus, { passive: true });\n\tdocument.addEventListener('keydown', onEsc, { passive: true });\n};\n\nconst closeDropdown = async () => {\n\topen.value = false;\n\topening.value = false;\n\tclosing.value = true;\n\tawait wait(props.transitionDuration);\n\tclosing.value = false;\n\tclosed.value = true;\n\tdocument.removeEventListener('click', onClickDocument);\n\tdocument.removeEventListener('focusin', onDocumentFocus);\n\tdocument.removeEventListener('keydown', onEsc);\n};\n\nconst attributes = computed(() => {\n\tconst classes = {\n\t\t'bb-dropdown--block': props.block,\n\t\t[`bb-dropdown--theme-${props.theme}`]: props.theme,\n\t};\n\treturn {\n\t\tclass: classes,\n\t};\n});\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbDropdown';\n</style>\n"],"names":["props","__props","id","useId","mappedItems","computed","firstFocusableIndex","el","lastFocusableIndex","findRightIndex","item","index","itemid","handler","rest","onClick","closeDropdown","nextElement","onKeydown","event","content","option","selectors","selector","indexOfPrevious","i","focusableElements","indexOfButton","wrapper","ref","bubblearrow","floatingStyles","placement","middlewareData","useFloating","autoUpdate","flip","offset","shift","arrow","useIntersectionObserver","intersectionRatio","open","opening","closing","closed","arrowAttributes","x","y","openDropdown","idToFocus","onClickDocument","target","isOutside","onDocumentFocus","onEsc","_a","button","hasOpenedOnce","wait","attributes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8RA,UAAMA,IAAQC,GAURC,IAAKF,EAAM,MAAM,MAAMG,KAAQ,GAAG,KAAK,IAEvCC,IAAcC,EAAuB,MAAM;AAC5C,UAAAC,IAA8BN,EAAM,MAAM,UAAU,CAACO,MAAO,CAACA,EAAG,QAAQ,GACxEC,IAA6BC;AAAA,QAChCT,EAAM;AAAA,QACN,CAACU,MAAS,CAACA,EAAK;AAAA,MAAA;AAGjB,aAAOV,EAAM,MAAM,IAAI,CAACU,GAAMC,MAAU;AACvC,cAAMC,IAAS,GAAGV,CAAE,SAASQ,EAAK,GAAG,IAC/B,EAAE,SAASG,GAAS,GAAGC,MAASJ,GAKhCK,IAAU,YAAY;AAC3B,gBAAMC,EAAc;AACpB,gBAAMC,IAAc,SAAS,cAAc,IAAIf,CAAE,EAAE;AACnD,cAAKe,EAAa,CACTA,aAAuB,eAC/BA,EAAY,MAAM;AAAA,cAFD;AAIlB,UAAIJ,KAAiBA;QAAA,GAWhBK,IAAY,CAACC,MAAyB;AAC3C,cACCA,EAAM,kBAAkB,eACxBA,EAAM,OAAO,QAAQ,cACpB;AACG,gBAAA,CAACC,EAAQ,MAAO;AAChB,gBAAAD,EAAM,QAAQ;AAEb,kBADJA,EAAM,eAAe,GACjBC,EAAQ,SAAST,MAAUH,GAAoB;AAC5C,sBAAAa,IAASD,EAAQ,MAAM;AAAA,kBAC5BE,EAAU,IAAI,CAACC,MAAa,IAAIX,CAAM,MAAMW,CAAQ,EAAE,EAAE,KAAK,GAAG;AAAA,gBAAA;AAE7D,gBAAAF,KAAUA,aAAkB,eAC/BA,EAAO,MAAM;AAAA,cAEf;AAAA,uBACUF,EAAM,QAAQ;AAEpB,kBADJA,EAAM,eAAe,GACjBC,EAAQ,SAAST,MAAUL,GAAqB;AACnD,sBAAMkB,IAAkBf,EAAeT,EAAM,OAAO,CAACU,GAAMe,MACnDA,IAAId,KAAS,CAACD,EAAK,QAC1B,GAMKW,IAJU,MAAM;AAAA,kBACrBD,EAAQ,MAAM,iBAAiB,oBAAoB;AAAA,gBAAA,EAG7BI,CAAe;AAElC,gBAAAH,KAAUA,aAAkB,eAC/BA,EAAO,MAAM;AAAA,cAEf;AAAA,uBACUF,EAAM,QAAQ;AACxB,kBAAIR,MAAUH,KAAsB,CAACW,EAAM,UAAU;AAC9C,sBAAAI,IAAWD,EAAU,KAAK,GAAG,GAC7BI,IAAoB,MAAM;AAAA,kBAC/B,SAAS,iBAAiBH,CAAQ;AAAA,gBAAA,GAE7BI,IAAgBD,EAAkB;AAAA,kBACvC,CAACnB,MAAOA,EAAG,OAAOL;AAAA,gBAAA,GAEbe,IAAcS,EAAkBC,IAAgB,CAAC;AACvD,oBAAKV,EAAa,CACTA,aAAuB,gBAC/BE,EAAM,eAAe,GACPH,KACdC,EAAY,MAAM;AAAA,oBAJD;AAAA,cAMR,WAAAN,MAAUL,KAAuBa,EAAM,UAAU;AAC3D,sBAAMF,IAAc,SAAS,cAAc,IAAIf,CAAE,EAAE;AACnD,oBAAKe,EAAa,CACTA,aAAuB,gBAC/BE,EAAM,eAAe,GACrBF,EAAY,MAAM;AAAA,oBAHD;AAAA,cAKnB;AAAA;AAAA,UAEF;AAAA,QAAA;AAGM,eAAA;AAAA,UACN,GAAGH;AAAA,UACH,UAAUA,EAAK,YAAYd,EAAM;AAAA,UACjC,IAAIY;AAAA,UACJ,SAAAG;AAAAA,UACA,WAAAG;AAAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA,CACD,GAEKU,IAAUC,KACVT,IAAUS,KACVC,IAAcD,KAEd,EAAE,gBAAAE,GAAgB,WAAAC,GAAW,gBAAAC,EAAmB,IAAAC;AAAA,MACrDN;AAAA,MACAR;AAAA,MACA;AAAA,QACC,WAAWpB,EAAM;AAAA,QACjB,sBAAsBmC;AAAA,QACtB,YAAY;AAAA,UACXC,GAAK;AAAA,UACLC,GAAOrC,EAAM,MAAM;AAAA,UACnBsC,GAAM,EAAE,SAAStC,EAAM,SAAS;AAAA,UAChCuC,GAAM;AAAA,YACL,SAAST;AAAA,YACT,SAAS9B,EAAM;AAAA,UAAA,CACf;AAAA,QACF;AAAA,MACD;AAAA,IAAA;AAGD,IAAAwC;AAAA,MACCZ;AAAA,MACA,CAAC,CAAC,EAAE,mBAAAa,EAAA,CAAmB,MAAM;AAC5B,QAAIA,MAAsB,KAAKC,EAAK,SAAqB1B,EAAA;AAAA,MAC1D;AAAA,MACA,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE;AAAA,IAAA;AAGf,UAAA2B,IAAUd,EAAI,EAAK,GACnBa,IAAOb,EAAI,EAAK,GAChBe,IAAUf,EAAI,EAAK,GACnBgB,IAAShB,EAAI,EAAI,GAEjBiB,IAAkBzC,EAAS,MAAM;AAClC,UAAA4B,EAAe,MAAM,OAAO;AAC/B,cAAM,EAAE,GAAAc,GAAG,GAAAC,EAAE,IAAIf,EAAe,MAAM;AAC/B,eAAA;AAAA,UACN,OAAO;AAAA,YACN,MAAM,GAAGc,CAAC;AAAA,YACV,KAAK,GAAGC,CAAC;AAAA,UACV;AAAA,QAAA;AAAA,MAEF;AAAA,IACO,CACP,GAGKjC,IAAU,MAAM;AACjB,MAAA4B,EAAQ,SAASC,EAAQ,UACzBF,EAAK,QACM1B,MAEDiC;IACd,GAGK/B,IAAY,OAAOC,MAAyB;AAC7C,UAAAb,IAA8BN,EAAM,MAAM,UAAU,CAACO,MAAO,CAACA,EAAG,QAAQ,GACxEC,IAA6BC;AAAA,QAChCT,EAAM;AAAA,QACN,CAACU,MAAS,CAACA,EAAK;AAAA,MAAA;AAEb,UAAAS,EAAM,QAAQ,aAAa;AAE1B,YADJA,EAAM,eAAe,GACjByB,EAAQ,SAASD,EAAQ,MAAO;AAIpC,YAHIE,EAAO,SACV,MAAMI,EAAa,GAGnB7B,EAAQ,SACRhB,EAAY,MAAM,UAClBE,MAAwB,IACvB;AACD,gBAAM4C,IAAY9C,EAAY,MAAME,CAAmB,EAAE,IACnDe,IAASD,EAAQ,MAAM,cAAc,IAAI8B,CAAS,EAAE;AACtD,UAAA7B,KAAUA,aAAkB,eAC/BA,EAAO,MAAM;AAAA,QAEf;AAAA,MAAA,WACUF,EAAM,QAAQ,WAAW;AAE/B,YADJA,EAAM,eAAe,GACjByB,EAAQ,SAASD,EAAQ,MAAO;AAIpC,YAHIE,EAAO,SACV,MAAMI,EAAa,GAGnB7B,EAAQ,SACRhB,EAAY,MAAM,UAClBI,MAAuB,IACtB;AACD,gBAAM0C,IAAY9C,EAAY,MAAMI,CAAkB,EAAE,IAClDa,IAASD,EAAQ,MAAM,cAAc,IAAI8B,CAAS,EAAE;AACtD,UAAA7B,KAAUA,aAAkB,eAC/BA,EAAO,MAAM;AAAA,QAEf;AAAA,MAAA,WACUF,EAAM,QAAQ,SACpBuB,EAAK,SAAS,CAACvB,EAAM,aACxBA,EAAM,eAAe,GAEpBC,EAAQ,SACRhB,EAAY,MAAM,UAClBE,MAAwB,KACvB;AACD,cAAM4C,IAAY9C,EAAY,MAAME,CAAmB,EAAE,IACnDe,IAASD,EAAQ,MAAM,cAAc,IAAI8B,CAAS,EAAE;AACtD,QAAA7B,KAAUA,aAAkB,eAC/BA,EAAO,MAAM;AAAA,MAEf;AAAA,IAEF,GAGK8B,IAAkB,CAAChC,MAAiB;AACzC,YAAMiC,IAASjC,EAAM;AACrB,UAAKiC,KACDA,aAAkB,aAAa;AAClC,YAAIC,IAAY;AAEhB,QAAIzB,EAAQ,SACPA,EAAQ,MAAM,SAASwB,CAAM,MACpBC,IAAA,KAGVjC,EAAQ,SACPA,EAAQ,MAAM,SAASgC,CAAM,MACpBC,IAAA,KAIVA,KACWrC;MAEhB;AAAA,IAAA,GAGKsC,IAAkB,CAACnC,MAAsB;AAC9C,YAAMiC,IAASjC,EAAM;AACrB,UAAKiC,KACDA,aAAkB,aAAa;AAClC,YAAIC,IAAY;AAEhB,QAAIzB,EAAQ,SACPA,EAAQ,MAAM,SAASwB,CAAM,MACpBC,IAAA,KAGVjC,EAAQ,SACPA,EAAQ,MAAM,SAASgC,CAAM,MACpBC,IAAA,KAIVA,KACWrC;MAEhB;AAAA,IAAA,GAGKuC,IAAQ,CAACpC,MAAyB;;AACvC,UAAIuB,EAAK,SACJvB,EAAM,QAAQ,UAAU;AACvB,cAAAqC,IAAA,SAAS,kBAAT,gBAAAA,EAAwB,QAAOtD,GAAI;AACtC,gBAAMuD,IAAS,SAAS,cAAc,IAAIvD,CAAE,EAAE;AAC9C,UAAIuD,aAAkB,eACrBA,EAAO,MAAM;AAAA,QAEf;AACc,QAAAzC;MACf;AAAA,IACD,GAEK0C,IAAgB7B,EAAI,EAAK,GACzBoB,IAAe,YAAY;AAChC,MAAAS,EAAc,QAAQ,IACtBb,EAAO,QAAQ,IACfD,EAAQ,QAAQ,IAChBD,EAAQ,QAAQ,IAChB,MAAMgB,EAAK,EAAE,GACbjB,EAAK,QAAQ,IACbC,EAAQ,QAAQ,IAEhB,SAAS,iBAAiB,SAASQ,GAAiB,EAAE,SAAS,IAAM,GACrE,SAAS,iBAAiB,WAAWG,GAAiB,EAAE,SAAS,IAAM,GACvE,SAAS,iBAAiB,WAAWC,GAAO,EAAE,SAAS,IAAM;AAAA,IAAA,GAGxDvC,IAAgB,YAAY;AACjC,MAAA0B,EAAK,QAAQ,IACbC,EAAQ,QAAQ,IAChBC,EAAQ,QAAQ,IACV,MAAAe,EAAK3D,EAAM,kBAAkB,GACnC4C,EAAQ,QAAQ,IAChBC,EAAO,QAAQ,IACN,SAAA,oBAAoB,SAASM,CAAe,GAC5C,SAAA,oBAAoB,WAAWG,CAAe,GAC9C,SAAA,oBAAoB,WAAWC,CAAK;AAAA,IAAA,GAGxCK,IAAavD,EAAS,OAKpB;AAAA,MACN,OALe;AAAA,QACf,sBAAsBL,EAAM;AAAA,QAC5B,CAAC,sBAAsBA,EAAM,KAAK,EAAE,GAAGA,EAAM;AAAA,MAAA;AAAA,IAGtC,EAER;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}