@adyen/bento-vue2 1.24.0 → 1.26.0

package/dist/input-field.js

@@ -1,23 +1,23 @@
-import { defineComponent as H, useAttrs as W, useSlots as Y, ref as O, provide as j, toRef as q, computed as i, toRefs as K } from "vue";
-import { I as X, B as z } from "./chunks/dropdown.669b858b.js";
-import { p as G, d as I, B as J } from "./chunks/index.ba6c1040.js";
+import { defineComponent as W, useAttrs as Y, useSlots as j, ref as O, provide as q, toRef as K, computed as i, toRefs as X } from "vue";
+import { I as z, B as G } from "./chunks/dropdown.10c034aa.js";
+import { p as I, d as R, B as J } from "./chunks/index.dd30e538.js";
 import { g as u } from "./chunks/unique-id.a2a2b458.js";
 import { g as Q } from "./chunks/get-slot-text.99c3d860.js";
 import { u as Z } from "./chunks/aria-label.ac9651a5.js";
 import { u as ee } from "./chunks/i18n.eb5b985b.js";
 import { u as te } from "./chunks/use-form-layout-loading.d03e5d48.js";
 import { u as ae } from "./chunks/use-has-slot.fbeb19ec.js";
-import { E as oe, F as re } from "./chunks/error-message.8734e591.js";
+import { E as oe, F as re } from "./chunks/error-message.31ec12b7.js";
 import { n as ie } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index40.css";
-var d = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(d || {}), n = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(n || {}), p = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(p || {}), h = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(h || {}), ne = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(ne || {});
+import "./assets/index25.css";
+var d = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.PAYMENT_METHOD = "payment-method", a.STATIC_VALUE = "static-value", a.DROPDOWN = "dropdown", a))(d || {}), n = /* @__PURE__ */ ((a) => (a.START = "start", a.END = "end", a))(n || {}), p = /* @__PURE__ */ ((a) => (a.CONDENSED = "condensed", a.DISABLED = "disabled", a.READONLY = "readonly", a.ERROR = "error", a))(p || {}), v = /* @__PURE__ */ ((a) => (a.SEARCH = "search", a.TEXT = "text", a.NUMBER = "number", a))(v || {}), ne = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.ESCAPE_PRESSED = "escape-pressed", a.UPDATE_DROPDOWN = "update:dropdown", a.DROPDOWN_INPUT = "dropdown-input", a.FOCUS = "focus", a.CHANGE = "change", a.BLUR = "blur", a.KEYDOWN = "keydown", a))(ne || {});
 const de = {
   "en-US": {
     ariaLabelFallback: "Input field"
   }
 }, se = {
   i18n: { messages: de }
-}, le = /* @__PURE__ */ H({
+}, le = /* @__PURE__ */ W({
   ...se,
   __name: "input-field",
   props: {
@@ -105,11 +105,13 @@ const de = {
     tooltipText: { type: String, default: null },
     /**
      * A string specifying the type of control to render.
+     * All `input` types are available but only `search`, `text` and `number` are fully supported.
+     *
+     * If `type` is `search`, use `bento-search-bar` instead.
      */
     type: {
       type: String,
-      default: h.TEXT,
-      validator: (a) => Object.values(h).includes(a)
+      default: v.TEXT
     },
     /**
      * Text displayed as the value of the input-field
@@ -126,48 +128,48 @@ const de = {
   },
   emits: ["update:dropdown", "blur", "change", "dropdown-input", "escape-pressed", "focus", "keydown", "input"],
   setup(a, { expose: t, emit: o }) {
-    const e = a, r = W(), c = Y(), { t: w } = ee(), f = ae(c), D = O(null), R = u("input"), y = u("input-dropdown"), m = u("input-static-value"), S = u("input-description"), g = u("input-error");
-    j(X, !0);
-    const { isReadOnly: _ } = te(q(e, "readonly")), s = i(
+    const e = a, r = Y(), c = j(), { t: w } = ee(), f = ae(c), D = O(null), C = u("input"), y = u("input-dropdown"), m = u("input-static-value"), S = u("input-description"), g = u("input-error");
+    q(z, !0);
+    const { isReadOnly: _ } = te(K(e, "readonly")), s = i(
       () => e.variant === d.STATIC_VALUE && !!c.staticValue
-    ), C = i(() => e.variant === d.DEFAULT), N = i(() => e.variant === d.PAYMENT_METHOD), L = i(
+    ), N = i(() => e.variant === d.DEFAULT), L = i(() => e.variant === d.PAYMENT_METHOD), P = i(
       () => s.value && e.staticValuePosition === n.START
-    ), P = i(
+    ), B = i(
       () => s.value && e.staticValuePosition === n.END
-    ), l = i(() => e.variant === d.DROPDOWN && !!e.dropdown), B = i(
+    ), l = i(() => e.variant === d.DROPDOWN && !!e.dropdown), M = i(
       () => l.value && e.dropdownPosition === n.START
-    ), M = i(
+    ), V = i(
       () => l.value && e.dropdownPosition === n.END
-    ), v = i(
+    ), h = i(
       () => !e.disabled && !_.value && (!!e.errorMessage || e.error)
-    ), V = i(() => l.value === !0 && s.value === !0 ? `${m} ${y}` : l.value === !0 ? `${y}` : s.value === !0 ? `${m}` : null), E = O(r["aria-label"]), { ariaLabel: A } = K(e), k = Z({
+    ), k = i(() => l.value === !0 && s.value === !0 ? `${m} ${y}` : l.value === !0 ? `${y}` : s.value === !0 ? `${m}` : null), E = O(r["aria-label"]), { ariaLabel: A } = X(e), U = Z({
       ariaLabel: E.value,
       // TODO: take this line away when the aria-label props is removed
       label: A,
       defaultFallback: f("default") ? Q(c)("default") : w("ariaLabelFallback")
-    }), U = i(
-      () => `${f("description") ? S : ""} ${v.value && e.errorMessage ? g : ""}`
-    ), x = i(() => ({
+    }), x = i(
+      () => `${f("description") ? S : ""} ${h.value && e.errorMessage ? g : ""}`
+    ), F = i(() => ({
       [`b-input-field--${p.CONDENSED}`]: e.condensed,
       [`b-input-field--${p.DISABLED}`]: e.disabled,
       [`b-input-field--${p.READONLY}`]: _.value,
-      [`b-input-field--${p.ERROR}`]: v.value
-    })), F = (b) => {
+      [`b-input-field--${p.ERROR}`]: h.value
+    })), $ = (b) => {
       !e.disabled && !_.value && o("input", b.target.value);
-    }, $ = (b) => {
+    }, H = (b) => {
       o("dropdown-input", b), o("update:dropdown", { ...e == null ? void 0 : e.dropdown, value: b });
     }, T = () => {
       D.value.focus();
     };
     return t({
       focusInput: T
-    }), e.dropdown && e.dropdown.dynamicFiltering && G('"bento-input-field" dropdown does not support "dynamicFiltering"'), e.error && I(
+    }), e.dropdown && e.dropdown.dynamicFiltering && I('"bento-input-field" dropdown does not support "dynamicFiltering"'), Object.values(v).includes(e.type) || I(`"bento-input-field" dropdown does not support the type ${e.type}`), e.error && R(
       'BentoInputField "error" property',
       `Use the BentoInputField "errorMessage" property instead to indicate that there is a modifier error.
             Having the field as "undefined" will hide/remove the error.
             <bento-dropdown errorMessage="Error message text" />`,
       "2.0.0"
-    ), f("defaultIconBefore") && I(
+    ), f("defaultIconBefore") && R(
       'BentoInputField "defaultIconBefore" slot',
       `Use the BentoInputField "iconBefore" slot instead to add an icon at the left side of the input field
             <bento-input-field>
@@ -176,7 +178,7 @@ const de = {
               	</template>
             </bento-input-field>`,
       "2.0.0"
-    ), { __sfc: !0, attrs: r, slots: c, props: e, emit: o, t: w, hasSlot: f, inputFieldElement: D, inputFieldId: R, dropdownId: y, staticValueId: m, descriptionId: S, errorId: g, isReadOnly: _, shouldShowStaticValue: s, isDefaultVariant: C, isPaymentMethodVariant: N, shouldDisplayStaticValueAtStart: L, shouldDisplayStaticValueAtEnd: P, shouldShowDropdown: l, shouldDisplayDropdownAtStart: B, shouldDisplayDropdownAtEnd: M, shouldShowError: v, computedAriaOwns: V, ariaLabelAttribute: E, ariaLabel: A, computedAriaLabel: k, computedAriaDescribedBy: U, inputFieldConditionalClasses: x, onInput: F, onDropdownInput: $, focusInput: T, BentoDropdown: z, BentoTypography: J, ErrorMessage: oe, FieldLabel: re };
+    ), { __sfc: !0, attrs: r, slots: c, props: e, emit: o, t: w, hasSlot: f, inputFieldElement: D, inputFieldId: C, dropdownId: y, staticValueId: m, descriptionId: S, errorId: g, isReadOnly: _, shouldShowStaticValue: s, isDefaultVariant: N, isPaymentMethodVariant: L, shouldDisplayStaticValueAtStart: P, shouldDisplayStaticValueAtEnd: B, shouldShowDropdown: l, shouldDisplayDropdownAtStart: M, shouldDisplayDropdownAtEnd: V, shouldShowError: h, computedAriaOwns: k, ariaLabelAttribute: E, ariaLabel: A, computedAriaLabel: U, computedAriaDescribedBy: x, inputFieldConditionalClasses: F, onInput: $, onDropdownInput: H, focusInput: T, BentoDropdown: G, BentoTypography: J, ErrorMessage: oe, FieldLabel: re };
   }
 });
 var ue = function() {
@@ -202,7 +204,7 @@ var ue = function() {
   pe,
   !1,
   null,
-  "3c4e9198",
+  "ab2ed9b8",
   null,
   null
 );
@@ -212,7 +214,7 @@ export {
   n as BentoInputFieldElementPosition,
   ne as BentoInputFieldEvent,
   p as BentoInputFieldStateClass,
-  h as BentoInputFieldType,
+  v as BentoInputFieldType,
   d as BentoInputFieldVariant
 };
 //# sourceMappingURL=input-field.js.map

package/dist/input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.js","sources":["../src/components/input-field/input-field.types.ts","../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    CONDENSED = 'condensed',\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n};\n\n/**\n * @deprecated The use of these enums is no longer supported.\n * Use `v-on:` or `@` to listen to the events being emitted.\n * This enum will be removed in 2.0.\n */\nexport enum BentoInputFieldEvent {\n    INPUT = 'input',\n    ESCAPE_PRESSED = 'escape-pressed',\n    UPDATE_DROPDOWN = 'update:dropdown',\n    DROPDOWN_INPUT = 'dropdown-input',\n    FOCUS = 'focus',\n    CHANGE = 'change',\n    BLUR = 'blur',\n    KEYDOWN = 'keydown',\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        el=\"div\"\n        variant=\"body\"\n    >\n        <field-label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            @click=\"focusInput\"\n        >\n            <slot></slot>\n        </field-label>\n\n        <div class=\"b-input-field__input-box\" data-testid=\"input-box\" :aria-disabled=\"disabled\" @click=\"focusInput\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"isDefaultVariant && (hasSlot('defaultIconBefore') || hasSlot('iconBefore'))\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-before\"\n            >\n                <slot v-if=\"hasSlot('iconBefore')\" name=\"iconBefore\" />\n                <slot v-if=\"hasSlot('defaultIconBefore') && !hasSlot('iconBefore')\" name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"isPaymentMethodVariant && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    v-bind=\"dropdown\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n\n            <!-- Static Value at start -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtStart\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--start\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <input\n                :id=\"inputFieldId\"\n                v-bind=\"attrs\"\n                ref=\"inputFieldElement\"\n                class=\"b-input-field__input\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-describedby=\"computedAriaDescribedBy\"\n                :aria-owns=\"computedAriaOwns\"\n                :aria-invalid=\"shouldShowError\"\n                :placeholder=\"placeholder\"\n                :type=\"type\"\n                :value=\"value\"\n                :disabled=\"disabled\"\n                :readonly=\"isReadOnly\"\n                @input=\"onInput\"\n                @change=\"emit('change')\"\n                @focus=\"emit('focus')\"\n                @blur=\"emit('blur')\"\n                @keydown=\"emit('keydown', $event)\"\n                @keydown.esc=\"emit('escape-pressed')\"\n            />\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                data-testid=\"input-field-dropdown-container-end\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    v-bind=\"dropdown\"\n                    :dynamic-filtering=\"false\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <error-message\n            v-if=\"shouldShowError && !!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-input-field__error-message\"\n        />\n\n        <span v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography el=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { INPUT_FIELD_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoListboxSelectedValue } from '@/types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Indicates whether the element is exposed to an accessibility API.\n         */\n        ariaHidden: { type: Boolean, default: true },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Text that labels an the input element\n         */\n        ariaLabel: { type: String, default: undefined },\n\n        /**\n         * Reduces height of the input\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Disables the possibility of changing value in the input-field\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Dropdown props for the small selectable dropdown menu.\n         * Properties supported:\n         *\n         *  - `value`: Selected value of the dropdown\n         *  - `items`: List of available items\n         *\n         */\n        dropdown: {\n            type: Object as PropType<BentoInputDropdownProps>,\n            default: undefined,\n        },\n\n        /**\n         * Position of the dropdown before or after input value\n         */\n        dropdownPosition: {\n            type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n            default: BentoInputFieldElementPosition.START,\n            validator: (value: BentoInputFieldElementPosition) =>\n                Object.values(BentoInputFieldElementPosition).includes(value),\n        },\n\n        /**\n         * Adds error validation class for outlining input-field.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        error: { type: Boolean, default: false },\n\n        /**\n         * Renders input-field with an error state and the error message beneath the input box\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * Highlights the dropdown is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Highlights the dropdown is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will set the input field to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Static text that displayed before or after input value\n         * Applicable to the Static Value variant\n         */\n        staticValue: { type: String, default: '' },\n\n        /**\n         * Position of Static Value before or after input value\n         */\n        staticValuePosition: {\n            type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n            default: BentoInputFieldElementPosition.START,\n            validator: (value: BentoInputFieldElementPosition) =>\n                Object.values(BentoInputFieldElementPosition).includes(value),\n        },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * A string specifying the type of control to render.\n         */\n        type: {\n            type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}`>,\n            default: BentoInputFieldType.TEXT,\n            validator: (value: BentoInputFieldType) => Object.values(BentoInputFieldType).includes(value),\n        },\n\n        /**\n         * Text displayed as the value of the input-field\n         */\n        value: { type: [String, Number] as PropType<BentoInputFieldValue>, default: undefined },\n\n        /**\n         * Describes the different variants for the input element\n         */\n        variant: {\n            type: String as PropType<BentoInputFieldVariant | `${BentoInputFieldVariant}`>,\n            default: BentoInputFieldVariant.DEFAULT,\n            validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the Input Field's internal dropdown changes it's value. Contains every dropdown prop passed with the updated selected value as 'value'\n         */\n        (e: 'update:dropdown', updatedDropdownProps: BentoInputDropdownProps): void;\n\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value\n         */\n        (e: 'change'): void;\n\n        /**\n         * Emitted when the Input Field's internal dropdown changes it's value\n         */\n        (e: 'dropdown-input', selectedValue: BentoListboxSelectedValue): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n\n        /**\n         * Emitted when a key is pressed\n         */\n        (e: 'keydown', event: KeyboardEvent): void;\n\n        /**\n         * Emitted when the component's model changes\n         */\n        (e: 'input', inputValue: string): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const hasSlot = useHasSlot(slots);\n    const inputFieldElement = ref(null);\n    const inputFieldId = generateUid('input');\n    const dropdownId = generateUid('input-dropdown');\n    const staticValueId = generateUid('input-static-value');\n    const descriptionId = generateUid('input-description');\n    const errorId = generateUid('input-error');\n\n    // Provide INPUT_FIELD_COMPONENT_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(INPUT_FIELD_COMPONENT_INJECTION_KEY, true);\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const shouldShowStaticValue = computed(\n        () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n    );\n\n    const isDefaultVariant = computed(() => props.variant === BentoInputFieldVariant.DEFAULT);\n\n    const isPaymentMethodVariant = computed(() => props.variant === BentoInputFieldVariant.PAYMENT_METHOD);\n\n    const shouldDisplayStaticValueAtStart = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayStaticValueAtEnd = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowDropdown = computed(() => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown);\n    const shouldDisplayDropdownAtStart = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayDropdownAtEnd = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.error)\n    );\n\n    const computedAriaOwns = computed(() => {\n        if (shouldShowDropdown.value === true && shouldShowStaticValue.value === true) {\n            return `${staticValueId} ${dropdownId}`;\n        }\n        if (shouldShowDropdown.value === true) {\n            return `${dropdownId}`;\n        }\n        if (shouldShowStaticValue.value === true) {\n            return `${staticValueId}`;\n        }\n        return null;\n    });\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: hasSlot('default') ? (getSlotText(slots)('default') as string) : t('ariaLabelFallback'),\n    });\n\n    const computedAriaDescribedBy = computed(\n        () =>\n            `${hasSlot('description') ? descriptionId : ''} ${\n                shouldShowError.value && !!props.errorMessage ? errorId : ''\n            }`\n    );\n\n    const inputFieldConditionalClasses = computed(() => ({\n        [`b-input-field--${BentoInputFieldStateClass.CONDENSED}`]: props.condensed,\n        [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n        [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: isReadOnly.value,\n        [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n    }));\n\n    const onInput = (event: Event) => {\n        if (!props.disabled && !isReadOnly.value) {\n            emit('input', (event.target as HTMLInputElement).value);\n        }\n    };\n\n    const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n        emit('dropdown-input', selectedValue);\n        emit('update:dropdown', { ...props?.dropdown, value: selectedValue });\n    };\n\n    const focusInput = () => {\n        inputFieldElement.value.focus();\n    };\n\n    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\n    });\n\n    if (props.dropdown && (props.dropdown as InstanceType<typeof BentoDropdown>['$props']).dynamicFiltering) {\n        printDevelopmentWarning('\"bento-input-field\" dropdown does not support \"dynamicFiltering\"');\n    }\n\n    /**\n     * Deprecations\n     */\n    if (props.error) {\n        deprecate(\n            'BentoInputField \"error\" property',\n            `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (hasSlot('defaultIconBefore')) {\n        deprecate(\n            'BentoInputField \"defaultIconBefore\" slot',\n            `Use the BentoInputField \"iconBefore\" slot instead to add an icon at the left side of the input field\n            <bento-input-field>\n              \\t<template #iconBefore>\n                \\t\\t<my-icon-goes-here />\n              \\t</template>\n            </bento-input-field>`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input field component is used to create interactive controls for web-based\n     * forms in order to accept data from the user.\n     *\n     * @example\n     * import { BentoInputField } from '@adyen/bento-vue2'\n     *\n     * const inputValue = ref('');\n     *\n     * export default {\n     *      components: { BentoInputField },\n     *      tempate: `\n     *          <bento-input-field\n     *              :value=\"inputValue\"\n     *              :input=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","__default__","messages","attrs","useAttrs","slots","useSlots","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","provide","INPUT_FIELD_COMPONENT_INJECTION_KEY","isReadOnly","useFormLayoutFieldLoading","toRef","props","shouldShowStaticValue","computed","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","onInput","event","emit","onDropdownInput","selectedValue","focusInput","expose","printDevelopmentWarning","deprecate"],"mappings":"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"}
+{"version":3,"file":"input-field.js","sources":["../src/components/input-field/input-field.types.ts","../src/components/input-field/input-field.vue"],"sourcesContent":["import { BentoDropdown } from '@/components/dropdown/';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldVariant {\n    DEFAULT = 'default',\n    PAYMENT_METHOD = 'payment-method',\n    STATIC_VALUE = 'static-value',\n    DROPDOWN = 'dropdown',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldElementPosition {\n    START = 'start',\n    END = 'end',\n}\n\nexport enum BentoInputFieldStateClass {\n    CONDENSED = 'condensed',\n    DISABLED = 'disabled',\n    READONLY = 'readonly',\n    ERROR = 'error',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\ntype DropdownProps = InstanceType<typeof BentoDropdown>['$props'];\nexport type BentoInputDropdownProps = {\n    items: DropdownProps['items'];\n    value: DropdownProps['value'];\n};\n\n/**\n * @deprecated The use of these enums is no longer supported.\n * Use `v-on:` or `@` to listen to the events being emitted.\n * This enum will be removed in 2.0.\n */\nexport enum BentoInputFieldEvent {\n    INPUT = 'input',\n    ESCAPE_PRESSED = 'escape-pressed',\n    UPDATE_DROPDOWN = 'update:dropdown',\n    DROPDOWN_INPUT = 'dropdown-input',\n    FOCUS = 'focus',\n    CHANGE = 'change',\n    BLUR = 'blur',\n    KEYDOWN = 'keydown',\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        data-testid=\"input-text-container\"\n        :class=\"inputFieldConditionalClasses\"\n        el=\"div\"\n        variant=\"body\"\n    >\n        <field-label\n            v-if=\"hasSlot('default')\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            @click=\"focusInput\"\n        >\n            <slot></slot>\n        </field-label>\n\n        <div class=\"b-input-field__input-box\" data-testid=\"input-box\" :aria-disabled=\"disabled\" @click=\"focusInput\">\n            <!-- Optional Icon for Default text variant -->\n            <span\n                v-if=\"isDefaultVariant && (hasSlot('defaultIconBefore') || hasSlot('iconBefore'))\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-before\"\n            >\n                <slot v-if=\"hasSlot('iconBefore')\" name=\"iconBefore\" />\n                <slot v-if=\"hasSlot('defaultIconBefore') && !hasSlot('iconBefore')\" name=\"defaultIconBefore\" />\n            </span>\n\n            <!-- Mandatory Icon for Payment Method variant -->\n            <span\n                v-if=\"isPaymentMethodVariant && hasSlot('paymentMethod')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__payment-method\"\n            >\n                <slot name=\"paymentMethod\" />\n            </span>\n\n            <!-- Dropdown at start -->\n            <div\n                v-if=\"shouldDisplayDropdownAtStart\"\n                :id=\"dropdownId\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--start\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    v-bind=\"dropdown\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n\n            <!-- Static Value at start -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtStart\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--start\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <input\n                :id=\"inputFieldId\"\n                v-bind=\"attrs\"\n                ref=\"inputFieldElement\"\n                class=\"b-input-field__input\"\n                :aria-label=\"computedAriaLabel\"\n                :aria-describedby=\"computedAriaDescribedBy\"\n                :aria-owns=\"computedAriaOwns\"\n                :aria-invalid=\"shouldShowError\"\n                :placeholder=\"placeholder\"\n                :type=\"type\"\n                :value=\"value\"\n                :disabled=\"disabled\"\n                :readonly=\"isReadOnly\"\n                @input=\"onInput\"\n                @change=\"emit('change')\"\n                @focus=\"emit('focus')\"\n                @blur=\"emit('blur')\"\n                @keydown=\"emit('keydown', $event)\"\n                @keydown.esc=\"emit('escape-pressed')\"\n            />\n            <span\n                v-if=\"hasSlot('iconAfter')\"\n                :aria-hidden=\"ariaHidden ? 'true' : undefined\"\n                class=\"b-input-field__icon-after\"\n                data-testid=\"input-text__icon-after\"\n            >\n                <slot name=\"iconAfter\" />\n            </span>\n\n            <!-- Static Value at the end -->\n            <bento-typography\n                v-if=\"shouldDisplayStaticValueAtEnd\"\n                :id=\"staticValueId\"\n                class=\"b-input-field__static-value b-input-field__static-value--end\"\n                el=\"span\"\n                variant=\"body\"\n            >\n                <slot name=\"staticValue\" />\n            </bento-typography>\n\n            <!-- Dropdown at end -->\n            <div\n                v-if=\"shouldDisplayDropdownAtEnd\"\n                :id=\"dropdownId\"\n                data-testid=\"input-field-dropdown-container-end\"\n                class=\"b-input-field__dropdown b-input-field__dropdown--end\"\n                @click.stop\n            >\n                <bento-dropdown\n                    v-if=\"dropdown\"\n                    :id=\"dropdownId\"\n                    v-bind=\"dropdown\"\n                    :dynamic-filtering=\"false\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <error-message\n            v-if=\"shouldShowError && !!errorMessage\"\n            :id=\"errorId\"\n            :error-message=\"errorMessage\"\n            class=\"b-input-field__error-message\"\n        />\n\n        <span v-if=\"hasSlot('description')\" :id=\"descriptionId\" class=\"b-input-field__description\" @click=\"focusInput\">\n            <bento-typography el=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\" />\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { INPUT_FIELD_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.types';\n    import { BentoListboxSelectedValue } from '@/types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n\n    const props = defineProps({\n        /**\n         * Indicates whether the element is exposed to an accessibility API.\n         */\n        ariaHidden: { type: Boolean, default: true },\n\n        /**\n         * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n         */\n        /**\n         * Text that labels an the input element\n         */\n        ariaLabel: { type: String, default: undefined },\n\n        /**\n         * Reduces height of the input\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Disables the possibility of changing value in the input-field\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Dropdown props for the small selectable dropdown menu.\n         * Properties supported:\n         *\n         *  - `value`: Selected value of the dropdown\n         *  - `items`: List of available items\n         *\n         */\n        dropdown: {\n            type: Object as PropType<BentoInputDropdownProps>,\n            default: undefined,\n        },\n\n        /**\n         * Position of the dropdown before or after input value\n         */\n        dropdownPosition: {\n            type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n            default: BentoInputFieldElementPosition.START,\n            validator: (value: BentoInputFieldElementPosition) =>\n                Object.values(BentoInputFieldElementPosition).includes(value),\n        },\n\n        /**\n         * Adds error validation class for outlining input-field.\n         *\n         * @deprecated Use \"errorMessage\" prop instead\n         */\n        error: { type: Boolean, default: false },\n\n        /**\n         * Renders input-field with an error state and the error message beneath the input box\n         */\n        errorMessage: { type: String, default: null },\n\n        /**\n         * Highlights the dropdown is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Highlights the dropdown is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Setting this property to true will set the input field to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Static text that displayed before or after input value\n         * Applicable to the Static Value variant\n         */\n        staticValue: { type: String, default: '' },\n\n        /**\n         * Position of Static Value before or after input value\n         */\n        staticValuePosition: {\n            type: String as PropType<BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`>,\n            default: BentoInputFieldElementPosition.START,\n            validator: (value: BentoInputFieldElementPosition) =>\n                Object.values(BentoInputFieldElementPosition).includes(value),\n        },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * A string specifying the type of control to render.\n         * All `input` types are available but only `search`, `text` and `number` are fully supported.\n         *\n         * If `type` is `search`, use `bento-search-bar` instead.\n         */\n        type: {\n            type: String as PropType<BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type']>,\n            default: BentoInputFieldType.TEXT,\n        },\n\n        /**\n         * Text displayed as the value of the input-field\n         */\n        value: { type: [String, Number] as PropType<BentoInputFieldValue>, default: undefined },\n\n        /**\n         * Describes the different variants for the input element\n         */\n        variant: {\n            type: String as PropType<BentoInputFieldVariant | `${BentoInputFieldVariant}`>,\n            default: BentoInputFieldVariant.DEFAULT,\n            validator: (value: BentoInputFieldVariant) => Object.values(BentoInputFieldVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the Input Field's internal dropdown changes it's value. Contains every dropdown prop passed with the updated selected value as 'value'\n         */\n        (e: 'update:dropdown', updatedDropdownProps: BentoInputDropdownProps): void;\n\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value\n         */\n        (e: 'change'): void;\n\n        /**\n         * Emitted when the Input Field's internal dropdown changes it's value\n         */\n        (e: 'dropdown-input', selectedValue: BentoListboxSelectedValue): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n\n        /**\n         * Emitted when a key is pressed\n         */\n        (e: 'keydown', event: KeyboardEvent): void;\n\n        /**\n         * Emitted when the component's model changes\n         */\n        (e: 'input', inputValue: string): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const hasSlot = useHasSlot(slots);\n    const inputFieldElement = ref(null);\n    const inputFieldId = generateUid('input');\n    const dropdownId = generateUid('input-dropdown');\n    const staticValueId = generateUid('input-static-value');\n    const descriptionId = generateUid('input-description');\n    const errorId = generateUid('input-error');\n\n    // Provide INPUT_FIELD_COMPONENT_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(INPUT_FIELD_COMPONENT_INJECTION_KEY, true);\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const shouldShowStaticValue = computed(\n        () => props.variant === BentoInputFieldVariant.STATIC_VALUE && !!slots.staticValue\n    );\n\n    const isDefaultVariant = computed(() => props.variant === BentoInputFieldVariant.DEFAULT);\n\n    const isPaymentMethodVariant = computed(() => props.variant === BentoInputFieldVariant.PAYMENT_METHOD);\n\n    const shouldDisplayStaticValueAtStart = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayStaticValueAtEnd = computed(\n        () => shouldShowStaticValue.value && props.staticValuePosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowDropdown = computed(() => props.variant === BentoInputFieldVariant.DROPDOWN && !!props.dropdown);\n    const shouldDisplayDropdownAtStart = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.START\n    );\n    const shouldDisplayDropdownAtEnd = computed(\n        () => shouldShowDropdown.value && props.dropdownPosition === BentoInputFieldElementPosition.END\n    );\n\n    const shouldShowError = computed(\n        () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.error)\n    );\n\n    const computedAriaOwns = computed(() => {\n        if (shouldShowDropdown.value === true && shouldShowStaticValue.value === true) {\n            return `${staticValueId} ${dropdownId}`;\n        }\n        if (shouldShowDropdown.value === true) {\n            return `${dropdownId}`;\n        }\n        if (shouldShowStaticValue.value === true) {\n            return `${staticValueId}`;\n        }\n        return null;\n    });\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: hasSlot('default') ? (getSlotText(slots)('default') as string) : t('ariaLabelFallback'),\n    });\n\n    const computedAriaDescribedBy = computed(\n        () =>\n            `${hasSlot('description') ? descriptionId : ''} ${\n                shouldShowError.value && !!props.errorMessage ? errorId : ''\n            }`\n    );\n\n    const inputFieldConditionalClasses = computed(() => ({\n        [`b-input-field--${BentoInputFieldStateClass.CONDENSED}`]: props.condensed,\n        [`b-input-field--${BentoInputFieldStateClass.DISABLED}`]: props.disabled,\n        [`b-input-field--${BentoInputFieldStateClass.READONLY}`]: isReadOnly.value,\n        [`b-input-field--${BentoInputFieldStateClass.ERROR}`]: shouldShowError.value,\n    }));\n\n    const onInput = (event: Event) => {\n        if (!props.disabled && !isReadOnly.value) {\n            emit('input', (event.target as HTMLInputElement).value);\n        }\n    };\n\n    const onDropdownInput = (selectedValue: BentoListboxSelectedValue) => {\n        emit('dropdown-input', selectedValue);\n        emit('update:dropdown', { ...props?.dropdown, value: selectedValue });\n    };\n\n    const focusInput = () => {\n        inputFieldElement.value.focus();\n    };\n\n    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\n    });\n\n    // Unsupported warnings\n    if (props.dropdown && (props.dropdown as InstanceType<typeof BentoDropdown>['$props']).dynamicFiltering) {\n        printDevelopmentWarning('\"bento-input-field\" dropdown does not support \"dynamicFiltering\"');\n    }\n\n    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType)) {\n        printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type ${props.type}`);\n    }\n\n    /**\n     * Deprecations\n     */\n    if (props.error) {\n        deprecate(\n            'BentoInputField \"error\" property',\n            `Use the BentoInputField \"errorMessage\" property instead to indicate that there is a modifier error.\n            Having the field as \"undefined\" will hide/remove the error.\n            <bento-dropdown errorMessage=\"Error message text\" />`,\n            '2.0.0'\n        );\n    }\n\n    if (hasSlot('defaultIconBefore')) {\n        deprecate(\n            'BentoInputField \"defaultIconBefore\" slot',\n            `Use the BentoInputField \"iconBefore\" slot instead to add an icon at the left side of the input field\n            <bento-input-field>\n              \\t<template #iconBefore>\n                \\t\\t<my-icon-goes-here />\n              \\t</template>\n            </bento-input-field>`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input field component is used to create interactive controls for web-based\n     * forms in order to accept data from the user.\n     *\n     * @example\n     * import { BentoInputField } from '@adyen/bento-vue2'\n     *\n     * const inputValue = ref('');\n     *\n     * export default {\n     *      components: { BentoInputField },\n     *      tempate: `\n     *          <bento-input-field\n     *              :value=\"inputValue\"\n     *              :input=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","__default__","messages","attrs","useAttrs","slots","useSlots","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","provide","INPUT_FIELD_COMPONENT_INJECTION_KEY","isReadOnly","useFormLayoutFieldLoading","toRef","props","shouldShowStaticValue","computed","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedAriaOwns","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","getSlotText","computedAriaDescribedBy","inputFieldConditionalClasses","onInput","event","emit","onDropdownInput","selectedValue","focusInput","expose","printDevelopmentWarning","deprecate"],"mappings":"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"}

package/dist/internal.js

@@ -1,81 +1,34 @@
-import { B as I, L } from "./chunks/listbox-option-tag.c0a56a95.js";
-import { C as y, a as A, b as S } from "./chunks/calendar.1e416969.js";
-import { C as b, a as g } from "./chunks/copy.acc9f1b0.js";
-import { C as T } from "./chunks/controls-group.f1dfa419.js";
-import { B as D, b as F, a as N, D as P } from "./chunks/dialog-page.75b295b7.js";
-import { E as K, F as M } from "./chunks/error-message.8734e591.js";
-import { F as Y } from "./chunks/fixed-scroller.772ad033.js";
-import { G as W, a as j } from "./chunks/grid-layout.e0025286.js";
-import { B as z, u as H } from "./chunks/listbox.e6e1bc90.js";
-import { ref as f, watch as v } from "vue";
-import { B as U } from "./chunks/teleport.84b0f20b.js";
-const p = (l, e) => {
-  for (const o of l) {
-    if (o.value === e)
-      return o.label;
-    if (o.items)
-      return p(o.items, e);
-  }
-  return null;
-}, d = (l, e, o) => {
-  const a = f([]), n = f(), i = (t) => {
-    n.value = o.value ? t.map(({ value: m }) => m) : t[0].value;
-  }, C = (t) => {
-    a.value = t, i(t);
-  }, u = () => {
-    a.value = [], n.value = null;
-  };
-  return v(
-    () => e.value,
-    () => {
-      if (!e.value) {
-        u();
-        return;
-      }
-      const t = !Array.isArray(e.value), m = [...a.value];
-      u();
-      const c = (r) => {
-        let s = p(l.value, r);
-        s || p(m, r), s || (s = r.toString()), a.value.push({ value: r, label: s });
-      };
-      if (t) {
-        const r = e.value;
-        c(r), i(a.value);
-        return;
-      }
-      e.value.forEach(c), i(a.value);
-    },
-    { immediate: !0 }
-  ), {
-    // Values
-    cachedSelectedValues: a,
-    simpleSelectedValuesCache: n,
-    // Methods
-    resetCache: u,
-    setCachedValues: C
-  };
-};
+import { B as o, L as r } from "./chunks/listbox-option-tag.6bbb6bbe.js";
+import { C as s, a as p, b as l } from "./chunks/calendar.640b8d25.js";
+import { C as n, a as C } from "./chunks/copy.f85700c6.js";
+import { C as m } from "./chunks/controls-group.4fb50009.js";
+import { B as f, b as G, a as d, D as I } from "./chunks/dialog-page.73da22cf.js";
+import { E as _, F as u } from "./chunks/error-message.31ec12b7.js";
+import { F as A } from "./chunks/fixed-scroller.4eb9a9ac.js";
+import { G as T, a as g } from "./chunks/grid-layout.e0025286.js";
+import { B as D, a as F, u as b } from "./chunks/use-cached-selected-values.69297473.js";
+import { B as P } from "./chunks/teleport.84b0f20b.js";
 export {
-  I as BentoAvatar,
-  D as BentoDialogPageAnimation,
-  z as BentoListbox,
-  U as BentoTeleport,
-  y as Calendar,
-  A as CalendarEvent,
-  S as CalendarFirstDayOfWeek,
-  T as ControlsGroup,
-  b as Copy,
-  g as CopyTooltipState,
-  F as DIALOG_PAGE_CONFIG_INJECTION_KEY,
-  N as DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,
-  P as DialogPage,
-  K as ErrorMessage,
-  M as FieldLabel,
-  Y as FixedScroller,
-  W as GridLayout,
-  j as GridLayoutContainerType,
-  L as ListboxOptionTag,
-  d as useCachedSelectedValues,
-  H as useMultiLevelItems
+  o as BentoAvatar,
+  f as BentoDialogPageAnimation,
+  D as BentoListbox,
+  P as BentoTeleport,
+  s as Calendar,
+  p as CalendarEvent,
+  l as CalendarFirstDayOfWeek,
+  m as ControlsGroup,
+  n as Copy,
+  C as CopyTooltipState,
+  G as DIALOG_PAGE_CONFIG_INJECTION_KEY,
+  d as DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,
+  I as DialogPage,
+  _ as ErrorMessage,
+  u as FieldLabel,
+  A as FixedScroller,
+  T as GridLayout,
+  g as GridLayoutContainerType,
+  r as ListboxOptionTag,
+  F as useCachedSelectedValues,
+  b as useMultiLevelItems
 };
 //# sourceMappingURL=internal.js.map

package/dist/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sources":["../src/components/internal/listbox/composables/use-cached-selected-values/use-cached-selected-values.ts"],"sourcesContent":["import {\n    BentoListboxMultiSelectValue,\n    BentoListboxOptions,\n    BentoListboxSelectedValue,\n    BentoListboxValue,\n} from '@/types';\nimport { ref, Ref, watch } from 'vue';\n\n/**\n * Extracts an item's label from the items in the list of options\n * displayed in the Listbox.\n *\n * Searches through all items and their sub-items (categories).\n *\n * @param items List of options displayed in the Listbox\n * @param value Selected value that needs to be found in the list\n * @returns Label found\n */\nconst findItemLabel = (items: BentoListboxOptions, value: BentoListboxValue): string => {\n    // eslint-disable-next-line no-restricted-syntax\n    for (const item of items) {\n        if (item.value === value) {\n            return item.label;\n        }\n\n        if (item.items) {\n            return findItemLabel(item.items, value);\n        }\n    }\n\n    return null;\n};\n\n/**\n * Creates two lists (one with value/label pairs and one simply with values) that are\n * used to cache the internal option selections to preserve the `label` in case the\n * value is loaded from external sources and might not be found in the list of `items`\n * later on.\n *\n * This helps with external searches and lazy loaded lists.\n *\n * @param items List of options displayed in the Listbox\n * @param selectedValues Selected list of values\n * @param multiple Indicates if the Listbox is multi-select (true) or single-select (false)\n * @returns Two lists of cached items. One list with label/value pairs and one with only the values stored.\n */\nexport const useCachedSelectedValues = (\n    items: Ref<BentoListboxOptions>,\n    selectedValues: Ref<BentoListboxSelectedValue>,\n    multiple: Ref<boolean>\n) => {\n    const cachedSelectedValues = ref<BentoListboxOptions>([]);\n    const simpleSelectedValuesCache = ref<BentoListboxSelectedValue>();\n\n    const setSimpleSelectedValues = (newSelectedValues: BentoListboxOptions) => {\n        simpleSelectedValuesCache.value = multiple.value\n            ? newSelectedValues.map(({ value }) => value)\n            : newSelectedValues[0].value;\n    };\n\n    const setCachedValues = (newSelectedValues: BentoListboxOptions) => {\n        cachedSelectedValues.value = newSelectedValues;\n        setSimpleSelectedValues(newSelectedValues);\n    };\n\n    const resetCache = () => {\n        cachedSelectedValues.value = [];\n        simpleSelectedValuesCache.value = null;\n    };\n\n    watch(\n        () => selectedValues.value,\n        () => {\n            if (!selectedValues.value) {\n                resetCache();\n                return;\n            }\n\n            const isSingleSelect = !Array.isArray(selectedValues.value);\n            // Make a copy of cache\n            const cachedCopy = [...cachedSelectedValues.value];\n            // Clear cache\n            resetCache();\n\n            const addValue = (value: BentoListboxValue) => {\n                // Search label by value in \"items\"\n                let selectedItemText = findItemLabel(items.value, value);\n\n                // Search in previous cache\n                if (!selectedItemText) {\n                    findItemLabel(cachedCopy, value);\n                }\n\n                // Transform value to label if not found anywhere\n                if (!selectedItemText) {\n                    selectedItemText = value.toString();\n                }\n\n                cachedSelectedValues.value.push({ value, label: selectedItemText });\n            };\n\n            if (isSingleSelect) {\n                const value = selectedValues.value as BentoListboxValue;\n\n                addValue(value);\n                setSimpleSelectedValues(cachedSelectedValues.value);\n                return;\n            }\n\n            // Add each selected value in the cache\n            (selectedValues.value as BentoListboxMultiSelectValue).forEach(addValue);\n            setSimpleSelectedValues(cachedSelectedValues.value);\n        },\n        { immediate: true }\n    );\n\n    return {\n        // Values\n        cachedSelectedValues,\n        simpleSelectedValuesCache,\n        // Methods\n        resetCache,\n        setCachedValues,\n    };\n};\n"],"names":["findItemLabel","items","value","item","useCachedSelectedValues","selectedValues","multiple","cachedSelectedValues","ref","simpleSelectedValuesCache","setSimpleSelectedValues","newSelectedValues","setCachedValues","resetCache","watch","isSingleSelect","cachedCopy","addValue","selectedItemText"],"mappings":";;;;;;;;;;;AAkBA,MAAMA,IAAgB,CAACC,GAA4BC,MAAqC;AAEpF,aAAWC,KAAQF,GAAO;AAClB,QAAAE,EAAK,UAAUD;AACf,aAAOC,EAAK;AAGhB,QAAIA,EAAK;AACE,aAAAH,EAAcG,EAAK,OAAOD,CAAK;AAAA;AAIvC,SAAA;AACX,GAeaE,IAA0B,CACnCH,GACAI,GACAC,MACC;AACK,QAAAC,IAAuBC,EAAyB,CAAA,CAAE,GAClDC,IAA4BD,KAE5BE,IAA0B,CAACC,MAA2C;AACxE,IAAAF,EAA0B,QAAQH,EAAS,QACrCK,EAAkB,IAAI,CAAC,EAAE,OAAAT,EAAA,MAAYA,CAAK,IAC1CS,EAAkB,CAAC,EAAE;AAAA,EAAA,GAGzBC,IAAkB,CAACD,MAA2C;AAChE,IAAAJ,EAAqB,QAAQI,GAC7BD,EAAwBC,CAAiB;AAAA,EAAA,GAGvCE,IAAa,MAAM;AACrB,IAAAN,EAAqB,QAAQ,IAC7BE,EAA0B,QAAQ;AAAA,EAAA;AAGtC,SAAAK;AAAA,IACI,MAAMT,EAAe;AAAA,IACrB,MAAM;AACE,UAAA,CAACA,EAAe,OAAO;AACZ,QAAAQ;AACX;AAAA;AAGJ,YAAME,IAAiB,CAAC,MAAM,QAAQV,EAAe,KAAK,GAEpDW,IAAa,CAAC,GAAGT,EAAqB,KAAK;AAEtC,MAAAM;AAEL,YAAAI,IAAW,CAACf,MAA6B;AAE3C,YAAIgB,IAAmBlB,EAAcC,EAAM,OAAOC,CAAK;AAGvD,QAAKgB,KACDlB,EAAcgB,GAAYd,CAAK,GAI9BgB,MACDA,IAAmBhB,EAAM,aAG7BK,EAAqB,MAAM,KAAK,EAAE,OAAAL,GAAO,OAAOgB,GAAkB;AAAA,MAAA;AAGtE,UAAIH,GAAgB;AAChB,cAAMb,IAAQG,EAAe;AAE7B,QAAAY,EAASf,CAAK,GACdQ,EAAwBH,EAAqB,KAAK;AAClD;AAAA;AAIH,MAAAF,EAAe,MAAuC,QAAQY,CAAQ,GACvEP,EAAwBH,EAAqB,KAAK;AAAA,IACtD;AAAA,IACA,EAAE,WAAW,GAAK;AAAA,EAAA,GAGf;AAAA;AAAA,IAEH,sBAAAA;AAAA,IACA,2BAAAE;AAAA;AAAA,IAEA,YAAAI;AAAA,IACA,iBAAAD;AAAA,EAAA;AAER;"}
+{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/link.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/index.8e6bc325.js";
+import { B as o, a as t } from "./chunks/index.317fca12.js";
 export {
   o as BentoLink,
   t as BentoLinkVariant

package/dist/loading-indicator.js

@@ -1,6 +1,6 @@
 import { defineComponent as t, onMounted as s, onUnmounted as l, computed as i } from "vue";
 import { n as r } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index5.css";
+import "./assets/index23.css";
 var a = /* @__PURE__ */ ((n) => (n.START = "loading-start", n.END = "loading-end", n))(a || {});
 const d = t({
   name: "bento-loading-indicator",

package/dist/menu.js

@@ -1,4 +1,4 @@
-import { B as o, a as t } from "./chunks/index.87180cdd.js";
+import { B as o, a as t } from "./chunks/index.1ea85d4a.js";
 export {
   o as BentoMenu,
   t as BentoMenuEvent

package/dist/modal-fullscreen.js

@@ -1,16 +1,16 @@
 import { defineComponent as C, useSlots as B, onMounted as L, toRefs as O, ref as r, computed as M, watch as k, nextTick as T, provide as d } from "vue";
-import { a as D } from "./chunks/button.6e6324f0.js";
-import { B as N } from "./chunks/index.94980f50.js";
-import { B as w } from "./chunks/index.ba6c1040.js";
+import { a as D } from "./chunks/button.9d6435ae.js";
+import { B as N } from "./chunks/index.d553d3d1.js";
+import { B as w } from "./chunks/index.dd30e538.js";
 import { u as x } from "./chunks/use-has-slot.fbeb19ec.js";
-import { D as G, B as R, b as J, a as K } from "./chunks/dialog-page.75b295b7.js";
-import { B as U } from "./chunks/button-actions.239456cb.js";
+import { D as G, B as R, b as J, a as K } from "./chunks/dialog-page.73da22cf.js";
+import { B as U } from "./chunks/button-actions.81db18e8.js";
 import { n as P } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 import { C as Y } from "./chunks/cross.04678d81.js";
 import { u as $ } from "./chunks/i18n.eb5b985b.js";
 import { g as z } from "./chunks/unique-id.a2a2b458.js";
 import { M as H } from "./chunks/modal-fullscreen.keys.b9f31632.js";
-import "./assets/index42.css";
+import "./assets/index22.css";
 const V = {}, j = /* @__PURE__ */ C({
   ...V,
   __name: "modal-fullscreen-page",

package/dist/modal.js

@@ -1,13 +1,13 @@
-import { d as g, h as A, f as d, e as E, c as M, a as L, b as v } from "./chunks/base-modal.aa09a60c.js";
-import { g as yt, B as _t } from "./chunks/base-modal.aa09a60c.js";
+import { d as g, h as A, f as d, e as E, c as M, a as L, b as v } from "./chunks/base-modal.1fff7abe.js";
+import { g as yt, B as _t } from "./chunks/base-modal.1fff7abe.js";
 import { defineComponent as p, useSlots as B, onMounted as O, toRefs as x, ref as P, computed as f, useAttrs as T, watch as k } from "vue";
 import { u as b } from "./chunks/use-has-slot.fbeb19ec.js";
-import { F as R } from "./chunks/footer-actions.11071f12.js";
+import { F as R } from "./chunks/footer-actions.a1e09b4f.js";
 import { n as S } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as C } from "./chunks/button.6e6324f0.js";
+import { B as C } from "./chunks/button.9d6435ae.js";
 import { u as z } from "./chunks/i18n.eb5b985b.js";
-import { B as N } from "./chunks/button-actions.239456cb.js";
-import { d as $ } from "./chunks/index.ba6c1040.js";
+import { B as N } from "./chunks/button-actions.81db18e8.js";
+import { d as $ } from "./chunks/index.dd30e538.js";
 const F = p({
   name: "bento-modal-default"
 }), q = /* @__PURE__ */ p({

package/dist/pagination.js

@@ -1,12 +1,12 @@
 import { defineComponent as p, ref as P, computed as r, toRefs as L } from "vue";
 import { u as N } from "./chunks/aria-label.ac9651a5.js";
-import { B as C } from "./chunks/index.ba6c1040.js";
-import { B as b } from "./chunks/dropdown.669b858b.js";
+import { B as C } from "./chunks/index.dd30e538.js";
+import { B as b } from "./chunks/dropdown.10c034aa.js";
 import { g as T } from "./chunks/unique-id.a2a2b458.js";
 import { g as y, a as x } from "./chunks/i18n.eb5b985b.js";
 import { n as l } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { a as S } from "./chunks/button.6e6324f0.js";
-import "./assets/index39.css";
+import { a as S } from "./chunks/button.9d6435ae.js";
+import "./assets/index24.css";
 const I = {
   "en-US": {
     showingItems: "Showing {itemCount} items",