@adyen/bento-vue2 1.98.0 → 1.99.0

package/dist/chunks/{input-field.BgVjWpiF.js → input-field.y5qXcCAH.js}

@@ -1,5 +1,5 @@
 import { defineComponent as de, useAttrs as se, useSlots as pe, ref as f, provide as ue, inject as x, toRef as ce, computed as i, toRefs as fe } from "vue";
-import { h as be, B as _e } from "./dropdown.NTGSuWAw.js";
+import { h as be, B as _e } from "./dropdown.B21PZqp4.js";
 import { p as E, d as A, B as me } from "./typography.C8lPlsbD.js";
 import { u as ye } from "./form-field.D_2g7vaP.js";
 import { g as b } from "./generate-uid.NJ8tVoha.js";
@@ -219,4 +219,4 @@ export {
   d as e,
   Fe as f
 };
-//# sourceMappingURL=input-field.BgVjWpiF.js.map
+//# sourceMappingURL=input-field.y5qXcCAH.js.map

package/dist/chunks/{input-field.BgVjWpiF.js.map → input-field.y5qXcCAH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-field.BgVjWpiF.js","sources":["../../src/components/input-field/input-field.keys.ts","../../src/components/input-field/input-field.types.ts","../../src/components/input-field/input-field.vue"],"sourcesContent":["export const INPUT_FIELD_HINT_INJECTION_KEY = Symbol('input field hint injection key');\nexport const INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY = Symbol('input field parent component injection key');\n","import { type BentoDropdownProps } from '../dropdown/dropdown.types';\nimport { type FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use 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 Since v2.0.0. Use 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 Since v2.0.0. Use string literal instead.\n */\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\nexport interface BentoInputDropdownProps {\n    /**\n     * Text that labels the dropdown element\n     */\n    'aria-label'?: string;\n    /**\n     * Indicates that dropdown items are loading (shows a loading skeleton)\n     */\n    componentLoading?: BentoDropdownProps['componentLoading'];\n    /**\n     * Enables dynamic filtering\n     */\n    dynamicFiltering?: BentoDropdownProps['dynamicFiltering'];\n    /**\n     * Empty state displayed when no search results are found\n     */\n    emptyState?: BentoDropdownProps['emptyState'];\n    /**\n     * Enables value/label pair handling for selected values\n     */\n    enableValueLabelPair?: BentoDropdownProps['enableValueLabelPair'];\n    /**\n     * Indicates whether there are more items to load\n     */\n    hasMoreItems?: BentoDropdownProps['hasMoreItems'];\n    /**\n     * Function that determines which options are disabled from interaction\n     */\n    isOptionDisabled?: BentoDropdownProps['isOptionDisabled'];\n    /**\n     * List of available items\n     */\n    items: BentoDropdownProps['items'];\n    /**\n     * The type of lazy load: \"automatic\" for infinite scrolling, \"button\" for a show-more button\n     */\n    lazyLoadType?: BentoDropdownProps['lazyLoadType'];\n    /**\n     * Indicates if new options are lazy loading\n     */\n    loading?: BentoDropdownProps['loading'];\n    /**\n     * Selected value of the dropdown\n     */\n    modelValue?: BentoDropdownProps['modelValue'];\n    /**\n     * Sets the dropdown in read-only mode\n     */\n    readonly?: BentoDropdownProps['readonly'];\n    /**\n     * Dropdown search options including debounce time and placeholder\n     */\n    search?: BentoDropdownProps['search'];\n    /**\n     * Displays non-selectable, static categories in the dropdown\n     */\n    staticCategories?: BentoDropdownProps['staticCategories'];\n    /**\n     * Selected value of the dropdown\n     * @deprecated Since v2.0.0. Use `model-value` instead.\n     */\n    value?: BentoDropdownProps['value'];\n    /**\n     * Enables virtual scrolling for large lists of items\n     */\n    virtualScroll?: BentoDropdownProps['virtualScroll'];\n}\n\n/**\n * @deprecated Since v2.0.0. Use `@<emit name>` instead.\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\nexport interface BentoInputFieldProps extends FormField {\n    /**\n     * Indicates whether the element is exposed to an accessibility API.\n     */\n    ariaHidden?: boolean;\n\n    /**\n     * Text that labels an the input element\n     *\n     * @deprecated Since v2.0.0. Use `aria-label` instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Reduces height of the input\n     */\n    condensed?: boolean;\n\n    /**\n     * Dropdown props for the single-select dropdown menu embedded in the input field.\n     * Only a subset of `BentoDropdownProps` is supported (multi-select is not available).\n     *\n     * @see {@link BentoInputDropdownProps}\n     */\n    dropdown?: BentoInputDropdownProps;\n\n    /**\n     * Position of the dropdown before or after input value\n     */\n    dropdownPosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\n\n    /**\n     * Adds error validation class for outlining input-field.\n     *\n     * @deprecated Since v2.0.0. Use `errorMessage` instead.\n     */\n    error?: boolean;\n\n    /**\n     * Text displayed as the value of the input-field\n     */\n    modelValue?: BentoInputFieldValue;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n\n    /**\n     * Static text that displayed before or after input value\n     * Applicable to the Static Value variant\n     */\n    staticValue?: string;\n\n    /**\n     * Position of Static Value before or after input value\n     */\n    staticValuePosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\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?: BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type'];\n\n    /**\n     * Text displayed as the value of the input-field\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoInputFieldValue;\n\n    /**\n     * Describes the different variants for the input element\n     */\n    variant?: BentoInputFieldVariant | `${BentoInputFieldVariant}`;\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        v-bind=\"getRootAttributes($attrs)\"\n        :data-testid=\"getDataTestId($attrs)\"\n        :class=\"inputFieldConditionalClasses\"\n        el=\"div\"\n        variant=\"body\"\n    >\n        <field-label\n            v-if=\"hasSlot('default') || label\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :label=\"label\"\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                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"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            <div class=\"b-input-field__input-container\">\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                    :required=\"required\"\n                    :aria-required=\"required\"\n                    :type=\"type\"\n                    :value=\"modelValue ?? value\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onInput\"\n                    @change=\"emit('change')\"\n                    @focus=\"onFocus\"\n                    @blur=\"onBlur\"\n                    @keydown=\"emit('keydown', $event)\"\n                    @keyup=\"emit('keyup', $event)\"\n                    @keydown.esc=\"emit('escape-pressed')\"\n                    @click=\"emit('click', $event)\"\n                />\n\n                <!-- Hint at the end -->\n                <bento-typography\n                    v-if=\"hint && isFocused && (modelValue || value)\"\n                    el=\"span\"\n                    class=\"b-input-field__hint\"\n                >\n                    {{ hint }}\n                </bento-typography>\n            </div>\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                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"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\n            v-if=\"hasSlot('description') || description\"\n            :id=\"descriptionId\"\n            class=\"b-input-field__description\"\n            @click=\"focusInput\"\n        >\n            <bento-typography el=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\">\n                    {{ description }}\n                </slot>\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide, type Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { DROPDOWN_SMALL_SIZE_INJECTION_KEY } from '@/components/dropdown/dropdown.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { generateUid } from '@/core/utils/ts';\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 {\n        INPUT_FIELD_HINT_INJECTION_KEY,\n        INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY,\n    } from '@/components/input-field/input-field.keys';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        type BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        type BentoInputFieldProps,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        type BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.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  description: { default: '' },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaHidden: { type: Boolean, default: true },\n  ariaLabel: { default: undefined },\n  condensed: { type: Boolean, default: false },\n  dropdown: { default: undefined },\n  dropdownPosition: { default: BentoInputFieldElementPosition.START },\n  error: { type: Boolean, default: false },\n  modelValue: { default: undefined },\n  slashedZero: { type: Boolean, default: false },\n  staticValue: { default: '' },\n  staticValuePosition: { default: BentoInputFieldElementPosition.START },\n  type: { default: BentoInputFieldType.TEXT },\n  value: { default: undefined },\n  variant: { default: BentoInputFieldVariant.DEFAULT }\n});\n\n    const emit = defineEmits([\"blur\", \"click\", \"change\", \"dropdown-input\", \"escape-pressed\", \"focus\", \"keydown\", \"keyup\", \"input\", \"update:dropdown\", \"update:model-value\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoInputFieldValue>(emit);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const hasSlot = useHasSlot(slots);\n    const inputFieldElement = ref(null);\n    const inputDropdownElement = 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    const isFocused = ref(false);\n\n    /**\n     * Gets the overriden or the default data-testid attribute\n     * @param attributes - the live attributes object\n     */\n    function getDataTestId(attributes: Record<string, unknown>) {\n        return (attributes['data-testid'] as string) ?? 'input-text-container';\n    }\n    /**\n     * Filters out all aria attributes for the root element.\n     * @param attributes - the live attributes object\n     */\n    function getRootAttributes(attributes: Record<string, unknown>) {\n        return Object.fromEntries(\n            Object.entries(attributes).filter(([key]) => !key.startsWith('aria-') && key !== 'data-testid')\n        );\n    }\n\n    // Provide DROPDOWN_SMALL_SIZE_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(DROPDOWN_SMALL_SIZE_INJECTION_KEY, true);\n    // Renders the input with a hint if a string is provided\n    const hint = inject<Ref<string | undefined>>(INPUT_FIELD_HINT_INJECTION_KEY, ref(undefined));\n\n    const onFocus = () => {\n        isFocused.value = true;\n        emit('focus');\n    };\n\n    const onBlur = () => {\n        isFocused.value = false;\n        emit('blur');\n    };\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const isDropdownReadOnly = computed<BentoInputDropdownProps['readonly']>(\n        () => isReadOnly.value || props.dropdown?.readonly\n    );\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 computedLabel = computed(() => (getSlotText(slots)('default') as string) || props.label);\n    const computedDescription = computed(() => (getSlotText(slots)('description') as string) || props.description);\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    // vue-i18n issue with t() used in script - direct usage in template works\n    // requires either createI18n({ legacy: false }) or to be wrapped in computed()\n    const computedAriaLabelFallbackMessage = computed(() =>\n        attrs?.['aria-labelledby'] ? undefined : t('ariaLabelFallback')\n    );\n    const computedAriaLabelDropdowFallback = computed(() =>\n        t('ariaLabelDropdownFallback', { inputLabel: computedAriaLabel.value })\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: computedLabel.value || computedAriaLabelFallbackMessage,\n    });\n\n    const computedAriaDescribedBy = computed(\n        () =>\n            `${computedDescription.value ? 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        [`b-input-field--slashed-zero`]: props.slashedZero,\n    }));\n\n    const inputFieldDropdownProps = computed(() => ({\n        'aria-label': computedAriaLabelDropdowFallback.value,\n        ...props.dropdown,\n    }));\n\n    const onInput = (event: Event) => {\n        const inputValue = (event.target as HTMLInputElement).value;\n        if (!props.disabled && !isReadOnly.value) {\n            emitValue(inputValue);\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    const focus = () => {\n        if (props.variant === 'dropdown') {\n            inputDropdownElement.value.focus();\n        } else {\n            focusInput();\n        }\n    };\n\n    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\n        focus,\n    });\n\n    const inputFieldParentComponent = inject(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, '');\n\n    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType) && !inputFieldParentComponent) {\n        if (props.type === 'tel') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-phone-number\" instead.`\n            );\n        } else if (props.type === 'password') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-password\" instead.`\n            );\n        } else {\n            printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type '${props.type}'`);\n        }\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\n    if (props.value) {\n        deprecate(\n            'BentoInputField \"value\" property',\n            `The use of \"value\" prop in \"BentoInputField\" is no longer supported.\n             Use the \"v-model\" or \"model-value\" property instead.`,\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     *              :model-value=\"inputValue\"\n     *              :@update:model-value=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\n        name: 'bento-input-field',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["INPUT_FIELD_HINT_INJECTION_KEY","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","__default__","messages","attrs","useAttrs","slots","useSlots","emitValue","useFormFieldEmits","emit","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputDropdownElement","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isFocused","getDataTestId","attributes","getRootAttributes","key","provide","DROPDOWN_SMALL_SIZE_INJECTION_KEY","hint","inject","onFocus","onBlur","isReadOnly","useFormLayoutFieldLoading","toRef","props","isDropdownReadOnly","computed","_a","shouldShowStaticValue","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedLabel","getSlotText","computedDescription","computedAriaOwns","computedAriaLabelFallbackMessage","computedAriaLabelDropdowFallback","computedAriaLabel","ariaLabelAttribute","ariaLabel","toRefs","useAriaLabel","computedAriaDescribedBy","inputFieldConditionalClasses","inputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","focus","expose","inputFieldParentComponent","printDevelopmentWarning","deprecate"],"mappings":"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"}
+{"version":3,"file":"input-field.y5qXcCAH.js","sources":["../../src/components/input-field/input-field.keys.ts","../../src/components/input-field/input-field.types.ts","../../src/components/input-field/input-field.vue"],"sourcesContent":["export const INPUT_FIELD_HINT_INJECTION_KEY = Symbol('input field hint injection key');\nexport const INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY = Symbol('input field parent component injection key');\n","import { type BentoDropdownProps } from '../dropdown/dropdown.types';\nimport { type FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use 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 Since v2.0.0. Use 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 Since v2.0.0. Use string literal instead.\n */\nexport enum BentoInputFieldType {\n    SEARCH = 'search',\n    TEXT = 'text',\n    NUMBER = 'number',\n}\n\nexport type BentoInputFieldValue = string | number;\n\nexport interface BentoInputDropdownProps {\n    /**\n     * Text that labels the dropdown element\n     */\n    'aria-label'?: string;\n    /**\n     * Indicates that dropdown items are loading (shows a loading skeleton)\n     */\n    componentLoading?: BentoDropdownProps['componentLoading'];\n    /**\n     * Enables dynamic filtering\n     */\n    dynamicFiltering?: BentoDropdownProps['dynamicFiltering'];\n    /**\n     * Empty state displayed when no search results are found\n     */\n    emptyState?: BentoDropdownProps['emptyState'];\n    /**\n     * Enables value/label pair handling for selected values\n     */\n    enableValueLabelPair?: BentoDropdownProps['enableValueLabelPair'];\n    /**\n     * Indicates whether there are more items to load\n     */\n    hasMoreItems?: BentoDropdownProps['hasMoreItems'];\n    /**\n     * Function that determines which options are disabled from interaction\n     */\n    isOptionDisabled?: BentoDropdownProps['isOptionDisabled'];\n    /**\n     * List of available items\n     */\n    items: BentoDropdownProps['items'];\n    /**\n     * The type of lazy load: \"automatic\" for infinite scrolling, \"button\" for a show-more button\n     */\n    lazyLoadType?: BentoDropdownProps['lazyLoadType'];\n    /**\n     * Indicates if new options are lazy loading\n     */\n    loading?: BentoDropdownProps['loading'];\n    /**\n     * Selected value of the dropdown\n     */\n    modelValue?: BentoDropdownProps['modelValue'];\n    /**\n     * Sets the dropdown in read-only mode\n     */\n    readonly?: BentoDropdownProps['readonly'];\n    /**\n     * Dropdown search options including debounce time and placeholder\n     */\n    search?: BentoDropdownProps['search'];\n    /**\n     * Displays non-selectable, static categories in the dropdown\n     */\n    staticCategories?: BentoDropdownProps['staticCategories'];\n    /**\n     * Selected value of the dropdown\n     * @deprecated Since v2.0.0. Use `model-value` instead.\n     */\n    value?: BentoDropdownProps['value'];\n    /**\n     * Enables virtual scrolling for large lists of items\n     */\n    virtualScroll?: BentoDropdownProps['virtualScroll'];\n}\n\n/**\n * @deprecated Since v2.0.0. Use `@<emit name>` instead.\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\nexport interface BentoInputFieldProps extends FormField {\n    /**\n     * Indicates whether the element is exposed to an accessibility API.\n     */\n    ariaHidden?: boolean;\n\n    /**\n     * Text that labels an the input element\n     *\n     * @deprecated Since v2.0.0. Use `aria-label` instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Reduces height of the input\n     */\n    condensed?: boolean;\n\n    /**\n     * Dropdown props for the single-select dropdown menu embedded in the input field.\n     * Only a subset of `BentoDropdownProps` is supported (multi-select is not available).\n     *\n     * @see {@link BentoInputDropdownProps}\n     */\n    dropdown?: BentoInputDropdownProps;\n\n    /**\n     * Position of the dropdown before or after input value\n     */\n    dropdownPosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\n\n    /**\n     * Adds error validation class for outlining input-field.\n     *\n     * @deprecated Since v2.0.0. Use `errorMessage` instead.\n     */\n    error?: boolean;\n\n    /**\n     * Text displayed as the value of the input-field\n     */\n    modelValue?: BentoInputFieldValue;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n\n    /**\n     * Static text that displayed before or after input value\n     * Applicable to the Static Value variant\n     */\n    staticValue?: string;\n\n    /**\n     * Position of Static Value before or after input value\n     */\n    staticValuePosition?: BentoInputFieldElementPosition | `${BentoInputFieldElementPosition}`;\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?: BentoInputFieldType | `${BentoInputFieldType}` | HTMLInputElement['type'];\n\n    /**\n     * Text displayed as the value of the input-field\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: BentoInputFieldValue;\n\n    /**\n     * Describes the different variants for the input element\n     */\n    variant?: BentoInputFieldVariant | `${BentoInputFieldVariant}`;\n}\n","<template>\n    <bento-typography\n        class=\"b-input-field\"\n        v-bind=\"getRootAttributes($attrs)\"\n        :data-testid=\"getDataTestId($attrs)\"\n        :class=\"inputFieldConditionalClasses\"\n        el=\"div\"\n        variant=\"body\"\n    >\n        <field-label\n            v-if=\"hasSlot('default') || label\"\n            :for=\"inputFieldId\"\n            data-testid=\"input-field-label\"\n            :tooltip-text=\"tooltipText\"\n            :optional=\"optional\"\n            :required=\"required\"\n            :label=\"label\"\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                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"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            <div class=\"b-input-field__input-container\">\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                    :required=\"required\"\n                    :aria-required=\"required\"\n                    :type=\"type\"\n                    :value=\"modelValue ?? value\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isReadOnly\"\n                    @input=\"onInput\"\n                    @change=\"emit('change')\"\n                    @focus=\"onFocus\"\n                    @blur=\"onBlur\"\n                    @keydown=\"emit('keydown', $event)\"\n                    @keyup=\"emit('keyup', $event)\"\n                    @keydown.esc=\"emit('escape-pressed')\"\n                    @click=\"emit('click', $event)\"\n                />\n\n                <!-- Hint at the end -->\n                <bento-typography\n                    v-if=\"hint && isFocused && (modelValue || value)\"\n                    el=\"span\"\n                    class=\"b-input-field__hint\"\n                >\n                    {{ hint }}\n                </bento-typography>\n            </div>\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                    ref=\"inputDropdownElement\"\n                    v-bind=\"inputFieldDropdownProps\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"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\n            v-if=\"hasSlot('description') || description\"\n            :id=\"descriptionId\"\n            class=\"b-input-field__description\"\n            @click=\"focusInput\"\n        >\n            <bento-typography el=\"span\" variant=\"body\">\n                <slot id=\"description\" name=\"description\">\n                    {{ description }}\n                </slot>\n            </bento-typography>\n        </span>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide, type Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\n    import { DROPDOWN_SMALL_SIZE_INJECTION_KEY } from '@/components/dropdown/dropdown.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n    import { generateUid } from '@/core/utils/ts';\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 {\n        INPUT_FIELD_HINT_INJECTION_KEY,\n        INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY,\n    } from '@/components/input-field/input-field.keys';\n    import { type BentoListboxSelectedValue } from '@/types/listbox';\n\n    // Composables\n    import { useFormLayoutFieldLoading, useHasSlot } from '@/composables';\n\n    // Types\n    import {\n        type BentoInputDropdownProps,\n        BentoInputFieldElementPosition,\n        type BentoInputFieldProps,\n        BentoInputFieldStateClass,\n        BentoInputFieldType,\n        type BentoInputFieldValue,\n        BentoInputFieldVariant,\n    } from './input-field.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  description: { default: '' },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaHidden: { type: Boolean, default: true },\n  ariaLabel: { default: undefined },\n  condensed: { type: Boolean, default: false },\n  dropdown: { default: undefined },\n  dropdownPosition: { default: BentoInputFieldElementPosition.START },\n  error: { type: Boolean, default: false },\n  modelValue: { default: undefined },\n  slashedZero: { type: Boolean, default: false },\n  staticValue: { default: '' },\n  staticValuePosition: { default: BentoInputFieldElementPosition.START },\n  type: { default: BentoInputFieldType.TEXT },\n  value: { default: undefined },\n  variant: { default: BentoInputFieldVariant.DEFAULT }\n});\n\n    const emit = defineEmits([\"blur\", \"click\", \"change\", \"dropdown-input\", \"escape-pressed\", \"focus\", \"keydown\", \"keyup\", \"input\", \"update:dropdown\", \"update:model-value\"]);\n\n    const { emitValue } = useFormFieldEmits<BentoInputFieldValue>(emit);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const hasSlot = useHasSlot(slots);\n    const inputFieldElement = ref(null);\n    const inputDropdownElement = 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    const isFocused = ref(false);\n\n    /**\n     * Gets the overriden or the default data-testid attribute\n     * @param attributes - the live attributes object\n     */\n    function getDataTestId(attributes: Record<string, unknown>) {\n        return (attributes['data-testid'] as string) ?? 'input-text-container';\n    }\n    /**\n     * Filters out all aria attributes for the root element.\n     * @param attributes - the live attributes object\n     */\n    function getRootAttributes(attributes: Record<string, unknown>) {\n        return Object.fromEntries(\n            Object.entries(attributes).filter(([key]) => !key.startsWith('aria-') && key !== 'data-testid')\n        );\n    }\n\n    // Provide DROPDOWN_SMALL_SIZE_INJECTION_KEY as true, to set the input only dropdown size variant in the BentoDropdown comp\n    provide(DROPDOWN_SMALL_SIZE_INJECTION_KEY, true);\n    // Renders the input with a hint if a string is provided\n    const hint = inject<Ref<string | undefined>>(INPUT_FIELD_HINT_INJECTION_KEY, ref(undefined));\n\n    const onFocus = () => {\n        isFocused.value = true;\n        emit('focus');\n    };\n\n    const onBlur = () => {\n        isFocused.value = false;\n        emit('blur');\n    };\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n    const isDropdownReadOnly = computed<BentoInputDropdownProps['readonly']>(\n        () => isReadOnly.value || props.dropdown?.readonly\n    );\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 computedLabel = computed(() => (getSlotText(slots)('default') as string) || props.label);\n    const computedDescription = computed(() => (getSlotText(slots)('description') as string) || props.description);\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    // vue-i18n issue with t() used in script - direct usage in template works\n    // requires either createI18n({ legacy: false }) or to be wrapped in computed()\n    const computedAriaLabelFallbackMessage = computed(() =>\n        attrs?.['aria-labelledby'] ? undefined : t('ariaLabelFallback')\n    );\n    const computedAriaLabelDropdowFallback = computed(() =>\n        t('ariaLabelDropdownFallback', { inputLabel: computedAriaLabel.value })\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: computedLabel.value || computedAriaLabelFallbackMessage,\n    });\n\n    const computedAriaDescribedBy = computed(\n        () =>\n            `${computedDescription.value ? 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        [`b-input-field--slashed-zero`]: props.slashedZero,\n    }));\n\n    const inputFieldDropdownProps = computed(() => ({\n        'aria-label': computedAriaLabelDropdowFallback.value,\n        ...props.dropdown,\n    }));\n\n    const onInput = (event: Event) => {\n        const inputValue = (event.target as HTMLInputElement).value;\n        if (!props.disabled && !isReadOnly.value) {\n            emitValue(inputValue);\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    const focus = () => {\n        if (props.variant === 'dropdown') {\n            inputDropdownElement.value.focus();\n        } else {\n            focusInput();\n        }\n    };\n\n    // Expose method so that other components can focus on it in Vue3\n    defineExpose({\n        focusInput,\n        focus,\n    });\n\n    const inputFieldParentComponent = inject(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, '');\n\n    if (!Object.values(BentoInputFieldType).includes(props.type as BentoInputFieldType) && !inputFieldParentComponent) {\n        if (props.type === 'tel') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-phone-number\" instead.`\n            );\n        } else if (props.type === 'password') {\n            printDevelopmentWarning(\n                `\"bento-input-field\" dropdown does not support the type '${props.type}', use \"bento-input-field-password\" instead.`\n            );\n        } else {\n            printDevelopmentWarning(`\"bento-input-field\" dropdown does not support the type '${props.type}'`);\n        }\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\n    if (props.value) {\n        deprecate(\n            'BentoInputField \"value\" property',\n            `The use of \"value\" prop in \"BentoInputField\" is no longer supported.\n             Use the \"v-model\" or \"model-value\" property instead.`,\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     *              :model-value=\"inputValue\"\n     *              :@update:model-value=\"newValue => inputValue.value = newValue\"\n     *          >\n     * }\n     */\n    export default {\n        name: 'bento-input-field',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field.scss\" />\n"],"names":["INPUT_FIELD_HINT_INJECTION_KEY","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","BentoInputFieldVariant","BentoInputFieldVariant2","BentoInputFieldElementPosition","BentoInputFieldElementPosition2","BentoInputFieldStateClass","BentoInputFieldStateClass2","BentoInputFieldType","BentoInputFieldType2","BentoInputFieldEvent","BentoInputFieldEvent2","__default__","messages","attrs","useAttrs","slots","useSlots","emitValue","useFormFieldEmits","emit","t","useI18n","hasSlot","useHasSlot","inputFieldElement","ref","inputDropdownElement","inputFieldId","generateUid","dropdownId","staticValueId","descriptionId","errorId","isFocused","getDataTestId","attributes","getRootAttributes","key","provide","DROPDOWN_SMALL_SIZE_INJECTION_KEY","hint","inject","onFocus","onBlur","isReadOnly","useFormLayoutFieldLoading","toRef","props","isDropdownReadOnly","computed","_a","shouldShowStaticValue","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedLabel","getSlotText","computedDescription","computedAriaOwns","computedAriaLabelFallbackMessage","computedAriaLabelDropdowFallback","computedAriaLabel","ariaLabelAttribute","ariaLabel","toRefs","useAriaLabel","computedAriaDescribedBy","inputFieldConditionalClasses","inputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","focus","expose","inputFieldParentComponent","printDevelopmentWarning","deprecate"],"mappings":"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"}

package/dist/chunks/{input-time.C5qQ6S8d.js → input-time.DrJ3n7Cc.js}

@@ -1,6 +1,6 @@
 import { defineComponent as S, provide as g, useSlots as y, ref as D, computed as d, watch as h } from "vue";
-import { f as H, B as I } from "./input-field.BgVjWpiF.js";
-import { g as b } from "./dropdown.NTGSuWAw.js";
+import { f as H, B as I } from "./input-field.y5qXcCAH.js";
+import { g as b } from "./dropdown.B21PZqp4.js";
 import { u as E } from "./index.B6WW_F-J.js";
 import { u as B } from "./use-has-slot.C9lQZ6nz.js";
 import { u as V } from "./use-touch-device.DTqFAbXh.js";
@@ -131,4 +131,4 @@ export {
   Q as B,
   v as i
 };
-//# sourceMappingURL=input-time.C5qQ6S8d.js.map
+//# sourceMappingURL=input-time.DrJ3n7Cc.js.map

package/dist/chunks/{input-time.C5qQ6S8d.js.map → input-time.DrJ3n7Cc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-time.C5qQ6S8d.js","sources":["../../src/utils/ts/time-input.ts","../../src/components/input-time/input-time.vue"],"sourcesContent":["const validDigitRegex = /[\\d]/;\n\nconst hourRegex = /^\\d{2}$/;\nconst minuteRegex = /^\\d{2}:\\d{2}$/;\n\n/**\n * Validates a complete time string in HH:MM:SS format.\n * Hours: 00-24, Minutes: 00-59, Seconds: 00-59\n * @param timeText The time string to validate\n * @returns True if the time string is valid, false otherwise\n */\nexport const isValidTimeString = (timeText: string): boolean =>\n    /^(?:[01]\\d|2[0-4]):(?:[0-5]\\d):(?:[0-5]\\d)$/.test(timeText);\n\nconst MAX_TIME_INPUT_LENGTH = 8;\n\nexport const validateTimeInput = (event: KeyboardEvent) => {\n    const { selectionStart, value = '' } = event.target as HTMLInputElement;\n\n    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n    const isAllowedKey = allowedKeys.includes(event.key);\n    const isValidKey = validDigitRegex.test(event.key) || isAllowedKey;\n    const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n    const isAtMaxLength = value.length >= MAX_TIME_INPUT_LENGTH;\n\n    if ((!isValidKey && !isValidColon) || (isAtMaxLength && !isAllowedKey)) {\n        event.preventDefault();\n    }\n};\n\nexport const formatTimeInputValue = (value: string) => {\n    if (!value) {\n        return value;\n    }\n\n    let formattedValue = value;\n\n    // Format if the first value is bigger than 2, because it can't be bigger than 24 hours\n    if (formattedValue.length === 1 && parseInt(value, 10) > 2) {\n        return `0${formattedValue}:`;\n    }\n\n    const [secondToLastDigit, lastDigit] = formattedValue.slice(-2);\n    if ([2, 5].includes(formattedValue.length) && lastDigit === ':') {\n        formattedValue = `${formattedValue.slice(0, formattedValue.length - 2)}0${secondToLastDigit}`;\n    }\n\n    // Add `:` after hour/minute\n    if (hourRegex.test(formattedValue) || minuteRegex.test(formattedValue)) {\n        formattedValue += ':';\n    }\n    return formattedValue;\n};\n","<template>\n    <bento-input-field\n        class=\"b-input-time\"\n        :type=\"inputType\"\n        :step=\"isTouchDevice ? 1 : undefined\"\n        :condensed=\"props.condensed\"\n        :disabled=\"props.disabled\"\n        :error-message=\"inputErrorMessage\"\n        :label=\"props.label\"\n        :model-value=\"inputModelValue\"\n        :optional=\"props.optional\"\n        :placeholder=\"computedPlaceholder\"\n        :readonly=\"props.readonly\"\n        :required=\"props.required\"\n        :tooltip-text=\"props.tooltipText\"\n        v-bind=\"$attrs\"\n        @update:model-value=\"onInput\"\n        @keydown=\"onKeyDown\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot name=\"default\"></slot>\n        </template>\n        <template v-if=\"!isTouchDevice\" #description>\n            <slot name=\"description\">{{\n                props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n            }}</slot>\n        </template>\n    </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n    // Components\n    import { BentoInputField } from '@/components/input-field';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    // Utils\n    import { debounce } from '@/utils/ts/debounce';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input';\n\n    // Types\n    import type { BentoInputFieldValue } from '@/components/input-field/input-field.types';\n    import { type BentoInputTimeProps } from './input-time.types';\n\n    // Localization\n    import messages from './messages.json';\n\n    import { computed, provide, ref, useSlots, watch } from 'vue';\n    import { useHasSlot, useTouchDevice } from '@/composables';\n\n    const VALIDATION_DEBOUNCE_TIME = 300;\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-time');\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { isTouchDevice } = useTouchDevice();\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  description: { default: undefined },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  condensed: { type: Boolean, default: false },\n  modelValue: { default: undefined }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"keydown\", \"input:valid\", \"input:error\"]);\n\n    const internalError = ref(false);\n    const computedErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return internalError.value ? t('invalidTimeFormat') : null;\n    });\n    const inputErrorMessage = computed(() => (isTouchDevice.value ? props.errorMessage : computedErrorMessage.value));\n    const inputType = computed(() => (isTouchDevice.value ? 'time' : undefined));\n    const inputModelValue = computed(() => props.modelValue);\n    const computedPlaceholder = computed(() => (isTouchDevice ? undefined : props.placeholder));\n\n    const validateTime = (timeText: string) => {\n        if (!timeText) {\n            internalError.value = false;\n            return;\n        }\n\n        const isValid = isValidTimeString(timeText);\n        internalError.value = !isValid;\n\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n    const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME);\n\n    // Watch for external modelValue changes (e.g., when parent resets the value)\n    watch(\n        () => props.modelValue,\n        newValue => {\n            const timeText = String(newValue ?? '');\n            // Clear the error only when the new value is a complete, valid time string\n            if (timeText.length === 8 && isValidTimeString(timeText)) {\n                internalError.value = false;\n            }\n        }\n    );\n\n    const onInput = (value: BentoInputFieldValue) => {\n        if (props.disabled || props.readonly) {\n            return;\n        }\n\n        if (isTouchDevice.value) {\n            emit('update:model-value', String(value ?? ''));\n            emit('input:valid');\n        } else {\n            const formatted = formatTimeInputValue(String(value ?? ''));\n            emit('update:model-value', formatted);\n            validateTimeWithDebounce(formatted);\n        }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (!isTouchDevice.value) {\n            validateTimeInput(event);\n        }\n        emit('keydown', event);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input time component for entering time values in HH:MM:SS format.\n     * This is an extension of the `bento-input-field` component with built-in\n     * time formatting and validation logic.\n     *\n     * @usage\n     * import { BentoInputTime } from '@adyen/bento-vue2';\n     *\n     * const timeValue = ref('');\n     *\n     * export default {\n     *     components: { BentoInputTime },\n     *     template: `\n     *         <bento-input-time\n     *             label=\"Start time\"\n     *             :model-value=\"timeValue\"\n     *             @update:model-value=\"newValue => timeValue.value = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-time',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-time.scss\" />\n"],"names":["validDigitRegex","hourRegex","minuteRegex","isValidTimeString","timeText","MAX_TIME_INPUT_LENGTH","validateTimeInput","event","selectionStart","value","isAllowedKey","isValidKey","isValidColon","isAtMaxLength","formatTimeInputValue","formattedValue","secondToLastDigit","lastDigit","__default__","messages","VALIDATION_DEBOUNCE_TIME","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","slots","useSlots","hasSlot","useHasSlot","isTouchDevice","useTouchDevice","t","useI18n","internalError","ref","computedErrorMessage","computed","props","inputErrorMessage","inputType","inputModelValue","computedPlaceholder","validateTime","isValid","emit","validateTimeWithDebounce","debounce","watch","newValue","formatted"],"mappings":"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"}
+{"version":3,"file":"input-time.DrJ3n7Cc.js","sources":["../../src/utils/ts/time-input.ts","../../src/components/input-time/input-time.vue"],"sourcesContent":["const validDigitRegex = /[\\d]/;\n\nconst hourRegex = /^\\d{2}$/;\nconst minuteRegex = /^\\d{2}:\\d{2}$/;\n\n/**\n * Validates a complete time string in HH:MM:SS format.\n * Hours: 00-24, Minutes: 00-59, Seconds: 00-59\n * @param timeText The time string to validate\n * @returns True if the time string is valid, false otherwise\n */\nexport const isValidTimeString = (timeText: string): boolean =>\n    /^(?:[01]\\d|2[0-4]):(?:[0-5]\\d):(?:[0-5]\\d)$/.test(timeText);\n\nconst MAX_TIME_INPUT_LENGTH = 8;\n\nexport const validateTimeInput = (event: KeyboardEvent) => {\n    const { selectionStart, value = '' } = event.target as HTMLInputElement;\n\n    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n    const isAllowedKey = allowedKeys.includes(event.key);\n    const isValidKey = validDigitRegex.test(event.key) || isAllowedKey;\n    const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n    const isAtMaxLength = value.length >= MAX_TIME_INPUT_LENGTH;\n\n    if ((!isValidKey && !isValidColon) || (isAtMaxLength && !isAllowedKey)) {\n        event.preventDefault();\n    }\n};\n\nexport const formatTimeInputValue = (value: string) => {\n    if (!value) {\n        return value;\n    }\n\n    let formattedValue = value;\n\n    // Format if the first value is bigger than 2, because it can't be bigger than 24 hours\n    if (formattedValue.length === 1 && parseInt(value, 10) > 2) {\n        return `0${formattedValue}:`;\n    }\n\n    const [secondToLastDigit, lastDigit] = formattedValue.slice(-2);\n    if ([2, 5].includes(formattedValue.length) && lastDigit === ':') {\n        formattedValue = `${formattedValue.slice(0, formattedValue.length - 2)}0${secondToLastDigit}`;\n    }\n\n    // Add `:` after hour/minute\n    if (hourRegex.test(formattedValue) || minuteRegex.test(formattedValue)) {\n        formattedValue += ':';\n    }\n    return formattedValue;\n};\n","<template>\n    <bento-input-field\n        class=\"b-input-time\"\n        :type=\"inputType\"\n        :step=\"isTouchDevice ? 1 : undefined\"\n        :condensed=\"props.condensed\"\n        :disabled=\"props.disabled\"\n        :error-message=\"inputErrorMessage\"\n        :label=\"props.label\"\n        :model-value=\"inputModelValue\"\n        :optional=\"props.optional\"\n        :placeholder=\"computedPlaceholder\"\n        :readonly=\"props.readonly\"\n        :required=\"props.required\"\n        :tooltip-text=\"props.tooltipText\"\n        v-bind=\"$attrs\"\n        @update:model-value=\"onInput\"\n        @keydown=\"onKeyDown\"\n    >\n        <template v-if=\"hasSlot('default')\" #default>\n            <slot name=\"default\"></slot>\n        </template>\n        <template v-if=\"!isTouchDevice\" #description>\n            <slot name=\"description\">{{\n                props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n            }}</slot>\n        </template>\n    </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n    // Components\n    import { BentoInputField } from '@/components/input-field';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    // Utils\n    import { debounce } from '@/utils/ts/debounce';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input';\n\n    // Types\n    import type { BentoInputFieldValue } from '@/components/input-field/input-field.types';\n    import { type BentoInputTimeProps } from './input-time.types';\n\n    // Localization\n    import messages from './messages.json';\n\n    import { computed, provide, ref, useSlots, watch } from 'vue';\n    import { useHasSlot, useTouchDevice } from '@/composables';\n\n    const VALIDATION_DEBOUNCE_TIME = 300;\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-time');\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { isTouchDevice } = useTouchDevice();\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  description: { default: undefined },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  condensed: { type: Boolean, default: false },\n  modelValue: { default: undefined }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"keydown\", \"input:valid\", \"input:error\"]);\n\n    const internalError = ref(false);\n    const computedErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return internalError.value ? t('invalidTimeFormat') : null;\n    });\n    const inputErrorMessage = computed(() => (isTouchDevice.value ? props.errorMessage : computedErrorMessage.value));\n    const inputType = computed(() => (isTouchDevice.value ? 'time' : undefined));\n    const inputModelValue = computed(() => props.modelValue);\n    const computedPlaceholder = computed(() => (isTouchDevice ? undefined : props.placeholder));\n\n    const validateTime = (timeText: string) => {\n        if (!timeText) {\n            internalError.value = false;\n            return;\n        }\n\n        const isValid = isValidTimeString(timeText);\n        internalError.value = !isValid;\n\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n    const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME);\n\n    // Watch for external modelValue changes (e.g., when parent resets the value)\n    watch(\n        () => props.modelValue,\n        newValue => {\n            const timeText = String(newValue ?? '');\n            // Clear the error only when the new value is a complete, valid time string\n            if (timeText.length === 8 && isValidTimeString(timeText)) {\n                internalError.value = false;\n            }\n        }\n    );\n\n    const onInput = (value: BentoInputFieldValue) => {\n        if (props.disabled || props.readonly) {\n            return;\n        }\n\n        if (isTouchDevice.value) {\n            emit('update:model-value', String(value ?? ''));\n            emit('input:valid');\n        } else {\n            const formatted = formatTimeInputValue(String(value ?? ''));\n            emit('update:model-value', formatted);\n            validateTimeWithDebounce(formatted);\n        }\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        if (!isTouchDevice.value) {\n            validateTimeInput(event);\n        }\n        emit('keydown', event);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input time component for entering time values in HH:MM:SS format.\n     * This is an extension of the `bento-input-field` component with built-in\n     * time formatting and validation logic.\n     *\n     * @usage\n     * import { BentoInputTime } from '@adyen/bento-vue2';\n     *\n     * const timeValue = ref('');\n     *\n     * export default {\n     *     components: { BentoInputTime },\n     *     template: `\n     *         <bento-input-time\n     *             label=\"Start time\"\n     *             :model-value=\"timeValue\"\n     *             @update:model-value=\"newValue => timeValue.value = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-time',\n        inheritAttrs: false,\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-time.scss\" />\n"],"names":["validDigitRegex","hourRegex","minuteRegex","isValidTimeString","timeText","MAX_TIME_INPUT_LENGTH","validateTimeInput","event","selectionStart","value","isAllowedKey","isValidKey","isValidColon","isAtMaxLength","formatTimeInputValue","formattedValue","secondToLastDigit","lastDigit","__default__","messages","VALIDATION_DEBOUNCE_TIME","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","slots","useSlots","hasSlot","useHasSlot","isTouchDevice","useTouchDevice","t","useI18n","internalError","ref","computedErrorMessage","computed","props","inputErrorMessage","inputType","inputModelValue","computedPlaceholder","validateTime","isValid","emit","validateTimeWithDebounce","debounce","watch","newValue","formatted"],"mappings":"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"}

package/dist/chunks/{list-item.BxQkbnLZ.js → list-item.BO75rSht.js}

@@ -1,4 +1,4 @@
-import { defineComponent as P, computed as c, ref as B, watch as L, provide as H, useSlots as F, inject as E } from "vue";
+import { defineComponent as P, computed as c, ref as y, watch as x, provide as H, useSlots as E, inject as F } from "vue";
 import { n as R } from "./index.BPUMyryR.js";
 import { u as k, a as U, B as A } from "./draggable-handle.BnRkhlee.js";
 import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -7,9 +7,9 @@ import { B as z } from "./status.CKb07vxI.js";
 import { B as N } from "./tag.XeZzHnx_.js";
 import { B as j } from "./typography.C8lPlsbD.js";
 import { u as G } from "./use-has-slot.C9lQZ6nz.js";
-import { u as K } from "./index.B6WW_F-J.js";
+import { u as J } from "./index.B6WW_F-J.js";
 import "../assets/list-item.css";
-const Y = {
+const K = {
   "de-DE": {
     youHaveMovedFromPositionToPosition: "Sie haben {itemLabel} von Position {indexOrigin} an Position {indexTarget} von {total} verschoben."
   },
@@ -40,12 +40,12 @@ const Y = {
   "zh-CN": {
     youHaveMovedFromPositionToPosition: "您已将 {itemLabel} 从 {indexOrigin} 位置移动到 {indexTarget} 位置（共 {total} 个位置）。"
   }
-}, x = /* @__PURE__ */ Symbol("list draggable injection key"), J = {
+}, L = /* @__PURE__ */ Symbol("list draggable injection key"), Y = {
   name: "bento-list",
   inheritAttrs: !1,
-  i18n: { messages: Y }
+  i18n: { messages: K }
 }, V = /* @__PURE__ */ P({
-  ...J,
+  ...Y,
   props: {
     type: { default: "unordered" },
     draggable: { type: Boolean, default: !1 },
@@ -53,10 +53,10 @@ const Y = {
   },
   emits: ["reorder"],
   setup(_, { emit: e }) {
-    const o = _, t = ".b-list-item", p = c(() => o.type === "ordered" ? "ol" : "ul"), a = B(null), s = B([]), v = c(() => o.draggable), u = () => a.value ? Array.from(a.value.children).filter((i) => i.matches(t)) : [], d = () => {
+    const o = _, t = ".b-list-item", p = c(() => o.type === "ordered" ? "ol" : "ul"), a = y(null), s = y([]), v = c(() => o.draggable), u = () => a.value ? Array.from(a.value.children).filter((i) => i.matches(t)) : [], d = () => {
       s.value = u();
     };
-    L(
+    x(
       a,
       (i) => {
         if (!i) {
@@ -82,48 +82,75 @@ const Y = {
         total: r.length,
         announcement: (m = o.draggableOptions) == null ? void 0 : m.dragAnnouncement
       });
-    }, h = (i, l) => {
+    }, I = (i, l) => {
       const r = u(), m = r[i], D = r[l];
       i < l ? a.value.insertBefore(m, D.nextSibling) : a.value.insertBefore(m, D), d(), b(i, l), e("reorder", { oldIndex: i, newIndex: l });
-    }, I = c(() => ({
+    }, h = c(() => ({
       ...o.draggableOptions,
       onSort: (i) => {
         var l, r;
         d(), i.oldIndex !== void 0 && i.newIndex !== void 0 && (b(i.oldIndex, i.newIndex), e("reorder", { oldIndex: i.oldIndex, newIndex: i.newIndex })), (r = (l = o.draggableOptions) == null ? void 0 : l.onSort) == null || r.call(l, i);
       }
-    })), { announcementMessage: w, announceMove: T } = k(), { moveItemUp: y, moveItemDown: n, moveItemTop: O, moveItemBottom: C, getDisabledMenus: M } = U(
+    })), { announcementMessage: w, announceMove: T } = k(), { moveItemUp: B, moveItemDown: n, moveItemTop: O, moveItemBottom: C, getDisabledMenus: M } = U(
       a,
-      I,
+      h,
       {
         getItemCount: () => s.value.length,
         getItemIndex: g,
-        onMoveItem: h
+        onMoveItem: I
       }
     );
-    return H(x, {
+    return H(L, {
       isDraggable: v,
-      moveItemUp: y,
+      moveItemUp: B,
       moveItemDown: n,
       moveItemTop: O,
       moveItemBottom: C,
       getDisabledMenus: M
-    }), { __sfc: !0, ITEM_SELECTOR: t, props: o, emit: e, listElement: p, listRef: a, listItems: s, isDraggable: v, getListItems: u, syncListItems: d, getItemIndex: g, getItemLabel: f, announceMoveAt: b, moveItemDOM: h, computedDraggableOptions: I, announcementMessage: w, announceMove: T, moveItemUp: y, moveItemDown: n, moveItemTop: O, moveItemBottom: C, getDisabledMenus: M };
+    }), { __sfc: !0, ITEM_SELECTOR: t, props: o, emit: e, listElement: p, listRef: a, listItems: s, isDraggable: v, getListItems: u, syncListItems: d, getItemIndex: g, getItemLabel: f, announceMoveAt: b, moveItemDOM: I, computedDraggableOptions: h, announcementMessage: w, announceMove: T, moveItemUp: B, moveItemDown: n, moveItemTop: O, moveItemBottom: C, getDisabledMenus: M };
   }
 });
-var q = function() {
+var X = function() {
   var e = this, o = e._self._c, t = e._self._setupProxy;
   return o("div", { staticClass: "b-list" }, [o(t.listElement, e._b({ ref: "listRef", tag: "component", staticClass: "b-list__list" }, "component", e.$attrs, !1), [e._t("default")], 2), t.isDraggable ? o("div", { staticClass: "b-list__announcement", attrs: { role: "status", "aria-live": "polite" } }, [e._v(" " + e._s(t.announcementMessage) + " ")]) : e._e()], 1);
-}, X = [], Q = /* @__PURE__ */ S(
+}, q = [], Q = /* @__PURE__ */ S(
   V,
-  q,
   X,
+  q,
   !1,
   null,
   "c2ccaf69"
 );
 const ue = Q.exports, W = {
+  "de-DE": {
+    listItem: "Listenelement"
+  },
+  "en-GB": {
+    listItem: "list item"
+  },
   "en-US": {
     listItem: "list item"
+  },
+  "es-ES": {
+    listItem: "elemento de lista"
+  },
+  "es-MX": {
+    listItem: "elemento de la lista"
+  },
+  "fr-FR": {
+    listItem: "élément de liste"
+  },
+  "it-IT": {
+    listItem: "elemento della lista"
+  },
+  "ja-JP": {
+    listItem: "リストアイテム"
+  },
+  "pt-BR": {
+    listItem: "item da lista"
+  },
+  "zh-CN": {
+    listItem: "列表项"
   }
 }, Z = {
   name: "bento-list-item",
@@ -143,7 +170,7 @@ const ue = Q.exports, W = {
   },
   emits: ["click", "move-up", "move-down", "move-top", "move-bottom"],
   setup(_, { emit: e }) {
-    const o = _, t = F(), p = G(t), a = B(null), s = E(x, null), { t: v } = K(), u = () => {
+    const o = _, t = E(), p = G(t), a = y(null), s = F(L, null), { t: v } = J(), u = () => {
       o.withChevron && e("click");
     }, d = (n) => {
       o.withChevron && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), e("click"));
@@ -154,11 +181,11 @@ const ue = Q.exports, W = {
     })), f = c(() => !!(s != null && s.isDraggable.value)), b = c(() => {
       var n;
       return ((n = o.draggableOptions) == null ? void 0 : n.label) || o.label || v("listItem");
-    }), h = c(() => {
+    }), I = c(() => {
       var n;
       return (n = o.draggableOptions) != null && n.disabledMenus ? o.draggableOptions.disabledMenus : s == null ? void 0 : s.getDisabledMenus(a.value);
     });
-    return { __sfc: !0, slots: t, hasSlot: p, itemRef: a, draggableContext: s, t: v, props: o, emit: e, onItemClick: u, onItemKeydown: d, conditionalClasses: g, showDragHandle: f, dragHandleLabel: b, disabledMenus: h, moveItemUp: () => {
+    return { __sfc: !0, slots: t, hasSlot: p, itemRef: a, draggableContext: s, t: v, props: o, emit: e, onItemClick: u, onItemKeydown: d, conditionalClasses: g, showDragHandle: f, dragHandleLabel: b, disabledMenus: I, moveItemUp: () => {
       var n;
       e("move-up"), (((n = o.draggableOptions) == null ? void 0 : n.moveUp) ?? (() => s == null ? void 0 : s.moveItemUp(a.value)))();
     }, moveItemDown: () => {
@@ -190,4 +217,4 @@ export {
   _e as a,
   ue as l
 };
-//# sourceMappingURL=list-item.BxQkbnLZ.js.map
+//# sourceMappingURL=list-item.BO75rSht.js.map

package/dist/chunks/{list-item.BxQkbnLZ.js.map → list-item.BO75rSht.js.map}

@@ -1 +1 @@
-{"version":3,"file":"list-item.BxQkbnLZ.js","sources":["../../src/components/list/list.keys.ts","../../src/components/list/list.vue","../../src/components/list/components/list-item/list-item.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\nimport type { BentoDraggableDisabledMenus } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n\nexport interface BentoListDraggableContext {\n    isDraggable: ComputedRef<boolean>;\n    moveItemUp: (element: HTMLElement | null) => void;\n    moveItemDown: (element: HTMLElement | null) => void;\n    moveItemTop: (element: HTMLElement | null) => void;\n    moveItemBottom: (element: HTMLElement | null) => void;\n    getDisabledMenus: (element: HTMLElement | null) => BentoDraggableDisabledMenus;\n}\n\nexport const BENTO_LIST_DRAGGABLE_INJECTION_KEY = Symbol('list draggable injection key');\n","<template>\n    <div class=\"b-list\">\n        <component :is=\"listElement\" ref=\"listRef\" v-bind=\"$attrs\" class=\"b-list__list\">\n            <slot />\n        </component>\n\n        <div v-if=\"isDraggable\" class=\"b-list__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ announcementMessage }}\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { useMutationObserver } from '@vueuse/core';\n    import { computed, provide, ref, watch } from 'vue';\n    import { useBentoDraggable } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n    import { useDraggableAnnouncement } from '@/components/draggable/composables/use-draggable-announcement/use-draggable-announcement';\n    import type { BentoDraggableOptions, BentoDraggableSortableEvent } from '@/components/draggable/draggable.types';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from './list.keys';\n    import type { BentoListDraggableContext } from './list.keys';\n    import type { BentoListProps } from './list.types';\n\n    // used for announcement composable\n    import draggableMessages from '@/components/draggable/composables/use-draggable-announcement/messages.json';\n\n    const ITEM_SELECTOR = '.b-list-item';\n\n    const props = defineProps({\n  type: { default: 'unordered' },\n  draggable: { type: Boolean, default: false },\n  draggableOptions: { default: () => ({}) }\n});\n\n    const emit = defineEmits([\"reorder\"]);\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\n    const listRef = ref<HTMLElement | null>(null);\n    const listItems = ref<Array<HTMLElement>>([]);\n    const isDraggable = computed(() => props.draggable);\n\n    const getListItems = (): Array<HTMLElement> =>\n        listRef.value\n            ? (Array.from(listRef.value.children).filter(child => child.matches(ITEM_SELECTOR)) as Array<HTMLElement>)\n            : [];\n\n    const syncListItems = () => {\n        listItems.value = getListItems();\n    };\n\n    watch(\n        listRef,\n        newElement => {\n            if (!newElement) {\n                listItems.value = [];\n                return;\n            }\n\n            syncListItems();\n        },\n        { immediate: true }\n    );\n\n    useMutationObserver(listRef, syncListItems, { childList: true });\n\n    const getItemIndex = (el: HTMLElement | null) => (el ? listItems.value.indexOf(el) : -1);\n\n    const getItemLabel = (el: HTMLElement | null, fallbackIndex: number) =>\n        el?.querySelector('[data-list-item-label]')?.textContent?.trim() || `List item ${fallbackIndex + 1}`;\n\n    const announceMoveAt = (fromIndex: number, toIndex: number) => {\n        if (!isDraggable.value) {\n            return;\n        }\n\n        const items = getListItems();\n        announceMove({\n            itemLabel: getItemLabel(items[toIndex] ?? null, toIndex),\n            fromIndex,\n            toIndex,\n            total: items.length,\n            announcement: props.draggableOptions?.dragAnnouncement,\n        });\n    };\n\n    const moveItemDOM = (fromIndex: number, toIndex: number) => {\n        const items = getListItems();\n        const itemToMove = items[fromIndex];\n        const targetItem = items[toIndex];\n\n        if (fromIndex < toIndex) {\n            listRef.value!.insertBefore(itemToMove, targetItem.nextSibling);\n        } else {\n            listRef.value!.insertBefore(itemToMove, targetItem);\n        }\n\n        syncListItems();\n        announceMoveAt(fromIndex, toIndex);\n        emit('reorder', { oldIndex: fromIndex, newIndex: toIndex });\n    };\n\n    const computedDraggableOptions = computed<BentoDraggableOptions>(() => ({\n        ...props.draggableOptions,\n        onSort: (event: BentoDraggableSortableEvent) => {\n            syncListItems();\n            if (event.oldIndex !== undefined && event.newIndex !== undefined) {\n                announceMoveAt(event.oldIndex, event.newIndex);\n                emit('reorder', { oldIndex: event.oldIndex, newIndex: event.newIndex });\n            }\n            props.draggableOptions?.onSort?.(event);\n        },\n    }));\n\n    const { announcementMessage, announceMove } = useDraggableAnnouncement();\n\n    const { moveItemUp, moveItemDown, moveItemTop, moveItemBottom, getDisabledMenus } = useBentoDraggable(\n        listRef,\n        computedDraggableOptions,\n        {\n            getItemCount: () => listItems.value.length,\n            getItemIndex,\n            onMoveItem: moveItemDOM,\n        }\n    );\n\n    provide<BentoListDraggableContext>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, {\n        isDraggable,\n        moveItemUp,\n        moveItemDown,\n        moveItemTop,\n        moveItemBottom,\n        getDisabledMenus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows.\n     *\n     * @example\n     * import { BentoList, BentoListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              />\n     *              <bento-list-item\n     *                  label=\"Risk configuration\"\n     *                  description=\"Updated yesterday\"\n     *                  :tag=\"{ label: 'Review', variant: 'orange' }\"\n     *              />\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list',\n        inheritAttrs: false,\n        i18n: { messages: draggableMessages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li ref=\"itemRef\" class=\"b-list-item\" @click=\"onItemClick\" @keydown=\"onItemKeydown\">\n        <bento-typography\n            class=\"b-list-item__inner\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            :role=\"props.withChevron ? 'button' : undefined\"\n            :tabindex=\"props.withChevron ? 0 : undefined\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-list-item__image\">\n                <slot name=\"image\" />\n            </div>\n\n            <bento-draggable-handle\n                v-if=\"showDragHandle\"\n                condensed\n                :label=\"dragHandleLabel\"\n                :disabled-menus=\"disabledMenus\"\n                :disabled=\"draggableOptions?.disabled\"\n                @move-up=\"moveItemUp\"\n                @move-down=\"moveItemDown\"\n                @move-top=\"moveItemTop\"\n                @move-bottom=\"moveItemBottom\"\n            />\n\n            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot v-if=\"hasSlot('start')\" name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\" data-list-item-label>\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography\n                            v-if=\"props.label\"\n                            class=\"b-list-item__label\"\n                            data-list-item-label\n                            el=\"span\"\n                            stronger\n                        >\n                            {{ props.label }}\n                        </bento-typography>\n                        <bento-status\n                            v-if=\"props.showStatus\"\n                            class=\"b-list-item__status\"\n                            :variant=\"props.statusColor\"\n                            aria-hidden=\"true\"\n                        />\n                        <bento-tag v-if=\"props.tag\" v-bind=\"props.tag\" class=\"b-list-item__tag\" />\n                    </div>\n                    <span v-if=\"props.description\" class=\"b-list-item__description\">\n                        {{ props.description }}\n                    </span>\n                </template>\n            </div>\n\n            <div v-if=\"hasSlot('end')\" class=\"b-list-item__end\">\n                <slot name=\"end\" />\n            </div>\n\n            <chevron-right-icon v-if=\"props.withChevron\" class=\"b-list-item__chevron\" aria-hidden=\"true\" />\n        </bento-typography>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n    import { BentoDraggableHandle } from '@/components/draggable/components/draggable-handle';\n    import { BentoStatus } from '@/components/status';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from '../../list.keys';\n    import type { BentoListDraggableContext } from '../../list.keys';\n    import type { BentoListItemProps } from './list-item.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const itemRef = ref<HTMLElement | null>(null);\n    const draggableContext = inject<BentoListDraggableContext | null>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, null);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  label: null,\n  description: null,\n  draggableOptions: { default: null },\n  showStatus: { type: Boolean, default: false },\n  statusColor: { default: 'blue' },\n  tag: { default: undefined },\n  withChevron: { type: Boolean, default: false },\n  showTopDivider: { type: Boolean, default: false },\n  showBottomDivider: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"click\", \"move-up\", \"move-down\", \"move-top\", \"move-bottom\"]);\n\n    const onItemClick = (): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        emit('click');\n    };\n\n    const onItemKeydown = (event: KeyboardEvent): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            emit('click');\n        }\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-list-item__inner--clickable': props.withChevron,\n        'b-list-item__inner--top-divider': props.showTopDivider,\n        'b-list-item__inner--bottom-divider': props.showBottomDivider,\n    }));\n\n    const showDragHandle = computed(() => Boolean(draggableContext?.isDraggable.value));\n    const dragHandleLabel = computed(() => props.draggableOptions?.label || props.label || t('listItem'));\n    const disabledMenus = computed(() => {\n        if (props.draggableOptions?.disabledMenus) {\n            return props.draggableOptions.disabledMenus;\n        }\n\n        return draggableContext?.getDisabledMenus(itemRef.value);\n    });\n\n    const moveItemUp = () => {\n        emit('move-up');\n        (props.draggableOptions?.moveUp ?? (() => draggableContext?.moveItemUp(itemRef.value)))();\n    };\n\n    const moveItemDown = () => {\n        emit('move-down');\n        (props.draggableOptions?.moveDown ?? (() => draggableContext?.moveItemDown(itemRef.value)))();\n    };\n\n    const moveItemTop = () => {\n        emit('move-top');\n        (props.draggableOptions?.moveTop ?? (() => draggableContext?.moveItemTop(itemRef.value)))();\n    };\n\n    const moveItemBottom = () => {\n        emit('move-bottom');\n        (props.draggableOptions?.moveBottom ?? (() => draggableContext?.moveItemBottom(itemRef.value)))();\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoListItem` renders an item to be used inside `BentoList`.\n     *\n     * @example\n     * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem, BentoButton, BentoToggle },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              >\n     *                  <template #start>\n     *                      <bento-toggle />\n     *                  </template>\n     *                  <template #end>\n     *                      <bento-button variant=\"secondary\">Edit</bento-button>\n     *                  </template>\n     *              </bento-list-item>\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list-item',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["BENTO_LIST_DRAGGABLE_INJECTION_KEY","__default__$1","draggableMessages","ITEM_SELECTOR","listElement","computed","props","listRef","ref","listItems","isDraggable","getListItems","child","syncListItems","watch","newElement","useMutationObserver","getItemIndex","el","getItemLabel","fallbackIndex","_b","_a","announceMoveAt","fromIndex","toIndex","items","announceMove","moveItemDOM","itemToMove","targetItem","emit","computedDraggableOptions","event","announcementMessage","useDraggableAnnouncement","moveItemUp","moveItemDown","moveItemTop","moveItemBottom","getDisabledMenus","useBentoDraggable","provide","__default__","messages","slots","useSlots","hasSlot","useHasSlot","itemRef","draggableContext","inject","t","useI18n","onItemClick","onItemKeydown","conditionalClasses","showDragHandle","dragHandleLabel","disabledMenus"],"mappings":"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"}
+{"version":3,"file":"list-item.BO75rSht.js","sources":["../../src/components/list/list.keys.ts","../../src/components/list/list.vue","../../src/components/list/components/list-item/list-item.vue"],"sourcesContent":["import type { ComputedRef } from 'vue';\nimport type { BentoDraggableDisabledMenus } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n\nexport interface BentoListDraggableContext {\n    isDraggable: ComputedRef<boolean>;\n    moveItemUp: (element: HTMLElement | null) => void;\n    moveItemDown: (element: HTMLElement | null) => void;\n    moveItemTop: (element: HTMLElement | null) => void;\n    moveItemBottom: (element: HTMLElement | null) => void;\n    getDisabledMenus: (element: HTMLElement | null) => BentoDraggableDisabledMenus;\n}\n\nexport const BENTO_LIST_DRAGGABLE_INJECTION_KEY = Symbol('list draggable injection key');\n","<template>\n    <div class=\"b-list\">\n        <component :is=\"listElement\" ref=\"listRef\" v-bind=\"$attrs\" class=\"b-list__list\">\n            <slot />\n        </component>\n\n        <div v-if=\"isDraggable\" class=\"b-list__announcement\" role=\"status\" aria-live=\"polite\">\n            {{ announcementMessage }}\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { useMutationObserver } from '@vueuse/core';\n    import { computed, provide, ref, watch } from 'vue';\n    import { useBentoDraggable } from '@/components/draggable/composables/use-bento-draggable/use-bento-draggable';\n    import { useDraggableAnnouncement } from '@/components/draggable/composables/use-draggable-announcement/use-draggable-announcement';\n    import type { BentoDraggableOptions, BentoDraggableSortableEvent } from '@/components/draggable/draggable.types';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from './list.keys';\n    import type { BentoListDraggableContext } from './list.keys';\n    import type { BentoListProps } from './list.types';\n\n    // used for announcement composable\n    import draggableMessages from '@/components/draggable/composables/use-draggable-announcement/messages.json';\n\n    const ITEM_SELECTOR = '.b-list-item';\n\n    const props = defineProps({\n  type: { default: 'unordered' },\n  draggable: { type: Boolean, default: false },\n  draggableOptions: { default: () => ({}) }\n});\n\n    const emit = defineEmits([\"reorder\"]);\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\n    const listRef = ref<HTMLElement | null>(null);\n    const listItems = ref<Array<HTMLElement>>([]);\n    const isDraggable = computed(() => props.draggable);\n\n    const getListItems = (): Array<HTMLElement> =>\n        listRef.value\n            ? (Array.from(listRef.value.children).filter(child => child.matches(ITEM_SELECTOR)) as Array<HTMLElement>)\n            : [];\n\n    const syncListItems = () => {\n        listItems.value = getListItems();\n    };\n\n    watch(\n        listRef,\n        newElement => {\n            if (!newElement) {\n                listItems.value = [];\n                return;\n            }\n\n            syncListItems();\n        },\n        { immediate: true }\n    );\n\n    useMutationObserver(listRef, syncListItems, { childList: true });\n\n    const getItemIndex = (el: HTMLElement | null) => (el ? listItems.value.indexOf(el) : -1);\n\n    const getItemLabel = (el: HTMLElement | null, fallbackIndex: number) =>\n        el?.querySelector('[data-list-item-label]')?.textContent?.trim() || `List item ${fallbackIndex + 1}`;\n\n    const announceMoveAt = (fromIndex: number, toIndex: number) => {\n        if (!isDraggable.value) {\n            return;\n        }\n\n        const items = getListItems();\n        announceMove({\n            itemLabel: getItemLabel(items[toIndex] ?? null, toIndex),\n            fromIndex,\n            toIndex,\n            total: items.length,\n            announcement: props.draggableOptions?.dragAnnouncement,\n        });\n    };\n\n    const moveItemDOM = (fromIndex: number, toIndex: number) => {\n        const items = getListItems();\n        const itemToMove = items[fromIndex];\n        const targetItem = items[toIndex];\n\n        if (fromIndex < toIndex) {\n            listRef.value!.insertBefore(itemToMove, targetItem.nextSibling);\n        } else {\n            listRef.value!.insertBefore(itemToMove, targetItem);\n        }\n\n        syncListItems();\n        announceMoveAt(fromIndex, toIndex);\n        emit('reorder', { oldIndex: fromIndex, newIndex: toIndex });\n    };\n\n    const computedDraggableOptions = computed<BentoDraggableOptions>(() => ({\n        ...props.draggableOptions,\n        onSort: (event: BentoDraggableSortableEvent) => {\n            syncListItems();\n            if (event.oldIndex !== undefined && event.newIndex !== undefined) {\n                announceMoveAt(event.oldIndex, event.newIndex);\n                emit('reorder', { oldIndex: event.oldIndex, newIndex: event.newIndex });\n            }\n            props.draggableOptions?.onSort?.(event);\n        },\n    }));\n\n    const { announcementMessage, announceMove } = useDraggableAnnouncement();\n\n    const { moveItemUp, moveItemDown, moveItemTop, moveItemBottom, getDisabledMenus } = useBentoDraggable(\n        listRef,\n        computedDraggableOptions,\n        {\n            getItemCount: () => listItems.value.length,\n            getItemIndex,\n            onMoveItem: moveItemDOM,\n        }\n    );\n\n    provide<BentoListDraggableContext>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, {\n        isDraggable,\n        moveItemUp,\n        moveItemDown,\n        moveItemTop,\n        moveItemBottom,\n        getDisabledMenus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows.\n     *\n     * @example\n     * import { BentoList, BentoListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              />\n     *              <bento-list-item\n     *                  label=\"Risk configuration\"\n     *                  description=\"Updated yesterday\"\n     *                  :tag=\"{ label: 'Review', variant: 'orange' }\"\n     *              />\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list',\n        inheritAttrs: false,\n        i18n: { messages: draggableMessages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li ref=\"itemRef\" class=\"b-list-item\" @click=\"onItemClick\" @keydown=\"onItemKeydown\">\n        <bento-typography\n            class=\"b-list-item__inner\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            :role=\"props.withChevron ? 'button' : undefined\"\n            :tabindex=\"props.withChevron ? 0 : undefined\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-list-item__image\">\n                <slot name=\"image\" />\n            </div>\n\n            <bento-draggable-handle\n                v-if=\"showDragHandle\"\n                condensed\n                :label=\"dragHandleLabel\"\n                :disabled-menus=\"disabledMenus\"\n                :disabled=\"draggableOptions?.disabled\"\n                @move-up=\"moveItemUp\"\n                @move-down=\"moveItemDown\"\n                @move-top=\"moveItemTop\"\n                @move-bottom=\"moveItemBottom\"\n            />\n\n            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot v-if=\"hasSlot('start')\" name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\" data-list-item-label>\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography\n                            v-if=\"props.label\"\n                            class=\"b-list-item__label\"\n                            data-list-item-label\n                            el=\"span\"\n                            stronger\n                        >\n                            {{ props.label }}\n                        </bento-typography>\n                        <bento-status\n                            v-if=\"props.showStatus\"\n                            class=\"b-list-item__status\"\n                            :variant=\"props.statusColor\"\n                            aria-hidden=\"true\"\n                        />\n                        <bento-tag v-if=\"props.tag\" v-bind=\"props.tag\" class=\"b-list-item__tag\" />\n                    </div>\n                    <span v-if=\"props.description\" class=\"b-list-item__description\">\n                        {{ props.description }}\n                    </span>\n                </template>\n            </div>\n\n            <div v-if=\"hasSlot('end')\" class=\"b-list-item__end\">\n                <slot name=\"end\" />\n            </div>\n\n            <chevron-right-icon v-if=\"props.withChevron\" class=\"b-list-item__chevron\" aria-hidden=\"true\" />\n        </bento-typography>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n    import { BentoDraggableHandle } from '@/components/draggable/components/draggable-handle';\n    import { BentoStatus } from '@/components/status';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BENTO_LIST_DRAGGABLE_INJECTION_KEY } from '../../list.keys';\n    import type { BentoListDraggableContext } from '../../list.keys';\n    import type { BentoListItemProps } from './list-item.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const itemRef = ref<HTMLElement | null>(null);\n    const draggableContext = inject<BentoListDraggableContext | null>(BENTO_LIST_DRAGGABLE_INJECTION_KEY, null);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  label: null,\n  description: null,\n  draggableOptions: { default: null },\n  showStatus: { type: Boolean, default: false },\n  statusColor: { default: 'blue' },\n  tag: { default: undefined },\n  withChevron: { type: Boolean, default: false },\n  showTopDivider: { type: Boolean, default: false },\n  showBottomDivider: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"click\", \"move-up\", \"move-down\", \"move-top\", \"move-bottom\"]);\n\n    const onItemClick = (): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        emit('click');\n    };\n\n    const onItemKeydown = (event: KeyboardEvent): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            emit('click');\n        }\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-list-item__inner--clickable': props.withChevron,\n        'b-list-item__inner--top-divider': props.showTopDivider,\n        'b-list-item__inner--bottom-divider': props.showBottomDivider,\n    }));\n\n    const showDragHandle = computed(() => Boolean(draggableContext?.isDraggable.value));\n    const dragHandleLabel = computed(() => props.draggableOptions?.label || props.label || t('listItem'));\n    const disabledMenus = computed(() => {\n        if (props.draggableOptions?.disabledMenus) {\n            return props.draggableOptions.disabledMenus;\n        }\n\n        return draggableContext?.getDisabledMenus(itemRef.value);\n    });\n\n    const moveItemUp = () => {\n        emit('move-up');\n        (props.draggableOptions?.moveUp ?? (() => draggableContext?.moveItemUp(itemRef.value)))();\n    };\n\n    const moveItemDown = () => {\n        emit('move-down');\n        (props.draggableOptions?.moveDown ?? (() => draggableContext?.moveItemDown(itemRef.value)))();\n    };\n\n    const moveItemTop = () => {\n        emit('move-top');\n        (props.draggableOptions?.moveTop ?? (() => draggableContext?.moveItemTop(itemRef.value)))();\n    };\n\n    const moveItemBottom = () => {\n        emit('move-bottom');\n        (props.draggableOptions?.moveBottom ?? (() => draggableContext?.moveItemBottom(itemRef.value)))();\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoListItem` renders an item to be used inside `BentoList`.\n     *\n     * @example\n     * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem, BentoButton, BentoToggle },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              >\n     *                  <template #start>\n     *                      <bento-toggle />\n     *                  </template>\n     *                  <template #end>\n     *                      <bento-button variant=\"secondary\">Edit</bento-button>\n     *                  </template>\n     *              </bento-list-item>\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list-item',\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["BENTO_LIST_DRAGGABLE_INJECTION_KEY","__default__$1","draggableMessages","ITEM_SELECTOR","listElement","computed","props","listRef","ref","listItems","isDraggable","getListItems","child","syncListItems","watch","newElement","useMutationObserver","getItemIndex","el","getItemLabel","fallbackIndex","_b","_a","announceMoveAt","fromIndex","toIndex","items","announceMove","moveItemDOM","itemToMove","targetItem","emit","computedDraggableOptions","event","announcementMessage","useDraggableAnnouncement","moveItemUp","moveItemDown","moveItemTop","moveItemBottom","getDisabledMenus","useBentoDraggable","provide","__default__","messages","slots","useSlots","hasSlot","useHasSlot","itemRef","draggableContext","inject","t","useI18n","onItemClick","onItemKeydown","conditionalClasses","showDragHandle","dragHandleLabel","disabledMenus"],"mappings":"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"}

package/dist/chunks/{pagination.BzLKzijQ.js → pagination.CxW1zuWi.js}

@@ -1,6 +1,6 @@
 import { defineComponent as d, computed as g, watch as w, useSlots as L, useAttrs as B, ref as $, toRefs as z } from "vue";
 import { p as F, B as f } from "./typography.C8lPlsbD.js";
-import { B as N } from "./dropdown.NTGSuWAw.js";
+import { B as N } from "./dropdown.B21PZqp4.js";
 import { g as S } from "./generate-uid.NJ8tVoha.js";
 import { u as h, g as x, a as y } from "./index.B6WW_F-J.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -393,4 +393,4 @@ const Oe = Se.exports;
 export {
   Oe as B
 };
-//# sourceMappingURL=pagination.BzLKzijQ.js.map
+//# sourceMappingURL=pagination.CxW1zuWi.js.map