@adyen/bento-vue2 1.6.1 → 1.7.0

package/dist/accordion.js

@@ -1,12 +1,13 @@
-import { defineComponent as p, provide as C, toRef as h, ref as _, inject as y, computed as g, watch as d } from "vue";
+import { defineComponent as p, provide as C, toRef as h, ref as l, inject as y, computed as g, watch as _ } from "vue";
 import { n as u } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as x } from "./chunks/index.2fce7703.js";
-import { C as T, a as N } from "./chunks/chevron-up.674ec2e5.js";
-import { g as l } from "./chunks/unique-id.a2a2b458.js";
-import { u as O } from "./chunks/use-expandable-content-height.62fc84e5.js";
-import "./assets/index42.css";
-const m = Symbol("accordion title size injection key"), E = {}, S = /* @__PURE__ */ p({
-  ...E,
+import { B as x } from "./chunks/index.965ac1af.js";
+import { C as O, a as T } from "./chunks/chevron-up.674ec2e5.js";
+import { g as d } from "./chunks/unique-id.a2a2b458.js";
+import { o as E } from "./chunks/resize.a041304d.js";
+import { u as N } from "./chunks/use-expandable-content-height.62fc84e5.js";
+import "./assets/index13.css";
+const m = Symbol("accordion title size injection key"), S = {}, z = /* @__PURE__ */ p({
+  ...S,
   __name: "accordion",
   props: {
     /**
@@ -18,26 +19,26 @@ const m = Symbol("accordion title size injection key"), E = {}, S = /* @__PURE__
       default: "default"
     }
   },
-  setup(o) {
-    const e = o;
+  setup(i) {
+    const e = i;
     return C(m, h(e, "titleSize")), { __sfc: !0, props: e };
   }
 });
-var z = function() {
+var A = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("div", { staticClass: "b-accordion" }, [e._t("default")], 2);
-}, A = [], B = /* @__PURE__ */ u(
-  S,
+}, B = [], $ = /* @__PURE__ */ u(
   z,
   A,
+  B,
   !1,
   null,
   "fb182a1c",
   null,
   null
 );
-const q = B.exports, $ = {}, R = /* @__PURE__ */ p({
-  ...$,
+const K = $.exports, R = {}, D = /* @__PURE__ */ p({
+  ...R,
   __name: "accordion-item",
   props: {
     /**
@@ -56,40 +57,48 @@ const q = B.exports, $ = {}, R = /* @__PURE__ */ p({
     }
   },
   emits: ["update:is-expanded"],
-  setup(o, { emit: e }) {
-    const n = o, t = "b-accordion-item__animation--content", i = _(null), s = _(n.isExpanded), f = l("accordionItemButton"), v = l("accordionItemContent"), b = y(m, "default"), { updateContentHeight: r, contentHeight: a } = O(i, s), I = g(() => a.value ? { "max-height": a.value } : {});
-    return d(
+  setup(i, { emit: e }) {
+    const n = i, t = "b-accordion-item__animation--content", o = l(null), s = l(n.isExpanded), f = d("accordionItemButton"), v = d("accordionItemContent"), I = y(m, "default"), { updateContentHeight: c, contentHeight: r } = N(o, s), b = g(() => r.value ? { "max-height": r.value } : {});
+    return _(
       () => n.isExpanded,
-      (c) => {
-        s.value = c;
+      (a) => {
+        s.value = a;
       }
-    ), d(
+    ), _(
+      () => o.value,
+      () => {
+        let a = null;
+        !a && o.value && (a = E(o.value, () => {
+          o.value && c();
+        }));
+      }
+    ), _(
       s,
-      (c) => {
-        e("update:is-expanded", c), r();
+      (a) => {
+        e("update:is-expanded", a), c();
       },
       { immediate: !0 }
-    ), { __sfc: !0, CONTENT_TRANSITION_NAME: t, props: n, emit: e, contentDiv: i, isOpen: s, buttonId: f, contentId: v, titleSize: b, updateContentHeight: r, contentHeight: a, contentMaxHeight: I, BentoTypography: x, ChevronDownIcon: T, ChevronUpIcon: N };
+    ), { __sfc: !0, CONTENT_TRANSITION_NAME: t, props: n, emit: e, contentDiv: o, isOpen: s, buttonId: f, contentId: v, titleSize: I, updateContentHeight: c, contentHeight: r, contentMaxHeight: b, BentoTypography: x, ChevronDownIcon: O, ChevronUpIcon: T };
   }
 });
-var D = function() {
+var H = function() {
   var e = this, n = e._self._c, t = e._self._setupProxy;
-  return n("div", { staticClass: "b-accordion-item" }, [n(t.BentoTypography, { attrs: { el: "h3", variant: t.titleSize === "small" ? "body" : "title", strongest: t.titleSize === "small" } }, [n("button", { staticClass: "b-accordion-item__button", attrs: { id: t.buttonId, "aria-controls": t.contentId, "aria-expanded": `${t.isOpen}`, type: "button" }, on: { click: function(i) {
+  return n("div", { staticClass: "b-accordion-item" }, [n(t.BentoTypography, { attrs: { el: "h3", variant: t.titleSize === "small" ? "body" : "title", strongest: t.titleSize === "small" } }, [n("button", { staticClass: "b-accordion-item__button", attrs: { id: t.buttonId, "aria-controls": t.contentId, "aria-expanded": `${t.isOpen}`, type: "button" }, on: { click: function(o) {
     t.isOpen = !t.isOpen;
   } } }, [t.isOpen ? n(t.ChevronUpIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "collapse", "aria-hidden": "true" } }) : n(t.ChevronDownIcon, { staticClass: "b-accordion-item__icon", attrs: { "svg-title": "expand", "aria-hidden": "true" } }), e._v(" " + e._s(e.title) + " ")], 1)]), n("Transition", { attrs: { name: t.CONTENT_TRANSITION_NAME } }, [t.isOpen ? n("div", { style: t.contentMaxHeight, attrs: { id: t.contentId, "aria-labelledby": t.buttonId, role: "region" } }, [n("div", { ref: "contentDiv", staticClass: "b-accordion-item__content" }, [e._t("default")], 2)]) : e._e()])], 1);
-}, H = [], M = /* @__PURE__ */ u(
-  R,
+}, M = [], w = /* @__PURE__ */ u(
   D,
   H,
+  M,
   !1,
   null,
-  "bd7f29ee",
+  "01c3158a",
   null,
   null
 );
-const J = M.exports;
+const L = w.exports;
 export {
-  q as BentoAccordion,
-  J as BentoAccordionItem
+  K as BentoAccordion,
+  L as BentoAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../src/components/accordion/accordion.keys.ts","../src/components/accordion/accordion.vue","../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon v-if=\"isOpen\" class=\"b-accordion-item__icon\" svg-title=\"collapse\" aria-hidden=\"true\" />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" svg-title=\"expand\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/utils/ts/unique-id';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","__default__","CONTENT_TRANSITION_NAME","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","emit"],"mappings":";;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,GCqDTC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;qBC0GAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBArFAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAJ,EAAA,UAAA,GAGAM,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAd,GAAA,SAAA,GAGA,EAAA,qBAAAe,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACgB,CAAAiB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAC,EAAA,sBAAAD,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"accordion.js","sources":["../src/components/accordion/accordion.keys.ts","../src/components/accordion/accordion.vue","../src/components/accordion/components/accordion-item.vue"],"sourcesContent":["export const ACCORDION_TITLE_SIZE_INJECTION_KEY = Symbol('accordion title size injection key');\n","<template>\n    <div class=\"b-accordion\">\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType, provide, toRef } from 'vue';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys';\n\n    import type { BentoAccordionTitleSize } from './accordion.types';\n\n    const props = defineProps({\n        /**\n         * Controls accordion title size.\n         * @values default, small\n         */\n        titleSize: {\n            type: String as PropType<BentoAccordionTitleSize>,\n            default: 'default',\n        },\n    });\n\n    provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion is a vertical stack of interactive headers used to reveal or hide\n     * sections of content associated with these headers.\n     *\n     * This component must only have `BentoAccordionItem` components in its default slot.\n     *\n     * Accordion items should be collapsed by default.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion.scss\" />\n","<template>\n    <div class=\"b-accordion-item\">\n        <bento-typography\n            el=\"h3\"\n            :variant=\"titleSize === 'small' ? 'body' : 'title'\"\n            :strongest=\"titleSize === 'small'\"\n        >\n            <button\n                :id=\"buttonId\"\n                :aria-controls=\"contentId\"\n                :aria-expanded=\"`${isOpen}`\"\n                type=\"button\"\n                class=\"b-accordion-item__button\"\n                @click=\"isOpen = !isOpen\"\n            >\n                <chevron-up-icon v-if=\"isOpen\" class=\"b-accordion-item__icon\" svg-title=\"collapse\" aria-hidden=\"true\" />\n                <chevron-down-icon v-else class=\"b-accordion-item__icon\" svg-title=\"expand\" aria-hidden=\"true\" />\n                {{ title }}\n            </button>\n        </bento-typography>\n\n        <Transition :name=\"CONTENT_TRANSITION_NAME\">\n            <div v-if=\"isOpen\" :id=\"contentId\" :aria-labelledby=\"buttonId\" role=\"region\" :style=\"contentMaxHeight\">\n                <div ref=\"contentDiv\" class=\"b-accordion-item__content\">\n                    <slot />\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, watch } from 'vue';\n\n    import { BentoTypography } from '@/components/typography';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys';\n\n    import type { BentoAccordionTitleSize } from '../accordion.types';\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content';\n\n    const props = defineProps({\n        /**\n         * Sets the title of the accordion item.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n        /**\n         * Controls if the content is visible or hidden.\n         */\n        isExpanded: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when content is toggled\n         */\n        (e: 'update:is-expanded', value: boolean): void;\n    }>();\n\n    // Refs\n    const contentDiv = ref<HTMLDivElement>(null);\n    const isOpen = ref(props.isExpanded);\n\n    // Generating IDs\n    const buttonId = generateUid('accordionItemButton');\n    const contentId = generateUid('accordionItemContent');\n\n    // Injecting prop from parent\n    const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default');\n\n    // Getting and setting the item height to be able to handle height animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n\n    const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n    watch(\n        () => props.isExpanded,\n        value => {\n            isOpen.value = value;\n        }\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        isOpen,\n        value => {\n            // Enable two-way data binding for `isExpanded`\n            emit('update:is-expanded', value);\n\n            updateContentHeight();\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An accordion item is an interactive header used to reveal or hide a\n     * section of content associated with this header.\n     *\n     * This component must always be wrapped by a `BentoAccordion` component.\n     *\n     * @example\n     * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAccordion, BentoAccordionItem },\n     *     template: `\n     *          <bento-accordion>\n     *              <bento-accordion-item title=\"Item 1\">\n     *                  Content for item 1\n     *              </bento-accordion-item>\n     *              <bento-accordion-item title=\"Item 2\">\n     *                  Content for item 2\n     *              </bento-accordion-item>\n     *          </bento-accordion>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./accordion-item.scss\" />\n"],"names":["ACCORDION_TITLE_SIZE_INJECTION_KEY","__default__$1","provide","toRef","props","__default__","CONTENT_TRANSITION_NAME","contentDiv","ref","isOpen","buttonId","generateUid","contentId","titleSize","inject","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","computed","watch","value","observer","observeSizeOfElement","emit"],"mappings":";;;;;;;;AAAa,MAAAA,IAAA,OAAA,oCAAA,GCqDTC,IAAA,CAAA;;;;;;;;;;;;;;;AA7BA,WAAAC,EAAAF,GAAAG,EAAAC,GAAA,WAAA,CAAA;;;;;;;;;;;;;;;;qBCyHAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;iBAnGAC,IAAA,wCA2BAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAAJ,EAAA,UAAA,GAGAM,IAAAC,EAAA,qBAAA,GACAC,IAAAD,EAAA,sBAAA,GAGAE,IAAAC,EAAAd,GAAA,SAAA,GAGA,EAAA,qBAAAe,GAAA,eAAAC,EAAA,IAAAC,EAAAV,GAAAE,CAAA,GAEAS,IAAAC,EAAA,MAAAH,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA,CAAA;AAEA,WAAAI;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACgB,CAAAiB,MAAA;AAER,QAAAZ,EAAA,QAAAY;AAAA,MAAe;AAAA,IACnB,GAGJD;AAAA,MAAA,MAAAb,EAAA;AAAA,MACqB,MAAA;AAEb,YAAAe,IAAA;AACA,QAAA,CAAAA,KAAAf,EAAA,UACIe,IAAAC,EAAAhB,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIQ,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJK;AAAA,MAAAX;AAAA,MACI,CAAAY,MAAA;AAGI,QAAAG,EAAA,sBAAAH,CAAA,GAEAN,EAAA;AAAA,MAAoB;AAAA,MACxB,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/action-bar.js

@@ -0,0 +1,191 @@
+import { onMounted as C, nextTick as h, getCurrentScope as W, onScopeDispose as M, unref as T, getCurrentInstance as E, ref as m, watch as S, watchEffect as N, computed as y, defineComponent as O, toRef as x } from "vue";
+import { a as P } from "./chunks/button.e09d5980.js";
+import { B as R } from "./chunks/index.965ac1af.js";
+import { B as k } from "./chunks/button-actions-with-menu.a5413243.js";
+import { C as V } from "./chunks/cross.a2cadac5.js";
+import { u as j } from "./chunks/i18n.155748d6.js";
+import "./chunks/index.af05ced4.js";
+import { n as G } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index.css";
+function w(e) {
+  return W() ? (M(e), !0) : !1;
+}
+function A(e) {
+  return typeof e == "function" ? e() : T(e);
+}
+const z = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const F = Object.prototype.toString, H = (e) => F.call(e) === "[object Object]", q = () => {
+};
+function D(e) {
+  return e || E();
+}
+function Q(e, n = !0, t) {
+  D() ? C(e, t) : n ? e() : h(e);
+}
+function U(e) {
+  var n;
+  const t = A(e);
+  return (n = t == null ? void 0 : t.$el) != null ? n : t;
+}
+const I = z ? window : void 0;
+function Y(...e) {
+  let n, t, o, s;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, o, s] = e, n = I) : [n, t, o, s] = e, !n)
+    return q;
+  Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
+  const r = [], a = () => {
+    r.forEach((u) => u()), r.length = 0;
+  }, l = (u, f, d, p) => (u.addEventListener(f, d, p), () => u.removeEventListener(f, d, p)), c = S(
+    () => [U(n), A(s)],
+    ([u, f]) => {
+      if (a(), !u)
+        return;
+      const d = H(f) ? { ...f } : f;
+      r.push(
+        ...t.flatMap((p) => o.map((v) => l(u, p, v, d)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), i = () => {
+    c(), a();
+  };
+  return w(i), i;
+}
+function $() {
+  const e = m(!1);
+  return E() && C(() => {
+    e.value = !0;
+  }), e;
+}
+function K(e) {
+  const n = $();
+  return y(() => (n.value, !!e()));
+}
+function Z(e, n = {}) {
+  const { window: t = I } = n, o = K(() => t && "matchMedia" in t && typeof t.matchMedia == "function");
+  let s;
+  const r = m(!1), a = (i) => {
+    r.value = i.matches;
+  }, l = () => {
+    s && ("removeEventListener" in s ? s.removeEventListener("change", a) : s.removeListener(a));
+  }, c = N(() => {
+    o.value && (l(), s = t.matchMedia(A(e)), "addEventListener" in s ? s.addEventListener("change", a) : s.addListener(a), r.value = s.matches);
+  });
+  return w(() => {
+    c(), l(), s = void 0;
+  }), r;
+}
+function J(e = {}) {
+  const {
+    window: n = I,
+    initialWidth: t = Number.POSITIVE_INFINITY,
+    initialHeight: o = Number.POSITIVE_INFINITY,
+    listenOrientation: s = !0,
+    includeScrollbar: r = !0
+  } = e, a = m(t), l = m(o), c = () => {
+    n && (r ? (a.value = n.innerWidth, l.value = n.innerHeight) : (a.value = n.document.documentElement.clientWidth, l.value = n.document.documentElement.clientHeight));
+  };
+  if (c(), Q(c), Y("resize", c, { passive: !0 }), s) {
+    const i = Z("(orientation: portrait)");
+    S(i, () => c());
+  }
+  return { width: a, height: l };
+}
+const X = {
+  "en-US": {
+    actionBar: "Action bar",
+    close: "Close",
+    selected: "selected"
+  }
+}, ee = {
+  i18n: { messages: X }
+}, te = /* @__PURE__ */ O({
+  ...ee,
+  __name: "action-bar",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     *
+     * Each object in the list should have a `title`, an `event` and,
+     * optionally, an `icon`.
+     *
+     * The component will display 4 actions and the hide the rest inside a menu.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
+    extraBottomSpacing: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show how many items are selected
+     */
+    itemCounter: {
+      type: Number,
+      required: !0
+    },
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
+    selectionLabel: {
+      type: String,
+      default: null
+    }
+  },
+  emits: ["close"],
+  setup(e, { emit: n }) {
+    const t = e, { t: o } = j(), s = y(() => t.selectionLabel ? t.selectionLabel : o("selected")), r = 32, a = 100, l = 500, c = m(null), i = m(4), { width: u } = J(), f = x(t, "extraBottomSpacing"), d = y(() => ({
+      "b-action-bar--extra-spacing": f.value
+    })), p = y(() => {
+      const _ = t.actions.map((L) => ({
+        ...L,
+        variant: "secondary"
+      })), g = _.slice(0, i.value).reverse(), B = _.slice(i.value);
+      return [...g, ...B];
+    }), v = async () => {
+      await h(), u.value > c.value.clientWidth + r + a && i.value < 4 && (i.value += 1, v());
+    }, b = async () => {
+      await h(), u.value < c.value.clientWidth + r && i.value > 0 && (i.value -= 1, b());
+    };
+    return S(
+      () => u.value,
+      async (_, g) => {
+        if (await h(), !c.value)
+          return;
+        const B = _ > g;
+        u.value < l ? i.value = 0 : B ? v() : b();
+      },
+      { immediate: !0 }
+    ), { __sfc: !0, props: t, emit: n, t: o, label: s, SPACING: r, AVERAGE_BUTTON_SIZE: a, RESPONSIVE_BREAKPOINT: l, actionBar: c, displayedActions: i, width: u, extraSpacingRef: f, conditionalClasses: d, actionsInternal: p, showActions: v, hideActions: b, BentoButton: P, BentoTypography: R, ButtonActionsWithMenu: k, CrossIcon: V };
+  }
+});
+var ne = function() {
+  var n = this, t = n._self._c, o = n._self._setupProxy;
+  return t("section", { ref: "actionBar", staticClass: "b-action-bar", class: o.conditionalClasses, attrs: { "aria-label": o.t("actionBar") } }, [t("div", { staticClass: "b-action-bar__close-button" }, [t(o.BentoButton, { attrs: { variant: "tertiary", inverse: "" }, on: { click: function(s) {
+    return o.emit("close");
+  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
+    return [t(o.CrossIcon, { attrs: { "svg-title": o.t("close") } })];
+  }, proxy: !0 }]) })], 1), t(o.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [n._v(n._s(n.itemCounter) + " " + n._s(o.label))]), t(o.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: o.actionsInternal, "displayed-actions": o.displayedActions, "menu-position": "top-end", inverse: "" } })], 1);
+}, oe = [], se = /* @__PURE__ */ G(
+  te,
+  ne,
+  oe,
+  !1,
+  null,
+  "16449f81",
+  null,
+  null
+);
+const pe = se.exports;
+export {
+  pe as BentoActionBar
+};
+//# sourceMappingURL=action-bar.js.map