@adyen/bento-vue2 1.43.0 → 1.45.0

package/dist/info-icon.js

@@ -1,4 +1,4 @@
-import { B as e } from "./chunks/info-icon.p-28zHUJ.js";
+import { B as e } from "./chunks/info-icon.0d0GzDe2.js";
 export {
   e as BentoInfoIcon
 };

package/dist/input-field-password.js

@@ -1,4 +1,4 @@
-import { i as a, m as s, r as i, b as c, c as u, a as o } from "./chunks/input-field-password.BmfOGkrH.js";
+import { i as a, m as s, r as i, b as c, c as u, a as o } from "./chunks/input-field-password.HRDEb0jL.js";
 export {
   a as BentoInputFieldPassword,
   s as minLength,

package/dist/input-field.js

@@ -1,4 +1,4 @@
-import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.CHD3Fzzg.js";
+import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.D6N2kt7s.js";
 export {
   n as BentoInputField,
   a as BentoInputFieldElementPosition,

package/dist/inspector.js

@@ -1,4 +1,4 @@
-import { i as t, B as n } from "./chunks/inspector.types.DaY6OOzz.js";
+import { i as t, B as n } from "./chunks/inspector.types.2YEArjPi.js";
 export {
   t as BentoInspector,
   n as BentoInspectorSizeOptions

package/dist/internal.js

@@ -1,35 +1,41 @@
-import { a as e, b as r, C as t } from "./chunks/calendar.B9WZ8ub3.js";
-import { C as p, a as l } from "./chunks/copy.DgzxvExj.js";
-import { C as x } from "./chunks/controls-group.J8shO_JL.js";
-import { B as m, b as n, a as f, D as E } from "./chunks/dialog-page.CplkzZGZ.js";
-import { E as d, F as I } from "./chunks/error-message.B7uoqQpq.js";
-import { F as T } from "./chunks/fixed-scroller.B880PL1J.js";
-import { G as u, a as O } from "./chunks/grid-layout.HvTAa4to.js";
-import { b as g, c as y, u as A } from "./chunks/use-cached-selected-values.CAlfyb_L.js";
-import { L as F } from "./chunks/listbox-option-tag.BnX0H4HE.js";
-import { B as N } from "./chunks/teleport.CQKBJZU5.js";
-import { T as c } from "./chunks/tooltip.DH8TqpYV.js";
+import { a as e, b as r, C as t } from "./chunks/calendar.BouORZfb.js";
+import { C as p, a as i } from "./chunks/copy.DN0tClPm.js";
+import { C as f } from "./chunks/controls-group.CnXzOQkX.js";
+import { B as x, b as C, a as I, D as m } from "./chunks/dialog-page.DcJ7LaOE.js";
+import { E as T, F as _ } from "./chunks/error-message.Ccc1sTTp.js";
+import { F as G } from "./chunks/fixed-scroller.IPM3AzHS.js";
+import { G as u, a as d } from "./chunks/grid-layout.HvTAa4to.js";
+import { I as L } from "./chunks/info-icon-with-popover.DEjsASNU.js";
+import { b, c, u as g } from "./chunks/use-cached-selected-values.impKjAIS.js";
+import { L as D } from "./chunks/listbox-option-tag.Co0ycEdQ.js";
+import { B as P } from "./chunks/teleport.B5fwsT5y.js";
+import { T as M } from "./chunks/tooltip.R2sqydIE.js";
+import { B as h } from "./chunks/button-actions-with-menu.ieopdfI7.js";
+import { f as J } from "./chunks/button-actions.CtFB6iRj.js";
 export {
-  m as BentoDialogPageAnimation,
-  g as BentoListbox,
-  N as BentoTeleport,
+  J as BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY,
+  x as BentoDialogPageAnimation,
+  b as BentoListbox,
+  P as BentoTeleport,
+  h as ButtonActionsWithMenu,
   e as Calendar,
   r as CalendarEvent,
   t as CalendarFirstDayOfWeek,
-  x as ControlsGroup,
+  f as ControlsGroup,
   p as Copy,
-  l as CopyTooltipState,
-  n as DIALOG_PAGE_CONFIG_INJECTION_KEY,
-  f as DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,
-  E as DialogPage,
-  d as ErrorMessage,
-  I as FieldLabel,
-  T as FixedScroller,
+  i as CopyTooltipState,
+  C as DIALOG_PAGE_CONFIG_INJECTION_KEY,
+  I as DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,
+  m as DialogPage,
+  T as ErrorMessage,
+  _ as FieldLabel,
+  G as FixedScroller,
   u as GridLayout,
-  O as GridLayoutContainerType,
-  F as ListboxOptionTag,
-  c as Tooltip,
-  y as useCachedSelectedValues,
-  A as useMultiLevelItems
+  d as GridLayoutContainerType,
+  L as InfoIconWithPopover,
+  D as ListboxOptionTag,
+  M as Tooltip,
+  c as useCachedSelectedValues,
+  g as useMultiLevelItems
 };
 //# sourceMappingURL=internal.js.map

package/dist/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { l as t, a as e } from "./chunks/layout-row.DzS_XyyF.js";
+import { l as t, a as e } from "./chunks/layout-row.BfS-cPky.js";
 export {
   t as BentoLayout,
   e as BentoLayoutRow

package/dist/link.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/link.v-y0fKjn.js";
+import { B as o, a as t } from "./chunks/link.UOEUR35A.js";
 export {
   o as BentoLink,
   t as BentoLinkVariant

package/dist/menu.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/menu.N41WnXc8.js";
+import { B as o, a as t } from "./chunks/menu.CLaN9Eys.js";
 export {
   o as BentoMenu,
   t as BentoMenuEvent

package/dist/modal-fullscreen.js

@@ -1,4 +1,4 @@
-import { m as o, B as a } from "./chunks/modal-fullscreen.BbNe6M9T.js";
+import { m as o, B as a } from "./chunks/modal-fullscreen.B-qr1Szh.js";
 export {
   o as BentoModalFullscreen,
   a as BentoModalFullscreenPage

package/dist/modal.js

@@ -1,5 +1,5 @@
-import { d as e, f as t, g as n, B as l, e as B, c as d, a as M, b as s } from "./chunks/base-modal.DroVbSCn.js";
-import { B as i } from "./chunks/modal.Cb4zg5fN.js";
+import { d as e, f as t, g as n, B as l, e as B, c as d, a as M, b as s } from "./chunks/base-modal.4JSNBM4T.js";
+import { B as i } from "./chunks/modal.wU3uUJKq.js";
 export {
   i as BentoModal,
   e as BentoModalColumnLayoutVariant,

package/dist/pagination.js

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

package/dist/payment-method.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/payment-method.CoXB0ZAW.js";
+import { B as t } from "./chunks/payment-method.UaERFtej.js";
 import { B as m } from "./chunks/payment-method.types.CJKfZQN5.js";
 export {
   t as BentoPaymentMethod,

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.DsUymZWJ.js";
 export {
   r as BentoPopover,
   s as BentoPopoverPositions

package/dist/popper-container.js

@@ -1,4 +1,4 @@
-import { P as n, c as a, d as i, a as r, b as p } from "./chunks/popper-container.CnWphJTN.js";
+import { P as n, c as a, d as i, a as r, b as p } from "./chunks/popper-container.B1iB2ovW.js";
 export {
   n as PopperContainer,
   a as PopperContainerAriaRole,

package/dist/promo-banner.js

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

package/dist/radio-group.js

@@ -1,5 +1,5 @@
-import { b as t, B as e, a as n } from "./chunks/radio-group.EnMXbuly.js";
-import { R as B } from "./chunks/radio-input.q980f8Uf.js";
+import { b as t, B as e, a as n } from "./chunks/radio-group.DMob8x2J.js";
+import { R as B } from "./chunks/radio-input.C1DZbkcT.js";
 export {
   t as BentoRadioButton,
   B as BentoRadioButtonStateClass,

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.BtFX4039.js";
-import { u as o } from "./chunks/dropdown.BfzsI2Th.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.rubkdbcD.js";
+import { u as o } from "./chunks/dropdown.BqsoncJr.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.DtnWRhFW.js";
+import { s as e } from "./chunks/secondary-nav.DKSjc5bn.js";
 export {
   e as BentoSecondaryNav
 };

package/dist/segmented-control.js

@@ -1,4 +1,4 @@
-import { B as t } from "./chunks/segmented-control.CVeUROYR.js";
+import { B as t } from "./chunks/segmented-control.DL0W7lJ_.js";
 import { B as r } from "./chunks/segmented-control.types.BHRLV8KU.js";
 export {
   t as BentoSegmentedControl,

package/dist/selection-card.js

@@ -1,4 +1,4 @@
-import { B as t, s as a, a as n } from "./chunks/selection-card-group.B6XXbJsv.js";
+import { B as t, s as a, a as n } from "./chunks/selection-card-group.iYyZ9yX4.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.CQnLpV8A.js";
 export {
   n as BentoSidepanel,
   o as BentoSidepanelEvent,

package/dist/status.js

@@ -1,4 +1,4 @@
-import { s, B as o } from "./chunks/status.types.B0jtv0c7.js";
+import { s, B as o } from "./chunks/status.types.Cv6hHRMu.js";
 export {
   s as BentoStatus,
   o as BentoStatusVariant

package/dist/stepper.js

@@ -1,4 +1,4 @@
-import { a as p, s as o, B as a, b as n } from "./chunks/step.5g9BIi15.js";
+import { a as p, s as o, B as a, b as n } from "./chunks/step.BsIdWhaZ.js";
 export {
   p as BentoStep,
   o as BentoStepper,

package/dist/structured-list.js

@@ -1,4 +1,4 @@
-import { B as r, a as o } from "./chunks/structured-list-item.BEhWyaVP.js";
+import { B as r, a as o } from "./chunks/structured-list-item.BhBbmkbw.js";
 export {
   r as BentoStructuredList,
   o as BentoStructuredListItem

package/dist/summary-grid.js

@@ -1,4 +1,4 @@
-import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid-item-custom.CSXo4NjY.js";
+import { s as r, a as t, e as a, b as o, c as i, B as n, d as u, f as d } from "./chunks/summary-grid-item-custom.CicAOBVQ.js";
 export {
   r as BentoSummaryGrid,
   t as BentoSummaryGridItemAmount,

package/dist/tabs.js

@@ -1,4 +1,4 @@
-import { B as e, a as s } from "./chunks/tabs.Casntai-.js";
+import { B as e, a as s } from "./chunks/tabs.9kObZry9.js";
 export {
   e as BentoTab,
   s as BentoTabs

package/dist/tag.js

@@ -1,4 +1,4 @@
-import { B as t, a as e } from "./chunks/tag.wTXg-O7i.js";
+import { B as t, a as e } from "./chunks/tag.-YNhsBv7.js";
 export {
   t as BentoTag,
   e as BentoTagVariant

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.Cf21WMwL.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.Cu5b-Mqj.js";
 export {
   t as BentoTimeline,
   i as BentoTimelineGapUnit,

package/dist/toast.js

@@ -1,4 +1,4 @@
-import { t as a } from "./chunks/toast.BEipTIrz.js";
+import { t as a } from "./chunks/toast.DgJbW9CL.js";
 export {
   a as BentoToast
 };

package/dist/toggle.js

@@ -1,4 +1,4 @@
-import { B as a, b as g, a as s } from "./chunks/toggle.INRYdQzz.js";
+import { B as a, b as g, a as s } from "./chunks/toggle.CnS7qszG.js";
 export {
   a as BentoToggle,
   g as BentoToggleLabelPosition,

package/dist/tutorial.js

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

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, c as e, b as r, a as y } from "./chunks/typography.Bu_WAKdf.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/typography.J1v_SPG3.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.43.0",
+  "version": "1.45.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.",
@@ -7412,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,
@@ -7444,7 +7480,8 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "undefined"
             }
           ],
           "source": {
@@ -8055,7 +8092,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/header/components/info-icon-with-popover/info-icon-with-popover.vue",
+            "module": "./src/components/internal/info-icon-with-popover/info-icon-with-popover.vue",
             "symbol": "default"
           }
         },
@@ -9013,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.43.0",
+  "version": "1.45.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
     "date-fns": "2.28.0",
     "focus-lock": "0.11.0",
     "uuid": "11.0.5",
-    "@adyen/bento-design-tokens": "1.43.0"
+    "@adyen/bento-design-tokens": "1.45.0"
   },
   "peerDependencies": {
     "vue": "~2.7",
@@ -92,7 +92,8 @@
     "react-dom": "18.3.1",
     "sass": "1.54.6",
     "sass-loader": "12.6.0",
-    "ts-patch": "3.3.0",
+    "tsc-alias": "1.8.11",
+    "typescript": "5.6.3",
     "vite": "5.4.16",
     "vite-plugin-dynamic-import": "1.5.0",
     "vite-plugin-static-copy": "0.15.0",
@@ -106,8 +107,8 @@
     "vue-style-loader": "4.1.3",
     "vue-template-compiler": "2.7.16",
     "vue-tsc": "1.0.24",
-    "@adyen/bento-cli": "0.2.2",
-    "@adyen/bento-core": "0.0.1"
+    "@adyen/bento-core": "0.0.1",
+    "@adyen/bento-cli": "0.2.2"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"
@@ -120,7 +121,7 @@
     "build:prod": "pnpm run clean:build && pnpm run build:type-check && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
     "build:prod:plugin": "pnpm run clean:build && vue-tsc -p ../core/tsconfig.json && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
     "build:type-check": "vue-tsc --noEmit -p ./tsconfig.build.json",
-    "build:types": "vue-tsc -p ./tsconfig.d.json && pnpm run build:types:api-extractor && pnpm run copy-components-defs",
+    "build:types": "vue-tsc -p ./tsconfig.d.json && tsc-alias -p ./tsconfig.d.json && pnpm run build:types:api-extractor && pnpm run copy-components-defs",
     "build:types:api-extractor": "api-extractor run --local --verbose && pnpm prettier dist/@types/index.d.ts -w && rm -rf dist/@types/packages",
     "copy-components-defs": "cp src/components.d.ts dist/@types",
     "build:webtypes": "vue-docgen-web-types --outFile=./dist/web-types.json",

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.kPPYSgQK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.kPPYSgQK.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/base-button.4UYC3kp2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-button.4UYC3kp2.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,WAAA,EAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

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;;;;;;;;;;;;;;;;"}