@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/toast.js

@@ -1,19 +1,19 @@
-import { defineComponent as p, ref as u, computed as c, onMounted as b, watch as T } from "vue";
+import { defineComponent as d, ref as u, computed as c, onMounted as g, watch as T } from "vue";
 import { u as y } from "./chunks/toastController.0e01443d.js";
-import { C as B, I as C } from "./chunks/info-filled.48f3268f.js";
-import { B as k, a as S } from "./chunks/button.d0c9527d.js";
-import { B as x, a as w, b as I } from "./chunks/index.56858f4e.js";
-import { u as $ } from "./chunks/use-has-slot.068222e6.js";
+import { C, I as k } from "./chunks/info-filled.48f3268f.js";
+import { a as x } from "./chunks/button.fb307df3.js";
+import { B as S } from "./chunks/index.45295dd3.js";
+import { u as w } from "./chunks/use-has-slot.6052d56a.js";
 import { n as f } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index36.css";
-const H = {
+import "./assets/index39.css";
+const $ = {
   "en-US": {
     dismiss: "Dismiss"
   }
-}, R = p({
-  i18n: { messages: H },
+}, B = d({
+  i18n: { messages: $ },
   name: "toast-item",
-  components: { BentoButton: k, BentoTypography: x, CrossIcon: B, InfoIcon: C },
+  components: { BentoButton: x, BentoTypography: S, CrossIcon: C, InfoIcon: k },
   props: {
     text: {
       type: String,
@@ -26,70 +26,66 @@ const H = {
   },
   emits: ["click", "dismiss"],
   setup(a, { slots: t, emit: s }) {
-    const o = () => s("dismiss"), e = () => {
+    const e = () => s("dismiss"), o = () => {
       a.action.handler(), s("dismiss");
     };
     return {
-      // Enums
-      BentoButtonVariant: S,
-      BentoTypographyElement: w,
-      BentoTypographyVariant: I,
       // Methods
-      dismissButtonClicked: o,
-      hasSlot: $(t),
-      onActionClicked: e
+      dismissButtonClicked: e,
+      hasSlot: w(t),
+      onActionClicked: o
     };
   }
 });
-var A = function() {
+var I = function() {
   var t = this, s = t._self._c;
-  return t._self._setupProxy, s("div", { staticClass: "b-toast-item", attrs: { "data-testid": "toast-item" } }, [s("div", { staticClass: "b-toast-item__container" }, [s("info-icon", { staticClass: "b-toast-item__left-icon b-toast-item__info-icon", attrs: { name: "info", "aria-hidden": "true" } }), s("output", { attrs: { role: "status" } }, [s("bento-typography", { attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY, strongest: "" } }, [t._v(" " + t._s(t.text) + " ")])], 1)], 1), s("div", { staticClass: "b-toast-item__container" }, [t.action ? s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.onActionClicked } }, [t._v(" " + t._s(t.action.text) + " ")]) : t._e(), s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: t.BentoButtonVariant.TERTIARY }, on: { click: t.dismissButtonClicked }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+  return t._self._setupProxy, s("div", { staticClass: "b-toast-item", attrs: { "data-testid": "toast-item" } }, [s("div", { staticClass: "b-toast-item__container" }, [s("info-icon", { staticClass: "b-toast-item__left-icon b-toast-item__info-icon", attrs: { name: "info", "aria-hidden": "true" } }), s("output", { attrs: { role: "status" } }, [s("bento-typography", { attrs: { el: "span", variant: "body", strongest: "" } }, [t._v(" " + t._s(t.text) + " ")])], 1)], 1), s("div", { staticClass: "b-toast-item__container" }, [t.action ? s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: "tertiary" }, on: { click: t.onActionClicked } }, [t._v(" " + t._s(t.action.text) + " ")]) : t._e(), s("bento-button", { staticClass: "b-toast-item__right-icon", attrs: { variant: "tertiary" }, on: { click: t.dismissButtonClicked }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
     return [s("cross-icon", { attrs: { "svg-title": t.$t("dismiss") } })];
   }, proxy: !0 }]) })], 1)]);
-}, D = [], E = /* @__PURE__ */ f(
-  R,
-  A,
-  D,
+}, H = [], D = /* @__PURE__ */ f(
+  B,
+  I,
+  H,
   !1,
   null,
-  "16fe1c9d",
+  "2eefbdd1",
   null,
   null
 );
-const O = E.exports, P = 5e3, V = p({
+const O = D.exports, P = 5e3, A = d({
   name: "bento-toast",
   components: { ToastItem: O },
   setup() {
-    const { state: a } = y(), t = u(null), s = u(null), o = c(() => a.queue.slice(-3)), e = () => {
+    const { state: a } = y(), t = u(null), s = u(null), e = c(() => a.queue.slice(-3)), o = () => {
       clearTimeout(t.value);
     }, l = (n) => {
       t.value = setTimeout(() => {
-        e(), n.dismiss();
+        o(), n.dismiss();
       }, P);
     }, _ = () => {
-      e();
-      const n = o.value.slice(-1)[0];
+      o();
+      const n = e.value.slice(-1)[0];
       n && l(n);
     };
-    b(() => {
+    g(() => {
       _();
     }), T(
-      () => o.value,
+      () => e.value,
       () => {
-        o.value.length && (e(), _());
+        e.value.length && (o(), _());
       }
     );
-    const d = c(
-      () => o.value.map((n, i) => {
-        const g = o.value.length - 1;
+    const p = c(
+      () => e.value.map((n, i) => {
+        const b = e.value.length - 1;
         return {
           top: `${10 * i}px`,
-          width: `${100 - 10 * (g - i)}%`
+          width: `${100 - 10 * (b - i)}%`
         };
       })
     ), v = c(() => {
       var r;
-      const n = (r = s.value) == null ? void 0 : r.offsetWidth, i = o.value.length - 1, m = i ? 10 * i : 0;
+      const n = (r = s.value) == null ? void 0 : r.offsetWidth, i = e.value.length - 1, m = i ? 10 * i : 0;
       return {
         bottom: `${n}px`,
         height: `${m}px`
@@ -97,33 +93,33 @@ const O = E.exports, P = 5e3, V = p({
     });
     return {
       // Values,
-      computedPositioning: d,
+      computedPositioning: p,
       computedHeight: v,
-      toastsToShow: o,
+      toastsToShow: e,
       toast: s
     };
   }
 });
 var F = function() {
   var t = this, s = t._self._c;
-  return t._self._setupProxy, t.toastsToShow.length ? s("div", { staticClass: "b-toast", style: t.computedHeight }, [s("transition-group", { staticClass: "b-toast__container", attrs: { name: "b-toast", tag: "ul", "aria-live": "polite", "move-class": "b-toast__container--move", "enter-active-class": "b-toast__container--enter-active", "leave-active-class": "b-toast__container--leave-active", "enter-from-class": "b-toast__container--enter-from", "leave-to-class": "b-toast__container--leave-to" } }, t._l(t.toastsToShow, function(o, e) {
-    return s("li", { key: e, staticClass: "b-toast__item", style: t.computedPositioning[e], attrs: { inert: e !== t.toastsToShow.length - 1 } }, [s("toast-item", { ref: e === t.toastsToShow.length - 1 ? "toast" : null, refInFor: !0, class: e !== t.toastsToShow.length - 1 ? "b-toast--light-background" : null, attrs: { text: o.text, action: o.action }, on: { dismiss: function(l) {
-      return o.dismiss();
+  return t._self._setupProxy, t.toastsToShow.length ? s("div", { staticClass: "b-toast", style: t.computedHeight }, [s("transition-group", { staticClass: "b-toast__container", attrs: { name: "b-toast", tag: "ul", "aria-live": "polite", "move-class": "b-toast__container--move", "enter-active-class": "b-toast__container--enter-active", "leave-active-class": "b-toast__container--leave-active", "enter-from-class": "b-toast__container--enter-from", "leave-to-class": "b-toast__container--leave-to" } }, t._l(t.toastsToShow, function(e, o) {
+    return s("li", { key: o, staticClass: "b-toast__item", style: t.computedPositioning[o], attrs: { inert: o !== t.toastsToShow.length - 1 } }, [s("toast-item", { ref: o === t.toastsToShow.length - 1 ? "toast" : null, refInFor: !0, class: o !== t.toastsToShow.length - 1 ? "b-toast--light-background" : null, attrs: { text: e.text, action: e.action }, on: { dismiss: function(l) {
+      return e.dismiss();
     } } })], 1);
   }), 0)], 1) : t._e();
-}, Y = [], q = /* @__PURE__ */ f(
-  V,
+}, R = [], q = /* @__PURE__ */ f(
+  A,
   F,
-  Y,
+  R,
   !1,
   null,
   "680af2e2",
   null,
   null
 );
-const G = q.exports;
+const W = q.exports;
 export {
-  G as BentoToast,
+  W as BentoToast,
   y as useBentoToastController
 };
 //# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\" data-testid=\"toast-item\">\n        <div class=\"b-toast-item__container\">\n            <info-icon\n                class=\"b-toast-item__left-icon b-toast-item__info-icon\"\n                name=\"info\"\n                aria-hidden=\"true\"\n            ></info-icon>\n            <output role=\"status\">\n                <bento-typography :el=\"BentoTypographyElement.SPAN\" :variant=\"BentoTypographyVariant.BODY\" strongest>\n                    {{ text }}\n                </bento-typography>\n            </output>\n        </div>\n        <div class=\"b-toast-item__container\">\n            <bento-button\n                v-if=\"action\"\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"onActionClicked\"\n            >\n                {{ action.text }}\n            </bento-button>\n            <bento-button\n                class=\"b-toast-item__right-icon\"\n                :variant=\"BentoButtonVariant.TERTIARY\"\n                @click=\"dismissButtonClicked\"\n            >\n                <template #iconLeft>\n                    <cross-icon :svg-title=\"$t('dismiss')\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info-filled';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import messages from './messages.json';\n    import { BentoToastItemAction } from './toast-item.types';\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    /**\n     * @example\n     * Toast item component, for internal use only.\n     *\n     * import { BentoToastItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToastItem },\n     *     template: `\n     *          <bento-toast-item>\n     *              This is a toast message\n     *              <template #primaryAction>Button text</template>\n     *          </bento-toast-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'toast-item',\n        components: { BentoButton, BentoTypography, CrossIcon, InfoIcon },\n        props: {\n            text: {\n                type: String,\n                required: true,\n            },\n            action: {\n                type: Object as PropType<BentoToastItemAction>,\n                default: null,\n            },\n        },\n        emits: ['click', 'dismiss'],\n        setup(props, { slots, emit }) {\n            const dismissButtonClicked = () => emit('dismiss');\n            const onActionClicked = () => {\n                props.action.handler();\n                emit('dismiss');\n            };\n\n            return {\n                // Enums\n                BentoButtonVariant,\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Methods\n                dismissButtonClicked,\n                hasSlot: useHasSlot(slots),\n                onActionClicked,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div v-if=\"toastsToShow.length\" class=\"b-toast\" :style=\"computedHeight\">\n        <transition-group\n            name=\"b-toast\"\n            tag=\"ul\"\n            class=\"b-toast__container\"\n            aria-live=\"polite\"\n            move-class=\"b-toast__container--move\"\n            enter-active-class=\"b-toast__container--enter-active\"\n            leave-active-class=\"b-toast__container--leave-active\"\n            enter-from-class=\"b-toast__container--enter-from\"\n            leave-to-class=\"b-toast__container--leave-to\"\n        >\n            <li\n                v-for=\"(item, index) in toastsToShow\"\n                :key=\"index\"\n                class=\"b-toast__item\"\n                :style=\"computedPositioning[index]\"\n                :inert=\"index !== toastsToShow.length - 1\"\n            >\n                <toast-item\n                    :ref=\"index === toastsToShow.length - 1 ? 'toast' : null\"\n                    :class=\"index !== toastsToShow.length - 1 ? 'b-toast--light-background' : null\"\n                    :text=\"item.text\"\n                    :action=\"item.action\"\n                    @dismiss=\"item.dismiss()\"\n                />\n            </li>\n        </transition-group>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, ref, watch } from 'vue';\n    import { ToastItem } from './components/toast-item';\n    import { useBentoToastController } from '@/utils/ts/toastController';\n\n    const DURATION = 5000;\n\n    /**\n     * @example\n     * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToast },\n     *     template: `\n     *          // in your project root\n     *          <bento-toast />\n     *      setup() {\n     *          bentoToastController = useBentoToastController();\n     *          onTrigger = () => {\n     *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });\n     *      }\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toast',\n        components: { ToastItem },\n        setup() {\n            const { state } = useBentoToastController();\n            const dismissTimer = ref(null);\n            const toast = ref(null);\n            const toastsToShow = computed(() => state.queue.slice(-3));\n\n            const cancelDismissTimer = () => {\n                clearTimeout(dismissTimer.value);\n            };\n\n            const startTimer = toastToDismiss => {\n                dismissTimer.value = setTimeout(() => {\n                    cancelDismissTimer();\n                    toastToDismiss.dismiss();\n                }, DURATION);\n            };\n\n            const startDismissTimer = () => {\n                cancelDismissTimer();\n\n                const toastToDismiss = toastsToShow.value.slice(-1)[0];\n                if (toastToDismiss) {\n                    startTimer(toastToDismiss);\n                }\n            };\n\n            onMounted(() => {\n                startDismissTimer();\n            });\n\n            watch(\n                () => toastsToShow.value,\n                () => {\n                    if (toastsToShow.value.length) {\n                        cancelDismissTimer();\n                        startDismissTimer();\n                    }\n                }\n            );\n\n            const computedPositioning = computed(() =>\n                toastsToShow.value.map((el, index) => {\n                    const diff = 10;\n                    const width = 100;\n                    const min = 10;\n                    const numberOfElements = toastsToShow.value.length - 1;\n                    return {\n                        top: `${diff * index}px`,\n                        width: `${width - min * (numberOfElements - index)}%`,\n                    };\n                })\n            );\n\n            const computedHeight = computed(() => {\n                // Get shown toast element height (last in the queue)\n                const visibleToastHeight = toast.value?.offsetWidth;\n                // Get number of elements excluding the toast currently displayed\n                const numberOfElements = toastsToShow.value.length - 1;\n                // Set height = number of stacked elements\n                const stackedToastHeight = 10;\n                // Set a stack height only if there's elements present\n                const stackHeight = numberOfElements ? stackedToastHeight * numberOfElements : 0;\n                // Set bottom to be padding + height of the visible toast :)\n                return {\n                    bottom: `${visibleToastHeight}px`,\n                    height: `${stackHeight}px`,\n                };\n            });\n\n            return {\n                // Values,\n                computedPositioning,\n                computedHeight,\n                toastsToShow,\n                toast,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["_sfc_main$1","defineComponent","messages","BentoButton","BentoTypography","CrossIcon","InfoIcon","props","slots","emit","dismissButtonClicked","onActionClicked","BentoButtonVariant","BentoTypographyElement","BentoTypographyVariant","useHasSlot","DURATION","_sfc_main","ToastItem","state","useBentoToastController","dismissTimer","ref","toast","toastsToShow","computed","cancelDismissTimer","startTimer","toastToDismiss","startDismissTimer","onMounted","watch","computedPositioning","el","index","numberOfElements","computedHeight","visibleToastHeight","_a","stackHeight"],"mappings":";;;;;;;;;;;;GA8DAA,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,GAAA,WAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAA,MAAAD,EAAA,SAAA,GACAE,IAAA,MAAA;AACA,MAAAJ,EAAA,OAAA,QAAA,GACAE,EAAA,SAAA;AAAA,IAAA;AAGA,WAAA;AAAA;AAAA,MAAA,oBAAAG;AAAA,MAEA,wBAAAC;AAAA,MACA,wBAAAC;AAAA;AAAA,MACA,sBAAAJ;AAAA,MAGA,SAAAK,EAAAP,CAAA;AAAA,MACA,iBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBC3DAK,IAAA,KAmBAC,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,WAAAiB,EAAA;AAAA,EACA,QAAA;AAEA,UAAA,EAAA,OAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,MAAAN,EAAA,MAAA,MAAA,EAAA,CAAA,GAEAO,IAAA,MAAA;AACA,mBAAAL,EAAA,KAAA;AAAA,IAAA,GAGAM,IAAA,CAAAC,MAAA;AACA,MAAAP,EAAA,QAAA,WAAA,MAAA;AACA,QAAAK,EAAA,GACAE,EAAA,QAAA;AAAA,MAAA,GAAAZ,CAAA;AAAA,IACA,GAGAa,IAAA,MAAA;AACA,MAAAH,EAAA;AAEA,YAAAE,IAAAJ,EAAA,MAAA,MAAA,EAAA,EAAA,CAAA;AACA,MAAAI,KACAD,EAAAC,CAAA;AAAA,IACA;AAGA,IAAAE,EAAA,MAAA;AACA,MAAAD,EAAA;AAAA,IAAA,CAAA,GAGAE;AAAA,MAAA,MAAAP,EAAA;AAAA,MACA,MAAA;AAEA,QAAAA,EAAA,MAAA,WACAE,EAAA,GACAG,EAAA;AAAA,MACA;AAAA,IACA;AAGA,UAAAG,IAAAP;AAAA,MAAA,MAAAD,EAAA,MAAA,IAAA,CAAAS,GAAAC,MAAA;AAKA,cAAAC,IAAAX,EAAA,MAAA,SAAA;AACA,eAAA;AAAA,UAAA,KAAA,GAAA,KAAAU;AAAA,UACA,OAAA,GAAA,MAAA,MAAAC,IAAAD;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA,GAGAE,IAAAX,EAAA,MAAA;;AAEA,YAAAY,KAAAC,IAAAf,EAAA,UAAA,gBAAAe,EAAA,aAEAH,IAAAX,EAAA,MAAA,SAAA,GAIAe,IAAAJ,IAFA,KAEAA,IAAA;AAEA,aAAA;AAAA,QAAA,QAAA,GAAAE;AAAA,QACA,QAAA,GAAAE;AAAA,MACA;AAAA,IACA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,qBAAAP;AAAA,MAEA,gBAAAI;AAAA,MACA,cAAAZ;AAAA,MACA,OAAAD;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\" data-testid=\"toast-item\">\n        <div class=\"b-toast-item__container\">\n            <info-icon\n                class=\"b-toast-item__left-icon b-toast-item__info-icon\"\n                name=\"info\"\n                aria-hidden=\"true\"\n            ></info-icon>\n            <output role=\"status\">\n                <bento-typography el=\"span\" variant=\"body\" strongest>\n                    {{ text }}\n                </bento-typography>\n            </output>\n        </div>\n        <div class=\"b-toast-item__container\">\n            <bento-button v-if=\"action\" class=\"b-toast-item__right-icon\" variant=\"tertiary\" @click=\"onActionClicked\">\n                {{ action.text }}\n            </bento-button>\n            <bento-button class=\"b-toast-item__right-icon\" variant=\"tertiary\" @click=\"dismissButtonClicked\">\n                <template #iconLeft>\n                    <cross-icon :svg-title=\"$t('dismiss')\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, PropType } from 'vue';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info-filled';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import messages from './messages.json';\n    import { BentoToastItemAction } from './toast-item.types';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    /**\n     * @example\n     * Toast item component, for internal use only.\n     *\n     * import { BentoToastItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToastItem },\n     *     template: `\n     *          <bento-toast-item>\n     *              This is a toast message\n     *              <template #primaryAction>Button text</template>\n     *          </bento-toast-item>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'toast-item',\n        components: { BentoButton, BentoTypography, CrossIcon, InfoIcon },\n        props: {\n            text: {\n                type: String,\n                required: true,\n            },\n            action: {\n                type: Object as PropType<BentoToastItemAction>,\n                default: null,\n            },\n        },\n        emits: ['click', 'dismiss'],\n        setup(props, { slots, emit }) {\n            const dismissButtonClicked = () => emit('dismiss');\n            const onActionClicked = () => {\n                props.action.handler();\n                emit('dismiss');\n            };\n\n            return {\n                // Methods\n                dismissButtonClicked,\n                hasSlot: useHasSlot(slots),\n                onActionClicked,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div v-if=\"toastsToShow.length\" class=\"b-toast\" :style=\"computedHeight\">\n        <transition-group\n            name=\"b-toast\"\n            tag=\"ul\"\n            class=\"b-toast__container\"\n            aria-live=\"polite\"\n            move-class=\"b-toast__container--move\"\n            enter-active-class=\"b-toast__container--enter-active\"\n            leave-active-class=\"b-toast__container--leave-active\"\n            enter-from-class=\"b-toast__container--enter-from\"\n            leave-to-class=\"b-toast__container--leave-to\"\n        >\n            <li\n                v-for=\"(item, index) in toastsToShow\"\n                :key=\"index\"\n                class=\"b-toast__item\"\n                :style=\"computedPositioning[index]\"\n                :inert=\"index !== toastsToShow.length - 1\"\n            >\n                <toast-item\n                    :ref=\"index === toastsToShow.length - 1 ? 'toast' : null\"\n                    :class=\"index !== toastsToShow.length - 1 ? 'b-toast--light-background' : null\"\n                    :text=\"item.text\"\n                    :action=\"item.action\"\n                    @dismiss=\"item.dismiss()\"\n                />\n            </li>\n        </transition-group>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, ref, watch } from 'vue';\n    import { ToastItem } from './components/toast-item';\n    import { useBentoToastController } from '@/utils/ts/toastController';\n\n    const DURATION = 5000;\n\n    /**\n     * @example\n     * import { BentoToast, useBentoToastController } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoToast },\n     *     template: `\n     *          // in your project root\n     *          <bento-toast />\n     *      setup() {\n     *          bentoToastController = useBentoToastController();\n     *          onTrigger = () => {\n     *              bentoToastController.addToast({ text: 'Your toast text', action: { text: 'Button text', handler: () => { your code here } });\n     *      }\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toast',\n        components: { ToastItem },\n        setup() {\n            const { state } = useBentoToastController();\n            const dismissTimer = ref(null);\n            const toast = ref(null);\n            const toastsToShow = computed(() => state.queue.slice(-3));\n\n            const cancelDismissTimer = () => {\n                clearTimeout(dismissTimer.value);\n            };\n\n            const startTimer = toastToDismiss => {\n                dismissTimer.value = setTimeout(() => {\n                    cancelDismissTimer();\n                    toastToDismiss.dismiss();\n                }, DURATION);\n            };\n\n            const startDismissTimer = () => {\n                cancelDismissTimer();\n\n                const toastToDismiss = toastsToShow.value.slice(-1)[0];\n                if (toastToDismiss) {\n                    startTimer(toastToDismiss);\n                }\n            };\n\n            onMounted(() => {\n                startDismissTimer();\n            });\n\n            watch(\n                () => toastsToShow.value,\n                () => {\n                    if (toastsToShow.value.length) {\n                        cancelDismissTimer();\n                        startDismissTimer();\n                    }\n                }\n            );\n\n            const computedPositioning = computed(() =>\n                toastsToShow.value.map((el, index) => {\n                    const diff = 10;\n                    const width = 100;\n                    const min = 10;\n                    const numberOfElements = toastsToShow.value.length - 1;\n                    return {\n                        top: `${diff * index}px`,\n                        width: `${width - min * (numberOfElements - index)}%`,\n                    };\n                })\n            );\n\n            const computedHeight = computed(() => {\n                // Get shown toast element height (last in the queue)\n                const visibleToastHeight = toast.value?.offsetWidth;\n                // Get number of elements excluding the toast currently displayed\n                const numberOfElements = toastsToShow.value.length - 1;\n                // Set height = number of stacked elements\n                const stackedToastHeight = 10;\n                // Set a stack height only if there's elements present\n                const stackHeight = numberOfElements ? stackedToastHeight * numberOfElements : 0;\n                // Set bottom to be padding + height of the visible toast :)\n                return {\n                    bottom: `${visibleToastHeight}px`,\n                    height: `${stackHeight}px`,\n                };\n            });\n\n            return {\n                // Values,\n                computedPositioning,\n                computedHeight,\n                toastsToShow,\n                toast,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["_sfc_main$1","defineComponent","messages","BentoButton","BentoTypography","CrossIcon","InfoIcon","props","slots","emit","dismissButtonClicked","onActionClicked","useHasSlot","DURATION","_sfc_main","ToastItem","state","useBentoToastController","dismissTimer","ref","toast","toastsToShow","computed","cancelDismissTimer","startTimer","toastToDismiss","startDismissTimer","onMounted","watch","computedPositioning","el","index","numberOfElements","computedHeight","visibleToastHeight","_a","stackHeight"],"mappings":";;;;;;;;;;;;GAqDAA,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,GAAA,WAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,SAAA,SAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAA,MAAAD,EAAA,SAAA,GACAE,IAAA,MAAA;AACA,MAAAJ,EAAA,OAAA,QAAA,GACAE,EAAA,SAAA;AAAA,IAAA;AAGA,WAAA;AAAA;AAAA,MAAA,sBAAAC;AAAA,MAEA,SAAAE,EAAAJ,CAAA;AAAA,MACA,iBAAAG;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;qBC7CAE,IAAA,KAmBAC,IAAAb,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,WAAAc,EAAA;AAAA,EACA,QAAA;AAEA,UAAA,EAAA,OAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAC,EAAA,MAAAN,EAAA,MAAA,MAAA,EAAA,CAAA,GAEAO,IAAA,MAAA;AACA,mBAAAL,EAAA,KAAA;AAAA,IAAA,GAGAM,IAAA,CAAAC,MAAA;AACA,MAAAP,EAAA,QAAA,WAAA,MAAA;AACA,QAAAK,EAAA,GACAE,EAAA,QAAA;AAAA,MAAA,GAAAZ,CAAA;AAAA,IACA,GAGAa,IAAA,MAAA;AACA,MAAAH,EAAA;AAEA,YAAAE,IAAAJ,EAAA,MAAA,MAAA,EAAA,EAAA,CAAA;AACA,MAAAI,KACAD,EAAAC,CAAA;AAAA,IACA;AAGA,IAAAE,EAAA,MAAA;AACA,MAAAD,EAAA;AAAA,IAAA,CAAA,GAGAE;AAAA,MAAA,MAAAP,EAAA;AAAA,MACA,MAAA;AAEA,QAAAA,EAAA,MAAA,WACAE,EAAA,GACAG,EAAA;AAAA,MACA;AAAA,IACA;AAGA,UAAAG,IAAAP;AAAA,MAAA,MAAAD,EAAA,MAAA,IAAA,CAAAS,GAAAC,MAAA;AAKA,cAAAC,IAAAX,EAAA,MAAA,SAAA;AACA,eAAA;AAAA,UAAA,KAAA,GAAA,KAAAU;AAAA,UACA,OAAA,GAAA,MAAA,MAAAC,IAAAD;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA,GAGAE,IAAAX,EAAA,MAAA;;AAEA,YAAAY,KAAAC,IAAAf,EAAA,UAAA,gBAAAe,EAAA,aAEAH,IAAAX,EAAA,MAAA,SAAA,GAIAe,IAAAJ,IAFA,KAEAA,IAAA;AAEA,aAAA;AAAA,QAAA,QAAA,GAAAE;AAAA,QACA,QAAA,GAAAE;AAAA,MACA;AAAA,IACA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,qBAAAP;AAAA,MAEA,gBAAAI;AAAA,MACA,cAAAZ;AAAA,MACA,OAAAD;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/toggle.js

@@ -1,18 +1,21 @@
-import { defineComponent as h, toRefs as v, ref as B, computed as u, watch as S } from "vue";
-import { C } from "./chunks/checkmark-small.5ca15f00.js";
-import { B as I, a as k, b as A } from "./chunks/index.56858f4e.js";
+import { defineComponent as I, ref as p, computed as u, toRefs as k, watch as A } from "vue";
+import { C as B } from "./chunks/checkmark-small.5ca15f00.js";
+import { B as L } from "./chunks/index.45295dd3.js";
 import { g as E } from "./chunks/unique-id.a2a2b458.js";
-import { u as T } from "./chunks/aria-label.ac9651a5.js";
-import { u as V } from "./chunks/use-has-slot.068222e6.js";
-import { u as F } from "./chunks/use-default-slot-validator.83d977a1.js";
-import { g as L } from "./chunks/get-slot-text.e5c766d0.js";
-import { n as R } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index41.css";
-var g = /* @__PURE__ */ ((t) => (t.LABEL_FIRST = "label-first", t))(g || {}), d = /* @__PURE__ */ ((t) => (t.BEFORE = "before", t.AFTER = "after", t))(d || {});
-const x = h({
+import { u as F } from "./chunks/use-has-slot.6052d56a.js";
+import { u as R } from "./chunks/use-default-slot-validator.cbdfe693.js";
+import { g } from "./chunks/get-slot-text.c1114034.js";
+import { u as x } from "./chunks/aria-label.ac9651a5.js";
+import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index40.css";
+var f = /* @__PURE__ */ ((t) => (t.LABEL_FIRST = "label-first", t))(f || {}), d = /* @__PURE__ */ ((t) => (t.BEFORE = "before", t.AFTER = "after", t))(d || {});
+const D = I({
   name: "bento-toggle",
-  components: { BentoTypography: I, CheckmarkSmall: C },
+  components: { BentoTypography: L, CheckmarkSmall: B },
   props: {
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label
      */
@@ -52,70 +55,69 @@ const x = h({
     }
   },
   emits: ["input"],
-  setup(t, { slots: e, emit: a }) {
-    const n = V(e), { ariaLabel: l } = v(t), r = B(t.value), c = E("toggle-description"), s = n("default"), o = n("description");
-    F("bento-toggle", s, o);
-    const p = u(() => e.default ? L(e)("default") : null), _ = T({
-      ariaLabel: l,
-      label: p,
-      defaultFallback: "toggle"
-    }), f = u(() => c ?? null), m = u(() => ({
-      [`b-toggle--${g.LABEL_FIRST}`]: t.labelPosition === d.BEFORE,
+  setup(t, { attrs: e, slots: a, emit: n }) {
+    const l = F(a), s = p(t.value), i = E("toggle-description"), c = g(a)("default"), o = g(a)("description");
+    R("bento-toggle", a.default, a.description);
+    const _ = u(() => l("default") ? g(a)("default") : null), b = p(e["aria-label"]), { ariaLabel: m } = k(t), y = x({
+      ariaLabel: b.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: m,
+      defaultFallback: _
+    }), h = u(() => i ?? null), v = u(() => ({
+      [`b-toggle--${f.LABEL_FIRST}`]: t.labelPosition === d.BEFORE,
       "b-toggle--disabled": t.disabled,
       "b-toggle--readonly": t.readonly
-    })), b = (i) => {
-      a("input", i.target.checked);
-    }, y = (i) => {
-      t.readonly && i.preventDefault();
+    })), C = (r) => {
+      n("input", r.target.checked);
+    }, S = (r) => {
+      t.readonly && r.preventDefault();
     };
-    return S(
+    return A(
       () => t.value,
-      (i) => {
-        r.value = i;
+      (r) => {
+        s.value = r;
       }
     ), {
       // Refs
-      toggleInput: r,
-      // Types
-      BentoTypographyElement: k,
-      BentoTypographyVariant: A,
+      toggleInput: s,
       // Values
-      computedAriaLabel: _,
-      computedDescription: f,
-      defaultSlotValue: s,
+      computedAriaLabel: y,
+      computedDescription: h,
+      defaultSlotValue: c,
       descriptionSlotValue: o,
-      conditionalClasses: m,
-      descriptionId: c,
-      // Events
-      onChange: b,
-      onClick: y
+      conditionalClasses: v,
+      descriptionId: i,
+      // Method
+      hasSlot: l,
+      onChange: C,
+      onClick: S
     };
   }
 });
-var D = function() {
+var O = function() {
   var e = this, a = e._self._c;
   return e._self._setupProxy, a("label", { staticClass: "b-toggle", class: e.conditionalClasses, attrs: { "data-testid": "label" } }, [a("input", { directives: [{ name: "model", rawName: "v-model", value: e.toggleInput, expression: "toggleInput" }], staticClass: "b-toggle__input", attrs: { "aria-label": e.computedAriaLabel, "aria-describedby": e.computedDescription, disabled: e.disabled, "aria-readonly": e.readonly, role: "switch", type: "checkbox" }, domProps: { checked: Array.isArray(e.toggleInput) ? e._i(e.toggleInput, null) > -1 : e.toggleInput }, on: { change: [function(n) {
-    var l = e.toggleInput, r = n.target, c = !!r.checked;
+    var l = e.toggleInput, s = n.target, i = !!s.checked;
     if (Array.isArray(l)) {
-      var s = null, o = e._i(l, s);
-      r.checked ? o < 0 && (e.toggleInput = l.concat([s])) : o > -1 && (e.toggleInput = l.slice(0, o).concat(l.slice(o + 1)));
+      var c = null, o = e._i(l, c);
+      s.checked ? o < 0 && (e.toggleInput = l.concat([c])) : o > -1 && (e.toggleInput = l.slice(0, o).concat(l.slice(o + 1)));
     } else
-      e.toggleInput = c;
-  }, (n) => e.onChange(n)], click: e.onClick } }), a("span", { staticClass: "b-toggle__track", attrs: { "aria-hidden": "true" } }, [a("span", { staticClass: "b-toggle__handle" }, [e.toggleInput ? a("checkmark-small") : e._e()], 1)]), e.defaultSlotValue ? a("span", { staticClass: "b-toggle__label-container" }, [e.defaultSlotValue ? a("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY, "data-testid": "inner-label" } }, [e._t("default")], 2) : e._e(), e.defaultSlotValue && e.descriptionSlotValue ? a("bento-typography", { staticClass: "b-toggle__description", attrs: { id: e.descriptionId, el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
-}, O = [], P = /* @__PURE__ */ R(
-  x,
+      e.toggleInput = i;
+  }, (n) => e.onChange(n)], click: e.onClick } }), a("span", { staticClass: "b-toggle__track", attrs: { "aria-hidden": "true" } }, [a("span", { staticClass: "b-toggle__handle" }, [e.toggleInput ? a("checkmark-small") : e._e()], 1)]), e.hasSlot("default") ? a("span", { staticClass: "b-toggle__label-container" }, [e.hasSlot("default") ? a("bento-typography", { attrs: { el: "span", variant: "body", "data-testid": "inner-label" } }, [e._t("default")], 2) : e._e(), e.hasSlot("default") && e.hasSlot("description") ? a("bento-typography", { staticClass: "b-toggle__description", attrs: { id: e.descriptionId, el: "span", variant: "body" } }, [e._t("description")], 2) : e._e()], 1) : e._e()]);
+}, w = [], P = /* @__PURE__ */ T(
   D,
   O,
+  w,
   !1,
   null,
-  "b9852aa1",
+  "dd0561f5",
   null,
   null
 );
-const J = P.exports;
+const K = P.exports;
 export {
-  J as BentoToggle,
+  K as BentoToggle,
   d as BentoToggleLabelPosition,
-  g as BentoTogglePropClass
+  f as BentoTogglePropClass
 };
 //# sourceMappingURL=toggle.js.map

package/dist/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../src/components/toggle/toggle.types.ts","../src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\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=\"defaultSlotValue\" class=\"b-toggle__label-container\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                data-testid=\"inner-label\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                :id=\"descriptionId\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, 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, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n\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 defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\n            /**\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        emits: ['input'],\n        setup(props, { slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n            const { ariaLabel } = toRefs(props);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = hasSlot('default');\n            const descriptionSlotValue = hasSlot('description');\n\n            useDefaultSlotValidator('bento-toggle', defaultSlotValue, descriptionSlotValue);\n\n            const labelSlot = computed((): string => (slots.default ? getSlotText(slots)('default') : null));\n\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel,\n                label: labelSlot,\n                defaultFallback: 'toggle',\n            });\n\n            const computedDescription = computed((): string | null => descriptionId ?? null);\n\n            const conditionalClasses = computed((): { [key: string]: boolean } => ({\n                [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]:\n                    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\n            return {\n                // Refs\n                toggleInput,\n\n                // Types\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Events\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","slots","emit","hasSlot","useHasSlot","ariaLabel","toRefs","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","getSlotText","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue","BentoTypographyElement","BentoTypographyVariant"],"mappings":";;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAIAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACkEZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,GAAA,gBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,CAAA,GACA,EAAA,WAAAI,EAAA,IAAAC,EAAAN,CAAA,GAEAO,IAAAC,EAAAR,EAAA,KAAA,GACAS,IAAAC,EAAA,oBAAA,GAEAC,IAAAR,EAAA,SAAA,GACAS,IAAAT,EAAA,aAAA;AAEA,IAAAU,EAAA,gBAAAF,GAAAC,CAAA;AAEA,UAAAE,IAAAC,EAAA,MAAAd,EAAA,UAAAe,EAAAf,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAgB,IAAAC,EAAA;AAAA,MAAA,WAAAb;AAAA,MACA,OAAAS;AAAA,MACA,iBAAA;AAAA,IACA,CAAA,GAGAK,IAAAJ,EAAA,MAAAN,KAAA,IAAA,GAEAW,IAAAL,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAxB,EAAA,aAAA,GAAAS,EAAA,kBAAAP,EAAA;AAAA,MAEA,sBAAAO,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGAqB,IAAA,CAAAC,MAAA;AACA,MAAApB,EAAA,SAAAoB,EAAA,OAAA,OAAA;AAAA,IAAA,GAIAC,IAAA,CAAAD,MAAA;AACA,MAAAtB,EAAA,YACAsB,EAAA,eAAA;AAAA,IACA;AAGA,WAAAE;AAAA,MAAA,MAAAxB,EAAA;AAAA,MACA,CAAAyB,MAAA;AAEA,QAAAlB,EAAA,QAAAkB;AAAA,MAAA;AAAA,IACA,GAGA;AAAA;AAAA,MAAA,aAAAlB;AAAA;AAAA,MAEA,wBAAAmB;AAAA,MAGA,wBAAAC;AAAA;AAAA,MACA,mBAAAV;AAAA,MAGA,qBAAAE;AAAA,MACA,kBAAAR;AAAA,MACA,sBAAAC;AAAA,MACA,oBAAAQ;AAAA,MACA,eAAAX;AAAA;AAAA,MACA,UAAAY;AAAA,MAGA,SAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"toggle.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 for usage with properties since version 2.0. Use the 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 lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, 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 '@/utils/ts/unique-id';\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    /**\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 defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\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        emits: ['input'],\n        setup(props, { attrs, slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n            const labelSlot = computed((): string => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = 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: 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}`]:\n                    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\n            return {\n                // Refs\n                toggleInput,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Method\n                hasSlot,\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","attrs","slots","emit","hasSlot","useHasSlot","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue"],"mappings":";;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;AC0DZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,GAAA,gBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAOA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAL,EAAA;AAAA,MACA,WAAA,CAAAM,MAAA,OAAA,OAAAN,CAAA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAAP,EAAA,KAAA,GACAQ,IAAAC,EAAA,oBAAA,GAEAC,IAAAC,EAAAT,CAAA,EAAA,SAAA,GACAU,IAAAD,EAAAT,CAAA,EAAA,aAAA;AAEA,IAAAW,EAAA,gBAAAX,EAAA,SAAAA,EAAA,WAAA;AAEA,UAAAY,IAAAC,EAAA,MAAAX,EAAA,SAAA,IAAAO,EAAAT,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAc,IAAAT,EAAAN,EAAA,YAAA,CAAA,GACA,EAAA,WAAAgB,EAAA,IAAAC,EAAAlB,CAAA,GACAmB,IAAAC,EAAA;AAAA,MAAA,WAAAJ,EAAA;AAAA;AAAA,MACA,OAAAC;AAAA,MAEA,iBAAAH;AAAA,IACA,CAAA,GAGAO,IAAAN,EAAA,MAAAP,KAAA,IAAA,GAEAc,IAAAP,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAxB,EAAA,aAAA,GAAAS,EAAA,kBAAAP,EAAA;AAAA,MAEA,sBAAAO,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGAuB,IAAA,CAAAC,MAAA;AACA,MAAArB,EAAA,SAAAqB,EAAA,OAAA,OAAA;AAAA,IAAA,GAIAC,IAAA,CAAAD,MAAA;AACA,MAAAxB,EAAA,YACAwB,EAAA,eAAA;AAAA,IACA;AAGA,WAAAE;AAAA,MAAA,MAAA1B,EAAA;AAAA,MACA,CAAA2B,MAAA;AAEA,QAAArB,EAAA,QAAAqB;AAAA,MAAA;AAAA,IACA,GAGA;AAAA;AAAA,MAAA,aAAArB;AAAA;AAAA,MAEA,mBAAAa;AAAA,MAGA,qBAAAE;AAAA,MACA,kBAAAX;AAAA,MACA,sBAAAE;AAAA,MACA,oBAAAU;AAAA,MACA,eAAAd;AAAA;AAAA,MACA,SAAAJ;AAAA,MAGA,UAAAmB;AAAA,MACA,SAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, a as e, c as r, b as y } from "./chunks/index.56858f4e.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/index.45295dd3.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,