@adyen/bento-vue3 1.49.0 → 1.51.0

package/dist/chunks/{popover.BHGbUyMF.js → popover.DLyVEjCd.js}

@@ -1,15 +1,15 @@
-import { defineComponent as C, computed as p, resolveComponent as T, createBlock as f, openBlock as a, withCtx as m, createTextVNode as Y, toDisplayString as J, normalizeClass as P, createVNode as d, useSlots as K, useAttrs as x, inject as g, ref as H, toRefs as W, Transition as q, createCommentVNode as i, unref as e, createElementBlock as r, renderSlot as B, createElementVNode as z } from "vue";
-import { P as O } from "./popper-container.BvGYgqiE.js";
+import { defineComponent as C, computed as p, resolveComponent as T, createBlock as m, openBlock as a, withCtx as b, createTextVNode as Y, toDisplayString as J, normalizeClass as P, createVNode as d, useSlots as K, useAttrs as x, inject as g, ref as H, toRefs as W, Transition as q, createCommentVNode as n, unref as o, createElementBlock as r, renderSlot as B, createElementVNode as z } from "vue";
+import { P as O } from "./popper-container.Bx3CBGg6.js";
 import { c as M, b as G } from "./popper-container.types.BCZMbVFD.js";
 import { B as Q, a as h } from "./typography.DN5eC5ch.js";
 import { _ as E } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as X } from "./button.Cneb6rPP.js";
-import { C as Z } from "./cross.BZYw4R3N.js";
-import { u as tt } from "./use-has-slot.B7eQSabc.js";
-import { u as et } from "./aria-label.CaUURpnB.js";
-import { c as $, B as ot } from "./button-actions.ncthaz2m.js";
+import { B as X } from "./button.6HMG0xEY.js";
+import { C as Z } from "./cross.CbLEjiVy.js";
+import { u as ee } from "./use-has-slot.B7eQSabc.js";
+import { u as te } from "./aria-label.CaUURpnB.js";
+import { c as $, B as oe } from "./button-actions.BPnsl_QP.js";
 import "../assets/popover.css";
-const at = C({
+const ae = C({
   components: { BentoTypography: Q },
   props: {
     /**
@@ -21,31 +21,31 @@ const at = C({
      */
     title: { type: String, default: null }
   },
-  setup(t) {
-    const s = p(() => !t.isImageTitle), u = p(
-      () => t.isImageTitle ? h.SUBTITLE : h.BODY
+  setup(e) {
+    const i = p(() => !e.isImageTitle), u = p(
+      () => e.isImageTitle ? h.SUBTITLE : h.BODY
     );
     return {
       // Values
-      isStrongest: s,
+      isStrongest: i,
       titleVariant: u
     };
   }
 });
-function st(t, s, u, o, b, v) {
-  const l = T("bento-typography");
-  return a(), f(l, {
-    strongest: t.isStrongest,
-    variant: t.titleVariant,
+function se(e, i, u, t, v, y) {
+  const s = T("bento-typography");
+  return a(), m(s, {
+    strongest: e.isStrongest,
+    variant: e.titleVariant,
     el: "span"
   }, {
-    default: m(() => [
-      Y(J(t.title), 1)
+    default: b(() => [
+      Y(J(e.title), 1)
     ]),
     _: 1
   }, 8, ["strongest", "variant"]);
 }
-const it = /* @__PURE__ */ E(at, [["render", st]]), nt = C({
+const ie = /* @__PURE__ */ E(ae, [["render", se]]), ne = C({
   name: "bento-popover-dismiss-button",
   components: { BentoButton: X, CrossIcon: Z },
   props: {
@@ -54,42 +54,42 @@ const it = /* @__PURE__ */ E(at, [["render", st]]), nt = C({
       default: !1
     }
   },
-  setup(t) {
+  setup(e) {
     return {
       // Values
-      conditionalClass: p(() => ({ "b-popover-dismiss-button--on-image": t.onImage }))
+      conditionalClass: p(() => ({ "b-popover-dismiss-button--on-image": e.onImage }))
     };
   }
 });
-function lt(t, s, u, o, b, v) {
-  const l = T("cross-icon"), _ = T("bento-button");
-  return a(), f(_, {
-    class: P(t.conditionalClass),
+function le(e, i, u, t, v, y) {
+  const s = T("cross-icon"), f = T("bento-button");
+  return a(), m(f, {
+    class: P(e.conditionalClass),
     variant: "tertiary",
-    onClick: s[0] || (s[0] = (S) => t.$emit("click"))
+    onClick: i[0] || (i[0] = (S) => e.$emit("click"))
   }, {
-    iconLeft: m(() => [
-      d(l, { "svg-title": "dismiss" })
+    iconLeft: b(() => [
+      d(s, { "svg-title": "dismiss" })
     ]),
     _: 1
   }, 8, ["class"]);
 }
-const L = /* @__PURE__ */ E(nt, [["render", lt], ["__scopeId", "data-v-df01cfb8"]]), N = { ...M }, rt = Symbol("popover offset injection key"), pt = Symbol("input field popover injection key"), ct = Symbol("input field popover injection key"), dt = {
+const L = /* @__PURE__ */ E(ne, [["render", le], ["__scopeId", "data-v-df01cfb8"]]), N = { ...M }, re = Symbol("popover offset injection key"), pe = Symbol("input field popover injection key"), ce = Symbol("input field popover injection key"), de = {
   key: 0,
   class: "b-popover__image"
-}, ut = {
+}, ue = {
   key: 0,
   class: "b-popover__image-dismiss-button"
-}, ft = {
+}, fe = {
   key: 1,
   class: "b-popover__header"
-}, mt = { class: "b-popover__header-title" }, bt = { key: 0 }, vt = {
+}, me = { class: "b-popover__header-title" }, be = { key: 0 }, ve = {
   key: 3,
   class: "b-popover__footer"
-}, _t = {};
+}, ye = {};
 var A;
-const yt = /* @__PURE__ */ C({
-  ..._t,
+const _e = /* @__PURE__ */ C({
+  ...ye,
   __name: "popover",
   props: {
     /**
@@ -133,7 +133,7 @@ const yt = /* @__PURE__ */ C({
     actionsLayout: {
       type: String,
       default: $.BUTTONS_END,
-      validator: (t) => Object.values($).includes(t)
+      validator: (e) => Object.values($).includes(e)
     },
     /**
      * @deprecated from version 2.0.0. Use the aria-label attribute instead.
@@ -219,7 +219,7 @@ const yt = /* @__PURE__ */ C({
     position: {
       type: String,
       default: N.BOTTOM_START,
-      validator: (t) => Object.values(N).includes(t)
+      validator: (e) => Object.values(N).includes(e)
     },
     /**
      * Displays the popover in a small size.
@@ -249,94 +249,102 @@ const yt = /* @__PURE__ */ C({
     withoutSpace: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Allows content to appear outside of the popover. Used when there are nested popovers.
+     */
+    overflowVisible: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["dismiss", "placement"],
-  setup(t, { emit: s }) {
-    const o = t, b = s, v = K(), l = x(), _ = p(() => {
-      var n;
+  setup(e, { emit: i }) {
+    const t = e, v = i, y = K(), s = x(), f = p(() => {
+      var l;
       return {
-        id: (n = l.id) == null ? void 0 : n.toString()
+        id: (l = s.id) == null ? void 0 : l.toString(),
+        role: (s == null ? void 0 : s.role) === null ? void 0 : G.POPOVER
       };
-    }), S = g(rt, 2), F = H(l["aria-label"]), { ariaLabel: V, title: y } = W(o), w = et({
-      ariaLabel: F.value,
+    }), S = g(re, 2), V = H(s["aria-label"]), { ariaLabel: F, title: _ } = W(t), w = te({
+      ariaLabel: V.value,
       // TODO: take this line away when the aria-label props is removed
-      label: V,
-      defaultFallback: y
-    }), R = g(ct, !1) || g(pt, !1), D = p(() => ({
-      "b-popover--small": o.small && !o.large,
-      "b-popover--with-divider": !!o.divider,
-      "b-popover--large": o.large && !o.small,
-      "b-popover--fit-content": o.fitContent,
-      "b-popover--without-space": o.withoutSpace,
-      "b-popover--overflow-visible": R
+      label: F,
+      defaultFallback: _
+    }), R = g(ce, !1) || g(pe, !1), D = p(() => ({
+      "b-popover--small": t.small && !t.large,
+      "b-popover--with-divider": !!t.divider,
+      "b-popover--large": t.large && !t.small,
+      "b-popover--fit-content": t.fitContent,
+      "b-popover--without-space": t.withoutSpace,
+      "b-popover--overflow-visible": t.overflowVisible || R
     })), j = p(() => ({
-      "b-popover__content--with-title": !!o.title
-    })), k = () => b("dismiss"), c = tt(v);
-    return (n, I) => (a(), f(q, { name: "b-popover__animation" }, {
-      default: m(() => [
-        t.open ? (a(), f(e(O), {
+      "b-popover__content--with-title": !!t.title
+    })), k = () => v("dismiss"), c = ee(y);
+    return (l, I) => (a(), m(q, { name: "b-popover__animation" }, {
+      default: b(() => [
+        e.open ? (a(), m(o(O), {
           key: 0,
-          id: _.value.id,
-          "aria-role": e(G).POPOVER,
-          "aria-label": e(w),
+          id: f.value.id,
+          "aria-role": f.value.role,
+          "aria-label": o(w),
           arrow: { classes: ["b-popover__arrow"] },
-          "disabled-focus-trap": t.disableFocusTrap,
+          "disabled-focus-trap": e.disableFocusTrap,
           class: P([D.value, "b-popover"]),
-          "fallback-position": t.fallbackPosition,
-          "fixed-positioning": t.fixedPositioning,
-          offset: [0, e(S)],
-          position: t.position,
-          "target-element": t.targetElement,
-          onPlacement: I[0] || (I[0] = (U) => n.$emit("placement", U))
+          "fallback-position": e.fallbackPosition,
+          "fixed-positioning": e.fixedPositioning,
+          offset: [0, o(S)],
+          position: e.position,
+          "target-element": e.targetElement,
+          onPlacement: I[0] || (I[0] = (U) => l.$emit("placement", U))
         }, {
-          default: m(() => [
-            e(c)("image") ? (a(), r("div", dt, [
-              t.dismissible ? (a(), r("div", ut, [
+          default: b(() => [
+            o(c)("image") ? (a(), r("div", de, [
+              e.dismissible ? (a(), r("div", ue, [
                 d(L, {
                   "on-image": "",
                   onClick: k
                 })
-              ])) : i("", !0),
-              B(n.$slots, "image", {}, void 0, !0)
-            ])) : i("", !0),
-            e(y) ? (a(), r("div", ft, [
-              z("div", mt, [
-                e(c)("headerIcon") ? B(n.$slots, "headerIcon", { key: 0 }, void 0, !0) : i("", !0),
-                d(it, {
-                  title: e(y),
-                  "is-image-title": !!e(c)("image")
+              ])) : n("", !0),
+              B(l.$slots, "image", {}, void 0, !0)
+            ])) : n("", !0),
+            o(_) ? (a(), r("div", fe, [
+              z("div", me, [
+                o(c)("headerIcon") ? B(l.$slots, "headerIcon", { key: 0 }, void 0, !0) : n("", !0),
+                d(ie, {
+                  title: o(_),
+                  "is-image-title": !!o(c)("image")
                 }, null, 8, ["title", "is-image-title"])
               ]),
-              t.dismissible && !e(c)("image") ? (a(), r("div", bt, [
+              e.dismissible && !o(c)("image") ? (a(), r("div", be, [
                 d(L, { onClick: k })
-              ])) : i("", !0)
-            ])) : i("", !0),
-            e(c)("default") ? (a(), r("div", {
+              ])) : n("", !0)
+            ])) : n("", !0),
+            o(c)("default") ? (a(), r("div", {
               key: 2,
               class: P(["b-popover__content", j.value])
             }, [
-              B(n.$slots, "default", {}, void 0, !0)
-            ], 2)) : i("", !0),
-            t.actions ? (a(), r("div", vt, [
-              d(e(ot), {
-                actions: t.actions,
-                layout: t.actionsLayout
+              B(l.$slots, "default", {}, void 0, !0)
+            ], 2)) : n("", !0),
+            e.actions ? (a(), r("div", ve, [
+              d(o(oe), {
+                actions: e.actions,
+                layout: e.actionsLayout
               }, null, 8, ["actions", "layout"])
-            ])) : i("", !0)
+            ])) : n("", !0)
           ]),
           _: 3
-        }, 8, ["id", "aria-role", "aria-label", "disabled-focus-trap", "class", "fallback-position", "fixed-positioning", "offset", "position", "target-element"])) : i("", !0)
+        }, 8, ["id", "aria-role", "aria-label", "disabled-focus-trap", "class", "fallback-position", "fixed-positioning", "offset", "position", "target-element"])) : n("", !0)
       ]),
       _: 3
     }));
   }
-}), ht = /* @__PURE__ */ E(yt, [["__scopeId", "data-v-97e86b0a"]]);
+}), he = /* @__PURE__ */ E(_e, [["__scopeId", "data-v-288d33c3"]]);
 export {
-  ht as B,
-  pt as I,
-  rt as P,
+  he as B,
+  pe as I,
+  re as P,
   N as a,
-  ct as b
+  ce as b
 };
-//# sourceMappingURL=popover.BHGbUyMF.js.map
+//# sourceMappingURL=popover.DLyVEjCd.js.map

package/dist/chunks/popover.DLyVEjCd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.DLyVEjCd.js","sources":["../../../vue2/src/components/popover/components/popover-title/popover-title.vue","../../../vue2/src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue","../../../vue2/src/components/popover/popover.types.ts","../../../vue2/src/components/popover/popover.keys.ts","../../../vue2/src/components/filter-bar/components/input-filter/input-filter.keys.ts","../../../vue2/src/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys.ts","../../../vue2/src/components/popover/popover.vue"],"sourcesContent":["<template>\n    <bento-typography :strongest=\"isStrongest\" :variant=\"titleVariant\" el=\"span\">\n        {{ title }}\n    </bento-typography>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoTypography, BentoTypographyVariant } from '@/components/typography';\n\n    export default defineComponent({\n        components: { BentoTypography },\n        props: {\n            /**\n             * Indicates if the popover contains an image.\n             */\n            isImageTitle: { type: Boolean, default: false },\n\n            /**\n             * Indicates the title you want to give the popover.\n             */\n            title: { type: String, default: null },\n        },\n        setup(props) {\n            // Use strongest only when it has no image\n            const isStrongest = computed(() => !props.isImageTitle);\n\n            // If an image is present, change the variant from BODY to SUBTITLE and remove the \"strongest\" property of the title\n            const titleVariant = computed(() =>\n                props.isImageTitle ? BentoTypographyVariant.SUBTITLE : BentoTypographyVariant.BODY\n            );\n\n            return {\n                // Values\n                isStrongest,\n                titleVariant,\n            };\n        },\n    });\n</script>\n","<template>\n    <bento-button :class=\"conditionalClass\" variant=\"tertiary\" @click=\"$emit('click')\">\n        <template #iconLeft>\n            <cross-icon svg-title=\"dismiss\" />\n        </template>\n    </bento-button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    export default defineComponent({\n        name: 'bento-popover-dismiss-button',\n        components: { BentoButton, CrossIcon },\n        props: {\n            onImage: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        setup(props) {\n            const conditionalClass = computed(() => ({ 'b-popover-dismiss-button--on-image': props.onImage }));\n\n            return {\n                // Values\n                conditionalClass,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover-dismiss-button.scss\" />\n","import { PopperContainerPosition } from '../popper-container';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n","export const POPOVER_OFFSET_INJECTION_KEY = Symbol('popover offset injection key');\n","/**\n * @deprecated from version 2.0.0. Use BentoFilterItemType.INPUT_DROPDOWN and INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY instead.\n */\nexport const INPUT_FILTER_POPOVER_INJECTION_KEY = Symbol('input field popover injection key');\n","export const INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY = Symbol('input field popover injection key');\n","<template>\n    <Transition name=\"b-popover__animation\">\n        <popper-container\n            v-if=\"open\"\n            :id=\"computedAttributes['id']\"\n            :aria-role=\"computedAttributes.role\"\n            :aria-label=\"computedAriaLabel\"\n            :arrow=\"{ classes: ['b-popover__arrow'] }\"\n            :disabled-focus-trap=\"disableFocusTrap\"\n            :class=\"conditionalClasses\"\n            :fallback-position=\"fallbackPosition\"\n            :fixed-positioning=\"fixedPositioning\"\n            :offset=\"[0, offset]\"\n            :position=\"position\"\n            :target-element=\"targetElement\"\n            class=\"b-popover\"\n            @placement=\"$emit('placement', $event)\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-popover__image\">\n                <div v-if=\"dismissible\" class=\"b-popover__image-dismiss-button\">\n                    <bento-popover-dismiss-button on-image @click=\"dismissPopover\" />\n                </div>\n                <slot name=\"image\"></slot>\n            </div>\n            <div v-if=\"title\" class=\"b-popover__header\">\n                <div class=\"b-popover__header-title\">\n                    <slot v-if=\"hasSlot('headerIcon')\" name=\"headerIcon\"></slot>\n                    <bento-popover-title :title=\"title\" :is-image-title=\"!!hasSlot('image')\" />\n                </div>\n                <div v-if=\"dismissible && !hasSlot('image')\">\n                    <bento-popover-dismiss-button @click=\"dismissPopover\" />\n                </div>\n            </div>\n\n            <div v-if=\"hasSlot('default')\" class=\"b-popover__content\" :class=\"contentConditionalClasses\">\n                <slot></slot>\n            </div>\n\n            <div v-if=\"actions\" class=\"b-popover__footer\">\n                <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n            </div>\n        </popper-container>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, PropType, ref, toRefs, useAttrs, useSlots } from 'vue';\n\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container';\n    import BentoPopoverTitle from './components/popover-title/popover-title.vue';\n    import BentoPopoverDismissButton from './components/popover-dismiss-button/popover-dismiss-button.vue';\n\n    import { BentoPopoverPositions } from './popover.types';\n    import { Placement } from '@floating-ui/vue';\n\n    import { useHasSlot } from '@/composables';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    import { POPOVER_OFFSET_INJECTION_KEY } from './popover.keys';\n    import { INPUT_FILTER_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-filter/input-filter.keys';\n    import { INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys';\n\n    const DEFAULT_OFFSET = 2;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         * It can be one of:\n         *\n         * @values BUTTONS_END\n         * @values FILL_CONTAINER\n         * @values SPACE_BETWEEN\n         * @values VERTICAL_STACK\n         */\n        actionsLayout: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n        },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Defines a string value that provides an accessible name for the popover.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n         */\n        divider: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n         * */\n        disableFocusTrap: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n         */\n        dismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n         * Useful when not using auto as starting placement.\n         * https://floating-ui.com/docs/flip#fallbackplacements\n         */\n        fallbackPosition: {\n            type: Array as PropType<Placement[]>,\n            default: () => ['bottom-start', 'right-start', 'top-start', 'left-start'],\n        },\n\n        /**\n         * Sets the size of the container to fit its content\n         */\n        fitContent: { type: Boolean, default: false },\n\n        /**\n         * Instructs popover to be visible outside of the containing container.\n         * Useful when component would be used in limited containers like Modal, Side panel, etc.\n         * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n         */\n        fixedPositioning: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Toggles the popover open and closed\n         */\n        open: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Displays the popover in a large size.\n         */\n        large: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * @deprecated\n         * NOTE: This property no longer functions since moving to the floating-ui framework.\n         */\n        modifiers: { type: Array, default: null },\n\n        /**\n         * Popover's position relative to the target element.\n         * Possible values are:\n         * 'auto',    'auto-start',    'auto-end',\n         * 'top',     'top-start',     'top-end'\n         * 'right',   'right-start',   'right-end'\n         * 'bottom',  'bottom-start',  'bottom-end'\n         * 'left',    'left-start',    'left-end'\n         */\n        position: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: BentoPopoverPositions.BOTTOM_START,\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n\n        /**\n         * Displays the popover in a small size.\n         */\n        small: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Indicates the title you want to give the popover.\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Popover's target element.\n         * The popover will position itself relatively to target element, in specified position.\n         */\n        targetElement: {\n            type: PopperContainer.props?.targetElement.type,\n            required: true,\n        },\n        /**\n         * Displays the popover without padding.\n         */\n        withoutSpace: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Allows content to appear outside of the popover. Used when there are nested popovers.\n         */\n        overflowVisible: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the `dismiss` button is clicked\n         */\n        (e: 'dismiss'): void;\n        /**\n         * Triggered when the popover `placement` changes\n         */\n        (e: 'placement', placement: Placement): void;\n    }>();\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n\n    const computedAttributes = computed(() => ({\n        id: attrs.id?.toString() as string,\n        role: attrs?.['role'] === null ? undefined : PopperContainerAriaRole.POPOVER,\n    }));\n\n    const offset = inject<number>(POPOVER_OFFSET_INJECTION_KEY, DEFAULT_OFFSET);\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, title } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: title,\n    });\n\n    const isOverflowVisible =\n        inject(INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY, false) ||\n        inject(INPUT_FILTER_POPOVER_INJECTION_KEY, false);\n\n    const conditionalClasses = computed(() => ({\n        'b-popover--small': props.small && !props.large,\n        'b-popover--with-divider': !!props.divider,\n        'b-popover--large': props.large && !props.small,\n        'b-popover--fit-content': props.fitContent,\n        'b-popover--without-space': props.withoutSpace,\n        'b-popover--overflow-visible': props.overflowVisible || isOverflowVisible,\n    }));\n\n    const contentConditionalClasses = computed(() => ({\n        'b-popover__content--with-title': !!props.title,\n    }));\n\n    const dismissPopover = () => emit('dismiss');\n\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Example description of the component...\n     *\n     * @example\n     * import { BentoPopover } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoPopover },\n     *     template: `\n     *          <bento-popover id=\"your-popover-id\">\n     *              ...Example code of the component\n     *          </bento-popover>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./popover.scss\" />\n"],"names":["_sfc_main$2","defineComponent","BentoTypography","props","isStrongest","computed","titleVariant","BentoTypographyVariant","_component_bento_typography","resolveComponent","openBlock","createBlock","_ctx","createTextVNode","toDisplayString","_sfc_main$1","BentoButton","CrossIcon","_component_bento_button","normalizeClass","_cache","$event","createVNode","_component_cross_icon","BentoPopoverPositions","PopperContainerPosition","POPOVER_OFFSET_INJECTION_KEY","INPUT_FILTER_POPOVER_INJECTION_KEY","INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY","__default__","__props","emit","__emit","slots","useSlots","attrs","useAttrs","computedAttributes","_a","PopperContainerAriaRole","offset","inject","ariaLabelAttribute","ref","ariaLabel","title","toRefs","computedAriaLabel","useAriaLabel","isOverflowVisible","conditionalClasses","contentConditionalClasses","dismissPopover","hasSlot","useHasSlot"],"mappings":";;;;;;;;;;;AAUI,MAAAA,KAAAC,EAAA;AAAA,EAA+B,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACG,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,cAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAI2C,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKT;AAAA,EACzC,MAAAC,GAAA;AAGI,UAAAC,IAAAC,EAAA,MAAA,CAAAF,EAAA,YAAA,GAGAG,IAAAD;AAAA,MAAqB,MAAAF,EAAA,eAAAI,EAAA,WAAAA,EAAA;AAAA,IAC6D;AAGlF,WAAA;AAAA;AAAA,MAAO,aAAAH;AAAA,MAEH,cAAAE;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;AAnCmB,QAAAE,IAAAC,EAAA,kBAAA;AAFyB,SAAAC,EAAA,GAAAC,EAAAH,GAAA;AAAA,IAAqB,WAAAI,EAAA;AAAA,IAAW,SAAAA,EAAA;AAAA,IADhF,IAAA;AAAA,EAAA,GAAA;AAAA;MAAAC,EAAAC,EAAAF,EAAA,KAAA,GAAA,CAAA;AAAA,IAAA,CAAA;AAAA;;;oDCaIG,KAAAd,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAe,GAAA,WAAAC,EAAA;AAAA,EAC+B,OAAA;AAAA,IAC9B,SAAA;AAAA,MACM,MAAA;AAAA,MACC,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAd,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,kBAFPE,EAAA,OAAA,EAAA,sCAAAF,EAAA,QAAA,EAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;AA7BwC,SAAAO,EAAA,GAAAC,EAAAO,GAAA;AAAA,IAAkB,OAAAC,EAAAP,EAAA,gBAAA;AAAA,IAAO,SAAA;AAAA,IAClD,SAAAQ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAT,EAAA,MAAA,OAAA;AAAA,EAC2B,GAAA;AAAA;MAH9CU,EAAAC,GAAA,EAAA,aAAA,UAAA,CAAA;AAAA,IAAA,CAAA;AAAA;;;qFCKaC,IAAA,EAAA,GAAAC,EAAA,GCLAC,KAAA,OAAA,8BAAA,GCGAC,KAAA,OAAA,mCAAA,GCHAC,KAAA,OAAA,mCAAA;;;;;;;;;;;;GC6TTC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA5PA,UAAA1B,IAAA2B,GAwLAC,IAAAC,GAWAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GAEAC,IAAAhC,EAAA,MAAA;;AAAA;AAAA,QAA2C,KAAAiC,IAAAH,EAAA,OAAA,gBAAAG,EAAA;AAAA,QAChB,OAAAH,KAAA,gBAAAA,EAAA,UAAA,OAAA,SAAAI,EAAA;AAAA,MAC8C;AAAA,KAAA,GAGzEC,IAAAC,EAAAf,IAAA,CAAA,GAEAgB,IAAAC,EAAAR,EAAA,YAAA,CAAA,GACA,EAAA,WAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAA3C,CAAA,GACA4C,IAAAC,GAAA;AAAA,MAAuC,WAAAN,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,MAEvB,iBAAAC;AAAA,IACU,CAAA,GAGrBI,IAAAR,EAAAb,IAAA,EAAA,KAAAa,EAAAd,IAAA,EAAA,GAIAuB,IAAA7C,EAAA,OAAA;AAAA,MAA2C,oBAAAF,EAAA,SAAA,CAAAA,EAAA;AAAA,MACG,2BAAA,CAAA,CAAAA,EAAA;AAAA,MACP,oBAAAA,EAAA,SAAA,CAAAA,EAAA;AAAA,MACO,0BAAAA,EAAA;AAAA,MACV,4BAAAA,EAAA;AAAA,MACE,+BAAAA,EAAA,mBAAA8C;AAAA,IACsB,EAAA,GAG5DE,IAAA9C,EAAA,OAAA;AAAA,MAAkD,kCAAA,CAAA,CAAAF,EAAA;AAAA,IACJ,EAAA,GAG9CiD,IAAA,MAAArB,EAAA,SAAA,GAEAsB,IAAAC,GAAArB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}