@adyen/bento-vue2 1.28.0 → 1.29.0

package/dist/toast.js

@@ -1,5 +1,171 @@
-import { t as a } from "./chunks/toast.0EYDj8o-.js";
+import { defineComponent as $, ref as c, computed as d, watch as k, onMounted as Y, nextTick as q } from "vue";
+import "./chunks/index.4c062058.js";
+import { C as L } from "./chunks/cross-small.3bb94ec7.js";
+import { u as P } from "./chunks/i18n.eb5b985b.js";
+import { a as N } from "./chunks/button.9184ade9.js";
+import { B as U } from "./chunks/index.e29a6907.js";
+import { n as B } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { u as O } from "./chunks/use-bento-toast-controller.5dac1f3c.js";
+import "./assets/index44.css";
+const M = {
+  "en-US": {
+    dismiss: "Dismiss"
+  }
+}, W = {
+  i18n: { messages: M }
+}, z = /* @__PURE__ */ $({
+  ...W,
+  __name: "toast-item",
+  props: {
+    toast: { type: Object, required: !0 }
+  },
+  setup(u) {
+    const t = u, { t: s } = P();
+    return { __sfc: !0, props: t, t: s, onAction: () => {
+      typeof t.toast.action.handler == "function" && t.toast.action.handler(), t.toast.dismiss();
+    }, CrossIcon: L, BentoButton: N, BentoTypography: U };
+  }
+});
+var V = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { staticClass: "b-toast-item" }, [s("output", { staticClass: "b-toast-item__text", attrs: { role: "status" } }, [s(e.BentoTypography, { attrs: { title: t.toast.text, el: "span", variant: "body", strongest: "" } }, [t._v(" " + t._s(t.toast.text) + " ")])], 1), t.toast.action ? s(e.BentoButton, { staticClass: "b-toast-item__btn", attrs: { variant: "tertiary", "data-testid": "toast-item-action-btn" }, on: { click: e.onAction } }, [t._v(" " + t._s(t.toast.action.text) + " ")]) : t._e(), s(e.BentoButton, { staticClass: "b-toast-item__btn", attrs: { variant: "tertiary", "data-testid": "toast-item-close-btn" }, on: { click: function(o) {
+    return t.toast.dismiss();
+  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
+    return [s(e.CrossIcon, { attrs: { "svg-title": e.t("dismiss") } })];
+  }, proxy: !0 }]) })], 1);
+}, j = [], E = /* @__PURE__ */ B(
+  z,
+  V,
+  j,
+  !1,
+  null,
+  "e4019e01",
+  null,
+  null
+);
+const H = E.exports, F = /* @__PURE__ */ $({
+  __name: "toast-shadow-stack",
+  emits: ["update"],
+  setup(u, { emit: t }) {
+    const { stack: s } = O(), e = c(), o = c(), l = c(), m = c(), f = [o, l, m], v = d(() => s.value.slice(0, 3)), r = async () => {
+      await q();
+      const { top: h } = e.value.getBoundingClientRect(), T = s.value.map((b, y) => {
+        if (y > 2)
+          return { ...b, bottom: 0, height: 0 };
+        const { height: p, top: g } = f[y].value.$el.getBoundingClientRect();
+        return { ...b, height: p, bottom: g - h };
+      });
+      t("update", T);
+    };
+    return k(s, r), Y(() => {
+      s.value.length > 0 && r();
+    }), { __sfc: !0, stack: s, emit: t, shadowStack: e, toast0: o, toast1: l, toast2: m, toastRefs: f, toasts: v, shareToastsWithDimensions: r, ToastItem: H };
+  }
+});
+var X = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return s("div", { ref: "shadowStack", staticClass: "b-toast-shadow-stack" }, [e.toasts[0] ? s(e.ToastItem, { ref: "toast0", attrs: { toast: e.toasts[0] } }) : t._e(), e.toasts[1] ? s(e.ToastItem, { ref: "toast1", attrs: { toast: e.toasts[1] } }) : t._e(), e.toasts[2] ? s(e.ToastItem, { ref: "toast2", attrs: { toast: e.toasts[2] } }) : t._e()], 1);
+}, G = [], J = /* @__PURE__ */ B(
+  F,
+  X,
+  G,
+  !1,
+  null,
+  "9e646b8f",
+  null,
+  null
+);
+const K = J.exports, Q = /* @__PURE__ */ $({
+  __name: "toast",
+  setup(u) {
+    const s = c(!1), { stack: e } = O();
+    k(
+      e,
+      (a) => {
+        a.length > 0 && !s.value && (s.value = !0);
+      },
+      { immediate: !0 }
+    );
+    const o = c(!1), l = c([]), m = 40, f = 10, v = d(() => l.value.length), r = d(() => Math.min(o.value ? 2 : 0, v.value - 1)), h = d(() => {
+      const a = l.value[r.value];
+      return a ? a.bottom + a.height : 0;
+    }), T = d(() => {
+      const a = h.value - m;
+      return l.value.map((n, _) => {
+        const S = _ > r.value, R = !o.value && _ > 1, D = S ? a + f * (R ? 2 : 1) : n.bottom;
+        return {
+          ...n,
+          styles: {
+            height: `${S ? m : n.height}px`,
+            transform: S ? `translateY(${D * -1}px) scaleX(${R ? "0.8" : "0.9"})` : `translateY(${D * -1}px)`,
+            "z-index": v.value - _
+          },
+          // first toast has different animation, and toasts above index 2/3 are not visible so no need for a custom animation
+          dismissTransform: _ > 0 && _ < (o.value ? 4 : 3) ? `translateY(${(D - n.height) * -1}px) scale(0.5, 0.1)` : null,
+          isFirst: _ === 0,
+          isInert: _ > (o.value ? 2 : 0)
+        };
+      });
+    }), b = (a) => {
+      a.dataset.dismissTransform && (a.style.transform = a.dataset.dismissTransform);
+    }, y = d(() => {
+      let a = 0;
+      if (r.value >= 0) {
+        const n = f * Math.min(v.value - 1 - r.value, o.value ? 1 : 2);
+        a = Math.min(h.value + n, document.body.parentElement.clientHeight);
+      }
+      return `${a}px`;
+    });
+    let p = null, g = null, i = 5e3;
+    const I = (a, n) => {
+      g = Date.now(), p = setTimeout(() => a.dismiss(), n);
+    }, x = (a) => {
+      clearTimeout(p), a ? (i = 5e3, o.value || I(a, i)) : i = 0;
+    };
+    k(
+      () => T.value[0],
+      (a, n) => {
+        (a == null ? void 0 : a.id) !== (n == null ? void 0 : n.id) && x(a);
+      },
+      { immediate: !0 }
+    );
+    const A = () => {
+      i = i - Date.now() + g, clearTimeout(p);
+    }, C = () => {
+      i > 0 && I(T.value[0], i);
+    };
+    k(o, (a) => {
+      a ? A() : C();
+    });
+    const w = c();
+    return { __sfc: !0, TOAST_DISPLAY_DURATION: 5e3, renderToast: s, stack: e, hovered: o, toastsWithDimensions: l, collapsedToastHeight: m, stackIndicatorHeight: f, queueSize: v, lastVisibleToastIndex: r, lastVisibleToastBottom: h, queue: T, onBeforeToastLeave: b, stackHeight: y, dismissTimout: p, timeoutStart: g, remainingTimeToDismiss: i, startTimer: I, startNewDismissTimer: x, pauseDismissTimer: A, resumeDismissTimer: C, root: w, checkHover: () => setTimeout(() => {
+      o.value = o.value ? w.value.matches(":hover") : !1;
+    }), ToastShadowStack: K, ToastItem: H };
+  }
+});
+var Z = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return e.renderToast ? s("div", { ref: "root", staticClass: "b-toast", style: { height: e.stackHeight }, attrs: { "data-testid": "toast" }, on: { mouseenter: function(o) {
+    e.hovered = !0;
+  }, mouseleave: function(o) {
+    e.hovered = !1;
+  } } }, [s(e.ToastShadowStack, { on: { update: function(o) {
+    e.toastsWithDimensions = o;
+  } } }), s("transition-group", { attrs: { name: "b-toast__queue", tag: "div", "aria-live": "polite", "enter-class": "b-toast__queue--enter", "leave-to-class": "b-toast__queue--leave-to" }, on: { "before-leave": e.onBeforeToastLeave, "after-leave": e.checkHover } }, t._l(e.queue, function(o) {
+    return s(e.ToastItem, t._b({ key: o.id, staticClass: "b-toast__item", class: { "b-toast__item--first": o.isFirst }, style: o.styles, attrs: { toast: o, inert: o.isInert, "data-testid": "toast-item" } }, "toast-item", { "data-dismiss-transform": o.dismissTransform }, !1));
+  }), 1)], 1) : t._e();
+}, tt = [], et = /* @__PURE__ */ B(
+  Q,
+  Z,
+  tt,
+  !1,
+  null,
+  "9a3ea236",
+  null,
+  null
+);
+const ut = et.exports;
 export {
-  a as BentoToast
+  ut as BentoToast
 };
 //# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"toast.js","sources":["../src/components/toast/components/toast-item/toast-item.vue","../src/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue","../src/components/toast/toast.vue"],"sourcesContent":["<template>\n    <div class=\"b-toast-item\">\n        <output class=\"b-toast-item__text\" role=\"status\">\n            <bento-typography :title=\"toast.text\" el=\"span\" variant=\"body\" strongest>\n                {{ toast.text }}\n            </bento-typography>\n        </output>\n        <bento-button\n            v-if=\"toast.action\"\n            class=\"b-toast-item__btn\"\n            variant=\"tertiary\"\n            data-testid=\"toast-item-action-btn\"\n            @click=\"onAction\"\n        >\n            {{ toast.action.text }}\n        </bento-button>\n        <bento-button\n            class=\"b-toast-item__btn\"\n            variant=\"tertiary\"\n            data-testid=\"toast-item-close-btn\"\n            @click=\"toast.dismiss()\"\n        >\n            <template #iconLeft>\n                <cross-icon :svg-title=\"t('dismiss')\" />\n            </template>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import type { BentoToastItem } from '@/composables';\n    import messages from './messages.json';\n\n    const props = defineProps({\n        toast: { type: Object as PropType<BentoToastItem>, required: true },\n    });\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const onAction = () => {\n        if (typeof props.toast.action.handler === 'function') {\n            props.toast.action.handler();\n        }\n        props.toast.dismiss();\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-item.scss\" />\n","<template>\n    <div ref=\"shadowStack\" class=\"b-toast-shadow-stack\">\n        <!--\n            since we only interested in the size of the last 3 toasts and order of the toast items\n            is not guaranteed when we use ref with v-for (more info at the end of this section https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for),\n            toast items would be rendered independently with individual ref references.\n        -->\n        <toast-item v-if=\"toasts[0]\" ref=\"toast0\" :toast=\"toasts[0]\" />\n        <toast-item v-if=\"toasts[1]\" ref=\"toast1\" :toast=\"toasts[1]\" />\n        <toast-item v-if=\"toasts[2]\" ref=\"toast2\" :toast=\"toasts[2]\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    /**\n     * This component will \"shadow-render\" ToastItems positioned relatively to each other,\n     * would grab their positions and size and would emit augmented list of toasts with those\n     * additional details. This would allow us to have perfect control over toasts positioning and animation\n     * in the parent Toast component, where ToastItems would actually be visible.\n     */\n    import { computed, nextTick, onMounted, ref, watch } from 'vue';\n    import { useBentoToastController } from '@/composables';\n    import type { BentoToastItemWithDimensions } from './toast-shadow-stack.types';\n    import ToastItem from '../toast-item/toast-item.vue';\n\n    const { stack } = useBentoToastController();\n\n    const emit = defineEmits<{\n        /**\n         *\n         */\n        (e: 'update', toasts: Array<BentoToastItemWithDimensions>): void;\n    }>();\n\n    const shadowStack = ref<HTMLElement>();\n    const toast0 = ref<InstanceType<typeof ToastItem>>();\n    const toast1 = ref<InstanceType<typeof ToastItem>>();\n    const toast2 = ref<InstanceType<typeof ToastItem>>();\n    const toastRefs = [toast0, toast1, toast2];\n\n    // only get 3 last toast as only they would be rendered on the screen\n    const toasts = computed(() => stack.value.slice(0, 3));\n\n    const shareToastsWithDimensions = async () => {\n        // Wait for all toasts to render, so we would be able to get their ClientRect\n        await nextTick();\n\n        // Parent container \"top\" value should be 0, but can be something else due to CSS. So have to account for it\n        const { top: parentTop } = shadowStack.value.getBoundingClientRect();\n\n        const toastsWithDimensions = stack.value.map((toast, index) => {\n            if (index > 2) {\n                return { ...toast, bottom: 0, height: 0 };\n            }\n            const { height, top } = toastRefs[index].value.$el.getBoundingClientRect();\n            return { ...toast, height, bottom: top - parentTop };\n        });\n        emit('update', toastsWithDimensions);\n    };\n\n    watch(stack, shareToastsWithDimensions);\n\n    onMounted(() => {\n        // Refs would be null until component is mounted, so let's make sure we only do it after that\n        if (stack.value.length > 0) {\n            shareToastsWithDimensions();\n        }\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast-shadow-stack.scss\" />\n","<template>\n    <div\n        v-if=\"renderToast\"\n        ref=\"root\"\n        class=\"b-toast\"\n        data-testid=\"toast\"\n        :style=\"{ height: stackHeight }\"\n        @mouseenter=\"hovered = true\"\n        @mouseleave=\"hovered = false\"\n    >\n        <toast-shadow-stack @update=\"toastsWithDimensions = $event\" />\n\n        <transition-group\n            name=\"b-toast__queue\"\n            tag=\"div\"\n            aria-live=\"polite\"\n            enter-class=\"b-toast__queue--enter\"\n            leave-to-class=\"b-toast__queue--leave-to\"\n            @before-leave=\"onBeforeToastLeave\"\n            @after-leave=\"checkHover\"\n        >\n            <toast-item\n                v-for=\"toast in queue\"\n                v-bind=\"{ 'data-dismiss-transform': toast.dismissTransform }\"\n                :key=\"toast.id\"\n                :toast=\"toast\"\n                :style=\"toast.styles\"\n                :class=\"{ 'b-toast__item--first': toast.isFirst }\"\n                :inert=\"toast.isInert\"\n                data-testid=\"toast-item\"\n                class=\"b-toast__item\"\n            />\n        </transition-group>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { useBentoToastController } from '@/composables';\n    import ToastShadowStack from './components/toast-shadow-stack/toast-shadow-stack.vue';\n    import type { BentoToastItemWithDimensions } from './components/toast-shadow-stack/toast-shadow-stack.types';\n    import ToastItem from './components/toast-item/toast-item.vue';\n\n    // By design, top-most toast should be visible for 5 seconds before auto-dismiss\n    const TOAST_DISPLAY_DURATION = 5000;\n\n    // Delay first render of the toast until we actually need it, to skip all the positioning calculation logic\n    // until we actually have anything to render.\n    const renderToast = ref(false);\n    const { stack } = useBentoToastController();\n\n    watch(\n        stack,\n        toastStack => {\n            if (toastStack.length > 0 && !renderToast.value) {\n                renderToast.value = true;\n            }\n        },\n        { immediate: true }\n    );\n\n    const hovered = ref(false);\n    const toastsWithDimensions = ref<Array<BentoToastItemWithDimensions>>([]);\n    // In collapsed mode we need for toast to \"stick out\", but not overflow another toast in the forefront.\n    // Random number that satisfies this condition (single-line toast is roughly 52px height)\n    const collapsedToastHeight = 40;\n    // How much pixels of the stacked toast will be \"sticking out\" from the visible toast\n    const stackIndicatorHeight = 10;\n\n    const queueSize = computed(() => toastsWithDimensions.value.length);\n    const lastVisibleToastIndex = computed(() => Math.min(hovered.value ? 2 : 0, queueSize.value - 1));\n    const lastVisibleToastBottom = computed(() => {\n        const toast = toastsWithDimensions.value[lastVisibleToastIndex.value];\n        return toast ? toast.bottom + toast.height : 0;\n    });\n\n    const queue = computed(() => {\n        const translateBaseValue = lastVisibleToastBottom.value - collapsedToastHeight;\n        return toastsWithDimensions.value.map((toast, index) => {\n            const collapsed = index > lastVisibleToastIndex.value;\n            const isSmallerStack = !hovered.value && index > 1;\n            const translateY = collapsed\n                ? translateBaseValue + stackIndicatorHeight * (isSmallerStack ? 2 : 1)\n                : toast.bottom;\n\n            return {\n                ...toast,\n                styles: {\n                    height: `${collapsed ? collapsedToastHeight : toast.height}px`,\n                    transform: collapsed\n                        ? `translateY(${translateY * -1}px) scaleX(${isSmallerStack ? '0.8' : '0.9'})`\n                        : `translateY(${translateY * -1}px)`,\n                    'z-index': queueSize.value - index,\n                },\n                // first toast has different animation, and toasts above index 2/3 are not visible so no need for a custom animation\n                dismissTransform:\n                    index > 0 && index < (hovered.value ? 4 : 3)\n                        ? `translateY(${(translateY - toast.height) * -1}px) scale(0.5, 0.1)`\n                        : null,\n                isFirst: index === 0,\n                isInert: index > (hovered.value ? 2 : 0),\n            };\n        });\n    });\n\n    const onBeforeToastLeave = (el: HTMLElement) => {\n        // We have to swap transformation on the toast element that is about to be removed\n        // Unfortunately we cannot do it via transition classes as transformation function is\n        // unique per toast, and we cannot use reactivity because it won't be applied for a toast\n        // that is removed. So direct DOM manipulation is the only way it seems.\n        if (el.dataset.dismissTransform) {\n            /* eslint-disable no-param-reassign -- explicitly manipulating with DOM properties, no way around it unfortunately */\n            el.style.transform = el.dataset.dismissTransform;\n        }\n    };\n\n    const stackHeight = computed(() => {\n        // Track stack container height, so that hover over would work without glitches\n        // (when mouse is over space between toasts)\n        let height = 0;\n        if (lastVisibleToastIndex.value >= 0) {\n            const stackIndicator =\n                stackIndicatorHeight *\n                Math.min(queueSize.value - 1 - lastVisibleToastIndex.value, hovered.value ? 1 : 2);\n            height = Math.min(lastVisibleToastBottom.value + stackIndicator, document.body.parentElement.clientHeight);\n        }\n        return `${height}px`;\n    });\n\n    let dismissTimout = null;\n    let timeoutStart = null;\n    let remainingTimeToDismiss = TOAST_DISPLAY_DURATION;\n\n    const startTimer = (toast, duration) => {\n        timeoutStart = Date.now();\n        dismissTimout = setTimeout(() => toast.dismiss(), duration);\n    };\n\n    const startNewDismissTimer = toast => {\n        // stop previous timeouts, if any\n        clearTimeout(dismissTimout);\n        if (toast) {\n            remainingTimeToDismiss = TOAST_DISPLAY_DURATION;\n            if (!hovered.value) {\n                startTimer(toast, remainingTimeToDismiss);\n            }\n        } else {\n            remainingTimeToDismiss = 0;\n        }\n    };\n\n    watch(\n        () => queue.value[0],\n        (firstToast, oldFirstToast) => {\n            if (firstToast?.id === oldFirstToast?.id) {\n                return;\n            }\n            startNewDismissTimer(firstToast);\n        },\n        { immediate: true }\n    );\n\n    const pauseDismissTimer = () => {\n        remainingTimeToDismiss = remainingTimeToDismiss - Date.now() + timeoutStart;\n        clearTimeout(dismissTimout);\n    };\n\n    const resumeDismissTimer = () => {\n        if (remainingTimeToDismiss > 0) {\n            startTimer(queue.value[0], remainingTimeToDismiss);\n        }\n    };\n\n    watch(hovered, isHovered => {\n        if (isHovered) {\n            pauseDismissTimer();\n        } else {\n            resumeDismissTimer();\n        }\n    });\n\n    const root = ref<HTMLElement>();\n    // \"mouseleave\" event would be emitted for the root element when the mouse moves out of the root element,\n    // but browser wouldn't emit this event when root element shrinks to the point when mouse is not over element anymore.\n    // This can happen when user clicks on dismiss button the top-most toast and doesn't move the mouse during animation,\n    // after which browser would think that root element is still hovered. This workaround addresses this particular issue.\n    const checkHover = () =>\n        setTimeout(() => {\n            hovered.value = hovered.value ? root.value.matches(':hover') : false;\n        });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toast.scss\" />\n"],"names":["__default__","messages","t","useI18n","props","stack","useBentoToastController","shadowStack","ref","toast0","toast1","toast2","toastRefs","toasts","computed","shareToastsWithDimensions","nextTick","parentTop","toastsWithDimensions","toast","index","height","top","emit","watch","onMounted","renderToast","toastStack","hovered","collapsedToastHeight","stackIndicatorHeight","queueSize","lastVisibleToastIndex","lastVisibleToastBottom","queue","translateBaseValue","collapsed","isSmallerStack","translateY","onBeforeToastLeave","el","stackHeight","stackIndicator","dismissTimout","timeoutStart","remainingTimeToDismiss","startTimer","duration","startNewDismissTimer","firstToast","oldFirstToast","pauseDismissTimer","resumeDismissTimer","isHovered","root"],"mappings":"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"}

package/dist/toggle.js

@@ -1,7 +1,123 @@
-import { B as a, b as g, a as s } from "./chunks/toggle.CiOVTWlk.js";
+import { defineComponent as k, ref as p, computed as u, toRefs as I, watch as A } from "vue";
+import { C as B } from "./chunks/checkmark-small.6f444bd7.js";
+import { B as L } from "./chunks/index.e29a6907.js";
+import { g as E } from "./chunks/unique-id.a2a2b458.js";
+import { u as F } from "./chunks/use-default-slot-validator.b9bff4c6.js";
+import { u as R } from "./chunks/use-has-slot.fbeb19ec.js";
+import { g } from "./chunks/get-slot-text.99c3d860.js";
+import { u as x } from "./chunks/aria-label.ac9651a5.js";
+import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index45.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 = k({
+  name: "bento-toggle",
+  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
+     */
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Disable the toggle (optional)
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Position of the label relative to the toggle (optional)
+     * @values before, after
+     */
+    labelPosition: {
+      type: String,
+      default: d.BEFORE,
+      validator: (t) => Object.values(d).includes(t)
+    },
+    /**
+     * Setting this property to true will set the toggle to read only state.
+     */
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Indicates if the switch is "on" or "off"
+     */
+    value: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["input"],
+  setup(t, { attrs: e, slots: a, emit: n }) {
+    const l = R(a), r = p(t.value), i = E("toggle-description"), c = g(a)("default"), o = g(a)("description");
+    F("bento-toggle", a.default, a.description);
+    const _ = u(() => l("default") ? g(a)("default") : null), b = p(e["aria-label"]), { ariaLabel: m } = I(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
+    })), C = (s) => {
+      n("input", s.target.checked);
+    }, S = (s) => {
+      t.readonly && s.preventDefault();
+    };
+    return A(
+      () => t.value,
+      (s) => {
+        r.value = s;
+      }
+    ), {
+      // Refs
+      toggleInput: r,
+      // Values
+      computedAriaLabel: y,
+      computedDescription: h,
+      defaultSlotValue: c,
+      descriptionSlotValue: o,
+      conditionalClasses: v,
+      descriptionId: i,
+      // Method
+      hasSlot: l,
+      onChange: C,
+      onClick: S
+    };
+  }
+});
+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, i = !!r.checked;
+    if (Array.isArray(l)) {
+      var c = null, o = e._i(l, c);
+      r.checked ? o < 0 && (e.toggleInput = l.concat([c])) : o > -1 && (e.toggleInput = l.slice(0, o).concat(l.slice(o + 1)));
+    } else
+      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,
+  "dd0561f5",
+  null,
+  null
+);
+const K = P.exports;
 export {
-  a as BentoToggle,
-  g as BentoToggleLabelPosition,
-  s as BentoTogglePropClass
+  K as BentoToggle,
+  d as BentoToggleLabelPosition,
+  f as BentoTogglePropClass
 };
 //# sourceMappingURL=toggle.js.map

package/dist/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"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","CheckmarkSmallIcon","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;;;;;;;;;;;;;;;;;;;;;;"}