@adyen/bento-vue2 1.57.1 → 1.58.0

package/dist/chunks/{footer-actions.CWOEDPKJ.js.map → footer-actions.Cn-793_Z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"footer-actions.CWOEDPKJ.js","sources":["../../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__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,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.Cn-793_Z.js","sources":["../../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__","actions","destructiveActions","toRefs","props","alignedActions","computed","rightAlignedButtons","BentoButtonVariant","onMounted"],"mappings":";;;;;;AA+HI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAlDA,EAAA,SAAAC,GAAA,oBAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAN,EAAA,MAAA,SAAA,IAAAA,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAA,EAAA,MAAA,SAAA,CAAA;AAIA,aAAAM,EAAA,CAAA,EAAA,WAAAL,EAAA,SAAAK,EAAA,CAAA,EAAA,UAEA;AAAA,QAAO,aAAAN,EAAA,MAAA,WAAA,IAAA;AAAA,UAGO;AAAA,YACI,GAAAA,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA;AAAA,YAC6C,SAAAO,EAAA;AAAA,UACb;AAAA,QAChC,IAAA;AAAA,QAEJ,cAAA,CAAA,GAAAD,CAAA;AAAA,MAC2B;AAAA,IACzC,CAAA;AAGJ,WAAAE,EAAA,MAAA;AACI,UAAAL,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.B8ncHkZt.js → header-with-views.BTd57MWZ.js}

@@ -1,14 +1,14 @@
 import { ref as c, reactive as ke, computed as T, watch as U, nextTick as n1, defineComponent as v1, toRef as Re, onMounted as _e, useSlots as Se } from "vue";
 import { B as _1 } from "./button.BuD-IsW5.js";
-import { B as Ce } from "./checkbox.CkaV8-b-.js";
-import { B as fe } from "./menu.DZEDTBYV.js";
-import { B as Pe } from "./modal.DDF63uBR.js";
-import { B as C1 } from "./popover.DXo3nXew.js";
+import { B as Ce } from "./checkbox.DCIphKqu.js";
+import { B as fe } from "./menu.Dkesc658.js";
+import { B as Pe } from "./modal.bgya0ObK.js";
+import { B as C1 } from "./popover.CuOrBXcF.js";
 import { B as pe } from "./typography.J1v_SPG3.js";
 import { u as t1 } from "./use-click-outside.BnhTgpSt.js";
 import { u as De } from "./use-has-slot.C9lQZ6nz.js";
 import { g as s1 } from "./generate-uid.NJ8tVoha.js";
-import { B as Ie } from "./button-actions-with-menu.CDLJMdJh.js";
+import { B as Ie } from "./button-actions-with-menu.BHmj0Xvn.js";
 import { u as l1 } from "./i18n.BQkEbtPM.js";
 import { B as Te } from "./bin.DuebwJYu.js";
 import { D as Oe } from "./dot.CnkXzRn3.js";
@@ -17,13 +17,14 @@ import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { R as Ae } from "./refresh.Bc9FzGjJ.js";
 import { a as ge, o as Fe } from "./index.oJzeCMPe.js";
 import { B as Ee } from "./divider.Cc4JFWG_.js";
-import { B as Be } from "./input-field.rHXIJKN8.js";
+import { B as Be } from "./input-field.CP8Qui6G.js";
+import "./index.Cl4_42j5.js";
 import { d as Ue } from "./debounce.DUTu11PS.js";
-import { F as Ne } from "./error-message.JskAm-Td.js";
+import { F as Ne } from "./error-message.dQtl9mYG.js";
 import { B as f1 } from "./toggle-button.ChDbeBZ8.js";
-import { B as Ge } from "./button-actions.DUn_iPDm.js";
+import { B as Ge } from "./button-actions.V0te_IrY.js";
 import { u as e1 } from "./on-click-outside.D9aY9g8G.js";
-import { I as Ke } from "./info-icon-with-popover.Cfng_pMj.js";
+import { I as Ke } from "./info-icon-with-popover.B9QgNl-S.js";
 import { u as Ye } from "./use-bento-toast-controller.Cn_2Eogn.js";
 import "../assets/header-with-views.css";
 let H1 = 0;
@@ -1528,8 +1529,8 @@ var t7 = function() {
   null,
   "4e06444a"
 );
-const R7 = a7.exports;
+const S7 = a7.exports;
 export {
-  R7 as h
+  S7 as h
 };
-//# sourceMappingURL=header-with-views.B8ncHkZt.js.map
+//# sourceMappingURL=header-with-views.BTd57MWZ.js.map