@adyen/bento-vue2 1.42.0 → 1.44.0

package/dist/pagination.js

@@ -1,4 +1,4 @@
-import { B as n } from "./chunks/pagination.FbkfItkS.js";
+import { B as n } from "./chunks/pagination.CfwtuZ7R.js";
 export {
   n as BentoPagination
 };

package/dist/popover.js

@@ -1,4 +1,4 @@
-import { B as r, a as s } from "./chunks/popover.Uy-vuQq5.js";
+import { B as r, a as s } from "./chunks/popover.ZlmaSYms.js";
 export {
   r as BentoPopover,
   s as BentoPopoverPositions

package/dist/promo-banner.js

@@ -1,4 +1,4 @@
-import { p as r, B as a, a as e } from "./chunks/promo-banner.CGz3MVPw.js";
+import { p as r, B as a, a as e } from "./chunks/promo-banner.cTUF9seG.js";
 export {
   r as BentoPromoBanner,
   a as BentoPromoBannerColor,

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.DD6eA0jG.js";
-import { u as o } from "./chunks/dropdown.2tXfuDlU.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.lYuXPzBX.js";
+import { u as o } from "./chunks/dropdown.DC9un4VJ.js";
 export {
   r as BentoSearchBar,
   t as BentoSearchBarEvent,

package/dist/secondary-nav.js

@@ -1,4 +1,4 @@
-import { s as e } from "./chunks/secondary-nav.C56_jw55.js";
+import { s as e } from "./chunks/secondary-nav.CF6WPYn4.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/selection-card.js

@@ -1,4 +1,4 @@
-import { B as t, s as a, a as n } from "./chunks/selection-card-group.DwkH9xJd.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.CjuBQ2UA.js";
 export {
   t as BentoSelectionCard,
   a as BentoSelectionCardGroup,

package/dist/sidepanel.js

@@ -1,4 +1,4 @@
-import { a as n, B as o, s as t } from "./chunks/sidepanel.CRJN9Acz.js";
+import { a as n, B as o, s as t } from "./chunks/sidepanel.NUx7L5f1.js";
 export {
   n as BentoSidepanel,
   o as BentoSidepanelEvent,

package/dist/styles/bento-dark.css

@@ -145,6 +145,7 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
+  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
   --b-data-grid-column-hover-padding: 7px 15px;
@@ -1419,6 +1420,8 @@
   --b-data-grid-cell-padding: 14px var(--b-spacer-070);
   --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-nested-row-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);

package/dist/styles/bento-light.css

@@ -144,6 +144,7 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
+  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
   --b-data-grid-column-hover-padding: 7px 15px;
@@ -1417,6 +1418,8 @@
   --b-data-grid-cell-padding: 14px var(--b-spacer-070);
   --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-nested-row-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);

package/dist/styles/bento.css

@@ -144,6 +144,7 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
+  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
   --b-data-grid-column-hover-padding: 7px 15px;
@@ -1417,6 +1418,8 @@
   --b-data-grid-cell-padding: 14px var(--b-spacer-070);
   --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-nested-row-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);

package/dist/styles/legacy.css

@@ -180,6 +180,7 @@
   --b-data-grid-resizer-last-child-offset-right: -5px;
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
+  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-seperator-height: 100%;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 14px 15px 14px 15px;
@@ -1367,6 +1368,8 @@
   --b-data-grid-cell-hover-padding: var(--b-spacer-070) 7px var(--b-spacer-070) 15px;
   --b-data-grid-cell-padding: var(--b-spacer-070) var(--b-spacer-040) var(--b-spacer-070) var(--b-spacer-070);
   --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
+  --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-nested-row-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-color: var(--b-color-label-primary);

package/dist/styles/styleguide.css

@@ -144,6 +144,7 @@
   --b-data-grid-resizer-last-child-right: -4px;
   --b-data-grid-resizer-width: 8px;
   --b-data-grid-cell-hover-padding: 14px 15px;
+  --b-data-grid-row-nested-rows-loading-container-padding: 14px;
   --b-data-grid-column-separator-height: 100%;
   --b-data-grid-column-with-sorting-or-column-panel-hover-padding: 3px 15px;
   --b-data-grid-column-hover-padding: 7px 15px;
@@ -1472,6 +1473,8 @@
   --b-data-grid-cell-padding: 14px var(--b-spacer-070);
   --b-data-grid-cell-border: var(--b-border-width-s) solid var(--b-color-separator-primary);
   --b-data-grid-cell-background-color: var(--b-color-background-primary);
+  --b-data-grid-row-nested-row-hover: var(--b-color-background-secondary-hover);
+  --b-data-grid-row-nested-row-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-nested-slot-background-color: var(--b-color-background-secondary);
   --b-data-grid-row-highlighted-background-color: var(--b-color-background-selected);
   --b-data-grid-row-disabled-color: var(--b-color-label-primary);

package/dist/textarea.js

@@ -1,4 +1,4 @@
-import { B as o } from "./chunks/textarea.Y3yd_3ll.js";
+import { B as o } from "./chunks/textarea.F-JyRtIw.js";
 export {
   o as BentoTextarea
 };

package/dist/timeline.js

@@ -1,4 +1,4 @@
-import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.CCV4U3Zx.js";
+import { t, b as i, a, c as m, B as o, d as l } from "./chunks/timeline-item.BJyB8-Wv.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/tutorial.js

@@ -1,4 +1,4 @@
-import { t as r } from "./chunks/tutorial.4r7MKNEU.js";
+import { t as r } from "./chunks/tutorial.DFvMZAN5.js";
 export {
   r as BentoTutorial
 };

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.42.0",
+  "version": "1.44.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2367,6 +2367,15 @@
               },
               "default": "() =>\n    ({\n        variant: 'secondary',\n    } as BentoMenuButtonProps)"
             },
+            {
+              "name": "closeMenuOnItemSelect",
+              "description": "Controls if the menu should close when an item is clicked.\nDefaults to `true`.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
             {
               "name": "data",
               "required": true,
@@ -2403,6 +2412,15 @@
               },
               "default": "null"
             },
+            {
+              "name": "revertFocusToButton",
+              "description": "Returns focus to the menu button after popover is closed.\nDisable if focus management is delegated to the parent component.\nDefaults to `true`.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
             {
               "name": "teleport",
               "description": "Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node\n(or `dialog` if popover is inside a dialog).",
@@ -3549,6 +3567,15 @@
                 "type": "BentoButtonActionsList"
               }
             },
+            {
+              "name": "disableResponsiveBehavior",
+              "description": "The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "displayedActions",
               "description": "The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.",
@@ -4611,6 +4638,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "hasNestedRows",
+              "description": "Enables the nested content slot functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "highlightedRows",
               "description": "Highlighted items",
@@ -4737,6 +4773,15 @@
               },
               "default": "(_item: BentoDatagridDataItem) => true"
             },
+            {
+              "name": "shouldShowNestedRows",
+              "description": "Returns the nested rows for a given BentoDatagridDataItem.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridShouldShowNestedRowsFn"
+              },
+              "default": "(_item: BentoDatagridDataItem) => true"
+            },
             {
               "name": "sortBy",
               "description": "Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.\nIt does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.",
@@ -4777,6 +4822,9 @@
             {
               "name": "innerSlot"
             },
+            {
+              "name": "pagination-slot"
+            },
             {
               "name": "footer"
             }
@@ -4929,6 +4977,15 @@
                 "type": "number"
               }
             },
+            {
+              "name": "selectionIsIndeterminate",
+              "description": "The row selection checkbox indeterminate state.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "selectable",
               "description": "Determines if the row selection is enabled.",
@@ -5331,6 +5388,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "hasNestedRows",
+              "description": "Enables the nested content slot functionality.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "highlightedRows",
               "description": "Highlighted row IDs.",
@@ -5385,6 +5451,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "isNestedRow",
+              "description": "Determines if this row is nested inside another row.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "rowData",
               "required": true,
@@ -5403,6 +5478,15 @@
                 "type": "number"
               }
             },
+            {
+              "name": "rowId",
+              "description": "The row ID to be using for the ID attribute.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "undefined"
+            },
             {
               "name": "rowSetSize",
               "description": "The number of rows that this row is within.",
@@ -5447,6 +5531,15 @@
                 "type": "BentoDatagridShouldShowNestedContentFn"
               },
               "default": "(_item: BentoDatagridDataItem) => true"
+            },
+            {
+              "name": "shouldShowNestedRows",
+              "description": "Returns the nested rows for a given BentoDatagridDataItem.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoDatagridShouldShowNestedRowsFn"
+              },
+              "default": "(_item: BentoDatagridDataItem) => true"
             }
           ],
           "events": [
@@ -5462,9 +5555,17 @@
               "name": "select-row",
               "description": "Emitted when a row has been selected."
             },
+            {
+              "name": "select-nested-row",
+              "description": "Emitted when a nested row has been selected."
+            },
             {
               "name": "row-click",
               "description": "Emitted when a row has been clicked."
+            },
+            {
+              "name": "nested-content-toggled",
+              "description": "Emitted when a row with nested content is toggled"
             }
           ],
           "slots": [
@@ -7338,6 +7439,15 @@
           "name": "file-uploader-file-card-stub",
           "description": "",
           "attributes": [
+            {
+              "name": "errors",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "() => new Array<FileErrorType>()"
+            },
             {
               "name": "file",
               "required": false,
@@ -7370,7 +7480,8 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
             }
           ],
           "source": {
@@ -8939,6 +9050,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "closeMenuOnItemSelect",
+              "description": "If set to true, closes the menu when an item is clicked.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.42.0",
+  "version": "1.44.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,11 +32,11 @@
     "@floating-ui/core": "1.6.8",
     "@floating-ui/vue": "1.0.7",
     "@lezer/highlight": "1.2.1",
-    "@vueuse/core": "10.7.1",
+    "@vueuse/core": "11.3.0",
     "date-fns": "2.28.0",
     "focus-lock": "0.11.0",
     "uuid": "11.0.5",
-    "@adyen/bento-design-tokens": "1.42.0"
+    "@adyen/bento-design-tokens": "1.44.0"
   },
   "peerDependencies": {
     "vue": "~2.7",
@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@adyen/lume": "1.11.3",
+    "@axe-core/playwright": "4.9.0",
     "@codemirror/commands": "6.3.3",
     "@codemirror/lang-java": "6.0.1",
     "@codemirror/lang-javascript": "6.2.2",
@@ -99,12 +100,13 @@
     "vue": "2.7.16",
     "vue-demi": "0.14.10",
     "vue-docgen-web-types": "0.1.8",
+    "vue-eslint-parser": "9.3.2",
     "vue-i18n-bridge": "9.4.1",
     "vue-router": "3.6.4",
     "vue-style-loader": "4.1.3",
     "vue-template-compiler": "2.7.16",
     "vue-tsc": "1.0.24",
-    "@adyen/bento-cli": "0.2.1",
+    "@adyen/bento-cli": "0.2.2",
     "@adyen/bento-core": "0.0.1"
   },
   "optionalDependencies": {
@@ -139,6 +141,7 @@
     "test:list-changed": "TZ='Europe/Paris' vitest list --run --filesOnly --changed origin/main",
     "test:watch": "TZ='Europe/Paris' vitest watch",
     "e2e": "test/bin/e2e-docker.sh vue2",
+    "e2e:a11y": "pnpm run e2e:clean && playwright test -c ./playwright.integration.config.ts --project=accessibility",
     "e2e:changed": "test/bin/e2e-docker.sh vue2 --changed",
     "e2e:clean": "rm -rf playwright/.cache || true",
     "e2e:debug": "pnpm run e2e:ci --debug",

package/dist/assets/loading-button.css

@@ -1 +0,0 @@
-@keyframes spin-86f46480{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.b-loading-button--loading[data-v-86f46480]:hover{cursor:default}.b-loading-button--primary-loading[data-v-86f46480],.b-loading-button--primary-loading[data-v-86f46480]:hover{background-color:var(--b-loading-button-primary-loading-background-color)}.b-loading-button--primary-loading.b-loading-button--inverse[data-v-86f46480],.b-loading-button--inverse .b-loading-button--primary-loading[data-v-86f46480],.b-loading-button--primary-loading:hover.b-loading-button--inverse[data-v-86f46480],.b-loading-button--inverse .b-loading-button--primary-loading[data-v-86f46480]:hover{background-color:var(--b-loading-button-primary-loading-background-color-inverse)}.b-loading-button--primary-success[data-v-86f46480]{background-color:var(--b-loading-button-primary-success-background-color);color:var(--b-loading-button-primary-success-color)}.b-loading-button--primary-success[data-v-86f46480]:hover{background-color:var(--b-loading-button-primary-success-hover-background-color)}.b-loading-button--primary-success[data-v-86f46480]:active{background-color:var(--b-loading-button-primary-success-active-background-color)}.b-loading-button--primary-success[data-v-86f46480]:disabled{background-color:var(--b-loading-button-primary-success-disabled-background-color);color:var(--b-loading-button-primary-success-disabled-color)}.b-loading-button--secondary-loading[data-v-86f46480],.b-loading-button--secondary-loading[data-v-86f46480]:hover{background-color:var(--b-loading-button-secondary-loading-background-color);color:var(--b-loading-button-secondary-loading-color)}.b-loading-button--secondary-loading.b-loading-button--inverse[data-v-86f46480],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-86f46480],.b-loading-button--secondary-loading:hover.b-loading-button--inverse[data-v-86f46480],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-86f46480]:hover{background-color:var(--b-loading-button-secondary-loading-background-color-inverse)}.b-loading-button--secondary-loading.b-loading-button--inverse[data-v-86f46480],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-86f46480],.b-loading-button--secondary-loading:hover.b-loading-button--inverse[data-v-86f46480],.b-loading-button--inverse .b-loading-button--secondary-loading[data-v-86f46480]:hover{color:var(--b-loading-button-secondary-loading-color-inverse)}.b-loading-button--secondary-loading[data-v-86f46480]:hover:not(:focus),.b-loading-button--secondary-loading[data-v-86f46480]:hover:hover:not(:focus){box-shadow:none}.b-loading-button--secondary-success[data-v-86f46480]{background-color:var(--b-loading-button-secondary-success-background-color);border-color:var(--b-loading-button-secondary-success-border-color);color:var(--b-loading-button-secondary-success-color)}.b-loading-button--secondary-success[data-v-86f46480]:hover{border-color:var(--b-loading-button-secondary-success-hover-border-color);box-shadow:var(--b-loading-button-secondary-success-hover-box-shadow)}.b-loading-button--secondary-success[data-v-86f46480]:active{background-color:var(--b-loading-button-secondary-success-active-background-color);border-color:var(--b-loading-button-secondary-success-active-border-color)}.b-loading-button--secondary-success[data-v-86f46480]:disabled{background-color:var(--b-loading-button-secondary-success-disabled-background-color);border-color:var(--b-loading-button-secondary-success-disabled-border-color);box-shadow:unset;color:var(--b-loading-button-secondary-success-disabled-color)}.b-loading-button--tertiary-loading[data-v-86f46480],.b-loading-button--tertiary-loading[data-v-86f46480]:hover{background-color:var(--b-loading-button-tertiary-loading-background-color);color:var(--b-loading-button-tertiary-loading-color);text-decoration:var(--b-loading-button-tertiary-loading-text-decoration)}.b-loading-button__icon[data-v-86f46480]{display:inline-flex}

package/dist/chunks/action-bar.C1iwQWyj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.C1iwQWyj.js","sources":["../../src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\n                <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                    <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                        <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                    </bento-button>\n                </div>\n                <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                    {{ itemCounter }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                </bento-typography>\n                <bento-button-actions\n                    v-if=\"isConfirmationVariant\"\n                    :actions=\"confirmationActions\"\n                    class=\"b-action-bar__actions\"\n                    inverse\n                />\n                <button-actions-with-menu\n                    v-else\n                    :actions=\"actionsInternal\"\n                    class=\"b-action-bar__actions\"\n                    :displayed-actions=\"internalDisplayedActions\"\n                    menu-position=\"top-end\"\n                    inverse\n                />\n            </div>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected\n         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits([\"close\", \"cancel\", \"save\"]);\n\n    const { t, tc } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8OIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAL,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAvB,CAAA;AAGA,UAAAwB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAJ,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA2B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA3B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA2B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,IAAAH,KAAAiB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAP,KAAAc,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAb,IACIe,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/button-actions-with-menu.dp6C-PKX.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions-with-menu.dp6C-PKX.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div role=\"group\" class=\"b-button-actions-with-menu__container-wrapper\">\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu v-if=\"computedMenuActions.length\" :data=\"computedMenuActions\" :menu-position=\"menuPosition\" />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\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             * 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` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","provide","MENU_INVERSE_INJECTION_KEY","computedMenuActions","el"],"mappings":";;;;;;AAwJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA;AAEA,IAAAG,EAAAC,GAAAH,CAAA;AAEA,UAAAI,IAAAN;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAM,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;"}

package/dist/chunks/button-actions.Cpx4PQp0.js

@@ -1,111 +0,0 @@
-import { defineComponent as v, computed as o } from "vue";
-import { B as p } from "./button.CufUNBkv.js";
-import { B as f } from "./loading-button.CiPmvU7F.js";
-import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/button-actions.css";
-var l = /* @__PURE__ */ ((t) => (t.BUTTONS_END = "buttons-end", t.FILL_CONTAINER = "fill-container", t.SPACE_BETWEEN = "space-between", t.VERTICAL_STACK = "vertical-stack", t))(l || {}), d = /* @__PURE__ */ ((t) => (t.BUTTONS_START = "buttons-start", t))(d || {});
-const c = { ...l, ...d }, g = {}, y = /* @__PURE__ */ v({
-  ...g,
-  __name: "button-actions",
-  props: {
-    /**
-     * List of actions that will be used to render the buttons.
-     * First element in the list will be rendered as "primary".
-     * All elements after the first will be rendered as "secondary".
-     *
-     * Each object in the list should have a `title`, an `event` and
-     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-     *
-     * `title`: Button's text.
-     *
-     * `event`: Event triggered when clicking the Button.
-     *
-     * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
-     *
-     * @see BentoButton for a list of all the other props supported by each button action.
-     *
-     * ```
-     * [{
-     *   title: 'Primary',
-     *   event: () => { ... },
-     *   icon: FourPeopleIcon,
-     *   link: {
-     *           variant: 'default',
-     *           external: true,
-     *           to: 'https://www.adyen.com/'
-     *       },
-     *  }, {
-     *   title: 'Secondary',
-     *   event: () => { ... }
-     *   disabled: true,
-     *   variant: 'secondary',
-     *   critical: true
-     * }]
-     * ```
-     */
-    actions: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * Sets the Button Actions to color scheme inverse
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Defines the layout in which the button actions is presented.
-     * It can be one of:
-     *
-     * @values BUTTONS_START
-     * @values BUTTONS_END
-     * @values FILL_CONTAINER
-     * @values SPACE_BETWEEN
-     * @values VERTICAL_STACK
-     */
-    layout: {
-      type: String,
-      default: c.BUTTONS_END,
-      validator: (t) => Object.values(c).includes(t)
-    }
-  },
-  setup(t) {
-    const n = t, a = o(() => n.actions.slice().reverse()), r = (s) => {
-      const _ = n.actions.length - 1;
-      return s === _ ? "primary" : "secondary";
-    }, e = o(() => ({
-      [`b-button-actions--${n.layout}`]: !0
-    }));
-    return { __sfc: !0, props: n, reversedActionsList: a, generateButtonVariantByIndex: r, conditionalClasses: e, generateButtonEvents: (s) => (s == null ? void 0 : s.event) !== void 0 ? {
-      click: s.event
-    } : {}, isIconOnly: (s) => s.iconOnly && (s.iconLeft || s.iconRight || s.icon), BentoButton: p, BentoLoadingButton: f };
-  }
-});
-var B = function() {
-  var n = this, a = n._self._c, r = n._self._setupProxy;
-  return a("div", { staticClass: "b-button-actions" }, [a("div", { staticClass: "b-button-actions__container-wrapper", class: r.conditionalClasses, attrs: { role: "group" } }, n._l(r.reversedActionsList, function(e, i) {
-    return a("div", { key: i, staticClass: "b-button-actions__button-wrapper" }, [e.state ? a(r.BentoLoadingButton, n._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: n.inverse, state: e.state, variant: e.variant || r.generateButtonVariantByIndex(i) } }, r.generateButtonEvents(e)), [n._v(" " + n._s(e.title) + " ")]) : a(r.BentoButton, n._g({ attrs: { condensed: e.condensed, critical: e.critical, disabled: e.disabled, inverse: n.inverse, link: e.link, variant: e.variant || r.generateButtonVariantByIndex(i) }, scopedSlots: n._u([e.icon || e.iconLeft ? { key: "iconLeft", fn: function() {
-      return [a(e.icon || e.iconLeft, { tag: "component", attrs: { "svg-title": e.title } })];
-    }, proxy: !0 } : null, r.isIconOnly(e) ? null : { key: "default", fn: function() {
-      return [n._v(" " + n._s(e.title) + " ")];
-    }, proxy: !0 }, e.iconRight ? { key: "iconRight", fn: function() {
-      return [a(e.iconRight, { tag: "component", attrs: { "svg-title": e.title } })];
-    }, proxy: !0 } : null], null, !0) }, r.generateButtonEvents(e)))], 1);
-  }), 0)]);
-}, m = [], E = /* @__PURE__ */ u(
-  y,
-  B,
-  m,
-  !1,
-  null,
-  "d5e5a360"
-);
-const k = E.exports;
-export {
-  k as B,
-  l as a,
-  d as b,
-  c
-};
-//# sourceMappingURL=button-actions.Cpx4PQp0.js.map

package/dist/chunks/button-actions.Cpx4PQp0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions.Cpx4PQp0.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { BentoButtonProps } from '@/core/components/button/button.types';\nimport { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\nexport interface BentoButtonActionObject<IconType = object> extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: IconType;\n    iconLeft?: IconType;\n    iconRight?: IconType;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList<IconType = object> = Array<BentoButtonActionObject<IconType>>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n    <div class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n                <bento-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    <template v-if=\"!isIconOnly(button)\" #default>\n                        {{ button.title }}\n                    </template>\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import BentoButton from '../../button.vue';\n    import {\n        BentoButtonActionObject,\n        BentoButtonActionsLayout,\n        BentoButtonActionsList,\n    } from '@/core/components/button-actions/button-actions.types';\n    import { BentoLoadingButton } from '../loading-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         *\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` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon,\n         *   link: {\n         *           variant: 'default',\n         *           external: true,\n         *           to: 'https://www.adyen.com/'\n         *       },\n         *  }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         *   disabled: true,\n         *   variant: 'secondary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Sets the Button Actions to color scheme inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         * It can be one of:\n         *\n         * @values BUTTONS_START\n         * @values BUTTONS_END\n         * @values FILL_CONTAINER\n         * @values SPACE_BETWEEN\n         * @values VERTICAL_STACK\n         */\n        layout: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (layout: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(layout),\n        },\n    });\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button-actions/button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","__default__","reversedActionsList","computed","props","generateButtonVariantByIndex","actionIndex","lastActionIndex","conditionalClasses","button"],"mappings":";;;;;AAeY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAOL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCwIHG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/CAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAC,IAAA,CAAAC,MAAA;AACI,YAAAC,IAAAH,EAAA,QAAA,SAAA;AACA,aAAAE,MAAAC,IAAA,YAAA;AAAA,IAAqD,GAGzDC,IAAAL,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,MAAA,EAAA,GAAA;AAAA,IACA,EAAA;wIAG3C,CAAAK,OAAAA,KAAA,gBAAAA,EAAA,WAAA,SAAA;AAAA,MAEU,OAAAA,EAAA;AAAA,IACkB,IAAA,CAAA,eAI5B,CAAAA,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;"}