@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/{toggle.Ca-MM3dt.js.map → toggle.BqHWIhqD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"toggle.Ca-MM3dt.js","sources":["../../src/components/toggle/toggle.types.ts","../../src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n            <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                el=\"span\"\n                variant=\"body\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, ref, toRefs, useAttrs, useSlots, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/core/utils/ts';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * @deprecated Since v2.0.0. Use `aria-label` instead.\n         * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n         */\n        ariaLabel: {\n            type: String,\n            default: undefined,\n        },\n        /**\n         * Disable the toggle (optional)\n         */\n        disabled: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Position of the label relative to the toggle (optional)\n         * @values before, after\n         */\n        labelPosition: {\n            type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n            default: BentoToggleLabelPosition.BEFORE,\n            validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n        },\n        /**\n         * Setting this property to true will set the toggle to read only state.\n         */\n        readonly: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Indicates if the switch is \"on\" or \"off\"\n         */\n        value: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const toggleInput = ref(props.value);\n    const descriptionId: string = generateUid('toggle-description');\n\n    useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n    const labelSlot = computed((): string | null => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n    const ariaLabelAttribute = computed(() => attrs['aria-label'] as string);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: labelSlot,\n    });\n\n    const computedDescription = computed((): string | null => descriptionId ?? null);\n\n    const conditionalClasses = computed((): { [key: string]: boolean } => ({\n        [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === BentoToggleLabelPosition.BEFORE,\n        'b-toggle--disabled': props.disabled,\n        'b-toggle--readonly': props.readonly,\n    }));\n\n    const onChange = (event: Event) => {\n        emit('input', (event.target as HTMLInputElement).checked);\n    };\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (props.readonly) {\n            event.preventDefault();\n        }\n    };\n\n    watch(\n        () => props.value,\n        newValue => {\n            toggleInput.value = newValue;\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-toggle',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","__default__","slots","useSlots","attrs","useAttrs","hasSlot","useHasSlot","toggleInput","ref","props","descriptionId","generateUid","useDefaultSlotValidator","labelSlot","computed","getSlotText","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","emit","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACqJR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhHAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAL,CAAA,GA6CAM,IAAAC,EAAAC,EAAA,KAAA,GACAC,IAAAC,EAAA,oBAAA;AAEA,IAAAC,EAAA,gBAAAX,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAY,IAAAC,EAAA,MAAAT,EAAA,SAAA,IAAAU,EAAAd,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAe,IAAAF,EAAA,MAAAX,EAAA,YAAA,CAAA,GACA,EAAA,WAAAc,EAAA,IAAAC,EAAAT,CAAA,GACAU,IAAAC,EAAA;AAAA,MAAuC,WAAAJ,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,MAEvB,iBAAAJ;AAAA,IACU,CAAA,GAGrBQ,IAAAP,EAAA,MAAAJ,KAAA,IAAA,GAEAY,IAAAR,EAAA,OAAA;AAAA,MAAuE,CAAA,aAAAlB,EAAA,WAAA,EAAA,GAAAa,EAAA,kBAAAX,EAAA;AAAA,MACiC,sBAAAW,EAAA;AAAA,MACxE,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGhCc,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,EAAA,OAAA,OAAA;AAAA,IAAwD,GAI5DE,IAAA,CAAAF,MAAA;AACI,MAAAf,EAAA,YACIe,EAAA,eAAA;AAAA,IACJ;AAGJ,WAAAG;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,CAAAmB,MAAA;AAER,QAAArB,EAAA,QAAAqB;AAAA,MAAoB;AAAA,IACxB;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toggle.BqHWIhqD.js","sources":["../../src/components/toggle/toggle.types.ts","../../src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n            <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                el=\"span\"\n                variant=\"body\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, ref, toRefs, useAttrs, useSlots, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/core/utils/ts';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n\n    const slots = useSlots();\n    const attrs = useAttrs();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n        /**\n         * @deprecated Since v2.0.0. Use `aria-label` instead.\n         * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n         */\n        ariaLabel: {\n            type: String,\n            default: undefined,\n        },\n        /**\n         * Disable the toggle (optional)\n         */\n        disabled: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Position of the label relative to the toggle (optional)\n         * @values before, after\n         */\n        labelPosition: {\n            type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n            default: BentoToggleLabelPosition.BEFORE,\n            validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value),\n        },\n        /**\n         * Setting this property to true will set the toggle to read only state.\n         */\n        readonly: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Indicates if the switch is \"on\" or \"off\"\n         */\n        value: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const emit = defineEmits([\"input\"]);\n\n    const toggleInput = ref(props.value);\n    const descriptionId: string = generateUid('toggle-description');\n\n    useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n    const labelSlot = computed((): string | null => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n    const ariaLabelAttribute = computed(() => attrs['aria-label'] as string);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: labelSlot,\n    });\n\n    const computedDescription = computed((): string | null => descriptionId ?? null);\n\n    const conditionalClasses = computed((): { [key: string]: boolean } => ({\n        [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === BentoToggleLabelPosition.BEFORE,\n        'b-toggle--disabled': props.disabled,\n        'b-toggle--readonly': props.readonly,\n    }));\n\n    const onChange = (event: Event) => {\n        emit('input', (event.target as HTMLInputElement).checked);\n    };\n\n    // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n    const onClick = (event: Event) => {\n        if (props.readonly) {\n            event.preventDefault();\n        }\n    };\n\n    watch(\n        () => props.value,\n        newValue => {\n            toggleInput.value = newValue;\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-toggle',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","__default__","slots","useSlots","attrs","useAttrs","hasSlot","useHasSlot","toggleInput","ref","props","descriptionId","generateUid","useDefaultSlotValidator","labelSlot","computed","getSlotText","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","emit","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACqJR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhHAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAL,CAAA,GA6CAM,IAAAC,EAAAC,EAAA,KAAA,GACAC,IAAAC,EAAA,oBAAA;AAEA,IAAAC,EAAA,gBAAAX,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAY,IAAAC,EAAA,MAAAT,EAAA,SAAA,IAAAU,EAAAd,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAe,IAAAF,EAAA,MAAAX,EAAA,YAAA,CAAA,GACA,EAAA,WAAAc,EAAA,IAAAC,EAAAT,CAAA,GACAU,IAAAC,EAAA;AAAA,MAAuC,WAAAJ,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,MAEvB,iBAAAJ;AAAA,IACU,CAAA,GAGrBQ,IAAAP,EAAA,MAAAJ,KAAA,IAAA,GAEAY,IAAAR,EAAA,OAAA;AAAA,MAAuE,CAAA,aAAAlB,EAAA,WAAA,EAAA,GAAAa,EAAA,kBAAAX,EAAA;AAAA,MACiC,sBAAAW,EAAA;AAAA,MACxE,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGhCc,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,EAAA,OAAA,OAAA;AAAA,IAAwD,GAI5DE,IAAA,CAAAF,MAAA;AACI,MAAAf,EAAA,YACIe,EAAA,eAAA;AAAA,IACJ;AAGJ,WAAAG;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACgB,CAAAmB,MAAA;AAER,QAAArB,EAAA,QAAAqB;AAAA,MAAoB;AAAA,IACxB;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{tooltip.7ct8WxCl.js → tooltip.D_XsoD_u.js}

@@ -1,20 +1,20 @@
-import { defineComponent as O, computed as C, reactive as y, nextTick as D } from "vue";
-import { l as r } from "./events.BQOQSSb7.js";
-import { g as R } from "./generate-uid.NJ8tVoha.js";
-import { c as b, a as B, P as N } from "./popper-container.Cb9wuFId.js";
-import { V as $ } from "./index.Cl4_42j5.js";
-import { B as I } from "./typography.C8lPlsbD.js";
-import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { b as x } from "./focus-trap.oRKjDFzf.js";
+import { defineComponent as S, computed as O, reactive as C, nextTick as y } from "vue";
+import { l as a } from "./events.BQOQSSb7.js";
+import { g as D } from "./generate-uid.DBWe4g6T.js";
+import { c as T, a as R, P as B } from "./popper-container.D08eTt4B.js";
+import { V as I } from "./index.Cl4_42j5.js";
+import { B as N } from "./typography.D1OZJbEa.js";
+import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { b as k } from "./focus-trap.l-wwtCHi.js";
 import "../assets/tooltip.css";
-const h = { ...b };
-var F = /* @__PURE__ */ ((t) => (t.HIDDEN = "hidden", t))(F || {}), g = /* @__PURE__ */ ((t) => (t.ESCAPE = "Escape", t.ENTER = "Enter", t.ARROW_LEFT = "ArrowLeft", t.ARROW_UP = "ArrowUp", t.ARROW_RIGHT = "ArrowRight", t.ARROW_DOWN = "ArrowDown", t.PAGE_UP = "PageUp", t.PAGE_DOWN = "PageDown", t.END = "End", t.HOME = "Home", t.TAB = "Tab", t.F2 = "F2", t))(g || {});
-const _ = { ...b };
-var E = /* @__PURE__ */ ((t) => (t.HIDDEN = "hidden", t))(E || {});
-const U = {
+const m = { ...T };
+var x = /* @__PURE__ */ ((t) => (t.HIDDEN = "hidden", t))(x || {}), b = /* @__PURE__ */ ((t) => (t.ESCAPE = "Escape", t.ENTER = "Enter", t.ARROW_LEFT = "ArrowLeft", t.ARROW_UP = "ArrowUp", t.ARROW_RIGHT = "ArrowRight", t.ARROW_DOWN = "ArrowDown", t.PAGE_UP = "PageUp", t.PAGE_DOWN = "PageDown", t.END = "End", t.HOME = "Home", t.TAB = "Tab", t.F2 = "F2", t))(b || {});
+const h = { ...T };
+var g = /* @__PURE__ */ ((t) => (t.HIDDEN = "hidden", t))(g || {});
+const F = {
   name: "tooltip"
-}, H = /* @__PURE__ */ O({
-  ...U,
+}, U = /* @__PURE__ */ S({
+  ...F,
   props: {
     /**
      * The tooltip's id. Necessary for accessibility purposes.
@@ -31,8 +31,8 @@ const U = {
      */
     position: {
       type: String,
-      default: _.TOP,
-      validator: (t) => Object.values(_).includes(t)
+      default: h.TOP,
+      validator: (t) => Object.values(h).includes(t)
     },
     /**
      * Tooltip's offset.
@@ -64,97 +64,95 @@ const U = {
     disabledFocusTrap: { type: Boolean, default: !1 }
   },
   setup(t) {
-    const o = t, e = C(() => ({
-      [`b-tooltip--${E.HIDDEN}`]: !o.isShown
+    const o = t, e = O(() => ({
+      [`b-tooltip--${g.HIDDEN}`]: !o.isShown
     }));
-    return { __sfc: !0, props: o, conditionalClasses: e, PopperContainer: N, PopperContainerAriaRole: B, BentoTypography: I };
+    return { __sfc: !0, props: o, conditionalClasses: e, PopperContainer: B, PopperContainerAriaRole: R, BentoTypography: N };
   }
 });
-var W = function() {
+var H = function() {
   var o = this, e = o._self._c, s = o._self._setupProxy;
   return e(s.PopperContainer, { staticClass: "b-tooltip", class: s.conditionalClasses, attrs: { id: o.id, "aria-role": s.PopperContainerAriaRole.TOOLTIP, arrow: { classes: ["b-tooltip__arrow"] }, "fallback-position": o.fallbackPosition, "is-hidden": !o.isShown, offset: [0, 4], position: o.position, "target-element": o.targetElement, "disabled-focus-trap": o.disabledFocusTrap } }, [e(s.BentoTypography, { attrs: { el: "span", variant: "caption" } }, [o._v(" " + o._s(o.content) + " ")])], 1);
-}, q = [], L = /* @__PURE__ */ k(
+}, W = [], q = /* @__PURE__ */ $(
+  U,
   H,
   W,
-  q,
   !1,
   null,
   "6d4633ff"
 );
-const G = L.exports, i = [], P = "aria-describedby", u = R("tooltip");
+const L = q.exports, i = [], E = "aria-describedby", d = D("tooltip");
 let n, c = !1;
-const a = y({
+const r = C({
   targetElement: null,
   content: "START_MESSAGE",
-  id: u,
+  id: d,
   position: void 0,
   isShown: !1
-}), j = (t) => {
-  const o = x(t).filter((e) => e.node !== t);
+}), G = (t) => {
+  const o = k(t).filter((e) => e.node !== t);
   t.tabIndex < 0 && o.length === 0 && t.setAttribute("tabindex", "0");
   {
-    const e = $.extend(G);
-    n = new e({ propsData: { targetElement: t, content: "", id: u } }).$mount(), document.body.appendChild(n.$el);
+    const e = I.extend(L);
+    n = new e({ propsData: { targetElement: t, content: "", id: d } }).$mount(), document.body.appendChild(n.$el);
   }
-}, M = () => {
+}, j = () => {
   document.contains(n.$el) && document.body.removeChild(n.$el), n.$destroy(), n = void 0;
-}, A = (t) => Object.values(h).includes(t.arg) ? t.arg : h.TOP, d = (t) => i.find(
+}, P = (t) => Object.values(m).includes(t.arg) ? t.arg : m.TOP, u = (t) => i.find(
   (o) => (
     // isEqualNode doesn't work correct for svg element, hence the second check here
     o.target.isEqualNode(t) && o.target === t
   )
-), V = (t) => {
-  const o = d(t);
+), M = (t) => {
+  const o = u(t);
   if (!o || !o.content || !t || !n)
     return;
-  t && t.setAttribute(P, u);
+  t && t.setAttribute(E, d);
   let e = !1;
   document.querySelectorAll("dialog").forEach((s) => {
-    e = (s == null ? void 0 : s.open) || e;
-  }), e && (t.after(n.$el), e = !1), c = !0, n.content = o.content, n.position = o.position, a.content = o.content, a.position = o.position, D(() => {
-    !c || !n || (n.targetElement = t, n.isShown = !0, a.targetElement = t, a.isShown = !0);
+    e = s?.open || e;
+  }), e && (t.after(n.$el), e = !1), c = !0, n.content = o.content, n.position = o.position, r.content = o.content, r.position = o.position, y(() => {
+    !c || !n || (n.targetElement = t, n.isShown = !0, r.targetElement = t, r.isShown = !0);
   });
-}, v = (t) => {
-  var o, e;
-  (e = (o = n == null ? void 0 : n.$el) == null ? void 0 : o.parentElement) != null && e.tagName && n.$el.parentElement.tagName !== "BODY" && document.body.appendChild(n.$el), c = !1, n && (n.isShown = !1), a.isShown = !1, t && t.removeAttribute(P);
+}, A = (t) => {
+  n?.$el?.parentElement?.tagName && n.$el.parentElement.tagName !== "BODY" && document.body.appendChild(n.$el), c = !1, n && (n.isShown = !1), r.isShown = !1, t && t.removeAttribute(E);
 }, f = (t, o) => {
   if (!o.hasOwnProperty("value") || o.value) {
-    i.length === 0 && j(t);
-    const e = () => V(t), s = () => v(t), w = {
+    i.length === 0 && G(t);
+    const e = () => M(t), s = () => A(t), v = {
       target: t,
       content: o.value,
-      position: A(o),
+      position: P(o),
       removeListeners: [
-        r(t, "mouseenter", e),
-        r(t, "mouseleave", s),
-        r(t, "focus", () => {
+        a(t, "mouseenter", e),
+        a(t, "mouseleave", s),
+        a(t, "focus", () => {
           t.matches(":focus-visible") && e();
         }),
-        r(t, "blur", (l) => {
-          var m;
-          ((m = l.relatedTarget) == null ? void 0 : m.getAttribute("role")) !== "tooltip" && s();
+        a(t, "blur", (l) => {
+          l.relatedTarget?.getAttribute("role") !== "tooltip" && s();
         }),
-        r(t, "keydown", (l) => {
-          l.key === g.ESCAPE && s();
+        a(t, "keydown", (l) => {
+          l.key === b.ESCAPE && s();
         })
       ]
     };
-    i.push(w);
+    i.push(v);
   }
 }, p = (t, o) => {
-  const e = d(t);
+  const e = u(t);
   if (e) {
-    if ((e == null ? void 0 : e.content) !== o.value && (e.content = o.value, n.isShown && n.targetElement.isEqualNode(t) && (e.content ? n.content = o.value : n.isShown = !1)), e.position !== o.arg) {
-      const s = A(o);
+    if (e?.content !== o.value && (e.content = o.value, n.isShown && n.targetElement.isEqualNode(t) && (e.content ? n.content = o.value : n.isShown = !1)), e.position !== o.arg) {
+      const s = P(o);
       e.position = s, n.position = s;
     }
   } else !e && o.value && f(t, o);
-}, T = (t) => {
-  const o = d(t);
+}, _ = (t) => {
+  const o = u(t);
   o && (o.removeListeners.forEach((e) => {
     e();
-  }), v(), i.splice(i.indexOf(o), 1), i.length === 0 && M());
-}, ot = {
+  }), A(), i.splice(i.indexOf(o), 1), i.length === 0 && j());
+}, tt = {
   // Vue 2 Directive hooks
   bind(t, o) {
     f(t, o);
@@ -163,7 +161,7 @@ const a = y({
     p(t, o);
   },
   unbind(t) {
-    T(t);
+    _(t);
   },
   // Vue 3 Directive hooks
   beforeMount(t, o) {
@@ -176,16 +174,16 @@ const a = y({
     p(t, o);
   },
   unmounted(t) {
-    T(t);
+    _(t);
   }
 };
 export {
-  _ as B,
-  g as E,
-  G as T,
-  E as a,
-  ot as b,
-  h as c,
-  F as d
+  h as B,
+  b as E,
+  L as T,
+  g as a,
+  tt as b,
+  m as c,
+  x as d
 };
-//# sourceMappingURL=tooltip.7ct8WxCl.js.map
+//# sourceMappingURL=tooltip.D_XsoD_u.js.map

package/dist/chunks/{tooltip.7ct8WxCl.js.map → tooltip.D_XsoD_u.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tooltip.7ct8WxCl.js","sources":["../../src/directives/tooltip/tooltip.types.ts","../../src/types/utils-events.ts","../../src/components/internal/tooltip/tooltip.types.ts","../../src/components/internal/tooltip/tooltip.vue","../../src/directives/tooltip/tooltip.ts"],"sourcesContent":["import type { DirectiveBinding } from 'vue/types/options';\nimport { PopperContainerPositionBasic } from '../../components/popper-container/popper-container.types';\n\nexport interface BentoTooltipDirectiveBinding extends Readonly<DirectiveBinding> {\n    readonly value: string;\n}\n\nexport const BentoTooltipPosition = { ...PopperContainerPositionBasic };\nexport type BentoTooltipPosition = PopperContainerPositionBasic;\n\nexport enum BentoTooltipState {\n    HIDDEN = 'hidden',\n}\n","import type { Vue } from 'vue-demi';\n\nexport interface ListenOptions {\n    capture?: boolean;\n    passive?: boolean;\n    once?: boolean;\n    self?: boolean;\n    vm?: Vue;\n    onCleanup?: () => void;\n}\n\nexport enum EventKey {\n    ESCAPE = 'Escape',\n    ENTER = 'Enter',\n    ARROW_LEFT = 'ArrowLeft',\n    ARROW_UP = 'ArrowUp',\n    ARROW_RIGHT = 'ArrowRight',\n    ARROW_DOWN = 'ArrowDown',\n    PAGE_UP = 'PageUp',\n    PAGE_DOWN = 'PageDown',\n    END = 'End',\n    HOME = 'Home',\n    TAB = 'Tab',\n    F2 = 'F2',\n}\n\n/**\n * @deprecated Since v2.0.0. Use `EventKey` instead.\n * @see EventKey\n */\nexport enum KeyCode {\n    ESCAPE = 27,\n    ENTER = 13,\n    ARROW_LEFT = 37,\n    ARROW_UP = 38,\n    ARROW_RIGHT = 39,\n    ARROW_DOWN = 40,\n    PAGE_UP = 33,\n    PAGE_DOWN = 34,\n    END = 35,\n    HOME = 36,\n}\n","import { PopperContainerPositionBasic } from '../../popper-container/popper-container.types';\n\nexport const BentoTooltipPosition = { ...PopperContainerPositionBasic };\nexport type BentoTooltipPosition = PopperContainerPositionBasic;\n\nexport enum BentoTooltipState {\n    HIDDEN = 'hidden',\n}\n","<template>\n    <popper-container\n        :id=\"id\"\n        :aria-role=\"PopperContainerAriaRole.TOOLTIP\"\n        :arrow=\"{ classes: ['b-tooltip__arrow'] }\"\n        :class=\"conditionalClasses\"\n        :fallback-position=\"fallbackPosition\"\n        :is-hidden=\"!isShown\"\n        :offset=\"[0, 4]\"\n        :position=\"position\"\n        :target-element=\"targetElement\"\n        :disabled-focus-trap=\"disabledFocusTrap\"\n        class=\"b-tooltip\"\n    >\n        <bento-typography el=\"span\" variant=\"caption\">\n            {{ content }}\n        </bento-typography>\n    </popper-container>\n</template>\n\n<script setup lang=\"ts\">\n    import type {} from '@floating-ui/vue';\n    import { computed, type PropType } from 'vue';\n    import { BentoTooltipPosition, BentoTooltipState } from './tooltip.types';\n    import { type FallbackPositionProp, PopperContainer, PopperContainerAriaRole } from '@/components/popper-container';\n    import { BentoTypography } from '@/components/typography';\n    import { type VueNodeElement } from '@/types/elements';\n\n    const props = defineProps({\n        /**\n         * The tooltip's id. Necessary for accessibility purposes.\n         */\n        id: { type: String, default: null },\n        /**\n         * Tooltip's target reference to the DOM element or Vue component.\n         * The tooltip will position itself relatively to target element, in the specified position.\n         */\n        targetElement: { type: [Element, Object] as PropType<VueNodeElement>, required: true },\n        /**\n         * Tooltip's position relative to the target element.\n         * Possible values are: 'top', 'bottom', 'left' and 'right'.\n         */\n        position: {\n            type: String as PropType<BentoTooltipPosition>,\n            default: BentoTooltipPosition.TOP,\n            validator: value => Object.values(BentoTooltipPosition).includes(value as BentoTooltipPosition),\n        },\n        /**\n         * Tooltip's offset.\n         * If specified, the tooltip will have an offset in pixels between it and the target element\n         * in specified position.\n         */\n        offset: { type: Number, default: 0 },\n        /**\n         * Tooltip's text content.\n         */\n        content: { type: String, required: true },\n        /**\n         * Shows / Hides the Tooltip component\n         */\n        isShown: { type: Boolean, default: false },\n\n        /**\n         * Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...].\n         * Useful when not using auto as starting placement.\n         * @see {@link https://floating-ui.com/docs/flip#fallbackplacements}\n         */\n        fallbackPosition: {\n            type: [Array, String] as PropType<FallbackPositionProp>,\n            default: () => ['top', 'bottom', 'right', 'left'],\n        },\n\n        /**\n         * Disables focus-trap for tooltip.\n         * Useful for maintaining focus on the target element.\n         */\n        disabledFocusTrap: { type: Boolean, default: false },\n    });\n\n    const conditionalClasses = computed(() => ({\n        [`b-tooltip--${BentoTooltipState.HIDDEN}`]: !props.isShown,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Tooltip container, to be used internally to render the tooltip container where the text is shown.\n     */\n    export default {\n        name: 'tooltip',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tooltip.scss\" />\n","import { nextTick, reactive } from 'vue';\nimport { listen } from '@/utils/ts/events';\nimport { generateUid } from '@/core/utils/ts';\nimport { EventKey } from '@/types/utils-events';\nimport { BentoTooltipPosition } from './tooltip.types';\nimport { type BentoTooltipDirectiveBinding } from './tooltip.types';\nimport { createApp, h, isVue2, isVue3, Vue2 } from 'vue-demi';\nimport Tooltip from '@/internal/tooltip/tooltip.vue';\nimport { getFocusableIn } from 'focus-lock';\n\ninterface TooltipInstance {\n    target: HTMLElement;\n    content: string;\n    position: BentoTooltipPosition;\n    removeListeners: Array<() => void>;\n}\n\n/**\n * Tooltip directive to render a tooltip on a given HTML element or component.\n *\n * @usage\n * import { BentoTooltipDirective, BentoTooltipPosition } from '@adyen/bento-vue2';\n *\n * export default {\n *     directives: { BentoTooltipDirective },\n *     template: `\n *         <bento-button\n *             v-bento-tooltip-directive:BentoTooltipPosition.BOTTOM=\"refToTextContent\"\n *         >\n *             Button text\n *         </bento-button>\n *     `,\n * }\n */\nconst tooltipInstances: Array<TooltipInstance> = [];\nconst ariaDescribedByAttr = 'aria-describedby';\nconst tooltipId = generateUid('tooltip');\n\nlet tooltipVNode;\n\n// Reusable Tooltip component instance.\nlet tooltip;\n// Global visibility state to prevent tooltips from showing after it being instructed to hide\nlet open = false;\n\nconst tooltipProps = reactive({\n    targetElement: null,\n    content: 'START_MESSAGE',\n    id: tooltipId,\n    position: undefined,\n    isShown: false,\n});\n\n/**\n * Creates a new Tooltip component instance and inserts it into DOM.\n * @param {HTMLElement} el the target element for the Tooltip\n * @internal\n */\nconst createTooltip = (el: HTMLElement) => {\n    // Only set tabindex on elements that are not natively focusable, don't already\n    // have one, and don't contain a focusable descendant. Wrapper elements (e.g. a\n    // menu div around a button) should not become tabbable themselves -- the child\n    // button already provides keyboard access.\n    const focusableChildren = getFocusableIn(el).filter(item => item.node !== el);\n    if (el.tabIndex < 0 && focusableChildren.length === 0) {\n        el.setAttribute('tabindex', '0');\n    }\n\n    if (isVue2) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore: Type error for Vue method in Vue 3 but this code only executes in vue 2 so ignoring.\n        const TooltipComponent = Vue2.extend(Tooltip);\n        tooltip = new TooltipComponent({ propsData: { targetElement: el, content: '', id: tooltipId } }).$mount();\n        document.body.appendChild(tooltip.$el);\n    } else {\n        tooltipProps.targetElement = el;\n        tooltip = createApp({\n            components: { Tooltip },\n            setup() {\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore: Type error for h method in Vue 2 but this code only executes in vue 3 so ignoring.\n                return () => h(Tooltip, { ...tooltipProps }, '');\n            },\n        });\n        tooltipVNode = document.createElement('div');\n        tooltipVNode.id = 'tooltip-parent';\n        document.body.appendChild(tooltipVNode);\n        tooltip.mount('#tooltip-parent');\n    }\n};\n\n/**\n * Removes Tooltip component instance from the DOM and destroys it.\n * @internal\n */\nconst destroyTooltip = () => {\n    if (isVue2) {\n        if (document.contains(tooltip.$el)) {\n            document.body.removeChild(tooltip.$el);\n        }\n        tooltip.$destroy();\n    } else {\n        tooltip.unmount();\n        if (document.contains(tooltipVNode)) {\n            document.body.removeChild(tooltipVNode);\n        }\n    }\n\n    tooltip = undefined;\n};\n\n/**\n * Returns tooltip position based on the specified argument.\n * By default returns 'top' if no argument is specified.\n * @param {BentoTooltipDirectiveBinding} binding Directive binding object.\n * @returns {string} Tooltip position.\n * @internal\n */\nconst getTooltipPosition = (binding: BentoTooltipDirectiveBinding): BentoTooltipPosition =>\n    Object.values(BentoTooltipPosition).includes(binding.arg as BentoTooltipPosition)\n        ? (binding.arg as BentoTooltipPosition)\n        : BentoTooltipPosition.TOP;\n\n/**\n * Get the correct Tooltip instance for the given target element\n * @param {HTMLElement} el the target element for the Tooltip\n * @returns\n */\nconst getTooltipInstanceForTarget = (el: HTMLElement): TooltipInstance =>\n    tooltipInstances.find(\n        ctx =>\n            // isEqualNode doesn't work correct for svg element, hence the second check here\n            ctx.target.isEqualNode(el) && ctx.target === el\n    );\n\n/**\n * On mouse enter event updates tooltip with correct content and position, and shows tooltip.\n * @param {?HTMLElement} el - Target element\n * @internal\n */\nconst showTooltip = (el?: HTMLElement) => {\n    const tooltipInstance = getTooltipInstanceForTarget(el);\n\n    // If tooltip content is empty – do not show the tooltip\n    if (!tooltipInstance || !tooltipInstance.content || !el || !tooltip) {\n        return;\n    }\n\n    if (el) {\n        el.setAttribute(ariaDescribedByAttr, tooltipId);\n    }\n\n    // If the Tooltip is inside a dialog, move tooltip element inside of it\n    // It gets restored to <body> when it gets hidden\n    let isDialogOpen = false;\n    document.querySelectorAll('dialog').forEach(node => {\n        isDialogOpen = node?.open || isDialogOpen;\n    });\n\n    if (isDialogOpen) {\n        if (isVue2) {\n            el.after(tooltip.$el);\n            // eslint-disable-next-line no-underscore-dangle\n        } else if (tooltip?._instance?.vnode?.el) {\n            // eslint-disable-next-line no-underscore-dangle\n            el.after(tooltip?._instance?.vnode?.el);\n        }\n        isDialogOpen = false;\n    }\n\n    open = true;\n\n    tooltip.content = tooltipInstance.content;\n    tooltip.position = tooltipInstance.position;\n\n    tooltipProps.content = tooltipInstance.content;\n    tooltipProps.position = tooltipInstance.position;\n\n    // Do calculations on a next tick, otherwise tooltip position calculations will be wrong\n    nextTick(() => {\n        // Do not open tooltip if it has been instructed to hide in process\n        if (!open || !tooltip) {\n            return;\n        }\n        tooltip.targetElement = el;\n        tooltip.isShown = true;\n\n        tooltipProps.targetElement = el;\n        tooltipProps.isShown = true;\n    });\n};\n\n/**\n * On mouse leave event hides the tooltip.\n * @internal\n */\nconst hideTooltip = (el?: HTMLElement) => {\n    // Restore the tooltip element to body if it got move out of <body>\n    if (tooltip?.$el?.parentElement?.tagName && tooltip.$el.parentElement.tagName !== 'BODY') {\n        document.body.appendChild(tooltip.$el);\n    }\n\n    open = false;\n    if (tooltip) {\n        tooltip.isShown = false;\n    }\n    tooltipProps.isShown = false;\n    if (el) {\n        el.removeAttribute(ariaDescribedByAttr);\n    }\n};\n\nconst tooltipBind = (el: HTMLElement, binding: BentoTooltipDirectiveBinding) => {\n    // eslint-disable-next-line no-prototype-builtins\n    if (!binding.hasOwnProperty('value') || binding.value) {\n        // Create Tooltip component singleton instance\n        if (tooltipInstances.length === 0) {\n            createTooltip(el);\n        }\n\n        const show = () => showTooltip(el);\n        const hide = () => hideTooltip(el);\n\n        // Create and store context object, which has directive related handlers and content.\n        const tooltipInstance: TooltipInstance = {\n            target: el,\n            content: binding.value,\n            position: getTooltipPosition(binding),\n            removeListeners: [\n                listen(el, 'mouseenter', show),\n                listen(el, 'mouseleave', hide),\n                listen(el, 'focus', () => {\n                    if (el.matches(':focus-visible')) {\n                        show();\n                    }\n                }),\n                listen(el, 'blur', evt => {\n                    const focusEvent = <FocusEvent>evt;\n\n                    // when blurred and it transitions to the tooltip via screenreader, it should not close\n                    if ((focusEvent.relatedTarget as Element)?.getAttribute('role') !== 'tooltip') {\n                        hide();\n                    }\n                }),\n                listen(el, 'keydown', evt => {\n                    const keyboardEvent = <KeyboardEvent>evt;\n                    if (keyboardEvent.key === EventKey.ESCAPE) {\n                        hide();\n                    }\n                }),\n            ],\n        };\n\n        tooltipInstances.push(tooltipInstance);\n    }\n};\n\nconst tooltipUpdate = (el: HTMLElement, binding: BentoTooltipDirectiveBinding) => {\n    const tooltipInstance = getTooltipInstanceForTarget(el);\n    if (tooltipInstance) {\n        // Update tooltip content value if it is changed\n        if (tooltipInstance?.content !== binding.value) {\n            tooltipInstance.content = binding.value;\n            // If tooltip is currently shown for current element – update tooltip's content value\n            if (tooltip.isShown && tooltip.targetElement.isEqualNode(el)) {\n                if (!tooltipInstance.content) {\n                    tooltip.isShown = false;\n                } else {\n                    tooltip.content = binding.value;\n                }\n\n                // This forces the tooltip to refresh and update content in Vue3\n                if (isVue3) {\n                    hideTooltip(el);\n                    showTooltip(el);\n                }\n            }\n        }\n        // Update tooltip position if it is changed\n        if (tooltipInstance.position !== binding.arg) {\n            const position = getTooltipPosition(binding);\n            tooltipInstance.position = position;\n            tooltip.position = position;\n        }\n    } else if (!tooltipInstance && binding.value) {\n        // If I don't have a tooltip instance yet but the value passed was updated\n        tooltipBind(el, binding);\n    }\n};\n\nconst tooltipUnbind = (el: HTMLElement) => {\n    const context = getTooltipInstanceForTarget(el);\n\n    // Prevent unbinding/removing when there's nothing to unbind, leads to stack overflow errors\n    if (!context) {\n        return;\n    }\n\n    context.removeListeners.forEach(removeListener => {\n        removeListener();\n    });\n\n    // If el is removed while tooltip is displayed, the tooltip doesnt hide as\n    // there is no el to trigger mouseleave/blur.\n    hideTooltip();\n\n    tooltipInstances.splice(tooltipInstances.indexOf(context), 1);\n\n    // If all the elements using the directive are removed, then no point having\n    // the component on the page.\n    if (tooltipInstances.length === 0) {\n        destroyTooltip();\n    }\n};\n\n/**\n * This directive allows you to bind a tooltip to an element.\n * Tooltip can be configured to be shown in one of four positions: 'top', 'left', 'right' and 'bottom'.\n *\n * @example\n * import { BentoTooltipDirective as BentoTooltip, BentoTooltipPosition } from '@adyen/bento-vue2';\n *\n * export default {\n *     directives: { BentoTooltip },\n *     methods: {\n *         contentExpression() {\n *             return 'tooltip content';\n *         },\n *     },\n *     template: `<div>\n *         <div v-bento-tooltip:left=\"refToTooltipContent\"></div>\n *         <div v-bento-tooltip:[TooltipPosition.BOTTOM]=\"refToTooltipContent\"></div>\n *\n *         <!-- If you don't specify the position then by default it's `TooltipPosition.TOP` -->\n *         <div v-bento-tooltip=\"refToTooltipContent\"></div>\n *\n *         <!-- Tooltip content can also be a data property or a method or a computed property as well -->\n *         <div v-bento-tooltip=\"contentExpression()\"></div>\n *     </div>`,\n * };\n */\nexport const BentoTooltipDirective = {\n    // Vue 2 Directive hooks\n    bind(el, binding) {\n        tooltipBind(el, binding);\n    },\n    update(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    unbind(el) {\n        tooltipUnbind(el);\n    },\n    // Vue 3 Directive hooks\n    beforeMount(el, binding) {\n        tooltipBind(el, binding);\n    },\n    mounted(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    updated(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    unmounted(el) {\n        tooltipUnbind(el);\n    },\n};\n"],"names":["BentoTooltipPosition$1","PopperContainerPositionBasic","BentoTooltipState$1","BentoTooltipState2","EventKey","EventKey2","BentoTooltipPosition","BentoTooltipState","__default__","conditionalClasses","computed","props","tooltipInstances","ariaDescribedByAttr","tooltipId","generateUid","tooltip","open","tooltipProps","reactive","createTooltip","el","focusableChildren","getFocusableIn","item","TooltipComponent","Vue2","Tooltip","destroyTooltip","getTooltipPosition","binding","getTooltipInstanceForTarget","ctx","showTooltip","tooltipInstance","isDialogOpen","node","nextTick","hideTooltip","_b","_a","tooltipBind","show","hide","listen","evt","tooltipUpdate","position","tooltipUnbind","context","removeListener","BentoTooltipDirective"],"mappings":"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"}
+{"version":3,"file":"tooltip.D_XsoD_u.js","sources":["../../src/directives/tooltip/tooltip.types.ts","../../src/types/utils-events.ts","../../src/components/internal/tooltip/tooltip.types.ts","../../src/components/internal/tooltip/tooltip.vue","../../src/directives/tooltip/tooltip.ts"],"sourcesContent":["import type { DirectiveBinding } from 'vue/types/options';\nimport { PopperContainerPositionBasic } from '../../components/popper-container/popper-container.types';\n\nexport interface BentoTooltipDirectiveBinding extends Readonly<DirectiveBinding> {\n    readonly value: string;\n}\n\nexport const BentoTooltipPosition = { ...PopperContainerPositionBasic };\nexport type BentoTooltipPosition = PopperContainerPositionBasic;\n\nexport enum BentoTooltipState {\n    HIDDEN = 'hidden',\n}\n","import type { Vue } from 'vue-demi';\n\nexport interface ListenOptions {\n    capture?: boolean;\n    passive?: boolean;\n    once?: boolean;\n    self?: boolean;\n    vm?: Vue;\n    onCleanup?: () => void;\n}\n\nexport enum EventKey {\n    ESCAPE = 'Escape',\n    ENTER = 'Enter',\n    ARROW_LEFT = 'ArrowLeft',\n    ARROW_UP = 'ArrowUp',\n    ARROW_RIGHT = 'ArrowRight',\n    ARROW_DOWN = 'ArrowDown',\n    PAGE_UP = 'PageUp',\n    PAGE_DOWN = 'PageDown',\n    END = 'End',\n    HOME = 'Home',\n    TAB = 'Tab',\n    F2 = 'F2',\n}\n\n/**\n * @deprecated Since v2.0.0. Use `EventKey` instead.\n * @see EventKey\n */\nexport enum KeyCode {\n    ESCAPE = 27,\n    ENTER = 13,\n    ARROW_LEFT = 37,\n    ARROW_UP = 38,\n    ARROW_RIGHT = 39,\n    ARROW_DOWN = 40,\n    PAGE_UP = 33,\n    PAGE_DOWN = 34,\n    END = 35,\n    HOME = 36,\n}\n","import { PopperContainerPositionBasic } from '../../popper-container/popper-container.types';\n\nexport const BentoTooltipPosition = { ...PopperContainerPositionBasic };\nexport type BentoTooltipPosition = PopperContainerPositionBasic;\n\nexport enum BentoTooltipState {\n    HIDDEN = 'hidden',\n}\n","<template>\n    <popper-container\n        :id=\"id\"\n        :aria-role=\"PopperContainerAriaRole.TOOLTIP\"\n        :arrow=\"{ classes: ['b-tooltip__arrow'] }\"\n        :class=\"conditionalClasses\"\n        :fallback-position=\"fallbackPosition\"\n        :is-hidden=\"!isShown\"\n        :offset=\"[0, 4]\"\n        :position=\"position\"\n        :target-element=\"targetElement\"\n        :disabled-focus-trap=\"disabledFocusTrap\"\n        class=\"b-tooltip\"\n    >\n        <bento-typography el=\"span\" variant=\"caption\">\n            {{ content }}\n        </bento-typography>\n    </popper-container>\n</template>\n\n<script setup lang=\"ts\">\n    import type {} from '@floating-ui/vue';\n    import { computed, type PropType } from 'vue';\n    import { BentoTooltipPosition, BentoTooltipState } from './tooltip.types';\n    import { type FallbackPositionProp, PopperContainer, PopperContainerAriaRole } from '@/components/popper-container';\n    import { BentoTypography } from '@/components/typography';\n    import { type VueNodeElement } from '@/types/elements';\n\n    const props = defineProps({\n        /**\n         * The tooltip's id. Necessary for accessibility purposes.\n         */\n        id: { type: String, default: null },\n        /**\n         * Tooltip's target reference to the DOM element or Vue component.\n         * The tooltip will position itself relatively to target element, in the specified position.\n         */\n        targetElement: { type: [Element, Object] as PropType<VueNodeElement>, required: true },\n        /**\n         * Tooltip's position relative to the target element.\n         * Possible values are: 'top', 'bottom', 'left' and 'right'.\n         */\n        position: {\n            type: String as PropType<BentoTooltipPosition>,\n            default: BentoTooltipPosition.TOP,\n            validator: value => Object.values(BentoTooltipPosition).includes(value as BentoTooltipPosition),\n        },\n        /**\n         * Tooltip's offset.\n         * If specified, the tooltip will have an offset in pixels between it and the target element\n         * in specified position.\n         */\n        offset: { type: Number, default: 0 },\n        /**\n         * Tooltip's text content.\n         */\n        content: { type: String, required: true },\n        /**\n         * Shows / Hides the Tooltip component\n         */\n        isShown: { type: Boolean, default: false },\n\n        /**\n         * Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...].\n         * Useful when not using auto as starting placement.\n         * @see {@link https://floating-ui.com/docs/flip#fallbackplacements}\n         */\n        fallbackPosition: {\n            type: [Array, String] as PropType<FallbackPositionProp>,\n            default: () => ['top', 'bottom', 'right', 'left'],\n        },\n\n        /**\n         * Disables focus-trap for tooltip.\n         * Useful for maintaining focus on the target element.\n         */\n        disabledFocusTrap: { type: Boolean, default: false },\n    });\n\n    const conditionalClasses = computed(() => ({\n        [`b-tooltip--${BentoTooltipState.HIDDEN}`]: !props.isShown,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Tooltip container, to be used internally to render the tooltip container where the text is shown.\n     */\n    export default {\n        name: 'tooltip',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tooltip.scss\" />\n","import { nextTick, reactive } from 'vue';\nimport { listen } from '@/utils/ts/events';\nimport { generateUid } from '@/core/utils/ts';\nimport { EventKey } from '@/types/utils-events';\nimport { BentoTooltipPosition } from './tooltip.types';\nimport { type BentoTooltipDirectiveBinding } from './tooltip.types';\nimport { createApp, h, isVue2, isVue3, Vue2 } from 'vue-demi';\nimport Tooltip from '@/internal/tooltip/tooltip.vue';\nimport { getFocusableIn } from 'focus-lock';\n\ninterface TooltipInstance {\n    target: HTMLElement;\n    content: string;\n    position: BentoTooltipPosition;\n    removeListeners: Array<() => void>;\n}\n\n/**\n * Tooltip directive to render a tooltip on a given HTML element or component.\n *\n * @usage\n * import { BentoTooltipDirective, BentoTooltipPosition } from '@adyen/bento-vue2';\n *\n * export default {\n *     directives: { BentoTooltipDirective },\n *     template: `\n *         <bento-button\n *             v-bento-tooltip-directive:BentoTooltipPosition.BOTTOM=\"refToTextContent\"\n *         >\n *             Button text\n *         </bento-button>\n *     `,\n * }\n */\nconst tooltipInstances: Array<TooltipInstance> = [];\nconst ariaDescribedByAttr = 'aria-describedby';\nconst tooltipId = generateUid('tooltip');\n\nlet tooltipVNode;\n\n// Reusable Tooltip component instance.\nlet tooltip;\n// Global visibility state to prevent tooltips from showing after it being instructed to hide\nlet open = false;\n\nconst tooltipProps = reactive({\n    targetElement: null,\n    content: 'START_MESSAGE',\n    id: tooltipId,\n    position: undefined,\n    isShown: false,\n});\n\n/**\n * Creates a new Tooltip component instance and inserts it into DOM.\n * @param {HTMLElement} el the target element for the Tooltip\n * @internal\n */\nconst createTooltip = (el: HTMLElement) => {\n    // Only set tabindex on elements that are not natively focusable, don't already\n    // have one, and don't contain a focusable descendant. Wrapper elements (e.g. a\n    // menu div around a button) should not become tabbable themselves -- the child\n    // button already provides keyboard access.\n    const focusableChildren = getFocusableIn(el).filter(item => item.node !== el);\n    if (el.tabIndex < 0 && focusableChildren.length === 0) {\n        el.setAttribute('tabindex', '0');\n    }\n\n    if (isVue2) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore: Type error for Vue method in Vue 3 but this code only executes in vue 2 so ignoring.\n        const TooltipComponent = Vue2.extend(Tooltip);\n        tooltip = new TooltipComponent({ propsData: { targetElement: el, content: '', id: tooltipId } }).$mount();\n        document.body.appendChild(tooltip.$el);\n    } else {\n        tooltipProps.targetElement = el;\n        tooltip = createApp({\n            components: { Tooltip },\n            setup() {\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore: Type error for h method in Vue 2 but this code only executes in vue 3 so ignoring.\n                return () => h(Tooltip, { ...tooltipProps }, '');\n            },\n        });\n        tooltipVNode = document.createElement('div');\n        tooltipVNode.id = 'tooltip-parent';\n        document.body.appendChild(tooltipVNode);\n        tooltip.mount('#tooltip-parent');\n    }\n};\n\n/**\n * Removes Tooltip component instance from the DOM and destroys it.\n * @internal\n */\nconst destroyTooltip = () => {\n    if (isVue2) {\n        if (document.contains(tooltip.$el)) {\n            document.body.removeChild(tooltip.$el);\n        }\n        tooltip.$destroy();\n    } else {\n        tooltip.unmount();\n        if (document.contains(tooltipVNode)) {\n            document.body.removeChild(tooltipVNode);\n        }\n    }\n\n    tooltip = undefined;\n};\n\n/**\n * Returns tooltip position based on the specified argument.\n * By default returns 'top' if no argument is specified.\n * @param {BentoTooltipDirectiveBinding} binding Directive binding object.\n * @returns {string} Tooltip position.\n * @internal\n */\nconst getTooltipPosition = (binding: BentoTooltipDirectiveBinding): BentoTooltipPosition =>\n    Object.values(BentoTooltipPosition).includes(binding.arg as BentoTooltipPosition)\n        ? (binding.arg as BentoTooltipPosition)\n        : BentoTooltipPosition.TOP;\n\n/**\n * Get the correct Tooltip instance for the given target element\n * @param {HTMLElement} el the target element for the Tooltip\n * @returns\n */\nconst getTooltipInstanceForTarget = (el: HTMLElement): TooltipInstance =>\n    tooltipInstances.find(\n        ctx =>\n            // isEqualNode doesn't work correct for svg element, hence the second check here\n            ctx.target.isEqualNode(el) && ctx.target === el\n    );\n\n/**\n * On mouse enter event updates tooltip with correct content and position, and shows tooltip.\n * @param {?HTMLElement} el - Target element\n * @internal\n */\nconst showTooltip = (el?: HTMLElement) => {\n    const tooltipInstance = getTooltipInstanceForTarget(el);\n\n    // If tooltip content is empty – do not show the tooltip\n    if (!tooltipInstance || !tooltipInstance.content || !el || !tooltip) {\n        return;\n    }\n\n    if (el) {\n        el.setAttribute(ariaDescribedByAttr, tooltipId);\n    }\n\n    // If the Tooltip is inside a dialog, move tooltip element inside of it\n    // It gets restored to <body> when it gets hidden\n    let isDialogOpen = false;\n    document.querySelectorAll('dialog').forEach(node => {\n        isDialogOpen = node?.open || isDialogOpen;\n    });\n\n    if (isDialogOpen) {\n        if (isVue2) {\n            el.after(tooltip.$el);\n            // eslint-disable-next-line no-underscore-dangle\n        } else if (tooltip?._instance?.vnode?.el) {\n            // eslint-disable-next-line no-underscore-dangle\n            el.after(tooltip?._instance?.vnode?.el);\n        }\n        isDialogOpen = false;\n    }\n\n    open = true;\n\n    tooltip.content = tooltipInstance.content;\n    tooltip.position = tooltipInstance.position;\n\n    tooltipProps.content = tooltipInstance.content;\n    tooltipProps.position = tooltipInstance.position;\n\n    // Do calculations on a next tick, otherwise tooltip position calculations will be wrong\n    nextTick(() => {\n        // Do not open tooltip if it has been instructed to hide in process\n        if (!open || !tooltip) {\n            return;\n        }\n        tooltip.targetElement = el;\n        tooltip.isShown = true;\n\n        tooltipProps.targetElement = el;\n        tooltipProps.isShown = true;\n    });\n};\n\n/**\n * On mouse leave event hides the tooltip.\n * @internal\n */\nconst hideTooltip = (el?: HTMLElement) => {\n    // Restore the tooltip element to body if it got move out of <body>\n    if (tooltip?.$el?.parentElement?.tagName && tooltip.$el.parentElement.tagName !== 'BODY') {\n        document.body.appendChild(tooltip.$el);\n    }\n\n    open = false;\n    if (tooltip) {\n        tooltip.isShown = false;\n    }\n    tooltipProps.isShown = false;\n    if (el) {\n        el.removeAttribute(ariaDescribedByAttr);\n    }\n};\n\nconst tooltipBind = (el: HTMLElement, binding: BentoTooltipDirectiveBinding) => {\n    // eslint-disable-next-line no-prototype-builtins\n    if (!binding.hasOwnProperty('value') || binding.value) {\n        // Create Tooltip component singleton instance\n        if (tooltipInstances.length === 0) {\n            createTooltip(el);\n        }\n\n        const show = () => showTooltip(el);\n        const hide = () => hideTooltip(el);\n\n        // Create and store context object, which has directive related handlers and content.\n        const tooltipInstance: TooltipInstance = {\n            target: el,\n            content: binding.value,\n            position: getTooltipPosition(binding),\n            removeListeners: [\n                listen(el, 'mouseenter', show),\n                listen(el, 'mouseleave', hide),\n                listen(el, 'focus', () => {\n                    if (el.matches(':focus-visible')) {\n                        show();\n                    }\n                }),\n                listen(el, 'blur', evt => {\n                    const focusEvent = <FocusEvent>evt;\n\n                    // when blurred and it transitions to the tooltip via screenreader, it should not close\n                    if ((focusEvent.relatedTarget as Element)?.getAttribute('role') !== 'tooltip') {\n                        hide();\n                    }\n                }),\n                listen(el, 'keydown', evt => {\n                    const keyboardEvent = <KeyboardEvent>evt;\n                    if (keyboardEvent.key === EventKey.ESCAPE) {\n                        hide();\n                    }\n                }),\n            ],\n        };\n\n        tooltipInstances.push(tooltipInstance);\n    }\n};\n\nconst tooltipUpdate = (el: HTMLElement, binding: BentoTooltipDirectiveBinding) => {\n    const tooltipInstance = getTooltipInstanceForTarget(el);\n    if (tooltipInstance) {\n        // Update tooltip content value if it is changed\n        if (tooltipInstance?.content !== binding.value) {\n            tooltipInstance.content = binding.value;\n            // If tooltip is currently shown for current element – update tooltip's content value\n            if (tooltip.isShown && tooltip.targetElement.isEqualNode(el)) {\n                if (!tooltipInstance.content) {\n                    tooltip.isShown = false;\n                } else {\n                    tooltip.content = binding.value;\n                }\n\n                // This forces the tooltip to refresh and update content in Vue3\n                if (isVue3) {\n                    hideTooltip(el);\n                    showTooltip(el);\n                }\n            }\n        }\n        // Update tooltip position if it is changed\n        if (tooltipInstance.position !== binding.arg) {\n            const position = getTooltipPosition(binding);\n            tooltipInstance.position = position;\n            tooltip.position = position;\n        }\n    } else if (!tooltipInstance && binding.value) {\n        // If I don't have a tooltip instance yet but the value passed was updated\n        tooltipBind(el, binding);\n    }\n};\n\nconst tooltipUnbind = (el: HTMLElement) => {\n    const context = getTooltipInstanceForTarget(el);\n\n    // Prevent unbinding/removing when there's nothing to unbind, leads to stack overflow errors\n    if (!context) {\n        return;\n    }\n\n    context.removeListeners.forEach(removeListener => {\n        removeListener();\n    });\n\n    // If el is removed while tooltip is displayed, the tooltip doesnt hide as\n    // there is no el to trigger mouseleave/blur.\n    hideTooltip();\n\n    tooltipInstances.splice(tooltipInstances.indexOf(context), 1);\n\n    // If all the elements using the directive are removed, then no point having\n    // the component on the page.\n    if (tooltipInstances.length === 0) {\n        destroyTooltip();\n    }\n};\n\n/**\n * This directive allows you to bind a tooltip to an element.\n * Tooltip can be configured to be shown in one of four positions: 'top', 'left', 'right' and 'bottom'.\n *\n * @example\n * import { BentoTooltipDirective as BentoTooltip, BentoTooltipPosition } from '@adyen/bento-vue2';\n *\n * export default {\n *     directives: { BentoTooltip },\n *     methods: {\n *         contentExpression() {\n *             return 'tooltip content';\n *         },\n *     },\n *     template: `<div>\n *         <div v-bento-tooltip:left=\"refToTooltipContent\"></div>\n *         <div v-bento-tooltip:[TooltipPosition.BOTTOM]=\"refToTooltipContent\"></div>\n *\n *         <!-- If you don't specify the position then by default it's `TooltipPosition.TOP` -->\n *         <div v-bento-tooltip=\"refToTooltipContent\"></div>\n *\n *         <!-- Tooltip content can also be a data property or a method or a computed property as well -->\n *         <div v-bento-tooltip=\"contentExpression()\"></div>\n *     </div>`,\n * };\n */\nexport const BentoTooltipDirective = {\n    // Vue 2 Directive hooks\n    bind(el, binding) {\n        tooltipBind(el, binding);\n    },\n    update(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    unbind(el) {\n        tooltipUnbind(el);\n    },\n    // Vue 3 Directive hooks\n    beforeMount(el, binding) {\n        tooltipBind(el, binding);\n    },\n    mounted(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    updated(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    unmounted(el) {\n        tooltipUnbind(el);\n    },\n};\n"],"names":["BentoTooltipPosition$1","PopperContainerPositionBasic","BentoTooltipState$1","BentoTooltipState2","EventKey","EventKey2","BentoTooltipPosition","BentoTooltipState","__default__","conditionalClasses","computed","props","tooltipInstances","ariaDescribedByAttr","tooltipId","generateUid","tooltip","open","tooltipProps","reactive","createTooltip","el","focusableChildren","getFocusableIn","item","TooltipComponent","Vue2","Tooltip","destroyTooltip","getTooltipPosition","binding","getTooltipInstanceForTarget","ctx","showTooltip","tooltipInstance","isDialogOpen","node","nextTick","hideTooltip","tooltipBind","show","hide","listen","evt","tooltipUpdate","position","tooltipUnbind","context","removeListener","BentoTooltipDirective"],"mappings":"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"}

package/dist/chunks/truncate.DmCXQmeb.js

@@ -0,0 +1,8 @@
+const o = (e, n) => {
+  const t = e?.toString();
+  return t?.length > n ? `${t?.slice(0, n)}...` : t;
+};
+export {
+  o as t
+};
+//# sourceMappingURL=truncate.DmCXQmeb.js.map

package/dist/chunks/{truncate.BfIl_-71.js.map → truncate.DmCXQmeb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"truncate.BfIl_-71.js","sources":["../../src/utils/ts/truncate.ts"],"sourcesContent":["/**\n * Trunctes a string if it goes over a certain character limit.\n * @param aString the string or number to truncate.\n * @param characterLimit the character limit to start truncating at.\n * @returns a string that is truncated if it's length is over the limit.\n */\nexport const truncate = (aStringOrNumber: string | number, characterLimit: number) => {\n    const aString = aStringOrNumber?.toString();\n    return aString?.length > characterLimit ? `${aString?.slice(0, characterLimit)}...` : aString;\n};\n"],"names":["truncate","aStringOrNumber","characterLimit","aString"],"mappings":"AAMO,MAAMA,IAAW,CAACC,GAAkCC,MAA2B;AAClF,QAAMC,IAAUF,KAAA,gBAAAA,EAAiB;AACjC,UAAOE,KAAA,gBAAAA,EAAS,UAASD,IAAiB,GAAGC,KAAA,gBAAAA,EAAS,MAAM,GAAGD,EAAe,QAAQC;AAC1F;"}
+{"version":3,"file":"truncate.DmCXQmeb.js","sources":["../../src/utils/ts/truncate.ts"],"sourcesContent":["/**\n * Trunctes a string if it goes over a certain character limit.\n * @param aString the string or number to truncate.\n * @param characterLimit the character limit to start truncating at.\n * @returns a string that is truncated if it's length is over the limit.\n */\nexport const truncate = (aStringOrNumber: string | number, characterLimit: number) => {\n    const aString = aStringOrNumber?.toString();\n    return aString?.length > characterLimit ? `${aString?.slice(0, characterLimit)}...` : aString;\n};\n"],"names":["truncate","aStringOrNumber","characterLimit","aString"],"mappings":"AAMO,MAAMA,IAAW,CAACC,GAAkCC,MAA2B;AAClF,QAAMC,IAAUF,GAAiB,SAAA;AACjC,SAAOE,GAAS,SAASD,IAAiB,GAAGC,GAAS,MAAM,GAAGD,CAAc,CAAC,QAAQC;AAC1F;"}