@adyen/bento-vue2 1.65.0 → 1.67.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.65.0",
+  "version": "1.67.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1116,43 +1116,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-date",
-          "description": "A Date component is used to display a formatted date value.",
-          "attributes": [
-            {
-              "name": "date",
-              "description": "The date to format. The data can be supplied as:\n- a Date object.\n- a number of milliseconds elapsed since the epoch.\n- a date string e.g. '2023-07-31T10:55:22+02:00'.",
-              "value": {
-                "kind": "expression",
-                "type": "date|number|string"
-              },
-              "default": "null"
-            },
-            {
-              "name": "format",
-              "description": "The string format of the date to be displayed",
-              "value": {
-                "kind": "expression",
-                "type": "BentoDateFormat | `${BentoDateFormat}`"
-              },
-              "default": "BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD"
-            },
-            {
-              "name": "disableTypography",
-              "description": "Disable the default typography for the component. Only use this when the component is inside another typography",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "source": {
-            "module": "./src/components/date/date.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-date-filter",
           "description": "The Date filter displays a calendar that allows\nto select a single date.",
@@ -1757,38 +1720,13 @@
           "slots": [
             {
               "name": "infoIconTooltipContent"
-            }
-          ],
-          "source": {
-            "module": "./src/components/header/header.vue",
-            "symbol": "default"
-          }
-        },
-        {
-          "name": "bento-info-icon",
-          "description": "",
-          "attributes": [
-            {
-              "name": "tooltipText",
-              "required": true,
-              "description": "Text showed in the info-icon tooltip on hover",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
             },
             {
-              "name": "tooltipPosition",
-              "description": "Position the tooltip should take if space is available. Defaults to 'auto'",
-              "value": {
-                "kind": "expression",
-                "type": "PopperContainerPosition | `${PopperContainerPosition}`"
-              },
-              "default": "PopperContainerPosition.AUTO"
+              "name": "description"
             }
           ],
           "source": {
-            "module": "./src/components/info-icon/info-icon.vue",
+            "module": "./src/components/header/header.vue",
             "symbol": "default"
           }
         },
@@ -2793,15 +2731,17 @@
             },
             {
               "name": "actionsLayout",
+              "required": false,
               "description": "Defines the layout in which the button actions is presented.",
               "value": {
                 "kind": "expression",
-                "type": "`${BentoButtonActionsLayout}`"
+                "type": "TSLiteralType"
               },
-              "default": "BentoButtonActionsLayout.BUTTONS_END"
+              "default": "'buttons-end'"
             },
             {
               "name": "disableResponsiveBehavior",
+              "required": false,
               "description": "The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.",
               "value": {
                 "kind": "expression",
@@ -2811,6 +2751,7 @@
             },
             {
               "name": "displayedActions",
+              "required": false,
               "description": "The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.",
               "value": {
                 "kind": "expression",
@@ -2820,6 +2761,7 @@
             },
             {
               "name": "inverse",
+              "required": false,
               "description": "Set inverse color scheme to buttons and menu",
               "value": {
                 "kind": "expression",
@@ -2829,6 +2771,7 @@
             },
             {
               "name": "hideDisplayedActionsBreakpoint",
+              "required": false,
               "description": "The min-width breakpoint to hide the button actions.\n\nFor example, a value of 200 means that buttons will be hidden at <= 200px.\n\nDefaults to 0 i.e. it shows all buttons.",
               "value": {
                 "kind": "expression",
@@ -2838,10 +2781,11 @@
             },
             {
               "name": "menuPosition",
+              "required": false,
               "description": "The position of where the menu should open.",
               "value": {
                 "kind": "expression",
-                "type": "BentoPopoverPositions | `${BentoPopoverPositions}`"
+                "type": "union"
               },
               "default": "'bottom-start'"
             }
@@ -4002,19 +3946,21 @@
         },
         {
           "name": "copy",
-          "description": "An internal button component that copies text to the user's clipboard.",
+          "description": "",
           "attributes": [
             {
               "name": "button",
+              "required": false,
               "description": "Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.",
               "value": {
                 "kind": "expression",
                 "type": "BentoCopyButtonProps"
               },
-              "default": "() =>\n    ({\n        variant: 'tertiary',\n    } as BentoCopyButtonProps)"
+              "default": "() => (({\n    variant: 'tertiary'\n}) as BentoCopyButtonProps)"
             },
             {
               "name": "buttonText",
+              "required": false,
               "description": "Sets the button text of the copy button.",
               "value": {
                 "kind": "expression",
@@ -4033,6 +3979,7 @@
             },
             {
               "name": "tooltipPosition",
+              "required": false,
               "description": "Position the tooltip should take if space is available. Defaults to 'top'",
               "value": {
                 "kind": "expression",
@@ -4041,6 +3988,12 @@
               "default": "PopperContainerPosition.TOP"
             }
           ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Emitted when the copy button is clicked."
+            }
+          ],
           "slots": [
             {
               "name": "default"
@@ -4330,7 +4283,7 @@
             },
             {
               "name": "fitContent",
-              "description": "Allows the grid to be rendered inside a confined space.",
+              "description": "Allows the grid to be rendered inside a confined space.\nThis makes the data-grid expand to fill the height of its parent container, with the grid body becoming scrollable.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5067,6 +5020,30 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "data-grid-fit-content-in-card-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/__tests__/data-grid-fit-content-in-card-example.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "data-grid-fit-content-in-modal-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/__tests__/data-grid-fit-content-in-modal-example.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "data-grid-fit-content-in-modal-fullscreen-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/data-grid/__tests__/data-grid-fit-content-in-modal-fullscreen-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "data-grid-interactive-elements-in-cells-and-headers",
           "description": "",
@@ -5517,6 +5494,46 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "date",
+          "description": "",
+          "attributes": [
+            {
+              "name": "date",
+              "required": false,
+              "description": "The date to format. The data can be supplied as:\n- a Date object.\n- a number of milliseconds elapsed since the epoch.\n- a date string e.g. '2023-07-31T10:55:22+02:00'.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "format",
+              "required": false,
+              "description": "The string format of the date to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD"
+            },
+            {
+              "name": "disableTypography",
+              "required": false,
+              "description": "Disable the default typography for the component. Only use this when the component is inside another typography",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "source": {
+            "module": "./src/components/date/date.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "date-range-picker-calendar",
           "description": "Calendar for range dates. Contains the logic to handle the range forms.",
@@ -8148,6 +8165,16 @@
                 "kind": "expression",
                 "type": "union"
               }
+            },
+            {
+              "name": "disableCustomization",
+              "required": false,
+              "description": "Boolean indicating whether icon and icon selection is allowed on view creation and edit.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             }
           ],
           "events": [
@@ -8324,6 +8351,15 @@
                 "kind": "expression",
                 "type": "union"
               }
+            },
+            {
+              "name": "disableCustomization",
+              "required": false,
+              "description": "Boolean indicating whether icon and icon selection is allowed on view creation and edit.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
             }
           ],
           "events": [
@@ -8391,6 +8427,15 @@
               },
               "default": "HeaderWithViewsEditFormContextEnum.CREATE"
             },
+            {
+              "name": "disableCustomization",
+              "required": false,
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "errors",
               "required": false,
@@ -8515,6 +8560,41 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "info-icon",
+          "description": "",
+          "attributes": [
+            {
+              "name": "tooltipText",
+              "required": true,
+              "description": "Text showed in the info-icon tooltip on hover",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "tooltipPosition",
+              "required": false,
+              "description": "Position the tooltip should take if space is available. Defaults to 'auto'",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "PopperContainerPosition.AUTO"
+            }
+          ],
+          "events": [
+            {
+              "name": "mouseenter",
+              "description": "Emitted when the mouse pointer enters the component."
+            }
+          ],
+          "source": {
+            "module": "./src/components/info-icon/info-icon.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "info-icon-with-popover",
           "description": "",
@@ -8595,7 +8675,7 @@
             {
               "name": "dropdown",
               "required": false,
-              "description": "Dropdown props for the small selectable dropdown menu.\nProperties supported:\n\n - `value`: Selected value of the dropdown\n - `items`: List of available items\n - `aria-label`: Text that labels the dropdown element",
+              "description": "Dropdown props for the small selectable dropdown menu.\nProperties supported:\n\n - `aria-label`: Text that labels the dropdown element\n - `dynamicFiltering`: Enables dynamic filtering\n - `items`: List of available items\n - `readonly`: Sets the dropdown in read-only mode\n - `value`: Selected value of the dropdown",
               "value": {
                 "kind": "expression",
                 "type": "BentoInputDropdownProps"
@@ -8823,6 +8903,16 @@
               },
               "default": "false"
             },
+            {
+              "name": "debounceTime",
+              "required": false,
+              "description": "The debounce time in milliseconds for running validation and emitting the `input` event after the user has stopped typing.\nThis helps to avoid excessive validation checks on every keystroke. Defaults to `500`.",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "DEBOUNCE_DURATION"
+            },
             {
               "name": "disabled",
               "required": false,
@@ -9718,6 +9808,15 @@
                 "type": "boolean"
               },
               "default": "false"
+            },
+            {
+              "name": "itemsIndex",
+              "description": "Object with the index of each item.",
+              "value": {
+                "kind": "expression",
+                "type": "Record<string, number>"
+              },
+              "default": "() => ({})"
             }
           ],
           "events": [
@@ -13714,6 +13813,16 @@
               "default": "'custom'"
             }
           ],
+          "events": [
+            {
+              "name": "copy-click",
+              "description": "Emitted when the copy button is clicked."
+            },
+            {
+              "name": "info-icon-mouseenter",
+              "description": "Emitted when the mouse pointer enters the info icon component."
+            }
+          ],
           "slots": [
             {
               "name": "dashed-underline"
@@ -13873,6 +13982,16 @@
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "copy-click",
+              "description": "Emitted when the copy button is clicked."
+            },
+            {
+              "name": "info-icon-mouseenter",
+              "description": "Emitted when the mouse pointer enters the info icon component."
+            }
+          ],
           "slots": [
             {
               "name": "dashed-underline"
@@ -13947,6 +14066,16 @@
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "copy-click",
+              "description": "Emitted when the copy button is clicked."
+            },
+            {
+              "name": "info-icon-mouseenter",
+              "description": "Emitted when the mouse pointer enters the info icon component."
+            }
+          ],
           "slots": [
             {
               "name": "dashed-underline"
@@ -14093,6 +14222,16 @@
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "copy-click",
+              "description": "Emitted when the copy button is clicked."
+            },
+            {
+              "name": "info-icon-mouseenter",
+              "description": "Emitted when the mouse pointer enters the info icon component."
+            }
+          ],
           "slots": [
             {
               "name": "dashed-underline"
@@ -14222,7 +14361,7 @@
               "description": "Amount to be shown as the main value",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               }
             },
             {
@@ -14231,11 +14370,21 @@
               "description": "Amount to be shown as the secondary metric value",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "union"
               },
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "copy-click",
+              "description": "Emitted when the copy button is clicked."
+            },
+            {
+              "name": "info-icon-mouseenter",
+              "description": "Emitted when the mouse pointer enters the info icon component."
+            }
+          ],
           "slots": [
             {
               "name": "dashed-underline"
@@ -14319,6 +14468,16 @@
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "copy-click",
+              "description": "Emitted when the copy button is clicked."
+            },
+            {
+              "name": "info-icon-mouseenter",
+              "description": "Emitted when the mouse pointer enters the info icon component."
+            }
+          ],
           "slots": [
             {
               "name": "dashed-underline"
@@ -14335,6 +14494,7 @@
           "attributes": [
             {
               "name": "counter",
+              "required": false,
               "description": "Displays a counter next to the tab title",
               "value": {
                 "kind": "expression",
@@ -14343,25 +14503,37 @@
               "default": "null"
             },
             {
-              "name": "title",
-              "required": true,
-              "description": "Title of the tab",
+              "name": "disabled",
+              "required": false,
+              "description": "Determines whether the tab is disabled",
               "value": {
                 "kind": "expression",
-                "type": "string"
-              }
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "disabled",
-              "description": "Determines whether the tab is disabled",
+              "name": "hidden",
+              "required": false,
+              "description": "Prevents a tab from being displayed.\nUse `hidden` instead of `v-show`.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
             },
+            {
+              "name": "title",
+              "required": true,
+              "description": "Title of the tab",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
             {
               "name": "withNotificationIndicator",
+              "required": false,
               "description": "Displays the tab with a notification indicator",
               "value": {
                 "kind": "expression",
@@ -14439,6 +14611,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "tabs-hidden",
+          "description": "",
+          "source": {
+            "module": "./src/components/tabs/__tests__/tabs-hidden.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "tabs-stub",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.65.0",
+  "version": "1.67.0",
   "description": "Adyen Bento Vue2 components",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -46,7 +46,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.65.0"
+    "@adyen/bento-design-tokens": "1.67.0"
   },
   "peerDependencies": {
     "vue": "~2.7",
@@ -137,11 +137,11 @@
     "vue-style-loader": "4.1.3",
     "vue-template-compiler": "2.7.16",
     "vue-tsc": "1.0.24",
+    "@adyen/bento-cli": "0.5.1",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.5.0",
-    "@adyen/bento-cli": "0.5.0",
-    "@adyen/ui-assets-icons-16": "6.5.0",
-    "@adyen/ui-assets-payment-method-icons": "10.1.0"
+    "@adyen/bento-tailwind": "0.5.1",
+    "@adyen/ui-assets-icons-16": "6.5.2",
+    "@adyen/ui-assets-payment-method-icons": "10.1.2"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"

package/dist/assets/tabs.css

@@ -1 +0,0 @@
-.b-tab[data-v-0e7e8dbe]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.b-tab[data-v-0e7e8dbe],.b-tab[data-v-0e7e8dbe]:before,.b-tab[data-v-0e7e8dbe]:after{box-sizing:border-box}.b-tab *[data-v-0e7e8dbe],.b-tab *[data-v-0e7e8dbe]:before,.b-tab *[data-v-0e7e8dbe]:after{box-sizing:border-box}.b-tab[data-v-0e7e8dbe] ::-webkit-scrollbar{height:14px;width:14px}.b-tab[data-v-0e7e8dbe] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-tabs[data-v-84b35ecb]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--b-tabs-background-color)}.b-tabs[data-v-84b35ecb],.b-tabs[data-v-84b35ecb]:before,.b-tabs[data-v-84b35ecb]:after{box-sizing:border-box}.b-tabs *[data-v-84b35ecb],.b-tabs *[data-v-84b35ecb]:before,.b-tabs *[data-v-84b35ecb]:after{box-sizing:border-box}.b-tabs[data-v-84b35ecb] ::-webkit-scrollbar{height:14px;width:14px}.b-tabs[data-v-84b35ecb] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-tabs button[data-v-84b35ecb]{background-color:transparent;border:0;font:inherit;text-align:inherit}.b-tabs button[data-v-84b35ecb]:focus-visible{outline:none}.b-tabs__tab-list[data-v-84b35ecb]{display:flex;gap:var(--b-tabs-tab-list-gap);height:var(--b-tabs-tab-list-height)}.b-tabs__tab-list-wrapper--sticky[data-v-84b35ecb]{background-color:var(--b-tabs-background-color);padding-top:var(--b-tabs-sticky-padding-top);position:sticky;z-index:var(--b-tabs-sticky-z-index)}.b-tabs__tab-list-wrapper--pinned[data-v-84b35ecb]:after{background-color:var(--b-tabs-background-color);border-bottom:var(--b-tabs-sticky-border-bottom);bottom:-4px;content:"";display:block;height:4px;left:-50vw;position:absolute;width:150vw}.b-tabs__tab[data-v-84b35ecb]{align-items:center;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:0}.b-tabs__tab--disabled>*[data-v-84b35ecb]{cursor:not-allowed}@media (hover: hover){.b-tabs__tab:not(.b-tabs__tab--disabled):hover .b-tabs__tab-title[data-v-84b35ecb]{color:var(--b-tabs-tab-title-hover-color)}.b-tabs__tab:not(.b-tabs__tab--disabled):hover .b-tabs__tab-counter[data-v-84b35ecb]{color:var(--b-tabs-counter-hover-color)}}.b-tabs__tab-text[data-v-84b35ecb]{align-items:center;border-radius:var(--b-tabs-tab-text-border-radius);display:flex;height:var(--b-tabs-tab-text-height)}.b-tabs__tab:focus-visible .b-tabs__tab-text[data-v-84b35ecb]{animation:outer-ring-default-84b35ecb var(--b-animation-duration-fast) var(--b-animation-easing-standard);box-shadow:0 0 0 var(--b-focus-ring-spacer) var(--b-color-background-primary),0 0 0 var(--b-focus-ring-outline) var(--b-focus-ring-color)}@keyframes outer-ring-default-84b35ecb{0%{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 0 var(--b-focus-ring-color)}to{box-shadow:0 0 0 var(--b-border-width-s) var(--b-color-background-primary),0 0 0 var(--b-border-width-l) var(--b-focus-ring-color)}}.b-tabs__tab-title[data-v-84b35ecb]{color:var(--b-tabs-tab-title-color);white-space:nowrap}.b-legacy-theme .b-tabs__tab-title[data-v-84b35ecb]{font-size:15px;font-weight:400}.b-tabs__tab--disabled .b-tabs__tab-title[data-v-84b35ecb]{color:var(--b-tabs-tab-title-disabled-color);cursor:not-allowed}.b-tabs__tab--active .b-tabs__tab-title[data-v-84b35ecb]{color:var(--b-tabs-tab-title-active-color)}.b-tabs__tab-underline[data-v-84b35ecb]{background-color:var(--b-tabs-tab-underline-color);display:block;width:var(--b-tabs-tab-underline-width)}.b-tabs__tab--active .b-tabs__tab-underline[data-v-84b35ecb]{height:var(--b-tabs-tab-underline-height-active)}.b-tabs__tab-counter[data-v-84b35ecb]{background-color:var(--b-tabs-counter-background-color);border-radius:var(--b-tabs-counter-border-radius);color:var(--b-tabs-counter-color);flex-shrink:0;margin-left:var(--b-tabs-counter-margin-left);padding:var(--b-tabs-counter-padding)}.b-tabs__tab-counter--active[data-v-84b35ecb]{color:var(--b-tabs-counter-active-color)}.b-tabs__tab--disabled .b-tabs__tab-counter[data-v-84b35ecb]{color:var(--b-tabs-counter-disabled-color);cursor:not-allowed}.b-tabs__tab-notification-dot[data-v-84b35ecb]{background-color:var(--b-tabs-notification-dot-background-color);border-radius:50%;flex-shrink:0;height:var(--b-tabs-notification-dot-height);margin-left:var(--b-tabs-notification-dot-margin-left);width:var(--b-tabs-notification-dot-width)}

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

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.DHdrZtmW.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                    disable-responsive-behavior\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+OIA,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;;;;;;;;;;;;;;;;;;;"}