@adyen/bento-vue2 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue2",
-    "version": "1.11.0",
+    "version": "1.12.0",
     "description": "Adyen Bento Vue2 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -60,7 +60,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.11.0",
+        "@adyen/bento-design-tokens": "1.12.0",
         "@adyen/ui-assets-icons-16": "4.1.0",
         "@adyen/ui-assets-payment-method-icons": "6.1.0",
         "@codemirror/commands": "6.3.3",

package/dist/@types/packages/vue2/src/components/dropdown/composables/useDisplayValue.d.ts

@@ -1,2 +0,0 @@
-import { UseDisplayValue } from './useDisplayValue.types';
-export declare const useDisplayValue: UseDisplayValue;

package/dist/@types/packages/vue2/src/components/dropdown/composables/useDisplayValue.types.d.ts

@@ -1,12 +0,0 @@
-import { BentoListboxOptions, BentoListboxSelectedValue } from "../../../types";
-import { Ref } from 'vue';
-import type { ComputedRef } from 'vue';
-interface UseDisplayValueOptions {
-    items: Ref<BentoListboxOptions>;
-    placeholder: Ref<string>;
-    value: Ref<BentoListboxSelectedValue>;
-    multiple: Ref<boolean>;
-    staticCategories: Ref<boolean>;
-}
-export type UseDisplayValue = (options: UseDisplayValueOptions) => ComputedRef<string>;
-export {};

package/dist/@types/packages/vue2/src/components/dropdown/composables/useDropdownSearchFilter.d.ts

@@ -1,3 +0,0 @@
-import { Ref } from 'vue';
-import { BentoSearchBarItem } from "../../search-bar/search-bar.types";
-export declare function useDropdownSearchFilter<T extends BentoSearchBarItem>(searchTerm: Ref<string>, data: Ref<T[]>): import("vue").ComputedRef<T[]>;

package/dist/chunks/base-modal.5640a66a.js

@@ -1,222 +0,0 @@
-import { defineComponent as I, useAttrs as w, ref as v, computed as l, watch as L, onMounted as R } from "vue";
-import { B as k } from "./index.b0a89960.js";
-import { a as P } from "./button.bb5b4909.js";
-import { B as T } from "./index.1e8c900a.js";
-import { B as F } from "./index.7d2ea1de.js";
-import { u as N } from "./use-has-slot.fbeb19ec.js";
-import { u as x } from "./i18n.eb5b985b.js";
-import { C as U } from "./cross.04678d81.js";
-import { G as z, a as q } from "./grid-layout.e0025286.js";
-import { n as W } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/base-modal.css";
-var H = /* @__PURE__ */ ((t) => (t.DEFAULT = "BentoModalDefault", t.DIALOG = "BentoModalDialog", t))(H || {}), b = /* @__PURE__ */ ((t) => (t.SMALL = "small", t.MEDIUM = "medium", t.LARGE = "large", t))(b || {}), u = /* @__PURE__ */ ((t) => (t.SMALLER = "smaller", t.EQUAL = "equal", t.BIGGER = "bigger", t))(u || {}), m = /* @__PURE__ */ ((t) => (t.DIALOG = "dialog", t.ALERT_DIALOG = "alertdialog", t))(m || {}), K = /* @__PURE__ */ ((t) => (t.CONFIRMATION = "confirmation", t.DESTRUCTIVE = "destructive", t.INFO = "info", t.ACKNOWLEDGEMENT = "acknowledgement", t))(K || {}), C = /* @__PURE__ */ ((t) => (t.CLOSE_MODAL = "close-modal", t))(C || {});
-const Q = {
-  "en-US": {
-    ariaLabelFallback: "modal",
-    close: "Close"
-  }
-}, Y = 500, j = I({
-  i18n: { messages: Q },
-  name: "base-modal",
-  components: { CrossIcon: U, BentoTypography: k, BentoButton: P, BentoDivider: T, BentoFocusTrap: F, GridLayout: z },
-  props: {
-    /**
-     * List of actions that will be used to render the buttons.
-     * First element in the list will be rendered as "primary".
-     * All elements after the first will be rendered as "secondary".
-     * But you may change the color of 1-st action to red with 'critial' key
-     * Not more than 3 action buttons can be provided
-     * Or 2 action buttons and 1 Label for them
-     *
-     * Each object in the list should have a `title`, an `event` and
-     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-     *
-     * `title`: Button's text.
-     *
-     * `event`: Event triggered when clicking the Button.
-     *
-     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.
-     *
-     * ```
-     * [{
-     *   title: 'Primary',2
-     *   event: () => { ... },
-     *   icon: FourPeopleIcon
-     * }, {
-     *   title: 'Secondary',
-     *   event: () => { ... }
-     * }]
-     * ```
-     */
-    actions: {
-      type: Array,
-      default: null
-    },
-    /**
-     * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.
-     */
-    columnsSize: {
-      type: String,
-      default: u.SMALLER
-    },
-    /**
-     * If provided, manages the padding of the whole modal container
-     */
-    customPadding: { type: String, default: null },
-    /**
-     * Hides a cross icon on the right side of the title
-     */
-    hideCloseButton: { type: Boolean, required: !0 },
-    /**
-     * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.
-     */
-    initiallyOpen: { type: Boolean, default: !1 },
-    /**
-     * If set to true, it allows the modal to be closed by clicking outside of it
-     */
-    isDismissible: { type: Boolean, required: !0 },
-    /**
-     * Controls the modal's state from the outside. Set it to true to open the modal
-     */
-    isOpen: { type: Boolean, required: !0 },
-    /**
-     * Defines whether the modal will be an alert modal
-     */
-    modalRole: { type: String, default: m.DIALOG },
-    /**
-     * Allows the inner elments to overflow the dialog
-     */
-    overflowVisible: { type: Boolean, default: !1 },
-    /**
-     * Sets the width of the modal
-     */
-    size: {
-      type: String,
-      default: b.SMALL
-    },
-    /**
-     * If provided, renders the modal's content in a two-column layout an wth dividers separating its content
-     */
-    withColumnLayout: { type: Boolean, default: !1 }
-  },
-  emits: [C.CLOSE_MODAL],
-  setup(t, { slots: e, emit: a }) {
-    const { t: s } = x(), p = w(), d = N(e), i = v(null), r = v(!1), A = l(() => t.isDismissible && !t.hideCloseButton), h = l(() => {
-      if (!t.customPadding)
-        return {};
-      const o = {
-        paddingLeft: t.customPadding,
-        paddingRight: t.customPadding
-      }, n = { ...o, paddingTop: void 0, paddingBottom: void 0 };
-      return d("default") || (n.paddingTop = t.customPadding), d("actions") || (n.paddingBottom = t.customPadding), {
-        header: { ...o, paddingTop: t.customPadding },
-        content: n,
-        actions: { ...o, paddingBottom: t.customPadding }
-      };
-    }), S = l(
-      () => p["aria-label"] ?? s("ariaLabelFallback")
-    ), _ = l(() => t.withColumnLayout && t.size === b.LARGE), f = () => {
-      i.value.showModal();
-    }, y = () => {
-      a(C.CLOSE_MODAL);
-    }, O = () => {
-      r.value && (i.value.close(), y(), r.value = !1);
-    }, c = () => {
-      i.value.open && (r.value = !0);
-    }, g = (o) => {
-      o && o.preventDefault(), !(!t.isDismissible && t.modalRole === m.DIALOG) && c();
-    }, E = ({ target: o }) => {
-      o && o.tagName === m.DIALOG.toUpperCase() && g();
-    }, M = l(() => ({
-      [`b-modal-base__container--${t.size}`]: t.size,
-      "b-modal-base__container--hide": r.value,
-      "b-modal-base__container--overflow-visible": t.overflowVisible,
-      "b-modal-base__container--column-layout": _.value
-    })), B = l(() => ({
-      "b-modal-base__content--column-layout": _.value,
-      "b-modal-base__content--with-header": d("default"),
-      "b-modal-base__content--with-actions": d("actions")
-    })), D = l(() => t.columnsSize === u.SMALLER ? [
-      { small: 4, medium: 4, large: 4 },
-      { small: 8, medium: 8, large: 8 }
-    ] : t.columnsSize === u.BIGGER ? [
-      { small: 8, medium: 8, large: 8 },
-      { small: 4, medium: 4, large: 4 }
-    ] : [
-      { small: 6, medium: 6, large: 6 },
-      { small: 6, medium: 6, large: 6 }
-    ]);
-    return L(
-      () => [t.isOpen, i.value],
-      ([o, n], [, G]) => {
-        if (!n)
-          return;
-        o ? f() : !G || c();
-      }
-    ), L(
-      () => t.actions,
-      () => {
-        var o, n;
-        ((n = (o = t.actions) == null ? void 0 : o[0]) == null ? void 0 : n.state) === "success" && setTimeout(c, Y);
-      },
-      { deep: !0 }
-    ), R(() => {
-      t.isOpen && i.value && f();
-    }), {
-      // Refs
-      modal: i,
-      computedAriaLabel: S,
-      showCloseButton: A,
-      // Handling the state
-      openModal: f,
-      closeModalOnClickOutside: E,
-      closeModalAfterAnimation: O,
-      startCloseModalAnimation: c,
-      // Methods
-      internalModalActionClose: g,
-      hasSlot: d,
-      emitCloseEvent: y,
-      t: s,
-      // Styles
-      modalConditionalClasses: M,
-      modalContentConditionalClasses: B,
-      customPaddingStyles: h,
-      hasColumnLayout: _,
-      computedColumnWidth: D,
-      // Enums
-      GridLayoutContainerType: q
-    };
-  }
-});
-var J = function() {
-  var e = this, a = e._self._c;
-  return e._self._setupProxy, a("div", { staticClass: "b-modal-base" }, [a("dialog", { ref: "modal", staticClass: "b-modal-base__container", class: e.modalConditionalClasses, attrs: { role: e.modalRole, "aria-label": e.computedAriaLabel, open: e.initiallyOpen }, on: { animationend: e.closeModalAfterAnimation, click: function(s) {
-    e.isDismissible && e.closeModalOnClickOutside(s);
-  }, keydown: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.internalModalActionClose.apply(null, arguments);
-  } } }, [e.isOpen || e.initiallyOpen ? a("bento-focus-trap", [a("div", { staticClass: "b-modal-base__wrapper" }, [e.hasSlot("default") || e.showCloseButton ? a("div", { staticClass: "b-modal-base__header-container", style: e.customPaddingStyles.header }, [a("div", { staticClass: "b-modal-base__header" }, [a("bento-typography", { staticClass: "b-modal-base__title", attrs: { "aria-label": "base modal title", el: "span", variant: "title", stronger: "" } }, [e.hasSlot("default") ? e._t("default") : e._e()], 2), e.showCloseButton ? a("bento-button", { staticClass: "b-modal-base__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: e.internalModalActionClose } }, [a("cross-icon", { attrs: { "svg-title": e.t("close") } })], 1) : e._e()], 1), e.hasColumnLayout ? a("bento-divider", { staticClass: "b-modal-base__divider" }) : e._e()], 1) : e._e(), a("div", { staticClass: "b-modal-base__content", class: e.modalContentConditionalClasses, style: e.customPaddingStyles.content }, [e.hasSlot("content") || e.hasSlot("content-col-1") && e.hasSlot("content-col-2") ? a("bento-typography", { attrs: { "aria-label": "base modal content", el: "div", variant: "body", stronger: "" } }, [e.hasColumnLayout ? a("grid-layout", { staticClass: "b-modal-base__grid", attrs: { "column-width": e.computedColumnWidth, "container-type": e.GridLayoutContainerType.NORMAL, "no-gap": "" }, scopedSlots: e._u([{ key: "col-1", fn: function() {
-    return [e._t("content-col-1")];
-  }, proxy: !0 }, { key: "col-2", fn: function() {
-    return [e._t("content-col-2")];
-  }, proxy: !0 }], null, !0) }) : e._t("content")], 2) : e._e()], 1), e.hasSlot("actions") ? a("div", { staticClass: "b-modal-base__actions-container", style: e.customPaddingStyles.actions }, [e.hasColumnLayout ? a("bento-divider", { staticClass: "b-modal-base__divider" }) : e._e(), a("div", { staticClass: "b-modal-base__actions", attrs: { "aria-label": "modal actions" } }, [e._t("actions")], 2)], 1) : e._e()])]) : e._e()], 1)]);
-}, V = [], X = /* @__PURE__ */ W(
-  j,
-  J,
-  V,
-  !1,
-  null,
-  "c54fedd1",
-  null,
-  null
-);
-const rt = X.exports;
-export {
-  H as B,
-  b as a,
-  u as b,
-  m as c,
-  K as d,
-  C as e,
-  rt as f
-};
-//# sourceMappingURL=base-modal.5640a66a.js.map

package/dist/chunks/base-modal.5640a66a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-modal.5640a66a.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n    DEFAULT = 'BentoModalDefault',\n    DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n    SMALLER = 'smaller',\n    EQUAL = 'equal',\n    BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n    DIALOG = 'dialog',\n    ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n    CONFIRMATION = 'confirmation',\n    DESTRUCTIVE = 'destructive',\n    INFO = 'info',\n    ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n    CLOSE_MODAL = 'close-modal',\n}\n","<template>\n    <div class=\"b-modal-base\">\n        <dialog\n            ref=\"modal\"\n            :role=\"modalRole\"\n            :aria-label=\"computedAriaLabel\"\n            class=\"b-modal-base__container\"\n            :class=\"modalConditionalClasses\"\n            :open=\"initiallyOpen\"\n            @animationend=\"closeModalAfterAnimation\"\n            @click=\"isDismissible && closeModalOnClickOutside($event)\"\n            @keydown.esc=\"internalModalActionClose\"\n        >\n            <bento-focus-trap v-if=\"isOpen || initiallyOpen\">\n                <div class=\"b-modal-base__wrapper\">\n                    <div\n                        v-if=\"hasSlot('default') || showCloseButton\"\n                        class=\"b-modal-base__header-container\"\n                        :style=\"customPaddingStyles.header\"\n                    >\n                        <div class=\"b-modal-base__header\">\n                            <bento-typography\n                                class=\"b-modal-base__title\"\n                                aria-label=\"base modal title\"\n                                el=\"span\"\n                                variant=\"title\"\n                                stronger\n                            >\n                                <slot v-if=\"hasSlot('default')\" />\n                            </bento-typography>\n                            <bento-button\n                                v-if=\"showCloseButton\"\n                                class=\"b-modal-base__close-button\"\n                                variant=\"tertiary\"\n                                type=\"button\"\n                                @click=\"internalModalActionClose\"\n                            >\n                                <cross-icon :svg-title=\"t('close')\" />\n                            </bento-button>\n                        </div>\n\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n                    </div>\n\n                    <div\n                        class=\"b-modal-base__content\"\n                        :class=\"modalContentConditionalClasses\"\n                        :style=\"customPaddingStyles.content\"\n                    >\n                        <bento-typography\n                            v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n                            aria-label=\"base modal content\"\n                            el=\"div\"\n                            variant=\"body\"\n                            stronger\n                        >\n                            <grid-layout\n                                v-if=\"hasColumnLayout\"\n                                :column-width=\"computedColumnWidth\"\n                                :container-type=\"GridLayoutContainerType.NORMAL\"\n                                no-gap\n                                class=\"b-modal-base__grid\"\n                            >\n                                <template #col-1><slot name=\"content-col-1\"></slot></template>\n                                <template #col-2><slot name=\"content-col-2\"></slot></template>\n                            </grid-layout>\n                            <slot v-else name=\"content\" />\n                        </bento-typography>\n                    </div>\n\n                    <div\n                        v-if=\"hasSlot('actions')\"\n                        class=\"b-modal-base__actions-container\"\n                        :style=\"customPaddingStyles.actions\"\n                    >\n                        <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n                        <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n                            <slot name=\"actions\" />\n                        </div>\n                    </div>\n                </div>\n            </bento-focus-trap>\n        </dialog>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, useAttrs, watch } from 'vue';\n    import {\n        BentoModalColumnLayoutVariant,\n        BentoModalEvent,\n        BentoModalRole,\n        BentoModalSize,\n    } from '@/components/modal/modal.types';\n\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton, BentoButtonActionsList } from '@/components/button';\n    import { BentoDivider } from '@/components/divider';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import { GridLayout, GridLayoutContainerType } from '@/internal';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'base-modal',\n        components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n        props: {\n            /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             * But you may change the color of 1-st action to red with 'critial' key\n             * Not more than 3 action buttons can be provided\n             * Or 2 action buttons and 1 Label for them\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',2\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n             */\n            columnsSize: {\n                type: String as PropType<BentoModalColumnLayoutVariant>,\n                default: BentoModalColumnLayoutVariant.SMALLER,\n            },\n\n            /**\n             * If provided, manages the padding of the whole modal container\n             */\n            customPadding: { type: String, default: null },\n\n            /**\n             * Hides a cross icon on the right side of the title\n             */\n            hideCloseButton: { type: Boolean, required: true },\n\n            /**\n             * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n             */\n            initiallyOpen: { type: Boolean, default: false },\n\n            /**\n             * If set to true, it allows the modal to be closed by clicking outside of it\n             */\n            isDismissible: { type: Boolean, required: true },\n\n            /**\n             * Controls the modal's state from the outside. Set it to true to open the modal\n             */\n            isOpen: { type: Boolean, required: true },\n\n            /**\n             * Defines whether the modal will be an alert modal\n             */\n            modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n            /**\n             * Allows the inner elments to overflow the dialog\n             */\n            overflowVisible: { type: Boolean, default: false },\n\n            /**\n             * Sets the width of the modal\n             */\n            size: {\n                type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n                default: BentoModalSize.SMALL,\n            },\n\n            /**\n             * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n             */\n            withColumnLayout: { type: Boolean, default: false },\n        },\n        emits: [BentoModalEvent.CLOSE_MODAL],\n        setup(props, { slots, emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const attrs = useAttrs();\n            const hasSlot = useHasSlot(slots);\n            const modal = ref<HTMLDialogElement>(null);\n            const isClosing = ref(false);\n\n            const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton);\n\n            const customPaddingStyles = computed(() => {\n                if (!props.customPadding) {\n                    return {};\n                }\n\n                const xPadding = {\n                    paddingLeft: props.customPadding,\n                    paddingRight: props.customPadding,\n                };\n\n                const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n                if (!hasSlot('default')) {\n                    content.paddingTop = props.customPadding;\n                }\n\n                if (!hasSlot('actions')) {\n                    content.paddingBottom = props.customPadding;\n                }\n\n                return {\n                    header: { ...xPadding, paddingTop: props.customPadding },\n                    content,\n                    actions: { ...xPadding, paddingBottom: props.customPadding },\n                };\n            });\n\n            const computedAriaLabel = computed(\n                () => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)\n            );\n            const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n            const openModal = (): void => {\n                modal.value.showModal();\n            };\n\n            const emitCloseEvent = (): void => {\n                emit(BentoModalEvent.CLOSE_MODAL);\n            };\n\n            // Handle closing and closing animation for dialog element\n            const closeModalAfterAnimation = () => {\n                if (isClosing.value) {\n                    modal.value.close();\n                    emitCloseEvent();\n                    isClosing.value = false;\n                }\n            };\n\n            const startCloseModalAnimation = () => {\n                if (!modal.value.open) {\n                    return;\n                }\n                isClosing.value = true;\n            };\n\n            /**\n             * If the user has pressed escape, clicked outside or clicked the close icon.\n             * Needs to be called from outside, following the \"dialog.close()\" pattern,\n             * when the closing event is triggered outside of the \"base-modal\"\n             * component (e.g. from a closing action).\n             */\n            const internalModalActionClose = (event?: Event) => {\n                if (event) {\n                    event.preventDefault();\n                }\n                if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) {\n                    return;\n                }\n                startCloseModalAnimation();\n            };\n\n            /**\n             * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n             * If the click doesn't happen in the dialog box itself, the modal closes\n             */\n            const closeModalOnClickOutside = ({ target }: Event): void => {\n                if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n                    internalModalActionClose();\n                }\n            };\n\n            const modalConditionalClasses = computed(() => ({\n                [`b-modal-base__container--${props.size}`]: props.size,\n                'b-modal-base__container--hide': isClosing.value,\n                'b-modal-base__container--overflow-visible': props.overflowVisible,\n                'b-modal-base__container--column-layout': hasColumnLayout.value,\n            }));\n\n            const modalContentConditionalClasses = computed(() => ({\n                'b-modal-base__content--column-layout': hasColumnLayout.value,\n                'b-modal-base__content--with-header': hasSlot('default'),\n                'b-modal-base__content--with-actions': hasSlot('actions'),\n            }));\n\n            const computedColumnWidth = computed(() => {\n                if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n                    return [\n                        { small: 4, medium: 4, large: 4 },\n                        { small: 8, medium: 8, large: 8 },\n                    ];\n                }\n                if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n                    return [\n                        { small: 8, medium: 8, large: 8 },\n                        { small: 4, medium: 4, large: 4 },\n                    ];\n                }\n                return [\n                    { small: 6, medium: 6, large: 6 },\n                    { small: 6, medium: 6, large: 6 },\n                ];\n            });\n\n            watch(\n                () => [props.isOpen, modal.value],\n                ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n                    if (!newModalValue) {\n                        return;\n                    }\n\n                    const isFirstMutation = !oldModalValue;\n                    if (newIsOpen) {\n                        openModal();\n                    } else if (!isFirstMutation) {\n                        startCloseModalAnimation();\n                    }\n                }\n            );\n\n            // If the first button is a loading button then close the modal have 0.5 seconds\n            // if the state is changed to 'success'.\n            watch(\n                () => props.actions,\n                () => {\n                    if (props.actions?.[0]?.state === 'success') {\n                        setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n                    }\n                },\n                { deep: true }\n            );\n\n            onMounted(() => {\n                if (props.isOpen && modal.value) {\n                    openModal();\n                }\n            });\n\n            return {\n                // Refs\n                modal,\n                computedAriaLabel,\n                showCloseButton,\n\n                // Handling the state\n                openModal,\n                closeModalOnClickOutside,\n                closeModalAfterAnimation,\n                startCloseModalAnimation,\n\n                // Methods\n                internalModalActionClose,\n                hasSlot,\n                emitCloseEvent,\n                t,\n\n                // Styles\n                modalConditionalClasses,\n                modalContentConditionalClasses,\n                customPaddingStyles,\n                hasColumnLayout,\n                computedColumnWidth,\n\n                // Enums\n                GridLayoutContainerType,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","_sfc_main","defineComponent","messages","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","showCloseButton","computed","customPaddingStyles","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","GridLayoutContainerType"],"mappings":"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"}

package/dist/chunks/dropdown-default-textbox.1cba89ea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-default-textbox.1cba89ea.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 = 'open',\n    KEYDOWN = 'keydown',\n    CLOSE = 'close',\n    INPUT = 'input',\n    CLEAR = '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=\"dynamicFiltering\"\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                role=\"combobox\"\n                :tabindex=\"0\"\n            >\n                <!-- <span :aria-hidden=\"!displayValue ? true : null\"> -->\n                <slot v-if=\"selectedValueItem && !multiple\" v-bind=\"selectedValueItem\">\n                    {{ displayValue }}\n                </slot>\n                <template v-else-if=\"selectedValueItem && showSlotContentInMultiple\">\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                <!-- </span> -->\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 lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } 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 { BentoKeyboardNavigationKeyDownEvent, BentoListboxOptionItem, Booleanish } from '@/types';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types';\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        components: { BentoTypography, CrossCircleFillIcon },\n        inheritAttrs: false,\n        props: {\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             * 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: {\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 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             * If enabled, the user will be able to select multiple items.\n             */\n            multiple: { type: Boolean, default: false },\n        },\n        emits: [\n            DropdownBaseTextboxEvent.OPEN,\n            DropdownBaseTextboxEvent.CLOSE,\n            DropdownBaseTextboxEvent.INPUT,\n            DropdownBaseTextboxEvent.CLEAR,\n            DropdownBaseTextboxEvent.KEYDOWN,\n        ],\n        setup(props, { emit, slots, attrs }) {\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 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\n            /**\n             * Triggered on click, space and enter user events. It will open the dropdown.\n             * @event open\n             */\n            const onOpenDropdown = () => {\n                if (!props.disabled && !props.readonly) {\n                    textbox.value.focus();\n                    emit(DropdownBaseTextboxEvent.OPEN);\n                }\n            };\n\n            /**\n             * Triggered on click, space, enter and esc user events. It will close the dropdown.\n             * @event close\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 =\n                    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\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            return {\n                // Enums\n                BentoKeyboardNavigationKeyDownEvent,\n                DropdownBaseTextboxEvent,\n\n                // Values\n                conditionalClasses,\n                textboxId,\n                textbox,\n                isFiltering,\n                ariaAttributes,\n                selectedValueItems,\n\n                // Events\n                onCloseDropdown,\n                onToggleDropdown,\n                onClearSearch,\n                onInputEvent,\n\n                // Methods\n                hasSlot: useHasSlot(slots),\n            };\n        },\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\">\n    import { computed, defineComponent, PropType } 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    /**\n     * For internal use only, textbox component used in the dropdown component.\n     */\n    export default defineComponent({\n        name: 'dropdown-default-textbox',\n        components: { ChevronDownIcon, ChevronUpIcon, DropdownBaseTextbox },\n        inheritAttrs: false,\n        emits: [\n            DropdownBaseTextboxEvent.OPEN,\n            DropdownBaseTextboxEvent.CLOSE,\n            DropdownBaseTextboxEvent.INPUT,\n            DropdownBaseTextboxEvent.CLEAR,\n            DropdownBaseTextboxEvent.KEYDOWN,\n        ],\n        props: {\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        setup(props, { slots, emit }) {\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 = (e: Event) => {\n                emit(DropdownBaseTextboxEvent.INPUT, e);\n            };\n            const onKeyDown = (e: Event) => {\n                emit(DropdownBaseTextboxEvent.KEYDOWN, e);\n            };\n            const openDropdown = (e: Event) => {\n                stopEventPropagation(e);\n                emit(DropdownBaseTextboxEvent.OPEN);\n            };\n            const closeDropdown = (e: Event) => {\n                stopEventPropagation(e);\n                emit(DropdownBaseTextboxEvent.CLOSE);\n            };\n            const clearValue = (e: Event) => {\n                stopEventPropagation(e);\n                emit(DropdownBaseTextboxEvent.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\n            return {\n                // Enums\n                DropdownBaseTextboxEvent,\n\n                // Values\n                conditionalClasses,\n                isDropdownOpen,\n                slots,\n\n                // Events\n                listeners,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-default-textbox.scss\" />\n"],"names":["DropdownBaseTextboxState","DropdownBaseTextboxState2","DropdownBaseTextboxEvent","DropdownBaseTextboxEvent2","_sfc_main$1","defineComponent","BentoTypography","CrossCircleFillIcon","props","emit","slots","attrs","textbox","ref","textboxId","generateUid","conditionalClasses","computed","isFiltering","ariaAttributes","_a","onOpenDropdown","onCloseDropdown","onToggleDropdown","event","onClearSearch","onInputEvent","debounce","selectedValueItems","BentoKeyboardNavigationKeyDownEvent","useHasSlot","_sfc_main","ChevronDownIcon","ChevronUpIcon","DropdownBaseTextbox","isDropdownOpen","onInput","e","onKeyDown","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":"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"}