@adyen/bento-vue3 1.57.0 → 1.58.0

package/dist/chunks/{footer-actions.CQARYj4Q.js → footer-actions.DqKdjjjh.js}

@@ -1,7 +1,7 @@
 import { defineComponent as d, toRefs as f, computed as p, onMounted as _, createElementBlock as g, openBlock as r, createElementVNode as m, createBlock as l, createCommentVNode as s, createVNode as v, unref as i, withCtx as h, createTextVNode as b, toDisplayString as y } from "vue";
 import { B } from "./typography.DN5eC5ch.js";
 import { a as A } from "./button.CVZJTZv0.js";
-import { B as c } from "./button-actions.DWGBFisz.js";
+import { B as c } from "./button-actions.WnxN4KnV.js";
 import { _ as w } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/footer-actions.css";
 const N = { class: "b-footer-actions" }, k = { class: "b-footer-actions__wrapper" }, x = {}, E = /* @__PURE__ */ d({
@@ -107,4 +107,4 @@ const N = { class: "b-footer-actions" }, k = { class: "b-footer-actions__wrapper
 export {
   F
 };
-//# sourceMappingURL=footer-actions.CQARYj4Q.js.map
+//# sourceMappingURL=footer-actions.DqKdjjjh.js.map

package/dist/chunks/{footer-actions.CQARYj4Q.js.map → footer-actions.DqKdjjjh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"footer-actions.CQARYj4Q.js","sources":["../../../vue2/src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, PropType, toRefs } from 'vue';\n    import { BentoButtonActions, BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\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         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\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         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","props","__props","actions","destructiveActions","toRefs","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;qFA+HIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnGA,UAAAC,IAAAC,GAiDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAL,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAK,EAAA,CAAA,EAAA,WAAAJ,EAAA,SAAAI,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAL,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAM,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAT,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"footer-actions.DqKdjjjh.js","sources":["../../../vue2/src/components/internal/footer-actions/footer-actions.vue"],"sourcesContent":["<template>\n    <div class=\"b-footer-actions\">\n        <div class=\"b-footer-actions__wrapper\">\n            <bento-typography v-if=\"actionsLabel\" class=\"b-footer-actions__label\" el=\"span\" variant=\"body\" stronger>\n                {{ actionsLabel }}\n            </bento-typography>\n\n            <bento-button-actions\n                v-if=\"alignedActions.leftAligned\"\n                class=\"b-footer-actions__left-group\"\n                :actions=\"alignedActions.leftAligned\"\n                layout=\"buttons-start\"\n            ></bento-button-actions>\n\n            <bento-button-actions\n                class=\"b-footer-actions__right-group\"\n                :actions=\"alignedActions.rightAligned\"\n                layout=\"buttons-end\"\n            ></bento-button-actions>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoTypography } from '@/components/typography';\n    import { computed, onMounted, PropType, toRefs } from 'vue';\n    import { BentoButtonActions, BentoButtonActionsList, BentoButtonVariant } from '@/components/button';\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         * But you may change the color of 1-st action to red with 'critial' key\n         * Not more than 3 action buttons can be provided\n         * Or 2 action buttons and 1 Label for them\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',2\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\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         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n    });\n\n    const { actions, destructiveActions } = toRefs(props);\n\n    const alignedActions = computed(() => {\n        const rightAlignedButtons =\n            actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1);\n\n        // Add red color to the 1-st Action button\n        rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical;\n\n        return {\n            leftAligned:\n                actions.value.length === 3\n                    ? [\n                          {\n                              ...actions.value[actions.value.length - 1],\n                              variant: BentoButtonVariant.SECONDARY,\n                          },\n                      ]\n                    : null,\n            rightAligned: [...rightAlignedButtons],\n        };\n    });\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 3) {\n            throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant');\n        }\n\n        if (props.actionsLabel && props.actions && props.actions.length > 2) {\n            throw new Error(\n                'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n    * Internal component to handle the logic of displaying actions in default Modal and Sidepanel\n\n    * @example\n    * import { FooterActions } from '@/components/internal/footer-actions';\n    *\n    * export default {\n    *     components: { FooterActions },\n    *     template: `\n    *          <footer-actions :actions=\"BentoButtonActionsList\" actions-label=\"Label\" :destructive-actions=\"true\" />\n    *     `\n    * }\n    */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./footer-actions.scss\" />\n"],"names":["__default__","props","__props","actions","destructiveActions","toRefs","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;qFA+HIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnGA,UAAAC,IAAAC,GAiDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAEAK,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAL,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAK,EAAA,CAAA,EAAA,WAAAJ,EAAA,SAAAI,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAL,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAM,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAT,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,+EAAA;AAGJ,UAAAA,EAAA,gBAAAA,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{header-with-views.WANsHlGK.js → header-with-views.B-d7Y1qK.js}

@@ -1,15 +1,15 @@
 import { createElementBlock as o, openBlock as l, mergeProps as m, createCommentVNode as v, createElementVNode as s, toDisplayString as c, createStaticVNode as T1, ref as g, reactive as te, computed as Q, watch as i1, nextTick as Z1, defineComponent as P1, toRef as se, withKeys as q, withModifiers as p1, createVNode as S, createBlock as F, unref as n, withCtx as y, Fragment as $1, renderList as m1, normalizeClass as o1, createTextVNode as J, resolveDynamicComponent as L1, onMounted as N5, useSlots as ie, createSlots as h1, renderSlot as le } from "vue";
 import { B as v1 } from "./button.CVZJTZv0.js";
-import { B as F5 } from "./checkbox.CMuObeL7.js";
-import { B as G5 } from "./menu.BOj630ue.js";
-import { _ as W1 } from "./modal.vue_vue_type_script_setup_true_lang.y7pMBxB0.js";
-import { B as _1 } from "./popover.BzzdIK19.js";
+import { B as F5 } from "./checkbox.H3fMdGno.js";
+import { B as G5 } from "./menu.BmSWTWp2.js";
+import { _ as W1 } from "./modal.vue_vue_type_script_setup_true_lang.hMWefloS.js";
+import { B as _1 } from "./popover.DiIZe9RM.js";
 import { B as C1 } from "./typography.DN5eC5ch.js";
 import { u as V1 } from "./use-click-outside.BnhTgpSt.js";
 import { u as ne } from "./use-has-slot.B7eQSabc.js";
 import { u as oe } from "./use-bento-toast-controller.D3LA1FCd.js";
 import { g as b1 } from "./generate-uid.NJ8tVoha.js";
-import { B as ae } from "./button-actions-with-menu.CkyIwzNi.js";
+import { B as ae } from "./button-actions-with-menu.DVvlTcnv.js";
 import { u as k1 } from "./i18n.B6g5VX0q.js";
 import { B as re } from "./bin.CA6UQCNZ.js";
 import { D as ue } from "./dot.BW-xtyjC.js";
@@ -17,14 +17,14 @@ import { D as ue } from "./dot.BW-xtyjC.js";
 import { _ as w } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { R as de } from "./refresh.C20ROVDS.js";
 import { a as B5, o as Ce } from "./index.CVpo3mlK.js";
-import { I as pe } from "./info-icon-with-popover.J10ERGQ2.js";
+import { I as pe } from "./info-icon-with-popover.CZGbqWFt.js";
 import { u as w1 } from "./on-click-outside.D9aY9g8G.js";
 import { B as A1 } from "./toggle-button.Dv1t15yj.js";
 import { B as ve } from "./divider.qUOSAbU6.js";
-import { B as ce } from "./input-field.CtV60WoD.js";
+import { B as ce } from "./input-field.CUfSQLYO.js";
 import { d as fe } from "./debounce.DUTu11PS.js";
-import { F as ge } from "./error-message.CjdvgIAh.js";
-import { B as he } from "./button-actions.DWGBFisz.js";
+import { F as ge } from "./error-message.KTNWtFyf.js";
+import { B as he } from "./button-actions.WnxN4KnV.js";
 import "../assets/header-with-views.css";
 let x1 = 0;
 const we = {
@@ -2351,4 +2351,4 @@ const q5 = {
 export {
   q7 as h
 };
-//# sourceMappingURL=header-with-views.WANsHlGK.js.map
+//# sourceMappingURL=header-with-views.B-d7Y1qK.js.map