@adyen/bento-vue2 1.50.0 → 1.52.0

package/dist/chunks/{popover.CRdrSmFW.js → popover.Cb6utVhS.js}

@@ -1,14 +1,14 @@
 import { defineComponent as l, computed as i, useSlots as I, useAttrs as E, inject as r, ref as A, toRefs as L } from "vue";
-import { d as F, P as m, c as R } from "./popper-container.CsW4R0-t.js";
+import { d as F, P as m, c as R } from "./popper-container.CiEkF7eb.js";
 import { B as k, a as v } from "./typography.J1v_SPG3.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as x } from "./button.CdAFZa4V.js";
-import { C as N } from "./cross.CsUPDmaA.js";
-import { u as $ } from "./use-has-slot.C9lQZ6nz.js";
-import { u as w } from "./aria-label.CaUURpnB.js";
-import { c as b, B as D } from "./button-actions.BovYBINL.js";
+import { B as w } from "./button.D-3uUhuG.js";
+import { C as x } from "./cross.CJ5EEL2c.js";
+import { u as N } from "./use-has-slot.C9lQZ6nz.js";
+import { u as $ } from "./aria-label.CaUURpnB.js";
+import { c as b, B as V } from "./button-actions.DAvSJtOB.js";
 import "../assets/popover.css";
-const V = l({
+const D = l({
   components: { BentoTypography: k },
   props: {
     /**
@@ -35,7 +35,7 @@ var j = function() {
   var t = this, e = t._self._c;
   return t._self._setupProxy, e("bento-typography", { attrs: { strongest: t.isStrongest, variant: t.titleVariant, el: "span" } }, [t._v(" " + t._s(t.title) + " ")]);
 }, U = [], Y = /* @__PURE__ */ p(
-  V,
+  D,
   j,
   U,
   !1,
@@ -44,7 +44,7 @@ var j = function() {
 );
 const J = Y.exports, K = l({
   name: "bento-popover-dismiss-button",
-  components: { BentoButton: x, CrossIcon: N },
+  components: { BentoButton: w, CrossIcon: x },
   props: {
     onImage: {
       type: Boolean,
@@ -74,7 +74,7 @@ var H = function() {
   "71876338"
 );
 const z = q.exports, y = { ...F }, M = Symbol("popover offset injection key"), G = Symbol("input field popover injection key"), Q = Symbol("input field popover injection key"), X = {};
-var g;
+var B;
 const Z = /* @__PURE__ */ l({
   ...X,
   __name: "popover",
@@ -227,7 +227,7 @@ const Z = /* @__PURE__ */ l({
      * The popover will position itself relatively to target element, in specified position.
      */
     targetElement: {
-      type: (g = m.props) == null ? void 0 : g.targetElement.type,
+      type: (B = m.props) == null ? void 0 : B.targetElement.type,
       required: !0
     },
     /**
@@ -236,32 +236,39 @@ const Z = /* @__PURE__ */ l({
     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(s, { emit: t }) {
-    const e = s, o = 2, n = I(), a = E(), B = i(() => {
+    const e = s, o = 2, n = I(), a = E(), g = i(() => {
       var d;
       return {
         id: (d = a.id) == null ? void 0 : d.toString(),
         role: (a == null ? void 0 : a.role) === null ? void 0 : R.POPOVER
       };
-    }), P = r(M, o), c = A(a["aria-label"]), { ariaLabel: _, title: u } = L(e), C = w({
+    }), P = r(M, o), c = A(a["aria-label"]), { ariaLabel: u, title: _ } = L(e), C = $({
       ariaLabel: c.value,
       // TODO: take this line away when the aria-label props is removed
-      label: _,
-      defaultFallback: u
+      label: u,
+      defaultFallback: _
     }), f = r(Q, !1) || r(G, !1), T = i(() => ({
       "b-popover--small": e.small && !e.large,
       "b-popover--with-divider": !!e.divider,
       "b-popover--large": e.large && !e.small,
       "b-popover--fit-content": e.fitContent,
       "b-popover--without-space": e.withoutSpace,
-      "b-popover--overflow-visible": f
+      "b-popover--overflow-visible": e.overflowVisible || f
     })), S = i(() => ({
       "b-popover__content--with-title": !!e.title
-    })), h = () => t("dismiss"), O = $(n);
-    return { __sfc: !0, DEFAULT_OFFSET: o, props: e, emit: t, slots: n, attrs: a, computedAttributes: B, offset: P, ariaLabelAttribute: c, ariaLabel: _, title: u, computedAriaLabel: C, isOverflowVisible: f, conditionalClasses: T, contentConditionalClasses: S, dismissPopover: h, hasSlot: O, BentoButtonActions: D, PopperContainer: m, BentoPopoverTitle: J, BentoPopoverDismissButton: z };
+    })), h = () => t("dismiss"), O = N(n);
+    return { __sfc: !0, DEFAULT_OFFSET: o, props: e, emit: t, slots: n, attrs: a, computedAttributes: g, offset: P, ariaLabelAttribute: c, ariaLabel: u, title: _, computedAriaLabel: C, isOverflowVisible: f, conditionalClasses: T, contentConditionalClasses: S, dismissPopover: h, hasSlot: O, BentoButtonActions: V, PopperContainer: m, BentoPopoverTitle: J, BentoPopoverDismissButton: z };
   }
 });
 var tt = function() {
@@ -275,14 +282,14 @@ var tt = function() {
   et,
   !1,
   null,
-  "2a92f0a8"
+  "84340d66"
 );
-const ut = ot.exports;
+const _t = ot.exports;
 export {
-  ut as B,
+  _t as B,
   G as I,
   M as P,
   y as a,
   Q as b
 };
-//# sourceMappingURL=popover.CRdrSmFW.js.map
+//# sourceMappingURL=popover.Cb6utVhS.js.map

package/dist/chunks/{popover.CRdrSmFW.js.map → popover.Cb6utVhS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover.CRdrSmFW.js","sources":["../../src/components/popover/components/popover-title/popover-title.vue","../../src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue","../../src/components/popover/popover.types.ts","../../src/components/popover/popover.keys.ts","../../src/components/filter-bar/components/input-filter/input-filter.keys.ts","../../src/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys.ts","../../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    const emit = defineEmits([\"dismiss\", \"placement\"]);\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': 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","_sfc_main$1","BentoButton","CrossIcon","BentoPopoverPositions","PopperContainerPosition","POPOVER_OFFSET_INJECTION_KEY","INPUT_FILTER_POPOVER_INJECTION_KEY","INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY","__default__","DEFAULT_OFFSET","slots","useSlots","attrs","useAttrs","computedAttributes","_a","PopperContainerAriaRole","offset","inject","ariaLabelAttribute","ref","ariaLabel","title","toRefs","computedAriaLabel","useAriaLabel","isOverflowVisible","conditionalClasses","contentConditionalClasses","dismissPopover","emit","hasSlot","useHasSlot"],"mappings":";;;;;;;;;;AAUA,MAAAA,IAAAC,EAAA;AAAA,EAAA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,cAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAAC,IAAAC,EAAA,MAAA,CAAAF,EAAA,YAAA,GAGAG,IAAAD;AAAA,MAAA,MAAAF,EAAA,eAAAI,EAAA,WAAAA,EAAA;AAAA,IACA;AAGA,WAAA;AAAA;AAAA,MAAA,aAAAH;AAAA,MAEA,cAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;qBCzBAE,IAAAP,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAQ,GAAA,WAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAP,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,kBAFAE,EAAA,OAAA,EAAA,sCAAAF,EAAA,QAAA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBCzBaQ,IAAA,EAAA,GAAAC,EAAA,GCLAC,IAAA,OAAA,8BAAA,GCGAC,IAAA,OAAA,mCAAA,GCHAC,IAAA,OAAA,mCAAA,GC4STC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7OAC,IAAA,GAoLAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GAEAC,IAAAjB,EAAA,MAAA;;AAAA;AAAA,QAA2C,KAAAkB,IAAAH,EAAA,OAAA,gBAAAG,EAAA;AAAA,QAChB,OAAAH,KAAA,gBAAAA,EAAA,UAAA,OAAA,SAAAI,EAAA;AAAA,MAC8C;AAAA,KAAA,GAGzEC,IAAAC,EAAAb,GAAAI,CAAA,GAEAU,IAAAC,EAAAR,EAAA,YAAA,CAAA,GACA,EAAA,WAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAA5B,CAAA,GACA6B,IAAAC,EAAA;AAAA,MAAuC,WAAAN,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,MAEvB,iBAAAC;AAAA,IACU,CAAA,GAGrBI,IAAAR,EAAAX,GAAA,EAAA,KAAAW,EAAAZ,GAAA,EAAA,GAIAqB,IAAA9B,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,+BAAA+B;AAAA,IACH,EAAA,GAGnCE,IAAA/B,EAAA,OAAA;AAAA,MAAkD,kCAAA,CAAA,CAAAF,EAAA;AAAA,IACJ,EAAA,GAG9CkC,IAAA,MAAAC,EAAA,SAAA,GAEAC,IAAAC,EAAAtB,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"popover.Cb6utVhS.js","sources":["../../src/components/popover/components/popover-title/popover-title.vue","../../src/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue","../../src/components/popover/popover.types.ts","../../src/components/popover/popover.keys.ts","../../src/components/filter-bar/components/input-filter/input-filter.keys.ts","../../src/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys.ts","../../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([\"dismiss\", \"placement\"]);\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","_sfc_main$1","BentoButton","CrossIcon","BentoPopoverPositions","PopperContainerPosition","POPOVER_OFFSET_INJECTION_KEY","INPUT_FILTER_POPOVER_INJECTION_KEY","INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY","__default__","DEFAULT_OFFSET","slots","useSlots","attrs","useAttrs","computedAttributes","_a","PopperContainerAriaRole","offset","inject","ariaLabelAttribute","ref","ariaLabel","title","toRefs","computedAriaLabel","useAriaLabel","isOverflowVisible","conditionalClasses","contentConditionalClasses","dismissPopover","emit","hasSlot","useHasSlot"],"mappings":";;;;;;;;;;AAUA,MAAAA,IAAAC,EAAA;AAAA,EAAA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,cAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA,EAKA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAAC,IAAAC,EAAA,MAAA,CAAAF,EAAA,YAAA,GAGAG,IAAAD;AAAA,MAAA,MAAAF,EAAA,eAAAI,EAAA,WAAAA,EAAA;AAAA,IACA;AAGA,WAAA;AAAA;AAAA,MAAA,aAAAH;AAAA,MAEA,cAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;qBCzBAE,IAAAP,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAQ,GAAA,WAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAP,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,kBAFAE,EAAA,OAAA,EAAA,sCAAAF,EAAA,QAAA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBCzBaQ,IAAA,EAAA,GAAAC,EAAA,GCLAC,IAAA,OAAA,8BAAA,GCGAC,IAAA,OAAA,mCAAA,GCHAC,IAAA,OAAA,mCAAA,GCoTTC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArPAC,IAAA,GA4LAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GAEAC,IAAAjB,EAAA,MAAA;;AAAA;AAAA,QAA2C,KAAAkB,IAAAH,EAAA,OAAA,gBAAAG,EAAA;AAAA,QAChB,OAAAH,KAAA,gBAAAA,EAAA,UAAA,OAAA,SAAAI,EAAA;AAAA,MAC8C;AAAA,KAAA,GAGzEC,IAAAC,EAAAb,GAAAI,CAAA,GAEAU,IAAAC,EAAAR,EAAA,YAAA,CAAA,GACA,EAAA,WAAAS,GAAA,OAAAC,EAAA,IAAAC,EAAA5B,CAAA,GACA6B,IAAAC,EAAA;AAAA,MAAuC,WAAAN,EAAA;AAAA;AAAA,MACL,OAAAE;AAAA,MAEvB,iBAAAC;AAAA,IACU,CAAA,GAGrBI,IAAAR,EAAAX,GAAA,EAAA,KAAAW,EAAAZ,GAAA,EAAA,GAIAqB,IAAA9B,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,mBAAA+B;AAAA,IACsB,EAAA,GAG5DE,IAAA/B,EAAA,OAAA;AAAA,MAAkD,kCAAA,CAAA,CAAAF,EAAA;AAAA,IACJ,EAAA,GAG9CkC,IAAA,MAAAC,EAAA,SAAA,GAEAC,IAAAC,EAAAtB,CAAA;;;;;;;;;;;;;;;;;;"}