@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/sidepanel.js

@@ -1,22 +1,22 @@
-import { defineComponent as O, ref as r, inject as b, computed as c, watch as A, nextTick as S, toRefs as x, provide as N } from "vue";
-import { B as R, a as L } from "./chunks/button.d0c9527d.js";
-import { B as U, a as F, b as G } from "./chunks/index.56858f4e.js";
-import { F as $ } from "./chunks/footer-actions.67642347.js";
+import { defineComponent as L, ref as r, inject as B, onUnmounted as V, computed as p, watch as h, nextTick as N, toRefs as F, provide as O } from "vue";
+import { a as w } from "./chunks/button.fb307df3.js";
+import { B as G } from "./chunks/index.45295dd3.js";
+import { F as $ } from "./chunks/footer-actions.f02e8699.js";
 import { A as H } from "./chunks/arrow-left.1d5d08bd.js";
-import { u as w } from "./chunks/i18n.155748d6.js";
-import { n as V } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as Y } from "./chunks/index.133e4da0.js";
-import { C as j } from "./chunks/cross.a2cadac5.js";
-import "./assets/index32.css";
-var h = /* @__PURE__ */ ((l) => (l.UPDATE_ACTIVE_PAGE = "update:active-page", l.UPDATE_IS_OPEN = "update:is-open", l))(h || {}), E = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-sidepanel-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-sidepanel-page__animation--level-upper", l))(E || {});
-const k = Symbol("sidepanel registerPage injection key"), D = Symbol("sidepanel config data injection key"), J = {
+import { u as R } from "./chunks/i18n.155748d6.js";
+import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as j } from "./chunks/index.c85a1ab9.js";
+import { C as J } from "./chunks/cross.a2cadac5.js";
+import "./assets/index31.css";
+var T = /* @__PURE__ */ ((l) => (l.UPDATE_ACTIVE_PAGE = "update:active-page", l.UPDATE_IS_OPEN = "update:is-open", l))(T || {}), y = /* @__PURE__ */ ((l) => (l.TRANSITION_LEVEL_DEEPER = "b-sidepanel-page__animation--level-deeper", l.TRANSITION_LEVEL_UPPER = "b-sidepanel-page__animation--level-upper", l))(y || {});
+const D = Symbol("sidepanel registerPage injection key"), x = Symbol("sidepanel config data injection key"), K = {
   "en-US": {
     goToPreviousPage: "Go to previous page"
   }
-}, K = {
-  i18n: { messages: J }
-}, z = /* @__PURE__ */ O({
-  ...K,
+}, Y = {
+  i18n: { messages: K }
+}, z = /* @__PURE__ */ L({
+  ...Y,
   __name: "sidepanel-page",
   props: {
     /**
@@ -78,34 +78,34 @@ const k = Symbol("sidepanel registerPage injection key"), D = Symbol("sidepanel
     }
   },
   setup(l) {
-    const a = l, { t } = w(), e = r(null), o = r(!1), f = r(!0), i = r(!1), p = b(k);
-    p({ title: a.title, pageId: a.pageId });
-    const { activePage: s, animation: _, goToPreviousPage: g, hasPreviousPages: u, isOpen: d } = b(D), v = c(() => s.value ? s.value === a.pageId : !0), T = c(() => a.previousPage ? !0 : a.previousPage === null ? !1 : u.value && v.value), I = c(() => ({
-      "b-sidepanel-page__header--with-border": o.value && !f.value
-    })), C = c(() => ({
+    const a = l, { t } = R(), e = r(null), o = r(!1), P = r(!0), i = r(!1), u = B(D), { unregisterPage: n } = u({ title: a.title, pageId: a.pageId });
+    V(() => n());
+    const { activePage: v, animation: _, goToPreviousPage: d, hasPreviousPages: f, isOpen: E } = B(x), g = p(() => v.value ? v.value === a.pageId : !0), C = p(() => a.previousPage ? !0 : a.previousPage === null ? !1 : f.value && g.value), I = p(() => ({
+      "b-sidepanel-page__header--with-border": o.value && !P.value
+    })), A = p(() => ({
       "b-sidepanel-page__actions--with-border": o.value && !i.value
-    })), m = () => {
-      e.value && (f.value = e.value.scrollTop === 0, i.value = e.value.scrollHeight - e.value.clientHeight === e.value.scrollTop);
-    }, P = async (n) => {
-      n && (await S(), o.value = e.value && e.value.scrollHeight > e.value.clientHeight);
+    })), S = () => {
+      e.value && (P.value = e.value.scrollTop === 0, i.value = e.value.scrollHeight - e.value.clientHeight === e.value.scrollTop);
+    }, m = async (s) => {
+      s && (await N(), o.value = e.value && e.value.scrollHeight > e.value.clientHeight);
     };
-    return A(() => d.value, P, { immediate: !0 }), A(() => v.value, P, { immediate: !0 }), { __sfc: !0, props: a, t, contentElement: e, hasScroll: o, isScrollAtTop: f, isScrollAtBottom: i, registerPage: p, activePage: s, animation: _, goToPreviousPage: g, hasPreviousPages: u, isOpen: d, showPage: v, showBackButton: T, headerConditionalClasses: I, actionsConditionalClasses: C, onScroll: m, calculateScroll: P, updateAnimation: () => {
-      _.value === E.TRANSITION_LEVEL_UPPER && (_.value = E.TRANSITION_LEVEL_DEEPER);
-    }, BentoButton: R, BentoButtonVariant: L, BentoTypography: U, BentoTypographyElement: F, BentoTypographyVariant: G, FooterActions: $, ArrowLeftIcon: H };
+    return h(() => E.value, m, { immediate: !0 }), h(() => g.value, m, { immediate: !0 }), { __sfc: !0, props: a, t, contentElement: e, hasScroll: o, isScrollAtTop: P, isScrollAtBottom: i, registerPage: u, unregisterPage: n, activePage: v, animation: _, goToPreviousPage: d, hasPreviousPages: f, isOpen: E, showPage: g, showBackButton: C, headerConditionalClasses: I, actionsConditionalClasses: A, onScroll: S, calculateScroll: m, updateAnimation: () => {
+      _.value === y.TRANSITION_LEVEL_UPPER && (_.value = y.TRANSITION_LEVEL_DEEPER);
+    }, BentoButton: w, BentoTypography: G, FooterActions: $, ArrowLeftIcon: H };
   }
 });
 var M = function() {
   var a = this, t = a._self._c, e = a._self._setupProxy;
-  return t("Transition", { attrs: { name: e.animation, mode: "out-in" }, on: { "after-leave": e.updateAnimation } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showPage, expression: "showPage" }], staticClass: "b-sidepanel-page" }, [t("div", { staticClass: "b-sidepanel-page__header", class: e.headerConditionalClasses }, [e.showBackButton ? t(e.BentoButton, { attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: function(o) {
+  return t("Transition", { attrs: { name: e.animation, mode: "out-in" }, on: { "after-leave": e.updateAnimation } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showPage, expression: "showPage" }], staticClass: "b-sidepanel-page" }, [t("div", { staticClass: "b-sidepanel-page__header", class: e.headerConditionalClasses }, [e.showBackButton ? t(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(o) {
     return e.goToPreviousPage(a.previousPage);
-  } } }, [t(e.ArrowLeftIcon, { attrs: { "svg-title": e.t("goToPreviousPage") } })], 1) : a._e(), t(e.BentoTypography, { staticClass: "b-sidepanel-page__title", attrs: { el: e.BentoTypographyElement.H2, variant: e.BentoTypographyVariant.TITLE } }, [a._v(" " + a._s(a.title) + " ")])], 1), t("div", { ref: "contentElement", staticClass: "b-sidepanel-page__content", on: { scroll: e.onScroll } }, [t(e.BentoTypography, { attrs: { el: e.BentoTypographyElement.DIV, variant: e.BentoTypographyVariant.BODY } }, [a._t("default")], 2)], 1), a.actions ? t("div", { staticClass: "b-sidepanel-page__actions", class: e.actionsConditionalClasses }, [t(e.FooterActions, { attrs: { actions: a.actions, "actions-label": a.actionsLabel, "destructive-actions": a.destructiveActions } })], 1) : a._e()])]);
-}, q = [], Q = /* @__PURE__ */ V(
+  } } }, [t(e.ArrowLeftIcon, { attrs: { "svg-title": e.t("goToPreviousPage") } })], 1) : a._e(), t(e.BentoTypography, { staticClass: "b-sidepanel-page__title", attrs: { el: "h2", variant: "title" } }, [a._v(" " + a._s(a.title) + " ")])], 1), t("div", { ref: "contentElement", staticClass: "b-sidepanel-page__content", on: { scroll: e.onScroll } }, [t(e.BentoTypography, { attrs: { el: "div", variant: "body" } }, [a._t("default")], 2)], 1), a.actions ? t("div", { staticClass: "b-sidepanel-page__actions", class: e.actionsConditionalClasses }, [t(e.FooterActions, { attrs: { actions: a.actions, "actions-label": a.actionsLabel, "destructive-actions": a.destructiveActions } })], 1) : a._e()])]);
+}, q = [], Q = /* @__PURE__ */ k(
   z,
   M,
   q,
   !1,
   null,
-  "29ddfe34",
+  "1d34045b",
   null,
   null
 );
@@ -115,7 +115,7 @@ const _e = Q.exports, W = {
   }
 }, X = {
   i18n: { messages: W }
-}, Z = /* @__PURE__ */ O({
+}, Z = /* @__PURE__ */ L({
   ...X,
   __name: "sidepanel",
   props: {
@@ -144,51 +144,52 @@ const _e = Q.exports, W = {
     }
   },
   setup(l, { emit: a }) {
-    const t = l, { activePage: e, isOpen: o } = x(t), { t: f } = w(), i = r(null), p = r([]), s = r([]), _ = c(() => s.value.length > 1), g = r(E.TRANSITION_LEVEL_DEEPER), u = r(!1), d = c(() => s.value[s.value.length - 1]), v = c(() => p.value.some((n) => n.pageId === e.value)), T = (n) => {
-      if (n) {
-        const y = s.value.indexOf(n);
-        y !== -1 ? s.value = s.value.slice(0, y + 1) : s.value = [n];
+    const t = l, { activePage: e, isOpen: o } = F(t), { t: P } = R(), i = r(null), u = r([]), n = r([]), v = p(() => n.value.length > 1), _ = r(y.TRANSITION_LEVEL_DEEPER), d = r(!1), f = p(() => n.value[n.value.length - 1]), E = p(() => u.value.some((s) => s.pageId === e.value)), g = (s) => {
+      if (s) {
+        const c = n.value.indexOf(s);
+        c !== -1 ? n.value = n.value.slice(0, c + 1) : n.value = [s];
       } else
-        s.value.pop();
-      g.value = E.TRANSITION_LEVEL_UPPER, a(h.UPDATE_ACTIVE_PAGE, d.value);
+        n.value.pop();
+      _.value = y.TRANSITION_LEVEL_UPPER, a(T.UPDATE_ACTIVE_PAGE, f.value);
     };
-    A(
+    h(
       () => e.value,
       async () => {
-        if (await S(), e.value && !v.value) {
+        if (await N(), e.value && !E.value) {
           console.error(`The activePage passed "${e.value}" does not match the id of any SidepanelPage`);
           return;
         }
-        e.value !== d.value && s.value.push(e.value);
+        e.value !== f.value && n.value.push(e.value);
       },
       { immediate: !0 }
     );
-    const I = c(() => ({
-      "b-sidepanel__hide": u.value
-    })), C = (n) => {
-      u.value && n.pseudoElement === "::backdrop" && (i.value.close(), s.value[0] && a(h.UPDATE_ACTIVE_PAGE, s.value[0]), s.value = [], u.value = !1, a(h.UPDATE_IS_OPEN, !1));
-    }, m = (n) => {
-      n && n.preventDefault(), i.value.open && (u.value = !0);
-    }, P = ({ target: n }) => {
-      n && n.tagName === "DIALOG" && m();
+    const C = p(() => ({
+      "b-sidepanel__hide": d.value
+    })), I = (s) => {
+      d.value && s.pseudoElement === "::backdrop" && (i.value.close(), n.value[0] && a(T.UPDATE_ACTIVE_PAGE, n.value[0]), n.value = [], d.value = !1, a(T.UPDATE_IS_OPEN, !1));
+    }, A = (s) => {
+      s && s.preventDefault(), i.value.open && (d.value = !0);
+    }, S = ({ target: s }) => {
+      s && s.tagName === "DIALOG" && A();
     };
-    A(
+    h(
       () => o.value,
       async () => {
-        await S(), i.value && (o.value ? (i.value.showModal(), s.value.length || s.value.push(e.value)) : i.value.open && m());
+        await N(), i.value && (o.value ? (i.value.showModal(), n.value.length || n.value.push(e.value)) : i.value.open && A());
       },
       { immediate: !0 }
     );
-    const B = ({ title: n, pageId: y }) => {
-      p.value.push({ title: n, pageId: y });
-    };
-    return N(D, {
+    const m = (s) => () => {
+      var c;
+      u.value = (c = u.value) == null ? void 0 : c.filter(({ pageId: U }) => U !== s);
+    }, b = ({ title: s, pageId: c }) => (u.value.push({ title: s, pageId: c }), { unregisterPage: m(c) });
+    return O(x, {
       activePage: e,
-      animation: g,
-      goToPreviousPage: T,
-      hasPreviousPages: _,
+      animation: _,
+      goToPreviousPage: g,
+      hasPreviousPages: v,
       isOpen: o
-    }), N(k, B), { __sfc: !0, props: t, emit: a, activePage: e, isOpen: o, t: f, sidepanel: i, pages: p, previousPages: s, hasPreviousPages: _, animation: g, isClosing: u, lastPage: d, isActivePageValid: v, goToPreviousPage: T, conditionalClasses: I, closeSidepanelAfterAnimation: C, startCloseSidepanelAnimation: m, closeSidepanelOnClickOutside: P, registerPage: B, BentoButton: R, BentoButtonVariant: L, BentoFocusTrap: Y, CrossIcon: j };
+    }), O(D, b), { __sfc: !0, props: t, emit: a, activePage: e, isOpen: o, t: P, sidepanel: i, pages: u, previousPages: n, hasPreviousPages: v, animation: _, isClosing: d, lastPage: f, isActivePageValid: E, goToPreviousPage: g, conditionalClasses: C, closeSidepanelAfterAnimation: I, startCloseSidepanelAnimation: A, closeSidepanelOnClickOutside: S, unregisterPage: m, registerPage: b, BentoButton: w, BentoFocusTrap: j, CrossIcon: J };
   }
 });
 var ee = function() {
@@ -197,22 +198,22 @@ var ee = function() {
     a.isDismissible && e.closeSidepanelOnClickOutside(o);
   }, keydown: function(o) {
     return !o.type.indexOf("key") && a._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : e.startCloseSidepanelAnimation.apply(null, arguments);
-  } } }, [t(e.BentoFocusTrap, [t("div", { staticClass: "b-sidepanel__close-button" }, [t(e.BentoButton, { attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: e.startCloseSidepanelAnimation } }, [t(e.CrossIcon, { attrs: { "svg-title": e.t("close") } })], 1)], 1), a._t("default")], 2)], 1);
-}, ae = [], te = /* @__PURE__ */ V(
+  } } }, [t(e.BentoFocusTrap, [t("div", { staticClass: "b-sidepanel__close-button" }, [t(e.BentoButton, { attrs: { variant: "tertiary" }, on: { click: e.startCloseSidepanelAnimation } }, [t(e.CrossIcon, { attrs: { "svg-title": e.t("close") } })], 1)], 1), a._t("default")], 2)], 1);
+}, ae = [], te = /* @__PURE__ */ k(
   Z,
   ee,
   ae,
   !1,
   null,
-  "039416a2",
+  "d408ac3c",
   null,
   null
 );
 const de = te.exports;
 export {
   de as BentoSidepanel,
-  E as BentoSidepanelAnimation,
-  h as BentoSidepanelEvent,
+  y as BentoSidepanelAnimation,
+  T as BentoSidepanelEvent,
   _e as BentoSidepanelPage
 };
 //# sourceMappingURL=sidepanel.js.map

package/dist/sidepanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidepanel.js","sources":["../src/components/sidepanel/sidepanel.types.ts","../src/components/sidepanel/sidepanel.keys.ts","../src/components/sidepanel/components/sidepanel-page.vue","../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["import { Ref } from 'vue';\n\nexport interface BentoSidepanelPageObject {\n    title: string;\n    pageId: string;\n}\n\nexport enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n\nexport enum BentoSidepanelAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-sidepanel-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-sidepanel-page__animation--level-upper',\n}\n\nexport interface BentoSidepanelConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    goToPreviousPage: (page: string) => void;\n    hasPreviousPages: Ref<boolean>;\n    isOpen: Ref<boolean>;\n}\n\nexport type BentoSidepanelRegisterPage = (props: BentoSidepanelPageObject) => void;\n","export const SIDEPANEL_REGISTER_PAGE_INJECTION_KEY = Symbol('sidepanel registerPage injection key');\nexport const SIDEPANEL_CONFIG_INJECTION_KEY = Symbol('sidepanel config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\">\n        <div v-show=\"showPage\" class=\"b-sidepanel-page\">\n            <div class=\"b-sidepanel-page__header\" :class=\"headerConditionalClasses\">\n                <bento-button\n                    v-if=\"showBackButton\"\n                    :variant=\"BentoButtonVariant.TERTIARY\"\n                    @click=\"goToPreviousPage(previousPage)\"\n                >\n                    <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                </bento-button>\n\n                <bento-typography\n                    class=\"b-sidepanel-page__title\"\n                    :el=\"BentoTypographyElement.H2\"\n                    :variant=\"BentoTypographyVariant.TITLE\"\n                >\n                    {{ title }}\n                </bento-typography>\n            </div>\n            <div ref=\"contentElement\" class=\"b-sidepanel-page__content\" @scroll=\"onScroll\">\n                <bento-typography :el=\"BentoTypographyElement.DIV\" :variant=\"BentoTypographyVariant.BODY\">\n                    <slot />\n                </bento-typography>\n            </div>\n            <div v-if=\"actions\" class=\"b-sidepanel-page__actions\" :class=\"actionsConditionalClasses\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, PropType, ref, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { BentoSidepanelAnimation, BentoSidepanelConfigData, BentoSidepanelRegisterPage } from '../sidepanel.types';\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from '../sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isScrollAtTop = ref(true);\n    const isScrollAtBottom = ref(false);\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoSidepanelRegisterPage>(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY);\n\n    registerPage({ title: props.title, pageId: props.pageId });\n\n    const { activePage, animation, goToPreviousPage, hasPreviousPages, isOpen } =\n        inject<BentoSidepanelConfigData>(SIDEPANEL_CONFIG_INJECTION_KEY);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-sidepanel-page__header--with-border': hasScroll.value && !isScrollAtTop.value,\n    }));\n\n    const actionsConditionalClasses = computed(() => ({\n        'b-sidepanel-page__actions--with-border': hasScroll.value && !isScrollAtBottom.value,\n    }));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n        isScrollAtTop.value = contentElement.value.scrollTop === 0;\n        isScrollAtBottom.value =\n            contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Animation\n    const updateAnimation = () => {\n        if (animation.value === BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER) {\n            animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER;\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @click=\"isDismissible && closeSidepanelOnClickOutside($event)\"\n        @keydown.esc=\"startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap>\n            <div class=\"b-sidepanel__close-button\">\n                <bento-button :variant=\"BentoButtonVariant.TERTIARY\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import {\n        BentoSidepanelAnimation,\n        BentoSidepanelEvent,\n        BentoSidepanelPageObject,\n        BentoSidepanelRegisterPage,\n    } from './sidepanel.types';\n\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from './sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<BentoSidepanelPageObject[]>([]);\n    const previousPages = ref([]);\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const animation = ref(BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n\n    // Previous page/back button logic\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page.pageId === activePage.value));\n\n    const goToPreviousPage = (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER;\n        emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                // eslint-disable-next-line no-console\n                console.error(`The activePage passed \"${activePage.value}\" does not match the id of any SidepanelPage`);\n                return;\n            }\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel__hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = (event: AnimationEvent) => {\n        if (isClosing.value && event.pseudoElement === '::backdrop') {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n     * If the click doesn't happen in the dialog box itself, the modal closes\n     */\n    const closeSidepanelOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === 'DIALOG') {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoSidepanelRegisterPage = ({ title, pageId }) => {\n        pages.value.push({ title, pageId });\n    };\n\n    provide(SIDEPANEL_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        goToPreviousPage,\n        hasPreviousPages,\n        isOpen,\n    });\n    provide(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["BentoSidepanelEvent","BentoSidepanelEvent2","BentoSidepanelAnimation","BentoSidepanelAnimation2","SIDEPANEL_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_CONFIG_INJECTION_KEY","__default__$1","messages$1","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","registerPage","inject","props","activePage","animation","goToPreviousPage","hasPreviousPages","isOpen","showPage","computed","showBackButton","headerConditionalClasses","actionsConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","watch","__default__","messages","toRefs","t","sidepanel","pages","previousPages","isClosing","lastPage","isActivePageValid","page","index","emit","conditionalClasses","closeSidepanelAfterAnimation","event","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","target","title","pageId","provide"],"mappings":"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"}
+{"version":3,"file":"sidepanel.js","sources":["../src/components/sidepanel/sidepanel.types.ts","../src/components/sidepanel/sidepanel.keys.ts","../src/components/sidepanel/components/sidepanel-page.vue","../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["import { Ref } from 'vue';\n\nexport interface BentoSidepanelPageObject {\n    title: string;\n    pageId: string;\n}\n\nexport enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n\nexport enum BentoSidepanelAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-sidepanel-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-sidepanel-page__animation--level-upper',\n}\n\nexport interface BentoSidepanelConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    goToPreviousPage: (page: string) => void;\n    hasPreviousPages: Ref<boolean>;\n    isOpen: Ref<boolean>;\n}\n\nexport type BentoSidepanelRegisterPage = (props: BentoSidepanelPageObject) => { unregisterPage: () => void };\n","export const SIDEPANEL_REGISTER_PAGE_INJECTION_KEY = Symbol('sidepanel registerPage injection key');\nexport const SIDEPANEL_CONFIG_INJECTION_KEY = Symbol('sidepanel config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\">\n        <div v-show=\"showPage\" class=\"b-sidepanel-page\">\n            <div class=\"b-sidepanel-page__header\" :class=\"headerConditionalClasses\">\n                <bento-button v-if=\"showBackButton\" variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                    <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                </bento-button>\n\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n            <div ref=\"contentElement\" class=\"b-sidepanel-page__content\" @scroll=\"onScroll\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n            <div v-if=\"actions\" class=\"b-sidepanel-page__actions\" :class=\"actionsConditionalClasses\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onUnmounted, PropType, ref, watch } from 'vue';\n\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { BentoSidepanelAnimation, BentoSidepanelConfigData, BentoSidepanelRegisterPage } from '../sidepanel.types';\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from '../sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isScrollAtTop = ref(true);\n    const isScrollAtBottom = ref(false);\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoSidepanelRegisterPage>(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage({ title: props.title, pageId: props.pageId });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => unregisterPage());\n\n    const { activePage, animation, goToPreviousPage, hasPreviousPages, isOpen } =\n        inject<BentoSidepanelConfigData>(SIDEPANEL_CONFIG_INJECTION_KEY);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-sidepanel-page__header--with-border': hasScroll.value && !isScrollAtTop.value,\n    }));\n\n    const actionsConditionalClasses = computed(() => ({\n        'b-sidepanel-page__actions--with-border': hasScroll.value && !isScrollAtBottom.value,\n    }));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n        isScrollAtTop.value = contentElement.value.scrollTop === 0;\n        isScrollAtBottom.value =\n            contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Animation\n    const updateAnimation = () => {\n        if (animation.value === BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER) {\n            animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER;\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @click=\"isDismissible && closeSidepanelOnClickOutside($event)\"\n        @keydown.esc=\"startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap>\n            <div class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import {\n        BentoSidepanelAnimation,\n        BentoSidepanelEvent,\n        BentoSidepanelPageObject,\n        BentoSidepanelRegisterPage,\n    } from './sidepanel.types';\n\n    import { SIDEPANEL_CONFIG_INJECTION_KEY, SIDEPANEL_REGISTER_PAGE_INJECTION_KEY } from './sidepanel.keys';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when page is changed internally\n         */\n        (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void;\n        /**\n         * Emits close-sidepanel event when the sidepanel is closed\n         */\n        (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void;\n    }>();\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<BentoSidepanelPageObject[]>([]);\n    const previousPages = ref([]);\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const animation = ref(BentoSidepanelAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n\n    // Previous page/back button logic\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page.pageId === activePage.value));\n\n    const goToPreviousPage = (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoSidepanelAnimation.TRANSITION_LEVEL_UPPER;\n        emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                // eslint-disable-next-line no-console\n                console.error(`The activePage passed \"${activePage.value}\" does not match the id of any SidepanelPage`);\n                return;\n            }\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel__hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = (event: AnimationEvent) => {\n        if (isClosing.value && event.pseudoElement === '::backdrop') {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = (event?: Event) => {\n        if (event) {\n            event.preventDefault();\n        }\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    /**\n     * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n     * If the click doesn't happen in the dialog box itself, the modal closes\n     */\n    const closeSidepanelOnClickOutside = ({ target }: Event): void => {\n        if (target && (target as HTMLElement).tagName === 'DIALOG') {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(({ pageId }) => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoSidepanelRegisterPage = ({ title, pageId }) => {\n        pages.value.push({ title, pageId });\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide(SIDEPANEL_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        goToPreviousPage,\n        hasPreviousPages,\n        isOpen,\n    });\n    provide(SIDEPANEL_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["BentoSidepanelEvent","BentoSidepanelEvent2","BentoSidepanelAnimation","BentoSidepanelAnimation2","SIDEPANEL_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_CONFIG_INJECTION_KEY","__default__$1","messages$1","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","registerPage","inject","unregisterPage","props","onUnmounted","activePage","animation","goToPreviousPage","hasPreviousPages","isOpen","showPage","computed","showBackButton","headerConditionalClasses","actionsConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","watch","__default__","messages","toRefs","t","sidepanel","pages","previousPages","isClosing","lastPage","isActivePageValid","page","index","emit","conditionalClasses","closeSidepanelAfterAnimation","event","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","target","pageIdToRemove","_a","pageId","title","provide"],"mappings":"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"}

package/dist/status.js

@@ -1,46 +1,43 @@
-import { defineComponent as r, computed as n } from "vue";
-import { B as o, a as l, b as _ } from "./chunks/index.56858f4e.js";
-import { n as p } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index28.css";
-var a = /* @__PURE__ */ ((e) => (e.BLUE = "blue", e.GREEN = "green", e.GREY = "grey", e.ORANGE = "orange", e.RED = "red", e.YELLOW = "yellow", e))(a || {});
-const i = r({
+import { defineComponent as n, computed as a } from "vue";
+import { B as o } from "./chunks/index.45295dd3.js";
+import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import "./assets/index32.css";
+var r = /* @__PURE__ */ ((s) => (s.BLUE = "blue", s.GREEN = "green", s.GREY = "grey", s.ORANGE = "orange", s.RED = "red", s.YELLOW = "yellow", s))(r || {});
+const _ = n({
   name: "bento-status",
   components: { BentoTypography: o },
   props: {
     variant: {
       type: String,
       required: !0,
-      validator: (e) => Object.values(a).includes(e)
+      validator: (s) => Object.values(r).includes(s)
     }
   },
-  setup(e) {
+  setup(s) {
     return {
       // Values
-      conditionalClass: n(() => ({
-        [`b-status__indicator--${e.variant}`]: !0
-      })),
-      // Enums
-      BentoTypographyElement: l,
-      BentoTypographyVariant: _
+      conditionalClass: a(() => ({
+        [`b-status__indicator--${s.variant}`]: !0
+      }))
     };
   }
 });
 var c = function() {
-  var t = this, s = t._self._c;
-  return t._self._setupProxy, s("div", { staticClass: "b-status", attrs: { role: "status" } }, [s("span", { staticClass: "b-status__indicator", class: t.conditionalClass, attrs: { role: "presentation" } }), s("bento-typography", { staticClass: "b-status__label", attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._t("default")], 2)], 1);
-}, u = [], d = /* @__PURE__ */ p(
-  i,
+  var t = this, e = t._self._c;
+  return t._self._setupProxy, e("div", { staticClass: "b-status", attrs: { role: "status" } }, [e("span", { staticClass: "b-status__indicator", class: t.conditionalClass, attrs: { role: "presentation" } }), e("bento-typography", { staticClass: "b-status__label", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 1);
+}, i = [], p = /* @__PURE__ */ l(
+  _,
   c,
-  u,
+  i,
   !1,
   null,
-  "2ee563ed",
+  "4eb7001b",
   null,
   null
 );
-const f = d.exports;
+const m = p.exports;
 export {
-  f as BentoStatus,
-  a as BentoStatusVariant
+  m as BentoStatus,
+  r as BentoStatusVariant
 };
 //# sourceMappingURL=status.js.map

package/dist/status.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.js","sources":["../src/components/status/status.types.ts","../src/components/status/status.vue"],"sourcesContent":["export enum BentoStatusVariant {\n    BLUE = 'blue',\n    GREEN = 'green',\n    GREY = 'grey',\n    ORANGE = 'orange',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-status\" role=\"status\">\n        <span class=\"b-status__indicator\" :class=\"conditionalClass\" role=\"presentation\"></span>\n        <bento-typography\n            class=\"b-status__label\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n        >\n            <slot></slot>\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoStatusVariant } from './status.types';\n\n    /**\n     * A Status component is used to indicate a\n     * passage of time or a particular step of a process.\n     *\n     * @example\n     * import { BentoStatus, BentoStatusVariant } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStatus },\n     *     template: `\n     *          <bento-status :variant=\"BentoStatusVariant.RED\">\n     *              1 week ago\n     *          </bento-status>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-status',\n        components: { BentoTypography },\n        props: {\n            variant: {\n                type: String as PropType<BentoStatusVariant | `${BentoStatusVariant}`>,\n                required: true,\n                validator: (type: BentoStatusVariant) => Object.values(BentoStatusVariant).includes(type),\n            },\n        },\n        setup(props) {\n            const conditionalClass = computed(() => ({\n                [`b-status__indicator--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClass,\n\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./status.scss\" />\n"],"names":["BentoStatusVariant","BentoStatusVariant2","_sfc_main","defineComponent","BentoTypography","type","props","computed","BentoTypographyElement","BentoTypographyVariant"],"mappings":";;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UANQA,IAAAD,KAAA,CAAA,CAAA;ACkCZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAMA,WAAA;AAAA;AAAA,MAAA,kBAJAC,EAAA,OAAA;AAAA,QAAA,CAAA,wBAAAD,EAAA,SAAA,GAAA;AAAA,MACA,EAAA;AAAA;AAAA,MAKA,wBAAAE;AAAA,MAGA,wBAAAC;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"status.js","sources":["../src/components/status/status.types.ts","../src/components/status/status.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoStatusVariant {\n    BLUE = 'blue',\n    GREEN = 'green',\n    GREY = 'grey',\n    ORANGE = 'orange',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-status\" role=\"status\">\n        <span class=\"b-status__indicator\" :class=\"conditionalClass\" role=\"presentation\"></span>\n        <bento-typography class=\"b-status__label\" el=\"span\" variant=\"body\">\n            <slot></slot>\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoStatusVariant } from './status.types';\n\n    /**\n     * A Status component is used to indicate a\n     * passage of time or a particular step of a process.\n     *\n     * @example\n     * import { BentoStatus } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStatus },\n     *     template: `\n     *          <bento-status variant=\"red\">\n     *              1 week ago\n     *          </bento-status>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-status',\n        components: { BentoTypography },\n        props: {\n            variant: {\n                type: String as PropType<BentoStatusVariant | `${BentoStatusVariant}`>,\n                required: true,\n                validator: (type: BentoStatusVariant) => Object.values(BentoStatusVariant).includes(type),\n            },\n        },\n        setup(props) {\n            const conditionalClass = computed(() => ({\n                [`b-status__indicator--${props.variant}`]: true,\n            }));\n\n            return {\n                // Values\n                conditionalClass,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./status.scss\" />\n"],"names":["BentoStatusVariant","BentoStatusVariant2","_sfc_main","defineComponent","BentoTypography","type","props","computed"],"mappings":";;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,OAAA,QACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UANQA,IAAAD,KAAA,CAAA,CAAA;AC2BZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAMA,WAAA;AAAA;AAAA,MAAA,kBAJAC,EAAA,OAAA;AAAA,QAAA,CAAA,wBAAAD,EAAA,SAAA,GAAA;AAAA,MACA,EAAA;AAAA,IAKA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/index.0cf00b47.js";
+import { B as r, a as o } from "./chunks/index.bd734551.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem