@adyen/bento-vue2 1.22.0 → 1.24.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -324,8 +324,19 @@
           "name": "avatar-image",
           "description": "",
           "attributes": [
+            {
+              "name": "color",
+              "required": false,
+              "description": "Avatar color. Defaults to yellow.",
+              "value": {
+                "kind": "expression",
+                "type": "BentoAvatarImageColor"
+              },
+              "default": "BentoAvatarImageColor.YELLOW"
+            },
             {
               "name": "src",
+              "required": false,
               "description": "Image src to load the profile picture.",
               "value": {
                 "kind": "expression",
@@ -335,6 +346,7 @@
             },
             {
               "name": "username",
+              "required": false,
               "description": "Name of the user that will be used to extract initials to display default value.\nJohn => J\nJohn Smith => JS\nJohn Smith Doe => JD\nJohn Smith Doe Holly => JH",
               "value": {
                 "kind": "expression",
@@ -344,21 +356,13 @@
             },
             {
               "name": "variant",
+              "required": false,
               "description": "Variants supported for small and large.\nDefault - large",
               "value": {
                 "kind": "expression",
                 "type": "BentoAvatarImageVariant"
               },
               "default": "BentoAvatarImageVariant.LARGE"
-            },
-            {
-              "name": "color",
-              "description": "Avatar color. Defaults to yellow.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoAvatarImageColor"
-              },
-              "default": "BentoAvatarImageColor.YELLOW"
             }
           ],
           "source": {
@@ -3112,10 +3116,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item.",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCurrencyFilterOptions"
+                "type": "BentoSelectCountryFilterOptions"
               },
               "default": "undefined"
             }
@@ -3126,7 +3130,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
             "symbol": "default"
           }
         },
@@ -3136,10 +3140,10 @@
           "attributes": [
             {
               "name": "options",
-              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}\n  - variant: Which label variant to display for the option item.",
+              "description": "List of options that are needed to setup the country filter\nAvailable options:\n  - multiple: If \"true\", the user will be able to select multiple items.\n  - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}",
               "value": {
                 "kind": "expression",
-                "type": "BentoSelectCountryFilterOptions"
+                "type": "BentoSelectCurrencyFilterOptions"
               },
               "default": "undefined"
             }
@@ -3150,7 +3154,7 @@
             }
           ],
           "source": {
-            "module": "./src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue",
+            "module": "./src/components/filter-bar/components/select-filter/variants/select-currency-filter/select-currency-filter.vue",
             "symbol": "default"
           }
         },
@@ -4020,14 +4024,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-toast",
-          "description": "",
-          "source": {
-            "module": "./src/components/toast/toast.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-toggle",
           "description": "A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle",
@@ -4096,84 +4092,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-typography",
-          "description": "The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\neasily to text. The variants and properties match with those found in Figma.\n\nFor example, seeing text with the typography styling of",
-          "attributes": [
-            {
-              "name": "el",
-              "description": "Sets the HTML DOM element.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTypographyElement | `${BentoTypographyElement}`"
-              },
-              "default": "BentoTypographyElement.PARAGRAPH"
-            },
-            {
-              "name": "stronger",
-              "description": "Adds the stronger class modifier.\nApplicable to Caption, Body and Subtitle variants.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "strongest",
-              "description": "Adds the strongest class modifier.\nApplicable to Caption, Body and Subtitle variants.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "variant",
-              "description": "Sets the type of typography variant.",
-              "value": {
-                "kind": "expression",
-                "type": "BentoTypographyVariant | `${BentoTypographyVariant}`"
-              },
-              "default": "BentoTypographyVariant.BODY"
-            },
-            {
-              "name": "medium",
-              "description": "Adds the medium class modifier.\nApplicable to the Title variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "large",
-              "description": "Adds the large class modifier.\nApplicable to the Title variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "wide",
-              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default"
-            }
-          ],
-          "source": {
-            "module": "./src/components/typography/typography.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "button",
           "description": "",
@@ -4900,6 +4818,24 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "conditional-stepper-stub",
+          "description": "",
+          "attributes": [
+            {
+              "name": "withExtraSteps",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              }
+            }
+          ],
+          "source": {
+            "module": "./src/components/stepper/__tests__/conditional-stepper-stub.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "controls-group",
           "description": "",
@@ -5398,6 +5334,15 @@
               },
               "default": "(item: BentoDatagridDataItem) => item.id"
             },
+            {
+              "name": "hoveredOverColumnState",
+              "required": true,
+              "description": "The column hovered over state and whether the hovered over column should show a border right or left.",
+              "value": {
+                "kind": "expression",
+                "type": "DatagridColumnHoveringState"
+              }
+            },
             {
               "name": "isDataItemDisabled",
               "description": "A customisable method to determine if a row is not selectable.\nThe default is that every row is selectable.",
@@ -5588,6 +5533,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "hoveredOverColumnState",
+              "required": true,
+              "description": "The column hovered over state and whether the hovered over column should show a border right or left.",
+              "value": {
+                "kind": "expression",
+                "type": "DatagridColumnHoveringState"
+              }
+            },
             {
               "name": "isMeasuringColunWidths",
               "description": "Toggled to true when the DataGrid has auto width columns and is measuring the",
@@ -5664,6 +5618,10 @@
           "events": [
             {
               "name": "<undefined>"
+            },
+            {
+              "name": "column-hover",
+              "description": "Emitted when a column header is hovered over."
             }
           ],
           "slots": [
@@ -7726,7 +7684,7 @@
             },
             {
               "name": "dropdown",
-              "description": "Dropdown props for the small selectable dropdown menu.",
+              "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",
               "value": {
                 "kind": "expression",
                 "type": "BentoInputDropdownProps"
@@ -11087,55 +11045,99 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "toast",
+          "description": "",
+          "source": {
+            "module": "./src/components/toast/toast.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "toast-item",
           "description": "",
           "attributes": [
             {
-              "name": "text",
+              "name": "toast",
               "required": true,
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "BentoToastItem"
               }
-            },
+            }
+          ],
+          "source": {
+            "module": "./src/components/toast/components/toast-item/toast-item.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "toast-mock",
+          "description": "",
+          "attributes": [
             {
-              "name": "action",
+              "name": "items",
               "value": {
                 "kind": "expression",
-                "type": "BentoToastItemAction"
+                "type": "BentoToastItemParams[]"
               },
-              "default": "null"
+              "default": "() => []"
             }
           ],
           "events": [
             {
-              "name": "click"
-            },
+              "name": "toast"
+            }
+          ],
+          "source": {
+            "module": "./src/components/toast/__tests__/toast-mock.vue",
+            "symbol": "default"
+          }
+        },
+        {
+          "name": "toast-shadow-stack",
+          "description": "",
+          "events": [
             {
-              "name": "dismiss"
+              "name": "update"
             }
           ],
           "source": {
-            "module": "./src/components/toast/components/toast-item/toast-item.vue",
+            "module": "./src/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue",
             "symbol": "default"
           }
         },
         {
-          "name": "toast-mock",
+          "name": "toast-shadow-stack-mock",
           "description": "",
           "attributes": [
             {
-              "name": "items",
+              "name": "text",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "null"
+            },
+            {
+              "name": "action",
               "value": {
                 "kind": "expression",
-                "type": "BentoToastItem[]"
+                "type": "BentoToastItemAction"
               },
               "default": "null"
             }
           ],
+          "events": [
+            {
+              "name": "update"
+            },
+            {
+              "name": "toast"
+            }
+          ],
           "source": {
-            "module": "./src/components/toast/__tests__/toast-mock.vue",
+            "module": "./src/components/toast/components/toast-shadow-stack/__tests__/toast-shadow-stack-mock.vue",
             "symbol": "default"
           }
         },
@@ -11544,6 +11546,91 @@
             "module": "./src/components/tutorial/__tests__/tutorial-stub.vue",
             "symbol": "default"
           }
+        },
+        {
+          "name": "typography",
+          "description": "",
+          "attributes": [
+            {
+              "name": "el",
+              "required": false,
+              "description": "Sets the HTML DOM element.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoTypographyElement.PARAGRAPH"
+            },
+            {
+              "name": "large",
+              "required": false,
+              "description": "Adds the large class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "medium",
+              "required": false,
+              "description": "Adds the medium class modifier.\nApplicable to the Title variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "stronger",
+              "required": false,
+              "description": "Adds the stronger class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "strongest",
+              "required": false,
+              "description": "Adds the strongest class modifier.\nApplicable to Caption, Body and Subtitle variants.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "variant",
+              "required": false,
+              "description": "Sets the type of typography variant.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "BentoTypographyVariant.BODY"
+            },
+            {
+              "name": "wide",
+              "required": false,
+              "description": "Adds the medium class modifier.\nApplicable to tje Body variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ],
+          "source": {
+            "module": "./src/components/typography/typography.vue",
+            "symbol": "default"
+          }
         }
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "1.22.0",
+    "version": "1.24.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -62,7 +62,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.22.0",
+        "@adyen/bento-design-tokens": "1.24.0",
         "@adyen/ui-assets-icons-16": "4.1.0",
         "@adyen/ui-assets-payment-method-icons": "6.1.0",
         "@codemirror/commands": "6.3.3",
@@ -89,7 +89,7 @@
         "react": "16.14.0"
     },
     "devDependencies": {
-        "@adyen/bento-cli": "0.0.14",
+        "@adyen/bento-cli": "0.0.15",
         "@storybook/addon-a11y": "7.6.17",
         "@storybook/addon-essentials": "7.6.17",
         "@storybook/addon-storysource": "7.6.17",

package/dist/chunks/directive.0408e565.js

@@ -1,23 +0,0 @@
-import { o as s } from "./on-click-outside.3e0c3e2a.js";
-const t = (o, i) => {
-  const e = !i.modifiers.bubble;
-  if (typeof i.value == "function")
-    o.__onClickOutside_stop = s(o, i.value, { capture: e });
-  else {
-    const [c, n] = i.value;
-    o.__onClickOutside_stop = s(o, c, { capture: e, ...n });
-  }
-}, u = (o) => {
-  o.__onClickOutside_stop();
-}, _ = {
-  // Vue 2 Directive hooks
-  inserted: t,
-  unbind: u,
-  // Vue 3 Directive hooks
-  beforeMount: t,
-  unmounted: u
-};
-export {
-  _ as B
-};
-//# sourceMappingURL=directive.0408e565.js.map

package/dist/chunks/directive.0408e565.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"directive.0408e565.js","sources":["../../src/directives/click-outside/directive.ts"],"sourcesContent":["import { onClickOutside } from './on-click-outside';\nimport type { DirectiveHook } from 'vue';\n\ntype Element = HTMLElement & { __onClickOutside_stop?: () => void };\n\n/**\n * Attaches the click outside listener to target element to register clicks outside the element.\n * @param targetElement Element to attach listener to.\n * @param binding\n */\nconst bindDirective: DirectiveHook<Element> = (targetElement, binding) => {\n    const capture = !binding.modifiers.bubble;\n    if (typeof binding.value === 'function') {\n        // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n        targetElement.__onClickOutside_stop = onClickOutside(targetElement, binding.value, { capture });\n    } else {\n        const [handler, options] = binding.value;\n        // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n        targetElement.__onClickOutside_stop = onClickOutside(targetElement, handler, { capture, ...options });\n    }\n};\n\n/**\n * Removes click outside listener from the target element.\n * @param targetElement Element to detach listener from.\n */\nconst unbindDirective: DirectiveHook<Element> = targetElement => {\n    // eslint-disable-next-line no-underscore-dangle\n    targetElement.__onClickOutside_stop();\n};\n\nexport const BentoClickOutsideDirective = {\n    // Vue 2 Directive hooks\n    inserted: bindDirective,\n    unbind: unbindDirective,\n\n    // Vue 3 Directive hooks\n    beforeMount: bindDirective,\n    unmounted: unbindDirective,\n};\n"],"names":["bindDirective","targetElement","binding","capture","onClickOutside","handler","options","unbindDirective","BentoClickOutsideDirective"],"mappings":";AAUA,MAAMA,IAAwC,CAACC,GAAeC,MAAY;AAChE,QAAAC,IAAU,CAACD,EAAQ,UAAU;AAC/B,MAAA,OAAOA,EAAQ,SAAU;AAEzB,IAAAD,EAAc,wBAAwBG,EAAeH,GAAeC,EAAQ,OAAO,EAAE,SAAAC,GAAS;AAAA,OAC3F;AACH,UAAM,CAACE,GAASC,CAAO,IAAIJ,EAAQ;AAErB,IAAAD,EAAA,wBAAwBG,EAAeH,GAAeI,GAAS,EAAE,SAAAF,GAAS,GAAGG,GAAS;AAAA;AAE5G,GAMMC,IAA0C,CAAiBN,MAAA;AAE7D,EAAAA,EAAc,sBAAsB;AACxC,GAEaO,IAA6B;AAAA;AAAA,EAEtC,UAAUR;AAAA,EACV,QAAQO;AAAA;AAAA,EAGR,aAAaP;AAAA,EACb,WAAWO;AACf;"}

package/dist/chunks/dropdown-default-textbox.9c23c94d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-default-textbox.9c23c94d.js","sources":["../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue","../../src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue"],"sourcesContent":["import { PropType } from 'vue';\nimport { Booleanish } from '@/types';\n\n// TODO: Change this to script setup + Typescript interface\nexport const DropdownBaseTextboxProps = {\n    /**\n     * The number of additional items that have been selected in the dropdown.\n     */\n    additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n    /**\n     * Sets the possibility to type into the textbox\n     */\n    dynamicFiltering: {\n        type: Boolean,\n        default: false,\n    },\n\n    /**\n     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n     */\n    ariaControls: {\n        type: String,\n        required: true,\n    },\n\n    /**\n     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n     */\n    ariaExpanded: {\n        type: [String, Boolean] as PropType<Booleanish>,\n        required: true,\n    },\n\n    /**\n     * Corresponds to the label's id that labels the textbox element.\n     */\n    ariaLabelledby: {\n        type: String,\n        default: null,\n    },\n\n    /**\n     * Disables any textbox functionality\n     */\n    disabled: { type: Boolean, default: false },\n\n    /**\n     * Marks the textbox as invalid, rendering an error state\n     */\n    isInvalid: { type: Boolean, default: false },\n\n    /**\n     * Selected option's label\n     */\n    displayValue: { type: String, default: null },\n\n    /**\n     * Indicates if the dropdown is open so that\n     * the respective event can be emitted\n     */\n    open: { type: Boolean, default: false },\n\n    /**\n     * The input value\n     */\n    value: { type: String, default: '' },\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime: { type: Number, default: 300 },\n};\n\nexport enum DropdownBaseTextboxState {\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    HAS_ITEMS = 'has-items',\n    OPENED = 'opened',\n    ERROR = 'error',\n}\n\nexport enum DropdownBaseTextboxEvent {\n    OPEN = 'dropdown-base-open',\n    KEYDOWN = 'dropdown-base-keydown',\n    CLOSE = 'dropdown-base-close',\n    INPUT = 'dropdown-base-input',\n    CLEAR = 'dropdown-base-clear',\n}\n\nexport default DropdownBaseTextboxProps;\n","<template>\n    <div\n        :class=\"$attrs.class\"\n        data-testid=\"textbox-wrapper\"\n        @click=\"onToggleDropdown\"\n        @keydown.escape=\"onCloseDropdown\"\n    >\n        <bento-typography\n            class=\"b-dropdown-base-textbox\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            data-testid=\"base-textbox\"\n        >\n            <input\n                v-if=\"shouldShowInput\"\n                v-bind=\"ariaAttributes\"\n                :id=\"textboxId\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                role=\"combobox\"\n                type=\"text\"\n                aria-autocomplete=\"list\"\n                :value=\"open ? value : displayValue\"\n                :disabled=\"disabled ? true : null\"\n                :readonly=\"readonly\"\n                @keydown=\"$emit(DropdownBaseTextboxEvent.KEYDOWN, $event)\"\n                @keydown.enter=\"onToggleDropdown\"\n                @input=\"onInputEvent\"\n            />\n            <div\n                v-else\n                :id=\"textboxId\"\n                v-bind=\"ariaAttributes\"\n                ref=\"textbox\"\n                class=\"b-dropdown-base-textbox__input\"\n                :class=\"comboboxConditionalClasses\"\n                role=\"combobox\"\n                :tabindex=\"0\"\n            >\n                <slot v-if=\"shouldShowSingleSelectSlot\" v-bind=\"selectedValueItem\">\n                    {{ displayValue }}\n                </slot>\n                <template v-else-if=\"shouldShowMultipleSlot\">\n                    <div class=\"b-dropdown-base-textbox__input-multiple-selected\">\n                        <div v-for=\"singleItem of selectedValueItems\" :key=\"singleItem.value\">\n                            <div class=\"b-dropdown-base-textbox__input-selected-element\">\n                                <slot v-bind=\"singleItem\">\n                                    {{ displayValue }}\n                                </slot>\n                            </div>\n                        </div>\n                    </div>\n                </template>\n                <template v-else>{{ displayValue }}</template>\n            </div>\n            <span v-if=\"additionalItemsSelected\" class=\"b-dropdown-base-textbox__additional-items\">\n                {{ additionalItemsSelected }}\n            </span>\n            <span v-if=\"hasSlot('icon') && !isFiltering\" class=\"b-dropdown-base-textbox__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\"></slot>\n            </span>\n            <span\n                v-if=\"isFiltering\"\n                class=\"b-dropdown-base-textbox__clear-search\"\n                tabindex=\"0\"\n                data-testid=\"clear-search-button\"\n                @click.stop=\"onClearSearch\"\n                @keydown.enter.stop=\"onClearSearch\"\n                @keyup.space=\"onClearSearch\"\n            >\n                <cross-circle-fill-icon :svg-title=\"'clearSearch'\" />\n            </span>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, nextTick, PropType, ref, useAttrs, useSlots, watch } from 'vue';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useHasSlot } from '@/composables';\n    import { BentoTypography } from '@/components/typography';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoListboxOptionItem, Booleanish } from '@/types';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n    import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * If the combobox DOM element should be an `input` element.\n         */\n        alwaysComboboxIsInput: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: { type: String, required: true },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: { type: String, default: null },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: { type: String, default: null },\n\n        /**\n         * Custom debounce time for the user type event.\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox.\n         */\n        dynamicFiltering: { type: Boolean, default: false },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | BentoListboxOptionItem[]>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the \"clear\" button is clicked\n         */\n        (e: DropdownBaseTextboxEvent.CLEAR);\n\n        /**\n         * Emitted on click, space, enter and esc user events. It will close the dropdown.\n         */\n        (e: DropdownBaseTextboxEvent.CLOSE);\n\n        /**\n         * Emitted when `dynamicFiltering` is enabled and a search input is entered\n         */\n        (e: DropdownBaseTextboxEvent.INPUT, searchValue: string);\n\n        /**\n         * Emitted when any key is pressed and the focus is on the input field\n         */\n        (e: DropdownBaseTextboxEvent.KEYDOWN, event: KeyboardEvent);\n\n        /**\n         * Emitted on click, space and enter user events. It will open the dropdown.\n         */\n        (e: DropdownBaseTextboxEvent.OPEN);\n    }>();\n\n    const textbox = ref(null);\n    const textboxId = generateUid('textbox');\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-base-textbox--${DropdownBaseTextboxState.HAS_ITEMS}`]: !!props.additionalItemsSelected,\n    }));\n\n    const comboboxConditionalClasses = computed(() => ({\n        [`b-dropdown-base-textbox__input--dynamic-filtering`]: props.dynamicFiltering,\n    }));\n\n    const isFiltering = computed(() => props.dynamicFiltering && !!props.value && props.open);\n\n    const ariaAttributes = computed(\n        () =>\n            ({\n                'aria-haspopup': 'listbox',\n                'aria-controls': props.ariaControls,\n                'aria-describedby': attrs['aria-describedby']?.toString() as string,\n                'aria-expanded': props.ariaExpanded ? 'true' : 'false',\n                'aria-labelledby': props.ariaLabelledby,\n                'aria-label': props.ariaLabelledby ? null : props.ariaLabel,\n                'aria-invalid': props.isInvalid,\n                'aria-disabled': props.disabled ? true : null,\n            } as HTMLAttributes)\n    );\n    // Cast selectedValueItem if it is an array of selected items\n    const selectedValueItems = computed(() =>\n        props.multiple ? (props.selectedValueItem as BentoListboxOptionItem[]) : []\n    );\n\n    const shouldShowInput = computed(() => props.dynamicFiltering && (props.open || props.alwaysComboboxIsInput));\n    const shouldShowSingleSelectSlot = computed(() => props.selectedValueItem && !props.multiple);\n    const shouldShowMultipleSlot = computed(\n        () =>\n            props.multiple &&\n            props.selectedValueItem &&\n            selectedValueItems.value.length > 0 &&\n            props.showSlotContentInMultiple\n    );\n\n    watch(\n        () => shouldShowInput.value,\n        () => {\n            if (shouldShowInput.value && !props.alwaysComboboxIsInput) {\n                nextTick(() => {\n                    textbox.value.focus();\n                });\n            }\n        }\n    );\n\n    const onOpenDropdown = () => {\n        if (!props.disabled && !props.readonly) {\n            textbox.value.focus();\n            emit(DropdownBaseTextboxEvent.OPEN);\n        }\n    };\n\n    const onCloseDropdown = () => {\n        if (props.open) {\n            textbox.value.focus();\n            emit(DropdownBaseTextboxEvent.CLOSE);\n        }\n    };\n\n    const onToggleDropdown = (event: Event) => {\n        const isDynamicFilteringInputClickEvent = props.open && (event.target as HTMLDivElement).tagName === 'INPUT';\n        if (isDynamicFilteringInputClickEvent) {\n            /**\n             * When there's a click even on the input during filtering\n             * and the popover is open, do not toggle the popover.\n             * Allow for click events inside the input field\n             */\n            return null;\n        }\n\n        return props.open ? onCloseDropdown() : onOpenDropdown();\n    };\n\n    const onClearSearch = () => {\n        emit(DropdownBaseTextboxEvent.CLEAR);\n        emit(DropdownBaseTextboxEvent.INPUT, '');\n        textbox.value.focus();\n    };\n    const onInputEvent = debounce<(event: Event) => void>((event: Event) => {\n        if (!props.readonly && !props.disabled) {\n            emit(DropdownBaseTextboxEvent.INPUT, (event.target as HTMLInputElement).value);\n        } else {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, props.debounceTime);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Only for internal use, implements the logic of the textbox element to be implemented in the combobox.\n     */\n    export default defineComponent({\n        name: 'dropdown-base-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-base-textbox.scss\" />\n","<template>\n    <div class=\"b-dropdown-default-textbox\" :class=\"conditionalClasses\" data-testid=\"default-textbox\">\n        <dropdown-base-textbox\n            v-bind=\"{ ...$attrs, ...$props }\"\n            class=\"b-dropdown-default-textbox__textbox\"\n            :value=\"value\"\n            v-on=\"listeners\"\n        >\n            <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                <slot :name=\"innerSlot\" v-bind=\"scope\" />\n            </template>\n            <template #icon>\n                <div class=\"b-dropdown-default-textbox__chevron\">\n                    <chevron-up-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n                    <chevron-down-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n                </div>\n            </template>\n        </dropdown-base-textbox>\n    </div>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, defineComponent, PropType, useSlots } from 'vue';\n    import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n    import { BentoListboxOptionItem, Booleanish } from '@/types';\n    import { stopEventPropagation } from '@/utils/ts/events';\n    import {\n        DropdownBaseTextboxEvent,\n        DropdownBaseTextboxState,\n    } from '../dropdown-base-textbox/dropdown-base-textbox.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    const emit = defineEmits<{\n        /**\n         * Emitted on clearing the input.\n         */\n        (e: 'clear');\n\n        /**\n         * Emitted on click, space and enter user events. It will open the dropdown.\n         */\n        (e: 'close');\n\n        /**\n         * Emitted on input event.\n         */\n        (e: 'input', newInput: string);\n\n        /**\n         * Emitted on keydown event.\n         */\n        (e: 'keydown', keydownEvent: KeyboardEvent);\n\n        /**\n         * Emitted on click, space, enter and esc user events. It will close the dropdown.\n         */\n        (e: 'open');\n    }>();\n\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * The number of additional items that have been selected in the dropdown.\n         */\n        additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n        /**\n         * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n         */\n        ariaControls: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n         */\n        ariaExpanded: {\n            type: [String, Boolean] as PropType<Booleanish>,\n            required: true,\n        },\n\n        /**\n         * If no label element is used then the aria-label is be set should be set.\n         */\n        ariaLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Corresponds to the label's id that labels the textbox element.\n         */\n        ariaLabelledby: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Renders the dropdown with a condensed style.\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Disables any textbox functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Selected option's label\n         */\n        displayValue: { type: String, default: null },\n\n        /**\n         * Sets the possibility to type into the textbox\n         */\n        dynamicFiltering: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Marks the textbox as invalid, rendering an error state\n         */\n        isInvalid: { type: Boolean, default: false },\n\n        /**\n         * Indicates if the dropdown is open so that\n         * the respective event can be emitted\n         */\n        open: { type: Boolean, default: false },\n\n        /**\n         * Sets the dropdown to readonly state\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * The selected value's list box item.\n         */\n        selectedValueItem: {\n            type: [Object, Array] as PropType<BentoListboxOptionItem | BentoListboxOptionItem[]>,\n            default: undefined,\n        },\n\n        /**\n         * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n         */\n        showSlotContentInMultiple: { type: Boolean, default: false },\n\n        /**\n         * The input value\n         */\n        value: { type: String, default: '' },\n\n        /*\n         * If enabled, the user will be able to select multiple items.\n         */\n        multiple: { type: Boolean, default: false },\n    });\n\n    const conditionalClasses = computed(() => ({\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.ERROR}`]:\n            !props.disabled && !props.readonly && props.isInvalid,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n        [`b-dropdown-default-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n        'b-dropdown-default-textbox--condensed': props.condensed,\n    }));\n\n    const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n    const onInput = (newInput: string) => {\n        emit('input', newInput);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n        emit('keydown', e);\n    };\n    const openDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('open');\n    };\n    const closeDropdown = (e: Event) => {\n        stopEventPropagation(e);\n        emit('close');\n    };\n    const clearValue = (e: Event) => {\n        stopEventPropagation(e);\n        emit('clear');\n    };\n\n    const listeners = {\n        [DropdownBaseTextboxEvent.INPUT]: onInput,\n        [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n        [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n        [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n        [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * For internal use only, textbox component used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-default-textbox',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-default-textbox.scss\" />\n"],"names":["DropdownBaseTextboxState","DropdownBaseTextboxState2","DropdownBaseTextboxEvent","DropdownBaseTextboxEvent2","__default__$1","defineComponent","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","textbox","ref","textboxId","generateUid","conditionalClasses","computed","props","comboboxConditionalClasses","isFiltering","ariaAttributes","_a","selectedValueItems","shouldShowInput","shouldShowSingleSelectSlot","shouldShowMultipleSlot","watch","nextTick","onOpenDropdown","emit","onCloseDropdown","onToggleDropdown","event","onClearSearch","onInputEvent","debounce","__default__","isDropdownOpen","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":"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"}