@adyen/bento-vue2 1.96.1 → 1.97.0

package/dist/chunks/{input-field.BkQZ6Qzl.js → input-field.3tzX7t2y.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 { b as be, B as _e } from "./dropdown.C70AlvOT.js";
+import { h as be, B as _e } from "./dropdown.CIEm6MBB.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.BkQZ6Qzl.js.map
+//# sourceMappingURL=input-field.3tzX7t2y.js.map

package/dist/chunks/{input-field.BkQZ6Qzl.js.map → input-field.3tzX7t2y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-field.BkQZ6Qzl.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.3tzX7t2y.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.BiOHvUEA.js → input-time.Bf-ZrCPX.js}

@@ -1,14 +1,14 @@
-import { defineComponent as S, provide as y, useSlots as D, ref as g, computed as l, watch as h } from "vue";
-import { f as H, B as I } from "./input-field.BkQZ6Qzl.js";
-import { d as b } from "./use-cached-selected-values.D0s14AxT.js";
-import { u as B } from "./index.B6WW_F-J.js";
-import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+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.3tzX7t2y.js";
+import { g as b } from "./dropdown.CIEm6MBB.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";
-import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-time.css";
-const w = /[\d]/, k = /^\d{2}$/, N = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/.test(o), $ = (o) => {
-  const { selectionStart: e } = o.target, i = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"], t = w.test(o.key) || i.includes(o.key), d = [1, 2, 4, 5].includes(e) && o.key === ":";
-  !t && !d && o.preventDefault();
+const x = /[\d]/, N = /^\d{2}$/, k = /^\d{2}:\d{2}$/, v = (o) => /^(?:[01]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/.test(o), A = 8, $ = (o) => {
+  const { selectionStart: e, value: i = "" } = o.target, s = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(o.key), p = x.test(o.key) || s, r = [1, 2, 4, 5].includes(e) && o.key === ":", u = i.length >= A;
+  (!p && !r || u && !s) && o.preventDefault();
 }, C = (o) => {
   if (!o)
     return o;
@@ -16,8 +16,8 @@ const w = /[\d]/, k = /^\d{2}$/, N = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0
   if (e.length === 1 && parseInt(o, 10) > 2)
     return `0${e}:`;
   const [i, t] = e.slice(-2);
-  return [2, 5].includes(e.length) && t === ":" && (e = `${e.slice(0, e.length - 2)}0${i}`), (k.test(e) || N.test(e)) && (e += ":"), e;
-}, R = {
+  return [2, 5].includes(e.length) && t === ":" && (e = `${e.slice(0, e.length - 2)}0${i}`), (N.test(e) || k.test(e)) && (e += ":"), e;
+}, K = {
   "de-DE": {
     invalidTimeFormat: "Ungültiges Zeitformat",
     timeFormatDescription: "HH:MM:SS"
@@ -59,11 +59,11 @@ const w = /[\d]/, k = /^\d{2}$/, N = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0
     timeFormatDescription: "HH:MM:SS"
   }
 }, P = {
-  i18n: { messages: R },
+  i18n: { messages: K },
   name: "bento-input-time",
   inheritAttrs: !1,
   model: { prop: "modelValue" }
-}, A = /* @__PURE__ */ S({
+}, R = /* @__PURE__ */ S({
   ...P,
   props: {
     description: { default: void 0 },
@@ -81,35 +81,35 @@ const w = /[\d]/, k = /^\d{2}$/, N = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0
   emits: ["update:model-value", "keydown", "input:valid", "input:error"],
   setup(o, { emit: e }) {
     const i = o, t = 300;
-    y(H, "bento-input-time");
-    const d = D(), v = E(d), { isTouchDevice: a } = V(), { t: u } = B(), s = g(!1), p = l(() => i.errorMessage ? i.errorMessage : s.value ? u("invalidTimeFormat") : null), _ = l(() => a.value ? i.errorMessage : p.value), T = l(() => a.value ? "time" : void 0), F = l(() => i.modelValue), M = l(() => a ? void 0 : i.placeholder), m = (n) => {
+    g(H, "bento-input-time");
+    const s = y(), p = B(s), { isTouchDevice: r } = V(), { t: u } = E(), l = D(!1), m = d(() => i.errorMessage ? i.errorMessage : l.value ? u("invalidTimeFormat") : null), _ = d(() => r.value ? i.errorMessage : m.value), T = d(() => r.value ? "time" : void 0), M = d(() => i.modelValue), F = d(() => r ? void 0 : i.placeholder), c = (n) => {
       if (!n) {
-        s.value = !1;
+        l.value = !1;
         return;
       }
-      const r = f(n);
-      s.value = !r, e(r ? "input:valid" : "input:error");
-    }, c = b(m, t);
+      const a = v(n);
+      l.value = !a, e(a ? "input:valid" : "input:error");
+    }, f = b(c, t);
     return h(
       () => i.modelValue,
       (n) => {
-        const r = String(n ?? "");
-        r.length === 8 && f(r) && (s.value = !1);
+        const a = String(n ?? "");
+        a.length === 8 && v(a) && (l.value = !1);
       }
-    ), { __sfc: !0, VALIDATION_DEBOUNCE_TIME: t, slots: d, hasSlot: v, isTouchDevice: a, t: u, props: i, emit: e, internalError: s, computedErrorMessage: p, inputErrorMessage: _, inputType: T, inputModelValue: F, computedPlaceholder: M, validateTime: m, validateTimeWithDebounce: c, onInput: (n) => {
+    ), { __sfc: !0, VALIDATION_DEBOUNCE_TIME: t, slots: s, hasSlot: p, isTouchDevice: r, t: u, props: i, emit: e, internalError: l, computedErrorMessage: m, inputErrorMessage: _, inputType: T, inputModelValue: M, computedPlaceholder: F, validateTime: c, validateTimeWithDebounce: f, onInput: (n) => {
       if (!(i.disabled || i.readonly))
-        if (a.value)
+        if (r.value)
           e("update:model-value", String(n ?? "")), e("input:valid");
         else {
-          const r = C(String(n ?? ""));
-          e("update:model-value", r), c(r);
+          const a = C(String(n ?? ""));
+          e("update:model-value", a), f(a);
         }
     }, onKeyDown: (n) => {
-      a.value || $(n), e("keydown", n);
+      r.value || $(n), e("keydown", n);
     }, BentoInputField: I };
   }
 });
-var K = function() {
+var L = function() {
   var e = this, i = e._self._c, t = e._self._setupProxy;
   return i(t.BentoInputField, e._b({ staticClass: "b-input-time", attrs: { type: t.inputType, step: t.isTouchDevice ? 1 : void 0, condensed: t.props.condensed, disabled: t.props.disabled, "error-message": t.inputErrorMessage, label: t.props.label, "model-value": t.inputModelValue, optional: t.props.optional, placeholder: t.computedPlaceholder, readonly: t.props.readonly, required: t.props.required, "tooltip-text": t.props.tooltipText }, on: { "update:model-value": t.onInput, keydown: t.onKeyDown }, scopedSlots: e._u([t.hasSlot("default") ? { key: "default", fn: function() {
     return [e._t("default")];
@@ -118,17 +118,17 @@ var K = function() {
       return [e._v(e._s(t.props.description ? `${t.props.description} ${t.t("timeFormatDescription")}` : t.t("timeFormatDescription")))];
     })];
   }, proxy: !0 }], null, !0) }, "bento-input-field", e.$attrs, !1));
-}, O = [], L = /* @__PURE__ */ x(
-  A,
-  K,
+}, O = [], U = /* @__PURE__ */ w(
+  R,
+  L,
   O,
   !1,
   null,
   "a2b489fa"
 );
-const Z = L.exports;
+const Q = U.exports;
 export {
-  Z as B,
-  f as i
+  Q as B,
+  v as i
 };
-//# sourceMappingURL=input-time.BiOHvUEA.js.map
+//# sourceMappingURL=input-time.Bf-ZrCPX.js.map

package/dist/chunks/{input-time.BiOHvUEA.js.map → input-time.Bf-ZrCPX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-time.BiOHvUEA.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\nexport const validateTimeInput = (event: KeyboardEvent) => {\n    const { selectionStart } = event.target as HTMLInputElement;\n\n    const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n    const isValidKey = validDigitRegex.test(event.key) || allowedKeys.includes(event.key);\n    const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n\n    if (!isValidKey && !isValidColon) {\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","validateTimeInput","event","selectionStart","allowedKeys","isValidKey","isValidColon","formatTimeInputValue","value","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.Bf-ZrCPX.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/{modal-fullscreen.OS6KhVdg.js → modal-fullscreen.Dg1Hi3jB.js}

@@ -6,7 +6,7 @@ import { B as z } from "./button.DITA6YtS.js";
 import { B as H } from "./typography.C8lPlsbD.js";
 import { u as N } from "./use-has-slot.C9lQZ6nz.js";
 import { u as X } from "./index.B6WW_F-J.js";
-import { i as F, j as D, B as q, k as Q } from "./button-actions.D1jRC1fs.js";
+import { i as F, j as D, B as q, k as Q } from "./button-actions.DKc63aCb.js";
 import { C as W } from "./cross.CC_B-vG-.js";
 import { b as Z, B as V, D as ee, a as te } from "./dialog-page.DYWnKdnP.js";
 import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -253,4 +253,4 @@ export {
   ie as B,
   Oe as m
 };
-//# sourceMappingURL=modal-fullscreen.OS6KhVdg.js.map
+//# sourceMappingURL=modal-fullscreen.Dg1Hi3jB.js.map

package/dist/chunks/{modal-fullscreen.OS6KhVdg.js.map → modal-fullscreen.Dg1Hi3jB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"modal-fullscreen.OS6KhVdg.js","sources":["../../src/components/modal-fullscreen/components/modal-fullscreen-page.vue","../../src/composables/use-listeners/use-listener.ts","../../src/components/modal-fullscreen/modal-fullscreen.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-modal-fullscreen-page\" :page-id=\"pageId\" :previous-page=\"previousPage\" always-show-border>\n        <template #header>\n            <div class=\"b-modal-fullscreen-page__header\">\n                <div class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title\">\n                    <bento-typography\n                        v-if=\"title\"\n                        :id=\"computedTitleId\"\n                        el=\"h2\"\n                        variant=\"title\"\n                        class=\"b-modal-fullscreen-page__title\"\n                        :title=\"title\"\n                        >{{ title }}</bento-typography\n                    >\n                </div>\n                <div\n                    v-if=\"hasSlot('header')\"\n                    class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot\"\n                >\n                    <slot name=\"header\" />\n                </div>\n                <div class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions\">\n                    <bento-typography\n                        v-if=\"contextualLabel\"\n                        class=\"b-modal-fullscreen-page__contextual-label\"\n                        el=\"span\"\n                        :title=\"contextualLabel\"\n                        >{{ contextualLabel }}</bento-typography\n                    >\n                    <bento-button-actions v-if=\"actions\" class=\"b-modal-fullscreen-page__actions\" :actions=\"actions\" />\n\n                    <div class=\"b-modal-fullscreen-page__separator\"></div>\n                    <div class=\"b-modal-fullscreen-page__close-button\">\n                        <bento-button variant=\"tertiary\" :aria-label=\"t('close')\" @click=\"handleClose\">\n                            <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                        </bento-button>\n                    </div>\n                </div>\n            </div>\n        </template>\n        <template #content>\n            <slot />\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { inject, onMounted, type PropType, useSlots } from 'vue';\n\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { DialogPage } from '@/internal';\n\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import {\n        MODAL_FULLSCREEN_CLOSE_INJECTION_KEY,\n        MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY,\n    } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Label shown next to the modal actions\n         */\n        contextualLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the modal\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * ID to be applied to the title to be used with aria-labelledby\n         */\n        titleId: {\n            type: String,\n            default: undefined,\n        },\n    });\n    const emit = defineEmits([\"close\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const injectedTitleId = inject(MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, undefined);\n    const computedTitleId = props.titleId ?? injectedTitleId;\n\n    const closeModal = inject(MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, undefined);\n\n    const handleClose = () => {\n        emit('close');\n        closeModal?.();\n    };\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 2) {\n            throw new Error('Not more than 2 action buttons may be provided in Bento Modal Fullscreen');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ModalFullscreenPage is used to render different pages of ModalFullscreen component\n     *\n     * @example\n     * import { BentoModalFullscreen, BentoModalFullscreenPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModalFullscreen, BentoModalFullscreenPage },\n     *     template: `\n     *          <bento-modal-fullscreen active-page='page1' is-open='true'>\n     *              <bento-modal-fullscreen-page\n     *                  title='Page 1'\n     *                  pageId='page1'\n     *                  contextual-label='Move to next page'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next page',\n     *                          event: () => {\n     *                              activePage.value = 'page2';\n     *                          },\n     *                      }]\">\n     *                  Page 1 info\n     *              </bento-modal-fullscreen-page>\n     *              <bento-modal-fullscreen-page\n     *                  title='Page 2'\n     *                  pageId='page2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Page 2 info\n     *              </bento-modal-fullscreen-page>\n     *          </bento-modal-fullscreen>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-fullscreen-page.scss\" />\n","import { getCurrentInstance, useListeners as vueUseListeners } from 'vue';\n\n/**\n * A composable that provides access to the Vue2 component's listeners (see Vue3 implementation in packages/vue3/composables).\n * The listeners are kebab-case and the colons are removed (e.g. \"click\", \"update-value\").\n *\n * In environments where the Composition API is not available (e.g. during testing),\n * it falls back to using the component's non-reactive `$listeners` object.\n *\n * @returns The component's listeners.\n */\nexport function useListeners() {\n    // Return nothing so tests don't require a mock of this function\n    if (!window || (!vueUseListeners && !getCurrentInstance)) {\n        return {};\n    }\n\n    if (vueUseListeners) {\n        return vueUseListeners() as any;\n    }\n\n    const instance = getCurrentInstance();\n    return instance?.proxy?.$listeners || {};\n}\n","<template>\n    <dialog\n        :id=\"modalFullscreenId\"\n        ref=\"modal\"\n        class=\"b-modal-fullscreen\"\n        :class=\"conditionalClasses\"\n        data-dialog-element=\"modal-fullscreen\"\n        :aria-labelledby=\"titleId\"\n        @animationend=\"closeModalAfterAnimation\"\n        @keydown.esc.prevent=\"closeModal\"\n    >\n        <bento-focus-trap v-if=\"internalIsOpen\" class=\"b-modal-fullscreen__wrapper\">\n            <template v-if=\"props.activePage\">\n                <slot />\n            </template>\n            <bento-modal-fullscreen-page\n                v-else\n                :actions=\"actions\"\n                :contextual-label=\"contextualLabel\"\n                :title=\"title\"\n                :title-id=\"titleId\"\n                @close=\"closeModal\"\n            >\n                <template v-if=\"hasSlot('default')\" #default>\n                    <slot name=\"default\"></slot>\n                </template>\n                <template v-if=\"hasSlot('header')\" #header>\n                    <slot name=\"header\"></slot>\n                </template>\n            </bento-modal-fullscreen-page>\n        </bento-focus-trap>\n\n        <!-- Enable the toast inside the fullscreen-modal -->\n        <template v-if=\"isOpen\">\n            <bento-toast />\n        </template>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue';\n    import { isVue2 } from 'vue-demi';\n\n    import { BentoToast } from '@/components/toast';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useHasSlot } from '@/composables';\n    import { useListeners } from '@/composables/use-listeners';\n    import {\n        MODAL_FULLSCREEN_CLOSE_INJECTION_KEY,\n        MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY,\n        MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY,\n    } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * The id of the current active page\n         * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Label shown next to the modal actions\n         */\n        contextualLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n        /**\n         * Title of the modal\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([\"before-close\", \"update:active-page\", \"update:is-open\"]);\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const modal = ref(null);\n    const isClosing = ref(false);\n    const modalFullscreenId = generateUid('modal-fullscreen');\n    const titleId = generateUid('modal-fullscreen-title');\n    const internalIsOpen = ref(false);\n    const isMounted = ref(false);\n\n    const listeners = useListeners();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-modal-fullscreen--hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value && modal.value) {\n            modal.value.close();\n            if (previousPages.value[0]) {\n                emit('update:active-page', previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit('update:is-open', false);\n        }\n    };\n\n    /**\n     * Emits the `beforeClose` event, if it is being listened to,\n     * before closing the modal and omits the closing animation.\n     * The animation will be triggered by the change of the `isOpen` prop instead.\n     *\n     * If no listener for the `before-close`, then the animation will be triggered,\n     * which will close the modal and emit the `update:is-open` event instead, after it was closed.\n     */\n    function closeModal() {\n        /**\n         * Vue3 appends the prefix \"on\" and changes to camelCase\n         */\n        const eventName = isVue2 ? 'before-close' : 'onBeforeClose';\n        if (listeners[eventName]) {\n            emit('before-close');\n            return;\n        }\n        startCloseModalAnimation();\n    }\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value || !modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    onUnmounted(() => {\n        isMounted.value = false;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        [() => isOpen.value, modal],\n        ([newIsOpen, newModalValue]) => {\n            if (!isMounted.value || !newModalValue) {\n                return;\n            }\n\n            if (newIsOpen) {\n                internalIsOpen.value = true;\n                if (!newModalValue.open) {\n                    newModalValue.showModal();\n                }\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (newModalValue.open) {\n                startCloseModalAnimation();\n            }\n        },\n        { immediate: true, flush: 'post' }\n    );\n\n    // lets children components know they are inside a Modal (dialog element)\n    provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId);\n    provide(MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, titleId);\n    provide(MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, closeModal);\n\n    // Pages\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const pages = ref<Array<string>>([]);\n    const previousPages = ref([]);\n    const updatePage = page => emit('update:active-page', page);\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        if (pageId) {\n            pages.value.push(pageId);\n        }\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information.\n     *\n     * @example\n     * import { BentoModalFullscreen } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModalFullscreen },\n     *     template: `\n     *          <bento-modal-fullscreen\n     *              :is-open=\"isOpen\"\n     *              @update:is-open=\"isOpen = $event\"\n     *              title='Fullscreen modal title'\n     *              contextual-label='Contextual label'\n     *              :actions=\"[{ title: 'Action', event: () => {}]\"\n     *          >\n     *              <template #header>{{ header slot }}</template>\n     *              {{ content }}\n     *          </bento-modal-fullscreen>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-fullscreen.scss\" />\n"],"names":["__default__$1","messages","useI18n","slots","useSlots","hasSlot","useHasSlot","injectedTitleId","inject","MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY","computedTitleId","props","closeModal","MODAL_FULLSCREEN_CLOSE_INJECTION_KEY","handleClose","emit","onMounted","useListeners","useListeners$1","getCurrentInstance","instance","_a","__default__","activePage","isOpen","toRefs","modal","ref","isClosing","modalFullscreenId","generateUid","titleId","internalIsOpen","isMounted","listeners","conditionalClasses","computed","closeModalAfterAnimation","previousPages","startCloseModalAnimation","onUnmounted","watch","newIsOpen","newModalValue","provide","MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY","animation","BentoDialogPageAnimation","pages","updatePage","page","DIALOG_PAGE_CONFIG_INJECTION_KEY","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":"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"}
+{"version":3,"file":"modal-fullscreen.Dg1Hi3jB.js","sources":["../../src/components/modal-fullscreen/components/modal-fullscreen-page.vue","../../src/composables/use-listeners/use-listener.ts","../../src/components/modal-fullscreen/modal-fullscreen.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-modal-fullscreen-page\" :page-id=\"pageId\" :previous-page=\"previousPage\" always-show-border>\n        <template #header>\n            <div class=\"b-modal-fullscreen-page__header\">\n                <div class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title\">\n                    <bento-typography\n                        v-if=\"title\"\n                        :id=\"computedTitleId\"\n                        el=\"h2\"\n                        variant=\"title\"\n                        class=\"b-modal-fullscreen-page__title\"\n                        :title=\"title\"\n                        >{{ title }}</bento-typography\n                    >\n                </div>\n                <div\n                    v-if=\"hasSlot('header')\"\n                    class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot\"\n                >\n                    <slot name=\"header\" />\n                </div>\n                <div class=\"b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions\">\n                    <bento-typography\n                        v-if=\"contextualLabel\"\n                        class=\"b-modal-fullscreen-page__contextual-label\"\n                        el=\"span\"\n                        :title=\"contextualLabel\"\n                        >{{ contextualLabel }}</bento-typography\n                    >\n                    <bento-button-actions v-if=\"actions\" class=\"b-modal-fullscreen-page__actions\" :actions=\"actions\" />\n\n                    <div class=\"b-modal-fullscreen-page__separator\"></div>\n                    <div class=\"b-modal-fullscreen-page__close-button\">\n                        <bento-button variant=\"tertiary\" :aria-label=\"t('close')\" @click=\"handleClose\">\n                            <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                        </bento-button>\n                    </div>\n                </div>\n            </div>\n        </template>\n        <template #content>\n            <slot />\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { inject, onMounted, type PropType, useSlots } from 'vue';\n\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { DialogPage } from '@/internal';\n\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import {\n        MODAL_FULLSCREEN_CLOSE_INJECTION_KEY,\n        MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY,\n    } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Label shown next to the modal actions\n         */\n        contextualLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the modal\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * ID to be applied to the title to be used with aria-labelledby\n         */\n        titleId: {\n            type: String,\n            default: undefined,\n        },\n    });\n    const emit = defineEmits([\"close\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const injectedTitleId = inject(MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, undefined);\n    const computedTitleId = props.titleId ?? injectedTitleId;\n\n    const closeModal = inject(MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, undefined);\n\n    const handleClose = () => {\n        emit('close');\n        closeModal?.();\n    };\n\n    onMounted(() => {\n        if (props.actions && props.actions.length > 2) {\n            throw new Error('Not more than 2 action buttons may be provided in Bento Modal Fullscreen');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ModalFullscreenPage is used to render different pages of ModalFullscreen component\n     *\n     * @example\n     * import { BentoModalFullscreen, BentoModalFullscreenPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModalFullscreen, BentoModalFullscreenPage },\n     *     template: `\n     *          <bento-modal-fullscreen active-page='page1' is-open='true'>\n     *              <bento-modal-fullscreen-page\n     *                  title='Page 1'\n     *                  pageId='page1'\n     *                  contextual-label='Move to next page'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next page',\n     *                          event: () => {\n     *                              activePage.value = 'page2';\n     *                          },\n     *                      }]\">\n     *                  Page 1 info\n     *              </bento-modal-fullscreen-page>\n     *              <bento-modal-fullscreen-page\n     *                  title='Page 2'\n     *                  pageId='page2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Page 2 info\n     *              </bento-modal-fullscreen-page>\n     *          </bento-modal-fullscreen>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-fullscreen-page.scss\" />\n","import { getCurrentInstance, useListeners as vueUseListeners } from 'vue';\n\n/**\n * A composable that provides access to the Vue2 component's listeners (see Vue3 implementation in packages/vue3/composables).\n * The listeners are kebab-case and the colons are removed (e.g. \"click\", \"update-value\").\n *\n * In environments where the Composition API is not available (e.g. during testing),\n * it falls back to using the component's non-reactive `$listeners` object.\n *\n * @returns The component's listeners.\n */\nexport function useListeners() {\n    // Return nothing so tests don't require a mock of this function\n    if (!window || (!vueUseListeners && !getCurrentInstance)) {\n        return {};\n    }\n\n    if (vueUseListeners) {\n        return vueUseListeners() as any;\n    }\n\n    const instance = getCurrentInstance();\n    return instance?.proxy?.$listeners || {};\n}\n","<template>\n    <dialog\n        :id=\"modalFullscreenId\"\n        ref=\"modal\"\n        class=\"b-modal-fullscreen\"\n        :class=\"conditionalClasses\"\n        data-dialog-element=\"modal-fullscreen\"\n        :aria-labelledby=\"titleId\"\n        @animationend=\"closeModalAfterAnimation\"\n        @keydown.esc.prevent=\"closeModal\"\n    >\n        <bento-focus-trap v-if=\"internalIsOpen\" class=\"b-modal-fullscreen__wrapper\">\n            <template v-if=\"props.activePage\">\n                <slot />\n            </template>\n            <bento-modal-fullscreen-page\n                v-else\n                :actions=\"actions\"\n                :contextual-label=\"contextualLabel\"\n                :title=\"title\"\n                :title-id=\"titleId\"\n                @close=\"closeModal\"\n            >\n                <template v-if=\"hasSlot('default')\" #default>\n                    <slot name=\"default\"></slot>\n                </template>\n                <template v-if=\"hasSlot('header')\" #header>\n                    <slot name=\"header\"></slot>\n                </template>\n            </bento-modal-fullscreen-page>\n        </bento-focus-trap>\n\n        <!-- Enable the toast inside the fullscreen-modal -->\n        <template v-if=\"isOpen\">\n            <bento-toast />\n        </template>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, onUnmounted, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue';\n    import { isVue2 } from 'vue-demi';\n\n    import { BentoToast } from '@/components/toast';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useHasSlot } from '@/composables';\n    import { useListeners } from '@/composables/use-listeners';\n    import {\n        MODAL_FULLSCREEN_CLOSE_INJECTION_KEY,\n        MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY,\n        MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY,\n    } from '@/components/modal-fullscreen/modal-fullscreen.keys';\n\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * The id of the current active page\n         * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * Label shown next to the modal actions\n         */\n        contextualLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * Controls the modal's state from the outside. Set it to true to open the modal\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n        /**\n         * Title of the modal\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([\"before-close\", \"update:active-page\", \"update:is-open\"]);\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const modal = ref(null);\n    const isClosing = ref(false);\n    const modalFullscreenId = generateUid('modal-fullscreen');\n    const titleId = generateUid('modal-fullscreen-title');\n    const internalIsOpen = ref(false);\n    const isMounted = ref(false);\n\n    const listeners = useListeners();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-modal-fullscreen--hide': isClosing.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeModalAfterAnimation = () => {\n        if (isClosing.value && modal.value) {\n            modal.value.close();\n            if (previousPages.value[0]) {\n                emit('update:active-page', previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit('update:is-open', false);\n        }\n    };\n\n    /**\n     * Emits the `beforeClose` event, if it is being listened to,\n     * before closing the modal and omits the closing animation.\n     * The animation will be triggered by the change of the `isOpen` prop instead.\n     *\n     * If no listener for the `before-close`, then the animation will be triggered,\n     * which will close the modal and emit the `update:is-open` event instead, after it was closed.\n     */\n    function closeModal() {\n        /**\n         * Vue3 appends the prefix \"on\" and changes to camelCase\n         */\n        const eventName = isVue2 ? 'before-close' : 'onBeforeClose';\n        if (listeners[eventName]) {\n            emit('before-close');\n            return;\n        }\n        startCloseModalAnimation();\n    }\n\n    const startCloseModalAnimation = () => {\n        if (!modal.value || !modal.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    onUnmounted(() => {\n        isMounted.value = false;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        [() => isOpen.value, modal],\n        ([newIsOpen, newModalValue]) => {\n            if (!isMounted.value || !newModalValue) {\n                return;\n            }\n\n            if (newIsOpen) {\n                internalIsOpen.value = true;\n                if (!newModalValue.open) {\n                    newModalValue.showModal();\n                }\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (newModalValue.open) {\n                startCloseModalAnimation();\n            }\n        },\n        { immediate: true, flush: 'post' }\n    );\n\n    // lets children components know they are inside a Modal (dialog element)\n    provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId);\n    provide(MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY, titleId);\n    provide(MODAL_FULLSCREEN_CLOSE_INJECTION_KEY, closeModal);\n\n    // Pages\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const pages = ref<Array<string>>([]);\n    const previousPages = ref([]);\n    const updatePage = page => emit('update:active-page', page);\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        if (pageId) {\n            pages.value.push(pageId);\n        }\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information.\n     *\n     * @example\n     * import { BentoModalFullscreen } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoModalFullscreen },\n     *     template: `\n     *          <bento-modal-fullscreen\n     *              :is-open=\"isOpen\"\n     *              @update:is-open=\"isOpen = $event\"\n     *              title='Fullscreen modal title'\n     *              contextual-label='Contextual label'\n     *              :actions=\"[{ title: 'Action', event: () => {}]\"\n     *          >\n     *              <template #header>{{ header slot }}</template>\n     *              {{ content }}\n     *          </bento-modal-fullscreen>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./modal-fullscreen.scss\" />\n"],"names":["__default__$1","messages","useI18n","slots","useSlots","hasSlot","useHasSlot","injectedTitleId","inject","MODAL_FULLSCREEN_TITLE_ID_INJECTION_KEY","computedTitleId","props","closeModal","MODAL_FULLSCREEN_CLOSE_INJECTION_KEY","handleClose","emit","onMounted","useListeners","useListeners$1","getCurrentInstance","instance","_a","__default__","activePage","isOpen","toRefs","modal","ref","isClosing","modalFullscreenId","generateUid","titleId","internalIsOpen","isMounted","listeners","conditionalClasses","computed","closeModalAfterAnimation","previousPages","startCloseModalAnimation","onUnmounted","watch","newIsOpen","newModalValue","provide","MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY","animation","BentoDialogPageAnimation","pages","updatePage","page","DIALOG_PAGE_CONFIG_INJECTION_KEY","unregisterPage","pageIdToRemove","pageId","registerPage","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuLIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAzHA,EAAA,EAAA,IAAAC,EAAA,GA6DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAAC,GAAA,MAAA,GACAC,IAAAC,EAAA,WAAAJ,GAEAK,IAAAJ,EAAAK,GAAA,MAAA,GAEAC,IAAA,MAAA;AACI,MAAAC,EAAA,OAAA,GACAH,KAAA,QAAAA;AAAA,IAAa;AAGjB,WAAAI,EAAA,MAAA;AACI,UAAAL,EAAA,WAAAA,EAAA,QAAA,SAAA;AACI,cAAA,IAAA,MAAA,0EAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;AClID,SAAAM,KAAA;;AAEH,MAAA,CAAA,UAAA,CAAAC,KAAA,CAAAC;AACI,WAAA,CAAA;AAGJ,MAAAD;AACI,WAAAA,EAAA;AAGJ,QAAAE,IAAAD,EAAA;AACA,WAAAE,IAAAD,KAAA,gBAAAA,EAAA,UAAA,gBAAAC,EAAA,eAAA,CAAA;AACJ;ACkPI,MAAAC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArJA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAd,CAAA,GACAe,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GACAE,IAAAC,EAAA,kBAAA,GACAC,IAAAD,EAAA,wBAAA,GACAE,IAAAL,EAAA,EAAA,GACAM,IAAAN,EAAA,EAAA,GAEAO,IAAAjB,GAAA,GACAd,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAGAgC,IAAAC,EAAA,OAAA;AAAA,MAA2C,4BAAAR,EAAA;AAAA,IACD,EAAA,GAI1CS,IAAA,MAAA;AACI,MAAAT,EAAA,SAAAF,EAAA,UACIA,EAAA,MAAA,MAAA,GACAY,EAAA,MAAA,CAAA,KACIvB,EAAA,sBAAAuB,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAV,EAAA,QAAA,IACAI,EAAA,QAAA,IACAjB,EAAA,kBAAA,EAAA;AAAA,IACJ;AAWJ,aAAAH,IAAA;AAKI,UAAAsB,EADA,cACA,GAAA;AACI,QAAAnB,EAAA,cAAA;AACA;AAAA,MAAA;AAEJ,MAAAwB,EAAA;AAAA,IAAyB;AAG7B,UAAAA,IAAA,MAAA;AACI,MAAA,CAAAb,EAAA,SAAA,CAAAA,EAAA,MAAA,SAGAE,EAAA,QAAA;AAAA,IAAkB;AAGtB,IAAAZ,EAAA,MAAA;AACI,MAAAiB,EAAA,QAAA;AAAA,IAAkB,CAAA,GAGtBO,EAAA,MAAA;AACI,MAAAP,EAAA,QAAA;AAAA,IAAkB,CAAA,GAItBQ;AAAA,MAAA,CAAA,MAAAjB,EAAA,OAAAE,CAAA;AAAA,MAC8B,CAAA,CAAAgB,GAAAC,CAAA,MAAA;AAEtB,QAAA,CAAAV,EAAA,SAAA,CAAAU,MAIAD,KACIV,EAAA,QAAA,IACAW,EAAA,QACIA,EAAA,UAAA,GAEJL,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAf,EAAA,KAAA,KACJoB,EAAA,QAEAJ,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,IAAA,OAAA,OAAA;AAAA,IACiC,GAIrCK,EAAAC,GAAAhB,CAAA,GACAe,EAAAnC,GAAAsB,CAAA,GACAa,EAAA/B,GAAAD,CAAA;AAGA,UAAAkC,IAAAnB,EAAAoB,EAAA,uBAAA,GACAC,IAAArB,EAAA,CAAA,CAAA,GACAW,IAAAX,EAAA,CAAA,CAAA,GACAsB,IAAA,CAAAC,MAAAnC,EAAA,sBAAAmC,CAAA;AAEA,IAAAN,EAAAO,IAAA;AAAA,MAAqE,YAAA5B;AAAA,MACjE,WAAAuB;AAAA,MACA,QAAAd;AAAA,MACQ,OAAAgB;AAAA,MACR,eAAAV;AAAA,MACA,YAAAW;AAAA,IACA,CAAA;AAIJ,UAAAG,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAAL,EAAA,SAAA3B,IAAA2B,EAAA,UAAA,gBAAA3B,EAAA,OAAA,CAAAiC,MAAAA,MAAAD;AAAA,IAAqE,GAIzEE,IAAA,CAAAD,OACIA,KACIN,EAAA,MAAA,KAAAM,CAAA,GAGJ,EAAA,gBAAAF,EAAAE,CAAA,EAAA;AAGJ,WAAAV,EAAAY,IAAAD,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{modal.DHL3TGHv.js → modal.DZTEFM_E.js}

@@ -1,11 +1,11 @@
 import { defineComponent as d, useSlots as v, onMounted as M, toRefs as k, ref as E, computed as p, useAttrs as L } from "vue";
-import { B as _, h as C, a as c, d as P, e as h, g as m, f as x } from "./base-modal.CC7gm9fc.js";
+import { B as _, h as C, a as c, d as P, e as h, g as m, f as x } from "./base-modal.CDMoF3b_.js";
 import { u as g } from "./use-has-slot.C9lQZ6nz.js";
-import { F as R } from "./footer-actions.CZE9dcmA.js";
+import { F as R } from "./footer-actions.C1sXd7ti.js";
 import { n as B } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { b as S } from "./button.DITA6YtS.js";
 import { u as z } from "./index.B6WW_F-J.js";
-import { B as T } from "./button-actions.D1jRC1fs.js";
+import { B as T } from "./button-actions.DKc63aCb.js";
 import { d as N } from "./typography.C8lPlsbD.js";
 const $ = d({
   name: "bento-modal-default"
@@ -457,4 +457,4 @@ const dt = et.exports;
 export {
   dt as B
 };
-//# sourceMappingURL=modal.DHL3TGHv.js.map
+//# sourceMappingURL=modal.DZTEFM_E.js.map