@adyen/bento-vue2 2.0.1 → 2.1.1

package/dist/chunks/{input-field.D912rZS_.js → input-field.90DWNO1a.js}

@@ -1,14 +1,14 @@
 import { defineComponent as oe, useSlots as ne, ref as _, provide as ie, inject as B, toRef as re, computed as i } from "vue";
-import { h as le, B as de } from "./dropdown.Bnq4kP7k.js";
-import { p as L, d as se, B as pe } from "./typography.D1OZJbEa.js";
+import { h as le, B as de } from "./dropdown.CpZQYisR.js";
+import { p as L, d as se, B as pe } from "./typography.Cd386LC_.js";
 import { u as ue } from "./form-field.B60VsF8d.js";
 import { g as c } from "./generate-uid.DBWe4g6T.js";
 import { g as M } from "./get-slot-text.DM_NdrUC.js";
 import { u as ce } from "./index.CPOlyau9.js";
 import { u as fe } from "./use-form-layout-loading.CWbjZiwP.js";
 import { u as be } from "./use-has-slot.C9lQZ6nz.js";
-import { F as _e } from "./field-label.C7BCsofY.js";
-import { E as me } from "./error-message.DKnoUezI.js";
+import { F as _e } from "./field-label.BQaDr37D.js";
+import { E as me } from "./error-message.B-n8wzFo.js";
 import { n as De } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field.css";
 const we = /* @__PURE__ */ Symbol("input field hint injection key"), ye = /* @__PURE__ */ Symbol("input field parent component injection key");
@@ -129,7 +129,7 @@ const ve = {
                 		<my-icon-goes-here />
               	</template>
             </bento-input-field>`,
-      "2.0.0"
+      "3.0.0"
     ), { __sfc: !0, slots: n, props: e, emit: o, emitValue: T, t: m, hasSlot: g, inputFieldElement: D, inputDropdownElement: k, inputFieldId: V, dropdownId: w, staticValueId: y, descriptionId: A, errorId: I, isFocused: h, getDataTestId: $, getRootAttributes: U, hint: x, onFocus: H, onBlur: W, isReadOnly: s, isDropdownReadOnly: Y, shouldShowStaticValue: p, isDefaultVariant: j, isPaymentMethodVariant: q, shouldDisplayStaticValueAtStart: J, shouldDisplayStaticValueAtEnd: K, shouldShowDropdown: u, shouldDisplayDropdownAtStart: z, shouldDisplayDropdownAtEnd: X, shouldShowError: v, computedLabel: F, computedDescription: C, computedAriaOwns: Z, computedAriaLabelFallbackMessage: O, getAriaLabel: N, computedAriaDescribedBy: G, inputFieldConditionalClasses: Q, getInputFieldDropdownProps: ee, onInput: ae, onDropdownInput: te, focusInput: E, focus: R, inputFieldParentComponent: P, BentoDropdown: de, BentoTypography: pe, ErrorMessage: me, FieldLabel: _e };
   }
 });
@@ -158,7 +158,7 @@ var Se = function() {
   Te,
   !1,
   null,
-  "f2528707"
+  "1a9459a8"
 );
 const $e = ge.exports;
 export {
@@ -171,4 +171,4 @@ export {
   d as e,
   ye as f
 };
-//# sourceMappingURL=input-field.D912rZS_.js.map
+//# sourceMappingURL=input-field.90DWNO1a.js.map

package/dist/chunks/{input-field.D912rZS_.js.map → input-field.90DWNO1a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-field.D912rZS_.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     * 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     * 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     * 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     * 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=\"getInputFieldDropdownProps($attrs)\"\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=\"getAriaLabel($attrs)\"\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\"\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 v-if=\"hint && isFocused && modelValue\" el=\"span\" class=\"b-input-field__hint\">\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=\"getInputFieldDropdownProps($attrs)\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <div\n            v-if=\"(shouldShowError && !!errorMessage) || hasSlot('description') || description\"\n            class=\"b-input-field__footer\"\n        >\n            <error-message v-if=\"shouldShowError && !!errorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\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        </div>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide, type Ref, ref, toRef, 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 '@/utils/ts/generate-uid';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\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 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  condensed: { type: Boolean, default: false },\n  dropdown: { default: undefined },\n  dropdownPosition: { default: BentoInputFieldElementPosition.START },\n  modelValue: { default: undefined },\n  slashedZero: { type: Boolean, default: false },\n  staticValue: { default: '' },\n  staticValuePosition: { default: BentoInputFieldElementPosition.START },\n  type: { default: BentoInputFieldType.TEXT },\n  variant: { default: BentoInputFieldVariant.DEFAULT }\n});\n\n    const emit = defineEmits([\"blur\", \"click\", \"change\", \"dropdown-input\", \"escape-pressed\", \"focus\", \"keydown\", \"keyup\", \"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<HTMLInputElement>(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(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\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(() => t('ariaLabelFallback'));\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        (attributes['aria-label'] as string | undefined) ??\n        (attributes['aria-labelledby'] ? undefined : computedLabel.value || computedAriaLabelFallbackMessage.value);\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 getInputFieldDropdownProps = (attributes: Record<string, unknown>) => ({\n        'aria-label': t('ariaLabelDropdownFallback', { inputLabel: getAriaLabel(attributes) }),\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, modelValue: 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 focus methods for parent components in Vue 3.\n    defineExpose({\n        /**\n         * Focuses the input field.\n         */\n        focusInput,\n\n        /**\n         * Focuses the dropdown when using the dropdown variant; otherwise focuses the input field.\n         */\n        focus,\n\n        /**\n         * Reference to the native input element.\n         */\n        inputFieldElement,\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 (hasSlot('defaultIconBefore')) {\n        deprecate(\n            'BentoInputField \"defaultIconBefore\" slot',\n            `Use the BentoInputField \"iconBefore\" slot instead to add an icon at the left side of the input field\n            <bento-input-field>\n              \\t<template #iconBefore>\n                \\t\\t<my-icon-goes-here />\n              \\t</template>\n            </bento-input-field>`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Input field component is used to create interactive controls for web-based\n     * forms in order to accept data from the user.\n     *\n     * @example\n     * import { BentoInputField } from '@adyen/bento-vue2'\n     *\n     * const inputValue = ref('');\n     *\n     * export default {\n     *      components: { BentoInputField },\n     *      tempate: `\n     *          <bento-input-field\n     *              :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', event: 'update:model-value' },\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","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","shouldShowStaticValue","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedLabel","getSlotText","computedDescription","computedAriaOwns","computedAriaLabelFallbackMessage","getAriaLabel","computedAriaDescribedBy","inputFieldConditionalClasses","getInputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","focus","expose","inputFieldParentComponent","printDevelopmentWarning","deprecate"],"mappings":"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"}
+{"version":3,"file":"input-field.90DWNO1a.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 v3.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 v3.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 v3.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     * Enables virtual scrolling for large lists of items\n     */\n    virtualScroll?: BentoDropdownProps['virtualScroll'];\n}\n\n/**\n * @deprecated Since v3.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     * 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     * 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     * 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=\"getInputFieldDropdownProps($attrs)\"\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=\"getAriaLabel($attrs)\"\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\"\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 v-if=\"hint && isFocused && modelValue\" el=\"span\" class=\"b-input-field__hint\">\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=\"getInputFieldDropdownProps($attrs)\"\n                    :disabled=\"disabled\"\n                    :readonly=\"isDropdownReadOnly\"\n                    @update:model-value=\"onDropdownInput\"\n                />\n            </div>\n        </div>\n\n        <div\n            v-if=\"(shouldShowError && !!errorMessage) || hasSlot('description') || description\"\n            class=\"b-input-field__footer\"\n        >\n            <error-message v-if=\"shouldShowError && !!errorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\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        </div>\n    </bento-typography>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide, type Ref, ref, toRef, 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 '@/utils/ts/generate-uid';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\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 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  condensed: { type: Boolean, default: false },\n  dropdown: { default: undefined },\n  dropdownPosition: { default: BentoInputFieldElementPosition.START },\n  modelValue: { default: undefined },\n  slashedZero: { type: Boolean, default: false },\n  staticValue: { default: '' },\n  staticValuePosition: { default: BentoInputFieldElementPosition.START },\n  type: { default: BentoInputFieldType.TEXT },\n  variant: { default: BentoInputFieldVariant.DEFAULT }\n});\n\n    const emit = defineEmits([\"blur\", \"click\", \"change\", \"dropdown-input\", \"escape-pressed\", \"focus\", \"keydown\", \"keyup\", \"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<HTMLInputElement>(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(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\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(() => t('ariaLabelFallback'));\n    const getAriaLabel = (attributes: Record<string, unknown>) =>\n        (attributes['aria-label'] as string | undefined) ??\n        (attributes['aria-labelledby'] ? undefined : computedLabel.value || computedAriaLabelFallbackMessage.value);\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 getInputFieldDropdownProps = (attributes: Record<string, unknown>) => ({\n        'aria-label': t('ariaLabelDropdownFallback', { inputLabel: getAriaLabel(attributes) }),\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, modelValue: 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 focus methods for parent components in Vue 3.\n    defineExpose({\n        /**\n         * Focuses the input field.\n         */\n        focusInput,\n\n        /**\n         * Focuses the dropdown when using the dropdown variant; otherwise focuses the input field.\n         */\n        focus,\n\n        /**\n         * Reference to the native input element.\n         */\n        inputFieldElement,\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 (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            '3.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', event: 'update:model-value' },\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","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","shouldShowStaticValue","isDefaultVariant","isPaymentMethodVariant","shouldDisplayStaticValueAtStart","shouldDisplayStaticValueAtEnd","shouldShowDropdown","shouldDisplayDropdownAtStart","shouldDisplayDropdownAtEnd","shouldShowError","computedLabel","getSlotText","computedDescription","computedAriaOwns","computedAriaLabelFallbackMessage","getAriaLabel","computedAriaDescribedBy","inputFieldConditionalClasses","getInputFieldDropdownProps","onInput","event","inputValue","onDropdownInput","selectedValue","focusInput","focus","expose","inputFieldParentComponent","printDevelopmentWarning","deprecate"],"mappings":"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"}

package/dist/chunks/input-time.D7IsprlH.js

@@ -0,0 +1,157 @@
+import { defineComponent as B, provide as V, useSlots as k, ref as N, computed as l, watch as M } from "vue";
+import { B as $, g as A } from "./dropdown.CpZQYisR.js";
+import { f as x, B as R } from "./input-field.90DWNO1a.js";
+import { u as C } from "./index.CPOlyau9.js";
+import { p as K } from "./typography.Cd386LC_.js";
+import { u as P } from "./use-has-slot.C9lQZ6nz.js";
+import { u as L } from "./use-touch-device.DTqFAbXh.js";
+import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/input-time.css";
+const U = /[\d]/, q = /^\d{2}$/, z = /^\d{2}:\d{2}$/, G = 8, m = 1440, J = 5, g = (o) => {
+  const t = Math.floor(o / 60), n = o % 60;
+  return `${String(t).padStart(2, "0")}:${String(n).padStart(2, "0")}:00`;
+}, W = (o) => {
+  const [t, n, e] = o.split(":");
+  return parseInt(t, 10) * 3600 + parseInt(n, 10) * 60 + parseInt(e, 10);
+}, v = (o) => /^(?:[01]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/.test(o), f = (o) => Number.isInteger(o) && o >= J && o <= m && m % o === 0, X = (o) => {
+  if (!f(o))
+    return [];
+  const t = [];
+  for (let n = 0; n < m; n += o)
+    t.push(g(n));
+  return t;
+}, ve = (o, t, n) => {
+  if (!o || !v(o) || !f(t))
+    return o;
+  const e = t * 60, r = m * 60 - e, d = W(o);
+  if (d <= r && d % e === 0)
+    return o;
+  const s = n === "down" ? Math.floor(d / e) * e : Math.ceil(d / e) * e;
+  return g(Math.min(s, r) / 60);
+}, Y = (o) => {
+  const { selectionStart: t, value: n = "" } = o.target, r = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"].includes(o.key), d = U.test(o.key) || r, s = [1, 2, 4, 5].includes(t) && o.key === ":", p = n.length >= G;
+  (!d && !s || p && !r) && o.preventDefault();
+}, j = (o) => {
+  if (!o)
+    return o;
+  let t = o;
+  if (t.length === 1 && parseInt(o, 10) > 2)
+    return `0${t}:`;
+  const [n, e] = t.slice(-2);
+  return [2, 5].includes(t.length) && e === ":" && (t = `${t.slice(0, t.length - 2)}0${n}`), (q.test(t) || z.test(t)) && (t += ":"), t;
+}, Z = {
+  "de-DE": { invalidTimeFormat: "Ungültiges Zeitformat", timeFormatDescription: "HH:MM:SS" },
+  "en-GB": { invalidTimeFormat: "Invalid time format", timeFormatDescription: "HH:MM:SS" },
+  "en-US": { invalidTimeFormat: "Invalid time format", timeFormatDescription: "HH:MM:SS" },
+  "es-419": { invalidTimeFormat: "Formato de tiempo no válido", timeFormatDescription: "HH:MM:SS" },
+  "es-ES": { invalidTimeFormat: "Formato de hora no válido", timeFormatDescription: "HH:MM:SS" },
+  "es-MX": { invalidTimeFormat: "Formato de hora no válido", timeFormatDescription: "HH:MM:SS" },
+  "fr-FR": { invalidTimeFormat: "Format d’heure non valide", timeFormatDescription: "HH:MM:SS" },
+  "it-IT": { invalidTimeFormat: "Formato orario non valido", timeFormatDescription: "HH:MM:SS" },
+  "ja-JP": { invalidTimeFormat: "無効な時刻形式", timeFormatDescription: "HH時MM分SS秒" },
+  "pt-BR": { invalidTimeFormat: "Formato de tempo inválido", timeFormatDescription: "HH:MM:SS" },
+  "zh-CN": { invalidTimeFormat: "时间格式无效", timeFormatDescription: "HH:MM:SS" }
+}, Q = {
+  i18n: { messages: Z },
+  name: "bento-input-time",
+  inheritAttrs: !1,
+  model: { prop: "modelValue" }
+}, ee = /* @__PURE__ */ B({
+  ...Q,
+  props: {
+    description: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    errorMessage: { default: null },
+    label: { default: "" },
+    optional: { type: Boolean, default: !1 },
+    placeholder: { default: "" },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    tooltipText: { default: null },
+    condensed: { type: Boolean, default: !1 },
+    interval: { default: void 0 },
+    modelValue: { default: void 0 }
+  },
+  emits: ["click", "update:model-value", "keydown", "input:valid", "input:error"],
+  setup(o, { emit: t }) {
+    const n = o, e = 300;
+    V(x, "bento-input-time");
+    const r = k(), d = P(r), { isTouchDevice: s } = L(), { t: p } = C(), u = N(!1), S = l(() => n.errorMessage ? n.errorMessage : u.value ? p("invalidTimeFormat") : null), h = l(() => s.value ? n.errorMessage : S.value), I = l(() => s.value ? "time" : void 0), y = l(() => n.modelValue), D = l(() => s ? void 0 : n.placeholder), F = l(
+      () => n.description ? `${n.description} ${p("timeFormatDescription")}` : p("timeFormatDescription")
+    ), c = l(() => f(n.interval)), b = l(() => c.value && !s.value), H = l(
+      () => X(n.interval).map((i) => ({ label: i, value: i }))
+    ), E = l(() => {
+      if (s.value)
+        return c.value ? n.interval * 60 : 1;
+    });
+    M(
+      () => n.interval,
+      (i) => {
+        i != null && !f(i) && K(
+          `[bento-input-time] The "interval" prop must be a whole number of minutes of at least 5 that divides a full day, e.g. 5, 15, 30 or 60. Received "${i}", falling back to a free text time input.`
+        );
+      },
+      { immediate: !0 }
+    );
+    const T = (i) => {
+      if (!i) {
+        u.value = !1;
+        return;
+      }
+      const a = v(i);
+      u.value = !a, t(a ? "input:valid" : "input:error");
+    }, _ = A(T, e);
+    return M(
+      () => n.modelValue,
+      (i) => {
+        const a = String(i ?? "");
+        a.length === 8 && v(a) && (u.value = !1);
+      }
+    ), { __sfc: !0, VALIDATION_DEBOUNCE_TIME: e, slots: r, hasSlot: d, isTouchDevice: s, t: p, props: n, emit: t, internalError: u, computedErrorMessage: S, inputErrorMessage: h, inputType: I, inputModelValue: y, computedPlaceholder: D, timeDescription: F, hasTimeInterval: c, isTimeDropdown: b, timeItems: H, nativeStep: E, validateTime: T, validateTimeWithDebounce: _, onInput: (i) => {
+      if (!(n.disabled || n.readonly))
+        if (s.value) {
+          const a = String(i ?? ""), w = c.value && a.length === 5;
+          t("update:model-value", w ? `${a}:00` : a), t("input:valid");
+        } else {
+          const a = j(String(i ?? ""));
+          t("update:model-value", a), _(a);
+        }
+    }, onKeyDown: (i) => {
+      s.value || Y(i), t("keydown", i);
+    }, onTimeSelected: (i) => {
+      n.disabled || n.readonly || (u.value = !1, t("update:model-value", String(i ?? "")), t("input:valid"));
+    }, BentoDropdown: $, BentoInputField: R };
+  }
+});
+var te = function() {
+  var t = this, n = t._self._c, e = t._self._setupProxy;
+  return e.isTimeDropdown ? n(e.BentoDropdown, t._b({ staticClass: "b-input-time", attrs: { "dynamic-filtering": "", condensed: e.props.condensed, disabled: e.props.disabled, "error-message": e.computedErrorMessage, items: e.timeItems, label: e.props.label, "model-value": e.props.modelValue ?? "", optional: e.props.optional, placeholder: e.props.placeholder, readonly: e.props.readonly, required: e.props.required, "tooltip-text": e.props.tooltipText }, on: { "update:model-value": e.onTimeSelected }, nativeOn: { click: function(r) {
+    return e.emit("click", r);
+  } }, scopedSlots: t._u([{ key: "description", fn: function() {
+    return [t._t("description", function() {
+      return [t._v(t._s(e.timeDescription))];
+    })];
+  }, proxy: !0 }], null, !0) }, "bento-dropdown", t.$attrs, !1)) : n(e.BentoInputField, t._b({ staticClass: "b-input-time", attrs: { type: e.inputType, step: e.nativeStep, condensed: e.props.condensed, disabled: e.props.disabled, "error-message": e.inputErrorMessage, label: e.props.label, "model-value": e.inputModelValue, optional: e.props.optional, placeholder: e.computedPlaceholder, readonly: e.props.readonly, required: e.props.required, "tooltip-text": e.props.tooltipText }, on: { click: function(r) {
+    return e.emit("click", r);
+  }, "update:model-value": e.onInput, keydown: e.onKeyDown }, scopedSlots: t._u([e.hasSlot("default") ? { key: "default", fn: function() {
+    return [t._t("default")];
+  }, proxy: !0 } : null, e.isTouchDevice ? null : { key: "description", fn: function() {
+    return [t._t("description", function() {
+      return [t._v(t._s(e.timeDescription))];
+    })];
+  }, proxy: !0 }], null, !0) }, "bento-input-field", t.$attrs, !1));
+}, oe = [], ne = /* @__PURE__ */ O(
+  ee,
+  te,
+  oe,
+  !1,
+  null,
+  "db9b6cd5"
+);
+const Se = ne.exports;
+export {
+  Se as B,
+  v as i,
+  ve as s
+};
+//# sourceMappingURL=input-time.D7IsprlH.js.map

package/dist/chunks/input-time.D7IsprlH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-time.D7IsprlH.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\nconst MAX_TIME_INPUT_LENGTH = 8;\n\nconst MINUTES_IN_A_DAY = 24 * 60;\nconst MIN_TIME_INTERVAL = 5;\n\nconst minutesToTimeString = (minutes: number): string => {\n    const hours = Math.floor(minutes / 60);\n    const remainingMinutes = minutes % 60;\n    return `${String(hours).padStart(2, '0')}:${String(remainingMinutes).padStart(2, '0')}:00`;\n};\n\nconst timeStringToSeconds = (timeText: string): number => {\n    const [hours, minutes, seconds] = timeText.split(':');\n    return parseInt(hours, 10) * 3600 + parseInt(minutes, 10) * 60 + parseInt(seconds, 10);\n};\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\n/**\n * Validates a time interval expressed in minutes.\n * An interval must be a whole number of at least 5 minutes that divides a full day,\n * so the generated options are evenly spread from midnight onwards.\n * @param interval The interval in minutes\n * @returns True if the interval can be used to generate time options, false otherwise\n */\nexport const isValidTimeInterval = (interval: number): boolean =>\n    Number.isInteger(interval) &&\n    interval >= MIN_TIME_INTERVAL &&\n    interval <= MINUTES_IN_A_DAY &&\n    MINUTES_IN_A_DAY % interval === 0;\n\n/**\n * Generates the list of selectable times for a given interval, starting at midnight.\n * Seconds are always `00`, e.g. an interval of 60 generates `00:00:00` up to `23:00:00`.\n * @param interval The interval in minutes\n * @returns A list of time strings in HH:MM:SS format, or an empty list for an invalid interval\n */\nexport const generateTimeOptions = (interval: number): Array<string> => {\n    if (!isValidTimeInterval(interval)) {\n        return [];\n    }\n\n    const options: Array<string> = [];\n    for (let minutes = 0; minutes < MINUTES_IN_A_DAY; minutes += interval) {\n        options.push(minutesToTimeString(minutes));\n    }\n\n    return options;\n};\n\n/**\n * Snaps a time to the closest selectable time of the given interval.\n * Rounding `up` is clamped to the last selectable time, so `23:59:59` with an\n * interval of 60 resolves to `23:00:00` instead of overflowing into the next day.\n * @param timeText The time string in HH:MM:SS format\n * @param interval The interval in minutes\n * @param direction Whether to round the time down or up\n * @returns The snapped time string, or the given time when it cannot be snapped\n */\nexport const snapTimeToInterval = (timeText: string, interval: number, direction: 'down' | 'up'): string => {\n    if (!timeText || !isValidTimeString(timeText) || !isValidTimeInterval(interval)) {\n        return timeText;\n    }\n\n    const intervalInSeconds = interval * 60;\n    const lastOptionInSeconds = MINUTES_IN_A_DAY * 60 - intervalInSeconds;\n    const totalSeconds = timeStringToSeconds(timeText);\n\n    if (totalSeconds <= lastOptionInSeconds && totalSeconds % intervalInSeconds === 0) {\n        return timeText;\n    }\n\n    const roundedSeconds =\n        direction === 'down'\n            ? Math.floor(totalSeconds / intervalInSeconds) * intervalInSeconds\n            : Math.ceil(totalSeconds / intervalInSeconds) * intervalInSeconds;\n\n    return minutesToTimeString(Math.min(roundedSeconds, lastOptionInSeconds) / 60);\n};\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-dropdown\n        v-if=\"isTimeDropdown\"\n        class=\"b-input-time\"\n        dynamic-filtering\n        :condensed=\"props.condensed\"\n        :disabled=\"props.disabled\"\n        :error-message=\"computedErrorMessage\"\n        :items=\"timeItems\"\n        :label=\"props.label\"\n        :model-value=\"props.modelValue ?? ''\"\n        :optional=\"props.optional\"\n        :placeholder=\"props.placeholder\"\n        :readonly=\"props.readonly\"\n        :required=\"props.required\"\n        :tooltip-text=\"props.tooltipText\"\n        v-bind=\"$attrs\"\n        @click.native=\"emit('click', $event)\"\n        @update:model-value=\"onTimeSelected\"\n    >\n        <template #description>\n            <slot name=\"description\">{{ timeDescription }}</slot>\n        </template>\n    </bento-dropdown>\n    <bento-input-field\n        v-else\n        class=\"b-input-time\"\n        :type=\"inputType\"\n        :step=\"nativeStep\"\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        @click=\"emit('click', $event)\"\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\">{{ timeDescription }}</slot>\n        </template>\n    </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n    // Components\n    import { BentoDropdown } from '@/components/dropdown';\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 { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import {\n        formatTimeInputValue,\n        generateTimeOptions,\n        isValidTimeInterval,\n        isValidTimeString,\n        validateTimeInput,\n    } 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  interval: { default: undefined },\n  modelValue: { default: undefined }\n});\n\n    const emit = defineEmits([\"click\", \"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    const timeDescription = computed(() =>\n        props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n    );\n\n    const hasTimeInterval = computed(() => isValidTimeInterval(props.interval));\n    // On touch devices the native time input already restricts the selectable times through `step`\n    const isTimeDropdown = computed(() => hasTimeInterval.value && !isTouchDevice.value);\n    const timeItems = computed(() =>\n        generateTimeOptions(props.interval).map(timeOption => ({ label: timeOption, value: timeOption }))\n    );\n    const nativeStep = computed(() => {\n        if (!isTouchDevice.value) {\n            return undefined;\n        }\n\n        return hasTimeInterval.value ? props.interval * 60 : 1;\n    });\n\n    watch(\n        () => props.interval,\n        interval => {\n            if (interval != null && !isValidTimeInterval(interval)) {\n                printDevelopmentWarning(\n                    `[bento-input-time] The \"interval\" prop must be a whole number of minutes of at least 5 that divides a full day, e.g. 5, 15, 30 or 60. Received \"${interval}\", falling back to a free text time input.`\n                );\n            }\n        },\n        { immediate: true }\n    );\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            // A `step` of whole minutes hides the seconds in the native input, so they are added back\n            const nativeValue = String(value ?? '');\n            const shouldAppendSeconds = hasTimeInterval.value && nativeValue.length === 5;\n\n            emit('update:model-value', shouldAppendSeconds ? `${nativeValue}:00` : nativeValue);\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\n    const onTimeSelected = (value: BentoInputFieldValue) => {\n        if (props.disabled || props.readonly) {\n            return;\n        }\n\n        internalError.value = false;\n        emit('update:model-value', String(value ?? ''));\n        emit('input:valid');\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","MAX_TIME_INPUT_LENGTH","MINUTES_IN_A_DAY","MIN_TIME_INTERVAL","minutesToTimeString","minutes","hours","remainingMinutes","timeStringToSeconds","timeText","seconds","isValidTimeString","isValidTimeInterval","interval","generateTimeOptions","options","snapTimeToInterval","direction","intervalInSeconds","lastOptionInSeconds","totalSeconds","roundedSeconds","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","timeDescription","hasTimeInterval","isTimeDropdown","timeItems","timeOption","nativeStep","watch","printDevelopmentWarning","validateTime","isValid","emit","validateTimeWithDebounce","debounce","newValue","nativeValue","shouldAppendSeconds","formatted"],"mappings":"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"}

package/dist/chunks/{inspector-page.BRC_7uro.js → inspector-page.IoC9naSV.js}

@@ -1,7 +1,7 @@
 import { defineComponent as r } from "vue";
-import { B as n } from "./typography.D1OZJbEa.js";
-import { F as a } from "./footer-actions.C9STwwcv.js";
-import { D as i } from "./dialog-page.Bct3zOQO.js";
+import { B as n } from "./typography.Cd386LC_.js";
+import { F as a } from "./footer-actions.B8f-gEQV.js";
+import { D as i } from "./dialog-page.DORdXmEm.js";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/inspector-page.css";
 const y = ["small", "large"], c = /* @__PURE__ */ r({
@@ -38,4 +38,4 @@ export {
   y as B,
   b as i
 };
-//# sourceMappingURL=inspector-page.BRC_7uro.js.map
+//# sourceMappingURL=inspector-page.IoC9naSV.js.map

package/dist/chunks/{inspector-page.BRC_7uro.js.map → inspector-page.IoC9naSV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"inspector-page.BRC_7uro.js","sources":["../../src/components/inspector/inspector.types.ts"],"sourcesContent":["export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorRelativeLayout = 'push-content' | 'overlay-content';\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n\nexport interface BentoInspectorProps {\n    /**\n     * ID of the current active inspector page\n     */\n    activePage?: string;\n\n    /**\n     * Shows the Expand icon in the inspector\n     */\n    expandable?: boolean;\n\n    /**\n     * Opens and closes the inspector\n     */\n    isOpen?: boolean;\n\n    /**\n     * Shows loading indicator for the content\n     */\n    loading?: boolean;\n\n    /**\n     * Determines the size of the inspector\n     */\n    size?: BentoInspectorSize;\n\n    /**\n     * The title of the component.\n     * Used for accessibility and the single page inspector.\n     * When using `bento-inspector-page` this title is only used for accessibility purposes\n     */\n    title: string;\n\n    /**\n     * The appearance of the inspector relative to the main content. Defaults to `push-content`.\n     *\n     * - `push-content`: The inspector pushes the main content to the side, resizing it to fit.\n     * - `overlay-content`: The inspector opens on top of the main content, without affecting its layout.\n     */\n    relativeLayout?: BentoInspectorRelativeLayout;\n\n    /**\n     * An optional HTMLElement to focus on when returning focus from the inspector\n     * to the main page content (e.g. via the `Ctrl+Shift+S` keyboard shortcut).\n     *\n     * By default, the inspector attempts to return focus to the element that was active before it opened.\n     * However, if that trigger element is removed from the DOM (e.g., via a `v-if`), focus cannot be returned.\n     *\n     * Providing a `pageFocusAnchor` (e.g. role=\"gridcell\") ensures that the\n     * focus context is preserved for accessibility.\n     */\n    pageFocusAnchor?: HTMLElement;\n}\n"],"names":["BentoInspectorSizeOptions"],"mappings":";;;;;;AAAO,MAAAA,IAAA,CAAA,SAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"inspector-page.IoC9naSV.js","sources":["../../src/components/inspector/inspector.types.ts"],"sourcesContent":["export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorRelativeLayout = 'push-content' | 'overlay-content';\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n\nexport interface BentoInspectorProps {\n    /**\n     * ID of the current active inspector page\n     */\n    activePage?: string;\n\n    /**\n     * Shows the Expand icon in the inspector\n     */\n    expandable?: boolean;\n\n    /**\n     * Opens and closes the inspector\n     */\n    isOpen?: boolean;\n\n    /**\n     * Shows loading indicator for the content\n     */\n    loading?: boolean;\n\n    /**\n     * Determines the size of the inspector\n     */\n    size?: BentoInspectorSize;\n\n    /**\n     * The title of the component.\n     * Used for accessibility and the single page inspector.\n     * When using `bento-inspector-page` this title is only used for accessibility purposes\n     */\n    title: string;\n\n    /**\n     * The appearance of the inspector relative to the main content. Defaults to `push-content`.\n     *\n     * - `push-content`: The inspector pushes the main content to the side, resizing it to fit.\n     * - `overlay-content`: The inspector opens on top of the main content, without affecting its layout.\n     */\n    relativeLayout?: BentoInspectorRelativeLayout;\n\n    /**\n     * An optional HTMLElement to focus on when returning focus from the inspector\n     * to the main page content (e.g. via the `Ctrl+Shift+S` keyboard shortcut).\n     *\n     * By default, the inspector attempts to return focus to the element that was active before it opened.\n     * However, if that trigger element is removed from the DOM (e.g., via a `v-if`), focus cannot be returned.\n     *\n     * Providing a `pageFocusAnchor` (e.g. role=\"gridcell\") ensures that the\n     * focus context is preserved for accessibility.\n     */\n    pageFocusAnchor?: HTMLElement;\n}\n"],"names":["BentoInspectorSizeOptions"],"mappings":";;;;;;AAAO,MAAAA,IAAA,CAAA,SAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{inspector.IOtNex1r.js → inspector.BwtV4rE9.js}

@@ -1,6 +1,6 @@
 import { ref as a, watch as R, defineComponent as V, computed as v, provide as k, toRef as $, nextTick as Y } from "vue";
-import { d as K, B as J } from "./typography.D1OZJbEa.js";
-import { B as U } from "./button.DII5Ifwa.js";
+import { d as K, B as J } from "./typography.Cd386LC_.js";
+import { B as U } from "./button.tsTeQRcP.js";
 import { B as X } from "./loading-indicator.PxbRzshH.js";
 import { B as j, g as q, s as W, a as Z, f as Q } from "./focus-trap.fd6_d2EW.js";
 import { E as ee } from "./expand.zENZmw3W.js";
@@ -110,7 +110,7 @@ const ue = {
       'BentoInspector "active-page" as optional',
       `Make sure to set the "active-page" prop and keep it in sync with "update:active-page".
             "active-page" prop will be required in the next version`,
-      "2.0.0"
+      "3.0.0"
     ), { __sfc: !0, props: e, emit: n, t, returnToMainContentDescriptionId: i, wrapper: s, inspector: C, page: T, returnContentButton: b, expandButton: E, closeButton: M, inspectorLastFocusedElement: _, internalActivePage: m, pages: l, previousPages: I, animation: B, isAnimationActive: x, wrapperWidth: S, computedContainerClasses: w, isCompact: d, computedPageLastFocusedElement: f, conditionalClass: H, inspectorAriaLabel: G, findValidFocusFallback: g, getOrderedFocusableElements: h, setFocus: y, handleTabNavigation: N, handleSectionFocus: z, moveFocusBetweenSections: A, focusElement: p, updatePage: D, unregisterPage: P, registerPage: F, BentoTypography: J, BentoButton: U, BentoLoadingIndicator: X, BentoFocusTrap: j, ExpandIcon: ee, CrossIcon: te };
   }
 });
@@ -133,10 +133,10 @@ var ve = function() {
   Ce,
   !1,
   null,
-  "110ca0c0"
+  "28828352"
 );
 const De = _e.exports;
 export {
   De as B
 };
-//# sourceMappingURL=inspector.IOtNex1r.js.map
+//# sourceMappingURL=inspector.BwtV4rE9.js.map

package/dist/chunks/{inspector.IOtNex1r.js.map → inspector.BwtV4rE9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"inspector.IOtNex1r.js","sources":["../../src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\"></slot>\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isCompact\" class=\"b-inspector__focus-trap\">\n                    <div class=\"b-inspector__container\" :class=\"computedContainerClasses\">\n                        <template v-if=\"!isCompact\">\n                            <bento-button\n                                ref=\"returnContentButton\"\n                                class=\"b-inspector__return-content\"\n                                variant=\"secondary\"\n                                condensed\n                                :aria-describedby=\"returnToMainContentDescriptionId\"\n                                @click=\"moveFocusBetweenSections\"\n                            >\n                                {{ t('returnToMainContent') }}\n                            </bento-button>\n                            <span\n                                :id=\"returnToMainContentDescriptionId\"\n                                class=\"b-inspector__return-content-description\"\n                            >\n                                {{ t('returnToMainContentDescription') }}\n                            </span>\n                        </template>\n                        <div v-if=\"pages.length === 0\" class=\"b-inspector__header\">\n                            <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                                {{ title }}\n                            </bento-typography>\n                        </div>\n                        <div class=\"b-inspector__content\">\n                            <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                            <slot v-else name=\"content\"></slot>\n                        </div>\n                        <div class=\"b-inspector__icons\">\n                            <bento-button\n                                v-if=\"expandable\"\n                                ref=\"expandButton\"\n                                variant=\"tertiary\"\n                                :aria-label=\"t('expand')\"\n                                @click=\"emit('expand')\"\n                            >\n                                <template #iconLeft>\n                                    <expand-icon aria-hidden=\"true\" />\n                                </template>\n                            </bento-button>\n                            <bento-button\n                                ref=\"closeButton\"\n                                :aria-label=\"t('close')\"\n                                variant=\"tertiary\"\n                                @click=\"emit('update:is-open', false)\"\n                            >\n                                <template #iconLeft>\n                                    <cross-icon aria-hidden=\"true\" />\n                                </template>\n                            </bento-button>\n                        </div>\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRef, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useElementSize } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement, getFocusableIn } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import {\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal/dialog-page/dialog-page.keys';\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n    } from '@/internal/dialog-page/dialog-page.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  activePage: { default: '' },\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null,\n  relativeLayout: { default: 'push-content' },\n  pageFocusAnchor: { default: null }\n});\n\n    const emit = defineEmits([\"update:is-open\", \"update:active-page\", \"expand\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    // These refs allow keyboard navigation to follow the intended order independently of the DOM order.\n    const returnContentButton = ref(null);\n    const expandButton = ref(null);\n    const closeButton = ref(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n    const internalActivePage = ref(props.activePage);\n\n    // Multiple page navigation\n    const pages = ref<Array<string>>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isAnimationActive = ref(false);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n    const computedContainerClasses = computed(() => {\n        return {\n            'b-inspector__container--padded': pages.value.length === 0, // No pages are registered\n        };\n    });\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n        [`b-inspector--multi-paged`]: pages.value.length,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    /**\n     * Returns the Inspector's intended tab order.\n     *\n     * The content must remain before the icon buttons in the DOM for the Inspector animations,\n     * so the keyboard order is managed separately. The return button is omitted automatically in compact mode.\n     */\n    const getOrderedFocusableElements = () => {\n        const navigationButtons = [\n            returnContentButton.value?.$el,\n            expandButton.value?.$el,\n            closeButton.value?.$el,\n        ].filter(Boolean) as Array<HTMLElement>;\n        const contentFocusableElements = getFocusableIn(inspector.value)\n            .map(({ node }) => node)\n            .filter(element => !navigationButtons.includes(element));\n\n        return [...navigationButtons, ...contentFocusableElements];\n    };\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            if (isCompact.value) {\n                // The compact focus trap uses DOM order when it initially moves focus.\n                // Explicitly focus the first ordered control so content does not skip the icon buttons.\n                focusElement(getOrderedFocusableElements()[0]);\n            } else {\n                moveFocusInside(inspector.value, computedPageLastFocusedElement.value);\n            }\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = (event: KeyboardEvent) => {\n        // Prevent the browser's DOM-based tab order and use the Inspector-specific order instead.\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableElements = getOrderedFocusableElements();\n        const currentIndex = focusableElements.indexOf(getActiveElement());\n        const nextIndex = currentIndex + direction;\n\n        // Compact inspectors trap focus, so navigation should wrap around instead of returning focus to the page.\n        if (isCompact.value && focusableElements.length > 0) {\n            event.preventDefault();\n            focusableElements[(nextIndex + focusableElements.length) % focusableElements.length].focus();\n            return;\n        }\n\n        const focusableEl = focusableElements[nextIndex];\n\n        // At either end of the Inspector, return focus to the page.\n        if (!focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n            return;\n        }\n\n        event.preventDefault();\n        focusableEl.focus();\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    /**\n     * Multiple page navigation and page registration\n     */\n\n    const updatePage = page => emit('update:active-page', page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage: internalActivePage,\n        animation,\n        isAnimationActive,\n        isOpen: toRef(props, 'isOpen'),\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                internalActivePage.value = props.activePage;\n                setFocus();\n            }\n        }\n    );\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","returnContentButton","expandButton","closeButton","inspectorLastFocusedElement","internalActivePage","props","pages","previousPages","animation","BentoDialogPageAnimation","isAnimationActive","wrapperWidth","useElementSize","computedContainerClasses","computed","isCompact","threshold","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","getOrderedFocusableElements","navigationButtons","contentFocusableElements","getFocusableIn","node","element","setFocus$1","nextTick","focusElement","setFocus","handleTabNavigation","event","direction","focusableElements","nextIndex","getActiveElement","focusableEl","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","updatePage","page2","unregisterPage","pageIdToRemove","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","toRef","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","deprecate"],"mappings":"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"}
+{"version":3,"file":"inspector.BwtV4rE9.js","sources":["../../src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\"></slot>\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isCompact\" class=\"b-inspector__focus-trap\">\n                    <div class=\"b-inspector__container\" :class=\"computedContainerClasses\">\n                        <template v-if=\"!isCompact\">\n                            <bento-button\n                                ref=\"returnContentButton\"\n                                class=\"b-inspector__return-content\"\n                                variant=\"secondary\"\n                                condensed\n                                :aria-describedby=\"returnToMainContentDescriptionId\"\n                                @click=\"moveFocusBetweenSections\"\n                            >\n                                {{ t('returnToMainContent') }}\n                            </bento-button>\n                            <span\n                                :id=\"returnToMainContentDescriptionId\"\n                                class=\"b-inspector__return-content-description\"\n                            >\n                                {{ t('returnToMainContentDescription') }}\n                            </span>\n                        </template>\n                        <div v-if=\"pages.length === 0\" class=\"b-inspector__header\">\n                            <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                                {{ title }}\n                            </bento-typography>\n                        </div>\n                        <div class=\"b-inspector__content\">\n                            <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                            <slot v-else name=\"content\"></slot>\n                        </div>\n                        <div class=\"b-inspector__icons\">\n                            <bento-button\n                                v-if=\"expandable\"\n                                ref=\"expandButton\"\n                                variant=\"tertiary\"\n                                :aria-label=\"t('expand')\"\n                                @click=\"emit('expand')\"\n                            >\n                                <template #iconLeft>\n                                    <expand-icon aria-hidden=\"true\" />\n                                </template>\n                            </bento-button>\n                            <bento-button\n                                ref=\"closeButton\"\n                                :aria-label=\"t('close')\"\n                                variant=\"tertiary\"\n                                @click=\"emit('update:is-open', false)\"\n                            >\n                                <template #iconLeft>\n                                    <cross-icon aria-hidden=\"true\" />\n                                </template>\n                            </bento-button>\n                        </div>\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRef, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useElementSize } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement, getFocusableIn } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import {\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal/dialog-page/dialog-page.keys';\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n    } from '@/internal/dialog-page/dialog-page.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  activePage: { default: '' },\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null,\n  relativeLayout: { default: 'push-content' },\n  pageFocusAnchor: { default: null }\n});\n\n    const emit = defineEmits([\"update:is-open\", \"update:active-page\", \"expand\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    // These refs allow keyboard navigation to follow the intended order independently of the DOM order.\n    const returnContentButton = ref(null);\n    const expandButton = ref(null);\n    const closeButton = ref(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n    const internalActivePage = ref(props.activePage);\n\n    // Multiple page navigation\n    const pages = ref<Array<string>>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isAnimationActive = ref(false);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n    const computedContainerClasses = computed(() => {\n        return {\n            'b-inspector__container--padded': pages.value.length === 0, // No pages are registered\n        };\n    });\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n        [`b-inspector--multi-paged`]: pages.value.length,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    /**\n     * Returns the Inspector's intended tab order.\n     *\n     * The content must remain before the icon buttons in the DOM for the Inspector animations,\n     * so the keyboard order is managed separately. The return button is omitted automatically in compact mode.\n     */\n    const getOrderedFocusableElements = () => {\n        const navigationButtons = [\n            returnContentButton.value?.$el,\n            expandButton.value?.$el,\n            closeButton.value?.$el,\n        ].filter(Boolean) as Array<HTMLElement>;\n        const contentFocusableElements = getFocusableIn(inspector.value)\n            .map(({ node }) => node)\n            .filter(element => !navigationButtons.includes(element));\n\n        return [...navigationButtons, ...contentFocusableElements];\n    };\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            if (isCompact.value) {\n                // The compact focus trap uses DOM order when it initially moves focus.\n                // Explicitly focus the first ordered control so content does not skip the icon buttons.\n                focusElement(getOrderedFocusableElements()[0]);\n            } else {\n                moveFocusInside(inspector.value, computedPageLastFocusedElement.value);\n            }\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = (event: KeyboardEvent) => {\n        // Prevent the browser's DOM-based tab order and use the Inspector-specific order instead.\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableElements = getOrderedFocusableElements();\n        const currentIndex = focusableElements.indexOf(getActiveElement());\n        const nextIndex = currentIndex + direction;\n\n        // Compact inspectors trap focus, so navigation should wrap around instead of returning focus to the page.\n        if (isCompact.value && focusableElements.length > 0) {\n            event.preventDefault();\n            focusableElements[(nextIndex + focusableElements.length) % focusableElements.length].focus();\n            return;\n        }\n\n        const focusableEl = focusableElements[nextIndex];\n\n        // At either end of the Inspector, return focus to the page.\n        if (!focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n            return;\n        }\n\n        event.preventDefault();\n        focusableEl.focus();\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    /**\n     * Multiple page navigation and page registration\n     */\n\n    const updatePage = page => emit('update:active-page', page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage: internalActivePage,\n        animation,\n        isAnimationActive,\n        isOpen: toRef(props, 'isOpen'),\n        pages,\n        previousPages,\n        updatePage,\n    });\n\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                internalActivePage.value = props.activePage;\n                setFocus();\n            }\n        }\n    );\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '3.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","returnContentButton","expandButton","closeButton","inspectorLastFocusedElement","internalActivePage","props","pages","previousPages","animation","BentoDialogPageAnimation","isAnimationActive","wrapperWidth","useElementSize","computedContainerClasses","computed","isCompact","threshold","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","getOrderedFocusableElements","navigationButtons","contentFocusableElements","getFocusableIn","node","element","setFocus$1","nextTick","focusElement","setFocus","handleTabNavigation","event","direction","focusableElements","nextIndex","getActiveElement","focusableEl","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","updatePage","page2","unregisterPage","pageIdToRemove","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","toRef","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","deprecate"],"mappings":"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"}

package/dist/chunks/{layout-row.LBn6aJv4.js → layout-row.DYx7F4cb.js}

@@ -1,6 +1,6 @@
 import { defineComponent as f, provide as b, toRef as L, computed as e, useSlots as R, inject as g, ref as i, watch as $, nextTick as x, onMounted as E } from "vue";
 import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as S } from "./typography.D1OZJbEa.js";
+import { B as S } from "./typography.Cd386LC_.js";
 import { u as z } from "./use-has-slot.C9lQZ6nz.js";
 import { k as T } from "./index.CL3TXc0a.js";
 import "../assets/layout-row.css";
@@ -87,4 +87,4 @@ export {
   V as a,
   U as l
 };
-//# sourceMappingURL=layout-row.LBn6aJv4.js.map
+//# sourceMappingURL=layout-row.DYx7F4cb.js.map