@adyen/bento-vue2 1.32.0 → 1.32.1

package/dist/chunks/{input-field.mEo-bCtk.js → input-field.Czp_0nIh.js}

@@ -1,5 +1,5 @@
 import { defineComponent as j, useAttrs as q, useSlots as K, ref as R, provide as X, toRef as z, computed as i, toRefs as G } from "vue";
-import { I as J, B as Q } from "./dropdown.Bn6SRkU5.js";
+import { I as J, B as Q } from "./dropdown.CR6vDGwi.js";
 import { p as Z, d as P, B as ee } from "./typography.CdCYtxYj.js";
 import { g as u } from "./unique-id.XFfoKuc2.js";
 import { g as te } from "./get-slot-text.Cgn-E48s.js";
@@ -222,4 +222,4 @@ export {
   w as d,
   le as e
 };
-//# sourceMappingURL=input-field.mEo-bCtk.js.map
+//# sourceMappingURL=input-field.Czp_0nIh.js.map

package/dist/chunks/{input-field.mEo-bCtk.js.map → input-field.Czp_0nIh.js.map}

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

package/dist/chunks/{pagination.CT08YpqC.js → pagination.Bz02p3If.js}

@@ -1,7 +1,7 @@
 import { defineComponent as v, ref as b, computed as g, toRefs as S } from "vue";
 import { u as $ } from "./aria-label.CaUURpnB.js";
 import { B as T } from "./typography.CdCYtxYj.js";
-import { B as w } from "./dropdown.Bn6SRkU5.js";
+import { B as w } from "./dropdown.CR6vDGwi.js";
 import { g as N } from "./unique-id.XFfoKuc2.js";
 import { u as _, g as L, a as x } from "./i18n.BQkEbtPM.js";
 import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -497,4 +497,4 @@ const $t = Ct.exports;
 export {
   $t as B
 };
-//# sourceMappingURL=pagination.CT08YpqC.js.map
+//# sourceMappingURL=pagination.Bz02p3If.js.map

package/dist/chunks/{pagination.CT08YpqC.js.map → pagination.Bz02p3If.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination.CT08YpqC.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/skip-left.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/skip-right.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-left-small.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"dropdownOptions\"\n                        :value=\"itemsPerPage\"\n                        @input=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_NUMBER_OF_RESULTS = 50;\n    const PREDEFINED_RESULTS_PER_PAGE_VALUES = [\n        { label: '10', value: 10 },\n        { label: '20', value: 20 },\n        { label: '50', value: 50 }, // DEFAULT_NUMBER_OF_RESULTS\n        { label: '75', value: 75 },\n        { label: '100', value: 100 },\n    ];\n\n    export default defineComponent({\n        name: 'bento-pagination-context-results-per-page',\n        i18n: { messages },\n        components: {\n            BentoDropdown,\n            BentoTypography,\n        },\n        props: {\n            /**\n             *  The amount of items the pager is paging through.\n             */\n            itemsPerPage: {\n                type: Number,\n                default: DEFAULT_NUMBER_OF_RESULTS,\n                validator: (itemsPerPageValue: number) =>\n                    PREDEFINED_RESULTS_PER_PAGE_VALUES.some(({ value }) => value === itemsPerPageValue),\n            },\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount: { type: Number, default: null },\n        },\n        emits: ['select'],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const dropdownId = generateUid('b-pagination-context-number-elements');\n            const dropdownOptions = ref(PREDEFINED_RESULTS_PER_PAGE_VALUES);\n            const i18nComponent = getI18nComponent();\n\n            const onSelectChange = (selectedNumberOfResults: number) => {\n                emit('select', selectedNumberOfResults);\n            };\n\n            const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n\n            return {\n                // Values\n                dropdownId,\n                dropdownOptions,\n                i18nComponent,\n                translationPathKey,\n\n                // Methods\n                getI18nProps,\n\n                // Events\n                onSelectChange,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageOfTotalPages')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageOfTotalPages', { page, totalPages })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @input=\"onPageSelectChange\"\n                    />\n                </template>\n                <template #totalPages>{{ totalPages }}</template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoListboxOptionItem } from '@/types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-pagination-context',\n        components: {\n            BentoDropdown,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The current page number of the pager.\n             */\n            page: {\n                type: Number,\n                default: 1,\n                validator: (value: number) => Number.isFinite(value) && value > 0,\n            },\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalPages: { type: Number, default: null },\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['page-selected'],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const dropdownId = generateUid('bento-pagination-context-current-page');\n            const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n            const i18nComponent = getI18nComponent();\n\n            // Generate a list of pages from 1 to \"totalPages\"\n            const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n                label: value.toString(),\n                value,\n            });\n            const transformToPageNumber = (_, index) => index + 1;\n            const listOfAvailablePages = computed(() =>\n                Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n            );\n\n            return {\n                // Values\n                dropdownId,\n                listOfAvailablePages,\n                i18nComponent,\n\n                // Methods\n                getI18nProps,\n\n                // Events\n                onPageSelectChange,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#00112C\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#00112C\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'adl-pagination-controls',\n        components: {\n            BentoButton,\n            SkipLeft,\n            SkipRight,\n            ChevronLeft,\n            ChevronRight,\n        },\n        props: {\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext: { type: Boolean, default: null },\n\n            /**\n             * The current page number of the pager.\n             */\n            page: { type: Number, required: true },\n\n            /**\n             * The current page number of the pager.\n             */\n            totalPages: { type: Number, default: null },\n        },\n        emits: ['navigate'],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isCurrentPageFirst = computed(() => props.page === 1);\n            const isCurrentPageLast = computed(() => props.page === props.totalPages);\n            const isNextButtonDisabled = computed(() => {\n                const hasNoNextPage = !props.hasNext;\n                return hasNoNextPage || isCurrentPageLast.value;\n            });\n            const isLastPageButtonDisabled = computed(() => {\n                const hasNoNextPage = !props.hasNext;\n                const hasNoTotalPagesNumber = !props.totalPages;\n\n                return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n            });\n\n            const navigate = (pageArg: number) => {\n                emit('navigate', pageArg);\n            };\n\n            return {\n                // Values\n                isNextButtonDisabled,\n                isCurrentPageFirst,\n                isCurrentPageLast,\n                isLastPageButtonDisabled,\n\n                // Events\n                navigate,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                @select=\"onItemsPerPageChange\"\n            />\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, ref, toRefs } from 'vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import messages from './messages.json';\n\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-pagination',\n        components: {\n            BentoPaginationContext,\n            BentoPaginationControls,\n            BentoPaginationResultsPerPage,\n        },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * A brief description of the purpose of the navigation (for a11y).\n             * Omit the term \"navigation\", as the screen reader will read both the role and the contents of the label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext: { type: Boolean, default: null },\n\n            /**\n             * Toggles the visibility of the \"results per page\" part of the pagination component.\n             */\n            hidePageSize: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * The current page number of the pager.\n             */\n            page: {\n                type: Number,\n                default: 1,\n                validator: (value: number) => Number.isFinite(value) && value > 0,\n            },\n\n            /**\n             *  The size of the items the pager is paging through.\n             */\n            size: {\n                type: Number,\n                default: 20,\n                validator: (itemsPerPageValue: number) => [10, 20, 50, 75, 100].includes(itemsPerPageValue),\n            },\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount: { type: Number, default: null },\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['navigate', 'items-page', 'update:page', 'update:size'],\n        setup(props, { attrs, emit }) {\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n            });\n\n            const totalPages = computed(() =>\n                !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n            );\n\n            const navigate = (pageArg: number, itemsPerPage?: number) => {\n                if (props.hidePageSize) {\n                    emit('navigate', pageArg);\n                } else {\n                    emit('navigate', pageArg, itemsPerPage ?? props?.size);\n                }\n                emit('update:page', pageArg);\n            };\n\n            const onPageSelected = (pageNumber: number) => {\n                navigate(pageNumber);\n            };\n\n            const onItemsPerPageChange = (elements: number) => {\n                emit('items-page', elements);\n                emit('update:size', elements);\n\n                // Always go to first page when the\n                // number of items page changes\n                navigate(1, elements);\n            };\n\n            const navigationConditionalClasses = computed(() => ({\n                'b-pagination__navigation--no-results-per-page': props.hidePageSize,\n            }));\n\n            return {\n                // Values\n                computedAriaLabel,\n                totalPages,\n                navigationConditionalClasses,\n\n                // Events\n                navigate,\n                onItemsPerPageChange,\n                onPageSelected,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["DEFAULT_NUMBER_OF_RESULTS","PREDEFINED_RESULTS_PER_PAGE_VALUES","_sfc_main$7","defineComponent","messages$3","BentoDropdown","BentoTypography","itemsPerPageValue","value","props","emit","t","useI18n","dropdownId","generateUid","dropdownOptions","ref","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","translationPathKey","computed","getI18nProps","_sfc_main$6","messages$2","onPageSelectChange","selectedPage","transformIntoOption","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","_sfc_main$1","messages$1","BentoButton","SkipLeft","SkipRight","ChevronLeft","ChevronRight","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","_sfc_main","messages","BentoPaginationContext","BentoPaginationControls","BentoPaginationResultsPerPage","attrs","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","onPageSelected","pageNumber","onItemsPerPageChange","elements","navigationConditionalClasses"],"mappings":"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","x_google_ignoreList":[2,3,4,5]}
+{"version":3,"file":"pagination.Bz02p3If.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/skip-left.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/skip-right.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-left-small.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"dropdownOptions\"\n                        :value=\"itemsPerPage\"\n                        @input=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, ref } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_NUMBER_OF_RESULTS = 50;\n    const PREDEFINED_RESULTS_PER_PAGE_VALUES = [\n        { label: '10', value: 10 },\n        { label: '20', value: 20 },\n        { label: '50', value: 50 }, // DEFAULT_NUMBER_OF_RESULTS\n        { label: '75', value: 75 },\n        { label: '100', value: 100 },\n    ];\n\n    export default defineComponent({\n        name: 'bento-pagination-context-results-per-page',\n        i18n: { messages },\n        components: {\n            BentoDropdown,\n            BentoTypography,\n        },\n        props: {\n            /**\n             *  The amount of items the pager is paging through.\n             */\n            itemsPerPage: {\n                type: Number,\n                default: DEFAULT_NUMBER_OF_RESULTS,\n                validator: (itemsPerPageValue: number) =>\n                    PREDEFINED_RESULTS_PER_PAGE_VALUES.some(({ value }) => value === itemsPerPageValue),\n            },\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount: { type: Number, default: null },\n        },\n        emits: ['select'],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const dropdownId = generateUid('b-pagination-context-number-elements');\n            const dropdownOptions = ref(PREDEFINED_RESULTS_PER_PAGE_VALUES);\n            const i18nComponent = getI18nComponent();\n\n            const onSelectChange = (selectedNumberOfResults: number) => {\n                emit('select', selectedNumberOfResults);\n            };\n\n            const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n\n            return {\n                // Values\n                dropdownId,\n                dropdownOptions,\n                i18nComponent,\n                translationPathKey,\n\n                // Methods\n                getI18nProps,\n\n                // Events\n                onSelectChange,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageOfTotalPages')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageOfTotalPages', { page, totalPages })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @input=\"onPageSelectChange\"\n                    />\n                </template>\n                <template #totalPages>{{ totalPages }}</template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoListboxOptionItem } from '@/types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-pagination-context',\n        components: {\n            BentoDropdown,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The current page number of the pager.\n             */\n            page: {\n                type: Number,\n                default: 1,\n                validator: (value: number) => Number.isFinite(value) && value > 0,\n            },\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalPages: { type: Number, default: null },\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['page-selected'],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const dropdownId = generateUid('bento-pagination-context-current-page');\n            const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n            const i18nComponent = getI18nComponent();\n\n            // Generate a list of pages from 1 to \"totalPages\"\n            const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n                label: value.toString(),\n                value,\n            });\n            const transformToPageNumber = (_, index) => index + 1;\n            const listOfAvailablePages = computed(() =>\n                Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n            );\n\n            return {\n                // Values\n                dropdownId,\n                listOfAvailablePages,\n                i18nComponent,\n\n                // Methods\n                getI18nProps,\n\n                // Events\n                onPageSelectChange,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#00112C\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#00112C\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    export default defineComponent({\n        i18n: { messages },\n        name: 'adl-pagination-controls',\n        components: {\n            BentoButton,\n            SkipLeft,\n            SkipRight,\n            ChevronLeft,\n            ChevronRight,\n        },\n        props: {\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext: { type: Boolean, default: null },\n\n            /**\n             * The current page number of the pager.\n             */\n            page: { type: Number, required: true },\n\n            /**\n             * The current page number of the pager.\n             */\n            totalPages: { type: Number, default: null },\n        },\n        emits: ['navigate'],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isCurrentPageFirst = computed(() => props.page === 1);\n            const isCurrentPageLast = computed(() => props.page === props.totalPages);\n            const isNextButtonDisabled = computed(() => {\n                const hasNoNextPage = !props.hasNext;\n                return hasNoNextPage || isCurrentPageLast.value;\n            });\n            const isLastPageButtonDisabled = computed(() => {\n                const hasNoNextPage = !props.hasNext;\n                const hasNoTotalPagesNumber = !props.totalPages;\n\n                return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n            });\n\n            const navigate = (pageArg: number) => {\n                emit('navigate', pageArg);\n            };\n\n            return {\n                // Values\n                isNextButtonDisabled,\n                isCurrentPageFirst,\n                isCurrentPageLast,\n                isLastPageButtonDisabled,\n\n                // Events\n                navigate,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                @select=\"onItemsPerPageChange\"\n            />\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, ref, toRefs } from 'vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import messages from './messages.json';\n\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-pagination',\n        components: {\n            BentoPaginationContext,\n            BentoPaginationControls,\n            BentoPaginationResultsPerPage,\n        },\n        props: {\n            /**\n             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\n            /**\n             * A brief description of the purpose of the navigation (for a11y).\n             * Omit the term \"navigation\", as the screen reader will read both the role and the contents of the label.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Use to determine if the pager has a \"next page\".\n             */\n            hasNext: { type: Boolean, default: null },\n\n            /**\n             * Toggles the visibility of the \"results per page\" part of the pagination component.\n             */\n            hidePageSize: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * The current page number of the pager.\n             */\n            page: {\n                type: Number,\n                default: 1,\n                validator: (value: number) => Number.isFinite(value) && value > 0,\n            },\n\n            /**\n             *  The size of the items the pager is paging through.\n             */\n            size: {\n                type: Number,\n                default: 20,\n                validator: (itemsPerPageValue: number) => [10, 20, 50, 75, 100].includes(itemsPerPageValue),\n            },\n\n            /**\n             * The total number of items the pager is paging through.\n             */\n            totalCount: { type: Number, default: null },\n\n            /**\n             * Enables virtual scrolling on all dropdowns if set to true.\n             */\n            virtualScroll: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['navigate', 'items-page', 'update:page', 'update:size'],\n        setup(props, { attrs, emit }) {\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n            });\n\n            const totalPages = computed(() =>\n                !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n            );\n\n            const navigate = (pageArg: number, itemsPerPage?: number) => {\n                if (props.hidePageSize) {\n                    emit('navigate', pageArg);\n                } else {\n                    emit('navigate', pageArg, itemsPerPage ?? props?.size);\n                }\n                emit('update:page', pageArg);\n            };\n\n            const onPageSelected = (pageNumber: number) => {\n                navigate(pageNumber);\n            };\n\n            const onItemsPerPageChange = (elements: number) => {\n                emit('items-page', elements);\n                emit('update:size', elements);\n\n                // Always go to first page when the\n                // number of items page changes\n                navigate(1, elements);\n            };\n\n            const navigationConditionalClasses = computed(() => ({\n                'b-pagination__navigation--no-results-per-page': props.hidePageSize,\n            }));\n\n            return {\n                // Values\n                computedAriaLabel,\n                totalPages,\n                navigationConditionalClasses,\n\n                // Events\n                navigate,\n                onItemsPerPageChange,\n                onPageSelected,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["DEFAULT_NUMBER_OF_RESULTS","PREDEFINED_RESULTS_PER_PAGE_VALUES","_sfc_main$7","defineComponent","messages$3","BentoDropdown","BentoTypography","itemsPerPageValue","value","props","emit","t","useI18n","dropdownId","generateUid","dropdownOptions","ref","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","translationPathKey","computed","getI18nProps","_sfc_main$6","messages$2","onPageSelectChange","selectedPage","transformIntoOption","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","_sfc_main$1","messages$1","BentoButton","SkipLeft","SkipRight","ChevronLeft","ChevronRight","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","_sfc_main","messages","BentoPaginationContext","BentoPaginationControls","BentoPaginationResultsPerPage","attrs","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","onPageSelected","pageNumber","onItemsPerPageChange","elements","navigationConditionalClasses"],"mappings":"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","x_google_ignoreList":[2,3,4,5]}

package/dist/chunks/{search-bar.hxEJk-w0.js → search-bar.CQw7r7Km.js}

@@ -1,7 +1,7 @@
 import { defineComponent as m, ref as l, watch as h } from "vue";
 import { d as _ } from "./debounce.DUTu11PS.js";
 import { u as b } from "./i18n.BQkEbtPM.js";
-import { B as y } from "./input-field.mEo-bCtk.js";
+import { B as y } from "./input-field.Czp_0nIh.js";
 import { S as C } from "./search.CBKhp7zB.js";
 import { C as v } from "./cross-circle-fill.CnYH4R_h.js";
 import { n as S } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -97,4 +97,4 @@ export {
   i as a,
   k as b
 };
-//# sourceMappingURL=search-bar.hxEJk-w0.js.map
+//# sourceMappingURL=search-bar.CQw7r7Km.js.map

package/dist/chunks/{search-bar.hxEJk-w0.js.map → search-bar.CQw7r7Km.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.hxEJk-w0.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            :value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Text that labels an the search bar input element\n         */\n        inputFieldAriaLabel: { type: String, required: true },\n\n        /**\n         * Reduces height of the search bar\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Text displayed as the value being searched\n         */\n        value: { type: String, default: undefined },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property\n         */\n        (e: 'input', inputValue: string): void;\n\n        /**\n         * Emitted when the \"clear search\" button is clicked\n         */\n        (e: 'clear'): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed inside the Search Bar input\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n    }>();\n\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","useI18n","searchTerm","ref","props","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;GCmLRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7IA,EAAA,EAAA,IAAAC,EAAA,GAwDAC,IAAAC,EAAAC,EAAA,KAAA,GACAC,IAAAF,EAAA;AAEA,IAAAG;AAAA,MAAA,MAAAF,EAAA;AAAA,MACgB,MAAA;AAER,QAAAF,EAAA,QAAAE,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAG,IAAA,MAAA;AACI,MAAAL,EAAA,QAAA,IACAM,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAN,EAAA,KAAA;AAAA,IAA8B,GAAAE,EAAA,YAAA,GAGlCO,IAAA,CAAAC,MAAA;AACI,MAAAV,EAAA,QAAAU,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AACI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-bar.CQw7r7Km.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            :value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n        /**\n         * Text that labels an the search bar input element\n         */\n        inputFieldAriaLabel: { type: String, required: true },\n\n        /**\n         * Reduces height of the search bar\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Custom debounce time. Default: 300\n         */\n        debounceTime: { type: Number, default: 300 },\n\n        /**\n         * Text displayed as the placeholder of the input-field\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Text displayed as the value being searched\n         */\n        value: { type: String, default: undefined },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property\n         */\n        (e: 'input', inputValue: string): void;\n\n        /**\n         * Emitted when the \"clear search\" button is clicked\n         */\n        (e: 'clear'): void;\n\n        /**\n         * Emitted when the \"ESC\" key is pressed inside the Search Bar input\n         */\n        (e: 'escape-pressed'): void;\n\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur'): void;\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus'): void;\n    }>();\n\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","useI18n","searchTerm","ref","props","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;GCmLRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7IA,EAAA,EAAA,IAAAC,EAAA,GAwDAC,IAAAC,EAAAC,EAAA,KAAA,GACAC,IAAAF,EAAA;AAEA,IAAAG;AAAA,MAAA,MAAAF,EAAA;AAAA,MACgB,MAAA;AAER,QAAAF,EAAA,QAAAE,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAG,IAAA,MAAA;AACI,MAAAL,EAAA,QAAA,IACAM,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAN,EAAA,KAAA;AAAA,IAA8B,GAAAE,EAAA,YAAA,GAGlCO,IAAA,CAAAC,MAAA;AACI,MAAAV,EAAA,QAAAU,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AACI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{secondary-nav.Bsi7Dj0s.js → secondary-nav.BCccdpL6.js}

@@ -1,5 +1,5 @@
 import { defineComponent as _, inject as C, computed as c, ref as g, readonly as I, watch as h, provide as k } from "vue";
-import { B as w } from "./dropdown.Bn6SRkU5.js";
+import { B as w } from "./dropdown.CR6vDGwi.js";
 import { b as S } from "./index.iCshT3Hx.js";
 import { u as $ } from "./i18n.BQkEbtPM.js";
 import { d as B } from "./es6.BvpG4Oi6.js";
@@ -109,4 +109,4 @@ const X = Q.exports;
 export {
   X as s
 };
-//# sourceMappingURL=secondary-nav.Bsi7Dj0s.js.map
+//# sourceMappingURL=secondary-nav.BCccdpL6.js.map

package/dist/chunks/{secondary-nav.Bsi7Dj0s.js.map → secondary-nav.BCccdpL6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.Bsi7Dj0s.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': activeItemValue.value === props.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: BentoSecondaryNavItemsItem[];\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :value=\"activeItemValue\"\n            @input=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoListboxOptions } from '@/types';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","conditionalClasses","computed","props","e","emit","__default__$1","__default__","messages","useI18n","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,GC4CTC,IAAA,CAAA;;;;;;;;;iBAlCA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAaAK,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAJ,EAAA,UAAAK,EAAA;AAAA,IACyB,EAAA;yHAUpE,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAL,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;qBCLrCG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsFAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBAvFA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,GAGPC,IAAAH,EAAA,eAAA,GAAA,GAqBAI,IAAAZ,EAAA,MAAAC,EAAA,MAAA,KAAA,CAAAY,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAd,EAAA,MAAAC,EAAA,KAAA,GAEAc,IAAAf,EAAA,MAAA;AACI,YAAAgB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJpB,IAAAqB,EAAAhB,EAAA,SAAAc,EAAA,KAAA,GACAlB,IAAA,CAAAqB,MAAA;AACI,MAAAtB,EAAA,QAAAsB,GACAf,EAAA,UAAAe,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAxB,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAwB;AAAA,MAAA,MAAApB,EAAA;AAAA,MACgB,CAAAiB,MAAA;AAER,QAAAtB,EAAA,QAAAsB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA5B,GAAAyB,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"secondary-nav.BCccdpL6.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps<{\n        /**\n         * The display name of the navigation item\n         */\n        label: string;\n        /**\n         * The value of this item.\n         */\n        value: string;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': activeItemValue.value === props.value,\n    }));\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when this element is clicked\n         */\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps<{\n        /**\n         * The display name of the category\n         */\n        label: string;\n        /**\n         * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category\n         */\n        items: BentoSecondaryNavItemsItem[];\n    }>();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :value=\"activeItemValue\"\n            @input=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoListboxOptions } from '@/types';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps<{\n        /**\n         * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory },\n         * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them.\n         */\n        items: BentoSecondaryNavItems;\n        /**\n         * The value of the selected item.\n         * If nothing is passed, it defaults to the first item value in items.\n         */\n        value?: string;\n    }>();\n\n    const emit = defineEmits<{\n        /**\n         * Emmited when the current selected item changes\n         */\n        (e: 'change', category: string): void;\n    }>();\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","conditionalClasses","computed","props","e","emit","__default__$1","__default__","messages","useI18n","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,GC4CTC,IAAA,CAAA;;;;;;;;;iBAlCA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAaAK,IAAAC,EAAA,OAAA;AAAA,MAA2C,gCAAAJ,EAAA,UAAAK,EAAA;AAAA,IACyB,EAAA;yHAUpE,CAAAC,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAL,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;qBCLrCG,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsFAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBAvFA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,GAGPC,IAAAH,EAAA,eAAA,GAAA,GAqBAI,IAAAZ,EAAA,MAAAC,EAAA,MAAA,KAAA,CAAAY,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAd,EAAA,MAAAC,EAAA,KAAA,GAEAc,IAAAf,EAAA,MAAA;AACI,YAAAgB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJpB,IAAAqB,EAAAhB,EAAA,SAAAc,EAAA,KAAA,GACAlB,IAAA,CAAAqB,MAAA;AACI,MAAAtB,EAAA,QAAAsB,GACAf,EAAA,UAAAe,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAxB,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAwB;AAAA,MAAA,MAAApB,EAAA;AAAA,MACgB,CAAAiB,MAAA;AAER,QAAAtB,EAAA,QAAAsB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA5B,GAAAyB,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/code-snippet.js

@@ -1,4 +1,4 @@
-import { c as n, b as o, a as p, B as a } from "./chunks/code-snippet.Dr7HvCcg.js";
+import { c as n, b as o, a as p, B as a } from "./chunks/code-snippet.Bg39szoO.js";
 export {
   n as BentoCodeSnippet,
   o as BentoCodeSnippetEvent,

package/dist/data-grid.js

@@ -1,4 +1,4 @@
-import { B as e, d as o, a as r, f as n, e as i, c as B, b as d } from "./chunks/data-grid.Dsv60eRz.js";
+import { B as e, d as o, a as r, f as n, e as i, c as B, b as d } from "./chunks/data-grid.Bq6Dy5tI.js";
 export {
   e as BentoColumnOverflow,
   o as BentoDataGrid,

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-import { B as a, a as r } from "./chunks/date-picker.CZ34YMMu.js";
+import { B as a, a as r } from "./chunks/date-picker.DInJznhU.js";
 import { C as i } from "./chunks/calendar.etLGotqH.js";
 export {
   a as BentoDatePicker,

package/dist/date-range-picker.js

@@ -1,4 +1,4 @@
-import { B as t, a as r } from "./chunks/date-range-picker.C__cQBs3.js";
+import { B as t, a as r } from "./chunks/date-range-picker.D8-Ns1O7.js";
 import { C as o } from "./chunks/calendar.etLGotqH.js";
 export {
   t as BentoDateRangePicker,

package/dist/dropdown.js

@@ -1,7 +1,7 @@
-import { B as r } from "./chunks/dropdown.Bn6SRkU5.js";
+import { B as r } from "./chunks/dropdown.CR6vDGwi.js";
 import { B as t } from "./chunks/dropdown-default-textbox.BM9qsdzQ.js";
 import { a as p, B as d } from "./chunks/use-cached-selected-values.DWQ8SMSi.js";
-import { d as s, a as w, b as D, c as m, e as y } from "./chunks/dropdown-tag.DEqYdqVG.js";
+import { d as s, a as w, b as D, c as m, e as y } from "./chunks/dropdown-tag.Ce5HgBMv.js";
 export {
   r as BentoDropdown,
   s as BentoDropdownAvatar,

package/dist/filter-bar.js

@@ -1,4 +1,4 @@
-import { B as r, b as a, a as B, c as n } from "./chunks/filter-bar.Dcsv7a4q.js";
+import { B as r, b as a, a as B, c as n } from "./chunks/filter-bar.jtfYLtU9.js";
 export {
   r as BentoFilterBar,
   a as BentoFilterBarEvent,

package/dist/index.js

@@ -9,26 +9,26 @@ import { B as U, c as Z, b as W, a as Y } from "./chunks/alert.Ba2hSVeM.js";
 import { B as _ } from "./chunks/avatar.DohItrb9.js";
 import { B as J, b as Q, a as X } from "./chunks/button.qOf7CXY2.js";
 import { d as ee } from "./chunks/dashed-underline.OyLCDT1U.js";
-import { B as oe, d as ae, a as ne, f as re, e as se, c as Be, b as ie } from "./chunks/data-grid.Dsv60eRz.js";
+import { B as oe, d as ae, a as ne, f as re, e as se, c as Be, b as ie } from "./chunks/data-grid.Bq6Dy5tI.js";
 import { c as me, B as de, a as ue } from "./chunks/card.-BYuiE_X.js";
-import { B as ce, a as fe } from "./chunks/date-picker.CZ34YMMu.js";
-import { B as ye, a as ge } from "./chunks/date-range-picker.C__cQBs3.js";
-import { B as be, u as Ce } from "./chunks/dropdown.Bn6SRkU5.js";
+import { B as ce, a as fe } from "./chunks/date-picker.DInJznhU.js";
+import { B as ye, a as ge } from "./chunks/date-range-picker.D8-Ns1O7.js";
+import { B as be, u as Ce } from "./chunks/dropdown.CR6vDGwi.js";
 import { B as De } from "./chunks/dropdown-default-textbox.BM9qsdzQ.js";
 import { B as he, a as Ie } from "./chunks/checkbox.CKQZXIR3.js";
 import { B as Fe } from "./chunks/click-outside.DSszkIvs.js";
-import { c as Pe, b as Ve, a as ke, B as we } from "./chunks/code-snippet.Dr7HvCcg.js";
+import { c as Pe, b as Ve, a as ke, B as we } from "./chunks/code-snippet.Bg39szoO.js";
 import { c as Me } from "./chunks/country.DeYdzMXh.js";
 import { a as Oe, B as Re, u as je, b as ze, c as Ne } from "./chunks/country.types.Br0AjxGy.js";
 import { c as Ue, B as Ze } from "./chunks/currency.Cfq_Yw2V.js";
 import { B as Ye, a as He } from "./chunks/date.DQaxR7TF.js";
 import { B as qe } from "./chunks/divider.BZfeYmB9.js";
 import { B as Qe, b as Xe, c as $e, a as et } from "./chunks/empty-state.CWy3y5Ly.js";
-import { B as ot, b as at, a as nt, c as rt } from "./chunks/filter-bar.Dcsv7a4q.js";
+import { B as ot, b as at, a as nt, c as rt } from "./chunks/filter-bar.jtfYLtU9.js";
 import { f as Bt, a as it, c as pt, b as mt } from "./chunks/form-layout-title.ChRqPBDL.js";
 import { B as ut, a as lt, b as ct } from "./chunks/image.B3uqhFjl.js";
 import { B as xt } from "./chunks/info-icon.DQI7sjBY.js";
-import { B as gt, b as St, e as bt, c as Ct, d as Tt, a as Dt } from "./chunks/input-field.mEo-bCtk.js";
+import { B as gt, b as St, e as bt, c as Ct, d as Tt, a as Dt } from "./chunks/input-field.Czp_0nIh.js";
 import { i as ht, B as It } from "./chunks/inspector.types.l7r-FN49.js";
 import { B as Ft, a as Lt } from "./chunks/loading-indicator.DXc7I1Lm.js";
 import { B as Vt, a as kt } from "./chunks/link.CjFBXE3D.js";
@@ -37,13 +37,13 @@ import { d as Ot, f as Rt, g as jt, B as zt, e as Nt, c as Kt, a as Ut, b as Zt
 import { B as Yt } from "./chunks/modal.DPrBUWDe.js";
 import { m as _t, B as qt } from "./chunks/modal-fullscreen.PFFfWzPD.js";
 import { B as Qt } from "./chunks/header.jOE8ctvn.js";
-import { B as $t } from "./chunks/pagination.CT08YpqC.js";
+import { B as $t } from "./chunks/pagination.Bz02p3If.js";
 import { B as to } from "./chunks/payment-method.BnLkBqVQ.js";
 import { B as ao } from "./chunks/payment-method.types.CJKfZQN5.js";
 import { B as ro, a as so } from "./chunks/popover.Du6UI6Yh.js";
 import { b as io, B as po, a as mo } from "./chunks/radio-group.D650KrHa.js";
-import { B as lo, b as co, a as fo } from "./chunks/search-bar.hxEJk-w0.js";
-import { s as yo } from "./chunks/secondary-nav.Bsi7Dj0s.js";
+import { B as lo, b as co, a as fo } from "./chunks/search-bar.CQw7r7Km.js";
+import { s as yo } from "./chunks/secondary-nav.BCccdpL6.js";
 import { B as So, s as bo, a as Co } from "./chunks/selection-card-group.D5DRYhrw.js";
 import { B as Do } from "./chunks/segmented-control.BeXMVbce.js";
 import { B as ho } from "./chunks/segmented-control.types.BHRLV8KU.js";
@@ -66,7 +66,7 @@ import { B as Pa, a as Va } from "./chunks/loading-button.Ba8So0d6.js";
 import { B as wa } from "./chunks/toggle-button.CBuKACw5.js";
 import { C as Ma, C as Aa } from "./chunks/calendar.etLGotqH.js";
 import { a as Ra, B as ja, a as za, B as Na } from "./chunks/use-cached-selected-values.DWQ8SMSi.js";
-import { d as Ua, a as Za, b as Wa, c as Ya, e as Ha } from "./chunks/dropdown-tag.DEqYdqVG.js";
+import { d as Ua, a as Za, b as Wa, c as Ya, e as Ha } from "./chunks/dropdown-tag.Ce5HgBMv.js";
 import { C as qa } from "./chunks/checkbox-input.DwDwI2BD.js";
 import { c as Qa, B as Xa } from "./chunks/checkbox-group.Bj9gURHB.js";
 import { R as en } from "./chunks/radio-input.UWFngqop.js";

package/dist/input-field.js

@@ -1,4 +1,4 @@
-import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.mEo-bCtk.js";
+import { B as n, b as a, e as o, c as i, d as s, a as l } from "./chunks/input-field.Czp_0nIh.js";
 export {
   n as BentoInputField,
   a as BentoInputFieldElementPosition,

package/dist/pagination.js

@@ -1,4 +1,4 @@
-import { B as n } from "./chunks/pagination.CT08YpqC.js";
+import { B as n } from "./chunks/pagination.Bz02p3If.js";
 export {
   n as BentoPagination
 };

package/dist/search-bar.js

@@ -1,5 +1,5 @@
-import { B as r, b as t, a as B } from "./chunks/search-bar.hxEJk-w0.js";
-import { u as o } from "./chunks/dropdown.Bn6SRkU5.js";
+import { B as r, b as t, a as B } from "./chunks/search-bar.CQw7r7Km.js";
+import { u as o } from "./chunks/dropdown.CR6vDGwi.js";
 export {
   r as BentoSearchBar,
   t as BentoSearchBarEvent,