@adyen/bento-vue2 2.0.1 → 2.1.0

package/dist/chunks/{header.CmyqVXuG.js → header.CDiold9n.js}

@@ -1,9 +1,9 @@
 import { defineComponent as p, computed as r } from "vue";
 import { u as l } from "./use-has-slot.C9lQZ6nz.js";
-import { B as c, c as d, a as i } from "./typography.D1OZJbEa.js";
-import { B as u } from "./button-actions-with-menu.BY394ars.js";
-import { I as n } from "./info-icon-with-popover.BvYyGm4D.js";
-import { T as f } from "./title-details.ChwPP7C5.js";
+import { B as c, c as d, a as i } from "./typography.Cd386LC_.js";
+import { B as u } from "./button-actions-with-menu.1vZJWN1K.js";
+import { I as n } from "./info-icon-with-popover.BzGVcMqy.js";
+import { T as f } from "./title-details.BhR2nis-.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/header.css";
 var a = /* @__PURE__ */ ((o) => (o.PAGE = "page", o.COMPONENT = "component", o))(a || {});
@@ -101,4 +101,4 @@ const S = h.exports;
 export {
   S as B
 };
-//# sourceMappingURL=header.CmyqVXuG.js.map
+//# sourceMappingURL=header.CDiold9n.js.map

package/dist/chunks/{header.CmyqVXuG.js.map → header.CDiold9n.js.map}

@@ -1 +1 @@
-{"version":3,"file":"header.CmyqVXuG.js","sources":["../../src/components/header/header.types.ts","../../src/components/header/header.vue"],"sourcesContent":["import { type TitleDetailsReloadButton } from '../internal/title-details/title-details.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoHeaderVariant {\n    PAGE = 'page',\n    COMPONENT = 'component',\n}\n\nexport type BentoHeaderReloadButton = TitleDetailsReloadButton;\n","<template>\n    <header class=\"b-header\" :class=\"conditionalClasses\">\n        <div class=\"b-header__wrapper\">\n            <div class=\"b-header__title\">\n                <div>\n                    <bento-typography v-bind=\"typography\" class=\"b-header__text\">{{ title }}</bento-typography>\n                    <info-icon-with-popover\n                        v-if=\"infoIconTooltipText || hasSlot('infoIconTooltipContent')\"\n                        class=\"b-header__tooltip\"\n                        :popover-text=\"infoIconTooltipText\"\n                    >\n                        <template v-if=\"hasSlot('infoIconTooltipContent')\" #default\n                            ><slot name=\"infoIconTooltipContent\"\n                        /></template>\n                    </info-icon-with-popover>\n                </div>\n            </div>\n            <title-details\n                v-if=\"description || hasSlot('description') || lastUpdated\"\n                class=\"b-header__meta-container\"\n                :description=\"description\"\n                :last-updated=\"lastUpdated\"\n                :reload-button=\"reloadButton\"\n            >\n                <template v-if=\"hasSlot('description')\" #description><slot name=\"description\" /></template>\n            </title-details>\n            <button-actions-with-menu\n                v-if=\"actions\"\n                :actions=\"actions\"\n                :displayed-actions=\"2\"\n                class=\"b-header__actions\"\n            />\n        </div>\n    </header>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { InfoIconWithPopover } from '@/internal';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { useHasSlot } from '@/composables';\n    import { type BentoHeaderReloadButton, BentoHeaderVariant } from './header.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { TitleDetails } from '@/internal/title-details';\n    import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue';\n\n    export default defineComponent({\n        name: 'bento-header',\n        components: {\n            BentoTypography,\n            ButtonActionsWithMenu,\n            InfoIconWithPopover,\n            TitleDetails,\n        },\n        props: {\n            /**\n             * Array of BentoButtonActionsList to show to the right of the title\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * Text showed under the title\n             */\n            description: { type: String, default: null },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null },\n\n            /**\n             * Popover position of the info icon text.\n             */\n            infoIconPopoverPosition: {\n                type: InfoIconWithPopover.props.popoverPosition.type,\n                default: InfoIconWithPopover.props.popoverPosition.default,\n                validator: InfoIconWithPopover.props.popoverPosition.validator,\n            },\n\n            /**\n             * JavaScript \"Date\" object for when the content was last updated\n             */\n            lastUpdated: { type: [Date, Number], default: null },\n\n            /**\n             * Variant represents type of Header\n             * @values page, component\n             */\n            variant: {\n                type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>,\n                default: BentoHeaderVariant.PAGE,\n                validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value),\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * Reload button which shows next to the header's timestamp\n             * {@see BentoHeaderReloadButton}\n             */\n            reloadButton: {\n                type: Object as PropType<BentoHeaderReloadButton>,\n                default: null,\n            },\n        },\n        emits: ['reload'],\n        setup(props, { slots }) {\n            const conditionalClasses = computed(() => ({\n                'b-header--component': props.variant === BentoHeaderVariant.COMPONENT,\n            }));\n\n            const typography = computed(() => ({\n                el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2,\n                variant: BentoTypographyVariant.TITLE,\n                medium: props.variant === BentoHeaderVariant.COMPONENT,\n                large: props.variant === BentoHeaderVariant.PAGE,\n            }));\n            return {\n                hasSlot: useHasSlot(slots),\n                conditionalClasses,\n                typography,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./header.scss\" />\n"],"names":["BentoHeaderVariant","BentoHeaderVariant2","_sfc_main","defineComponent","BentoTypography","ButtonActionsWithMenu","InfoIconWithPopover","TitleDetails","value","props","slots","conditionalClasses","computed","typography","BentoTypographyElement","BentoTypographyVariant","useHasSlot"],"mappings":";;;;;;;;AAKO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA;ACyCZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,iBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,cAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA,EAAA,MAAAD,EAAA,MAAA,YAAA,MAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAA;AAAA,MAKA,MAAAA,EAAA,MAAA,gBAAA;AAAA,MACA,SAAAA,EAAA,MAAA,gBAAA;AAAA,MACA,WAAAA,EAAA,MAAA,gBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,CAAA,MAAA,MAAA,GAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAQ,MAAA,OAAA,OAAAR,CAAA,EAAA,SAAAQ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,QAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAAA,uBAAAH,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA,GAGAa,IAAAD,EAAA,OAAA;AAAA,MAAA,IAAAH,EAAA,YAAAT,EAAA,OAAAc,EAAA,KAAAA,EAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,QAAAN,EAAA,YAAAT,EAAA;AAAA,MACA,OAAAS,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA;AAEA,WAAA;AAAA,MAAA,SAAAgB,EAAAN,CAAA;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"header.CDiold9n.js","sources":["../../src/components/header/header.types.ts","../../src/components/header/header.vue"],"sourcesContent":["import { type TitleDetailsReloadButton } from '../internal/title-details/title-details.types';\n\n/**\n * @deprecated Since v3.0.0. Use string literal instead.\n */\nexport enum BentoHeaderVariant {\n    PAGE = 'page',\n    COMPONENT = 'component',\n}\n\nexport type BentoHeaderReloadButton = TitleDetailsReloadButton;\n","<template>\n    <header class=\"b-header\" :class=\"conditionalClasses\">\n        <div class=\"b-header__wrapper\">\n            <div class=\"b-header__title\">\n                <div>\n                    <bento-typography v-bind=\"typography\" class=\"b-header__text\">{{ title }}</bento-typography>\n                    <info-icon-with-popover\n                        v-if=\"infoIconTooltipText || hasSlot('infoIconTooltipContent')\"\n                        class=\"b-header__tooltip\"\n                        :popover-text=\"infoIconTooltipText\"\n                    >\n                        <template v-if=\"hasSlot('infoIconTooltipContent')\" #default\n                            ><slot name=\"infoIconTooltipContent\"\n                        /></template>\n                    </info-icon-with-popover>\n                </div>\n            </div>\n            <title-details\n                v-if=\"description || hasSlot('description') || lastUpdated\"\n                class=\"b-header__meta-container\"\n                :description=\"description\"\n                :last-updated=\"lastUpdated\"\n                :reload-button=\"reloadButton\"\n            >\n                <template v-if=\"hasSlot('description')\" #description><slot name=\"description\" /></template>\n            </title-details>\n            <button-actions-with-menu\n                v-if=\"actions\"\n                :actions=\"actions\"\n                :displayed-actions=\"2\"\n                class=\"b-header__actions\"\n            />\n        </div>\n    </header>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import { InfoIconWithPopover } from '@/internal';\n    import { type BentoButtonActionsList } from '@/components/button';\n    import { useHasSlot } from '@/composables';\n    import { type BentoHeaderReloadButton, BentoHeaderVariant } from './header.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { TitleDetails } from '@/internal/title-details';\n    import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue';\n\n    export default defineComponent({\n        name: 'bento-header',\n        components: {\n            BentoTypography,\n            ButtonActionsWithMenu,\n            InfoIconWithPopover,\n            TitleDetails,\n        },\n        props: {\n            /**\n             * Array of BentoButtonActionsList to show to the right of the title\n             */\n            actions: {\n                type: Array as PropType<BentoButtonActionsList>,\n                default: null,\n            },\n\n            /**\n             * Text showed under the title\n             */\n            description: { type: String, default: null },\n\n            /**\n             * Text showed in the info-icon tooltip on hover\n             */\n            infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null },\n\n            /**\n             * Popover position of the info icon text.\n             */\n            infoIconPopoverPosition: {\n                type: InfoIconWithPopover.props.popoverPosition.type,\n                default: InfoIconWithPopover.props.popoverPosition.default,\n                validator: InfoIconWithPopover.props.popoverPosition.validator,\n            },\n\n            /**\n             * JavaScript \"Date\" object for when the content was last updated\n             */\n            lastUpdated: { type: [Date, Number], default: null },\n\n            /**\n             * Variant represents type of Header\n             * @values page, component\n             */\n            variant: {\n                type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>,\n                default: BentoHeaderVariant.PAGE,\n                validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value),\n            },\n\n            /**\n             * Text used as a title\n             */\n            title: { type: String, required: true },\n\n            /**\n             * Reload button which shows next to the header's timestamp\n             * {@see BentoHeaderReloadButton}\n             */\n            reloadButton: {\n                type: Object as PropType<BentoHeaderReloadButton>,\n                default: null,\n            },\n        },\n        emits: ['reload'],\n        setup(props, { slots }) {\n            const conditionalClasses = computed(() => ({\n                'b-header--component': props.variant === BentoHeaderVariant.COMPONENT,\n            }));\n\n            const typography = computed(() => ({\n                el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2,\n                variant: BentoTypographyVariant.TITLE,\n                medium: props.variant === BentoHeaderVariant.COMPONENT,\n                large: props.variant === BentoHeaderVariant.PAGE,\n            }));\n            return {\n                hasSlot: useHasSlot(slots),\n                conditionalClasses,\n                typography,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./header.scss\" />\n"],"names":["BentoHeaderVariant","BentoHeaderVariant2","_sfc_main","defineComponent","BentoTypography","ButtonActionsWithMenu","InfoIconWithPopover","TitleDetails","value","props","slots","conditionalClasses","computed","typography","BentoTypographyElement","BentoTypographyVariant","useHasSlot"],"mappings":";;;;;;;;AAKO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA;ACyCZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,iBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,cAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,QAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA,EAAA,MAAAD,EAAA,MAAA,YAAA,MAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA,IAKA,yBAAA;AAAA,MAKA,MAAAA,EAAA,MAAA,gBAAA;AAAA,MACA,SAAAA,EAAA,MAAA,gBAAA;AAAA,MACA,WAAAA,EAAA,MAAA,gBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,aAAA,EAAA,MAAA,CAAA,MAAA,MAAA,GAAA,SAAA,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAN,EAAA;AAAA,MACA,WAAA,CAAAQ,MAAA,OAAA,OAAAR,CAAA,EAAA,SAAAQ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,QAAA,UAAA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,QAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,OAAA;AAAA,MAAA,uBAAAH,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA,GAGAa,IAAAD,EAAA,OAAA;AAAA,MAAA,IAAAH,EAAA,YAAAT,EAAA,OAAAc,EAAA,KAAAA,EAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,QAAAN,EAAA,YAAAT,EAAA;AAAA,MACA,OAAAS,EAAA,YAAAT,EAAA;AAAA,IACA,EAAA;AAEA,WAAA;AAAA,MAAA,SAAAgB,EAAAN,CAAA;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{info-icon-with-popover.BvYyGm4D.js → info-icon-with-popover.BzGVcMqy.js}

@@ -1,8 +1,8 @@
 import { defineComponent as a, ref as s } from "vue";
-import { h as m } from "./button-actions.bkcLUE1G.js";
+import { h as m } from "./button-actions.CdetBz3J.js";
 import { B as p } from "./popover.types.DvIwSAAp.js";
 import "./index.Cl4_42j5.js";
-import { B as f } from "./typography.D1OZJbEa.js";
+import { B as f } from "./typography.Cd386LC_.js";
 import { g as c } from "./generate-uid.DBWe4g6T.js";
 import { u as _ } from "./index.CPOlyau9.js";
 import { I as v } from "./info.4Kf1Acn4.js";
@@ -62,4 +62,4 @@ const z = B.exports;
 export {
   z as I
 };
-//# sourceMappingURL=info-icon-with-popover.BvYyGm4D.js.map
+//# sourceMappingURL=info-icon-with-popover.BzGVcMqy.js.map

package/dist/chunks/{info-icon-with-popover.BvYyGm4D.js.map → info-icon-with-popover.BzGVcMqy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"info-icon-with-popover.BvYyGm4D.js","sources":["../../src/components/internal/info-icon-with-popover/info-icon-with-popover.vue"],"sourcesContent":["<template>\n    <div class=\"b-info-icon-with-popover\" tabindex=\"0\" data-testid=\"info-icon-with-popover\" v-on=\"hoverEvents\">\n        <info-icon\n            ref=\"targetElement\"\n            class=\"b-info-icon-with-popover__svg\"\n            :aria-expanded=\"isOpen\"\n            :aria-describedby=\"popoverId\"\n            :svg-title=\"t('moreInformation')\"\n        />\n        <bento-popover\n            v-if=\"targetElement\"\n            :open=\"isOpen\"\n            :target-element=\"targetElement\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <bento-typography>\n                <slot>\n                    <div v-if=\"popoverText\">\n                        {{ popoverText }}\n                    </div>\n                </slot>\n            </bento-typography>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoPopover, BentoPopoverPositions } from '@/components/popover';\n    import { useBentoDelayedHover } from '@/composables';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n    import { type PropType, ref } from 'vue';\n    import type { BentoPopoverProps } from '../../popover/popover.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    defineProps({\n        /**\n         * Text showed in the popover on hover\n         */\n        popoverText: { type: String, default: null },\n\n        /**\n         * Position the popover should take if space is available\n         */\n        popoverPosition: {\n            type: String as PropType<BentoPopoverProps['position']>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const targetElement = ref(null);\n    const popoverId = generateUid('bento-info-icon-with-popover');\n\n    const { isOpen, hoverEvents } = useBentoDelayedHover();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used whenever an info icon needs to be rendered with a popover instead of a tooltip.\n     *\n     * @example\n     * import { BentoInfoIconWithPopover } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInfoIconWithPopover },\n     *     template: `\n     *          <info-icon-with-popover popover-text=\"Content can be passed as a string like\" :popover-position=\"position\">\n     *              Content can also be rendered as a slot\n     *          </info-icon-with-popover>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./info-icon-with-popover.scss\" />\n"],"names":["__default__","messages","t","useI18n","targetElement","ref","popoverId","generateUid","isOpen","hoverEvents","useBentoDelayedHover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;GAkFIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;AA1BA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAA,8BAAA,GAEA,EAAA,QAAAC,GAAA,aAAAC,EAAA,IAAAC,EAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"info-icon-with-popover.BzGVcMqy.js","sources":["../../src/components/internal/info-icon-with-popover/info-icon-with-popover.vue"],"sourcesContent":["<template>\n    <div class=\"b-info-icon-with-popover\" tabindex=\"0\" data-testid=\"info-icon-with-popover\" v-on=\"hoverEvents\">\n        <info-icon\n            ref=\"targetElement\"\n            class=\"b-info-icon-with-popover__svg\"\n            :aria-expanded=\"isOpen\"\n            :aria-describedby=\"popoverId\"\n            :svg-title=\"t('moreInformation')\"\n        />\n        <bento-popover\n            v-if=\"targetElement\"\n            :open=\"isOpen\"\n            :target-element=\"targetElement\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <bento-typography>\n                <slot>\n                    <div v-if=\"popoverText\">\n                        {{ popoverText }}\n                    </div>\n                </slot>\n            </bento-typography>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoPopover, BentoPopoverPositions } from '@/components/popover';\n    import { useBentoDelayedHover } from '@/composables';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useI18n } from '@/utils/ts/i18n';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n    import { type PropType, ref } from 'vue';\n    import type { BentoPopoverProps } from '../../popover/popover.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    defineProps({\n        /**\n         * Text showed in the popover on hover\n         */\n        popoverText: { type: String, default: null },\n\n        /**\n         * Position the popover should take if space is available\n         */\n        popoverPosition: {\n            type: String as PropType<BentoPopoverProps['position']>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const targetElement = ref(null);\n    const popoverId = generateUid('bento-info-icon-with-popover');\n\n    const { isOpen, hoverEvents } = useBentoDelayedHover();\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Internal component to be used whenever an info icon needs to be rendered with a popover instead of a tooltip.\n     *\n     * @example\n     * import { BentoInfoIconWithPopover } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInfoIconWithPopover },\n     *     template: `\n     *          <info-icon-with-popover popover-text=\"Content can be passed as a string like\" :popover-position=\"position\">\n     *              Content can also be rendered as a slot\n     *          </info-icon-with-popover>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./info-icon-with-popover.scss\" />\n"],"names":["__default__","messages","t","useI18n","targetElement","ref","popoverId","generateUid","isOpen","hoverEvents","useBentoDelayedHover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;GAkFIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;AA1BA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAA,8BAAA,GAEA,EAAA,QAAAC,GAAA,aAAAC,EAAA,IAAAC,EAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{info-icon.B-FAeceD.js → info-icon.D11usblr.js}

@@ -1,7 +1,7 @@
 import { defineComponent as r } from "vue";
 import { b as s } from "./popper-container.Cj3AWXSd.js";
 import { I as p } from "./info.4Kf1Acn4.js";
-import { b as a } from "./tooltip.DFYc5NKM.js";
+import { b as a } from "./tooltip.BOe7LOfD.js";
 import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/info-icon.css";
 const _ = {
@@ -34,4 +34,4 @@ const I = u.exports;
 export {
   I as B
 };
-//# sourceMappingURL=info-icon.B-FAeceD.js.map
+//# sourceMappingURL=info-icon.D11usblr.js.map

package/dist/chunks/{info-icon.B-FAeceD.js.map → info-icon.D11usblr.js.map}

@@ -1 +1 @@
-{"version":3,"file":"info-icon.B-FAeceD.js","sources":["../../src/components/info-icon/info-icon.vue"],"sourcesContent":["<template>\n    <span\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        :aria-label=\"tooltipText\"\n        class=\"b-info-icon\"\n        @mouseenter=\"emit('mouseenter', $event)\"\n    >\n        <info-icon :svg-title=\"tooltipText\" class=\"b-info-icon__svg\" />\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { type BentoInfoIconProps } from './info-icon.types';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n\n    defineProps({\n  tooltipText: null,\n  tooltipPosition: { default: PopperContainerPosition.AUTO }\n});\n\n    const emit = defineEmits([\"mouseenter\"]);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * @example\n     * <template>\n     *     <bento-info-icon tooltip-text=\"Text on hover\" />\n     * </template>\n     *\n     * <script setup lang=\"ts\">\n     * import { BentoInfoIcon } from '@adyen/bento-vue2';\n     * </scrip>\n     */\n    export default {\n        name: 'bento-info-icon',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./info-icon.scss\" />\n"],"names":["__default__"],"mappings":";;;;;;AAoCI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"info-icon.D11usblr.js","sources":["../../src/components/info-icon/info-icon.vue"],"sourcesContent":["<template>\n    <span\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        :aria-label=\"tooltipText\"\n        class=\"b-info-icon\"\n        @mouseenter=\"emit('mouseenter', $event)\"\n    >\n        <info-icon :svg-title=\"tooltipText\" class=\"b-info-icon__svg\" />\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { type BentoInfoIconProps } from './info-icon.types';\n    import InfoIcon from '@adyen/ui-assets-icons-16/vue/info';\n\n    defineProps({\n  tooltipText: null,\n  tooltipPosition: { default: PopperContainerPosition.AUTO }\n});\n\n    const emit = defineEmits([\"mouseenter\"]);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * @example\n     * <template>\n     *     <bento-info-icon tooltip-text=\"Text on hover\" />\n     * </template>\n     *\n     * <script setup lang=\"ts\">\n     * import { BentoInfoIcon } from '@adyen/bento-vue2';\n     * </scrip>\n     */\n    export default {\n        name: 'bento-info-icon',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./info-icon.scss\" />\n"],"names":["__default__"],"mappings":";;;;;;AAoCI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{input-field-password.9bWhLud0.js → input-field-password.D4Jn2yCi.js}

@@ -1,9 +1,9 @@
 import { defineComponent as te, useAttrs as ne, ref as s, provide as oe, computed as u, watch as N } from "vue";
-import { B as se } from "./button.DII5Ifwa.js";
+import { B as se } from "./button.tsTeQRcP.js";
 import { B as le } from "./image.C2D2hKat.js";
-import { f as re, B as de } from "./input-field.D912rZS_.js";
-import { h as ce } from "./button-actions.bkcLUE1G.js";
-import { B as ue } from "./typography.D1OZJbEa.js";
+import { f as re, B as de } from "./input-field.90DWNO1a.js";
+import { h as ce } from "./button-actions.CdetBz3J.js";
+import { B as ue } from "./typography.Cd386LC_.js";
 import { C as pe } from "./checkmark-circle-fill.Ds9Mwqpi.js";
 import { D as ve } from "./dot.BzjMWDGe.js";
 import { S as me, H as fe } from "./show.Cs2jT9TJ.js";
@@ -11,7 +11,7 @@ import { u as he } from "./index.CPOlyau9.js";
 import { g as B } from "./generate-uid.DBWe4g6T.js";
 import { u as be } from "./form-field.B60VsF8d.js";
 import { j as Ce } from "./index.CL3TXc0a.js";
-import { T as ge } from "./tooltip.DFYc5NKM.js";
+import { T as ge } from "./tooltip.BOe7LOfD.js";
 import { n as we } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field-password.css";
 var b = /* @__PURE__ */ ((t) => (t.TEXT = "text", t.PASSWORD = "password", t))(b || {}), f = /* @__PURE__ */ ((t) => (t.MIN_LENGTH = "minLength", t.REQUIRE_LOWERCASE = "requireLowercase", t.REQUIRE_NUMERIC = "requireNumeric", t.REQUIRE_SPECIAL_CHARACTER = "requireSpecialCharacter", t.REQUIRE_UPPERCASE = "requireUppercase", t))(f || {});
@@ -221,4 +221,4 @@ export {
   Le as m,
   Re as r
 };
-//# sourceMappingURL=input-field-password.9bWhLud0.js.map
+//# sourceMappingURL=input-field-password.D4Jn2yCi.js.map

package/dist/chunks/{input-field-password.9bWhLud0.js.map → input-field-password.D4Jn2yCi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-field-password.9bWhLud0.js","sources":["../../src/components/input-field-password/input-field-password.internal.types.ts","../../src/components/input-field-password/assets/capslock.svg","../../src/components/input-field-password/utilities/input-field-password.validation.ts","../../src/components/input-field-password/input-field-password.vue"],"sourcesContent":["export enum BentoInputFieldPasswordType {\n    TEXT = 'text',\n    PASSWORD = 'password',\n}\n\nexport enum BentoInputFieldPasswordDefaultRule {\n    MIN_LENGTH = 'minLength',\n    REQUIRE_LOWERCASE = 'requireLowercase',\n    REQUIRE_NUMERIC = 'requireNumeric',\n    REQUIRE_SPECIAL_CHARACTER = 'requireSpecialCharacter',\n    REQUIRE_UPPERCASE = 'requireUppercase',\n}\n","export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='capslock'%3e%3cg%20id='Union'%3e%3cpath%20d='M13.75%205.63952L8%201.03952L2.25%205.63952V7.74999H4.75V11.75H11.25V7.74999H13.75V5.63952ZM6.25%206.24999H3.88809L8%202.96046L12.1119%206.24999H9.75V10.25H6.25V6.24999Z'%20fill='%2300112C'/%3e%3cpath%20d='M11.25%2014.75V13.25H4.75V14.75H11.25Z'%20fill='%2300112C'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e\"","import { type BentoInputFieldValue } from '@/components/input-field';\n\nfunction stringifyValue(value: BentoInputFieldValue): string {\n    return value?.toString() ?? '';\n}\n\n/**\n * Validates if the length of the provided value is greater than or equal to the specified length.\n *\n * @param value - The input value to check.\n * @param length - The minimum required length of the value. Defaults to 12.\n * @returns `true` if the length of the value is greater than or equal to the specified length, `false` otherwise.\n */\nexport function minLength(value: BentoInputFieldValue, length = 12): boolean {\n    return stringifyValue(value).length >= length;\n}\n\n/**\n * Validates if the provided value contains at least one lowercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one lowercase letter, `false` otherwise.\n */\nexport function requireLowercase(value: BentoInputFieldValue): boolean {\n    return /[a-z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one uppercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one uppercase letter, `false` otherwise.\n */\nexport function requireUppercase(value: BentoInputFieldValue): boolean {\n    return /[A-Z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one numerical digit.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one numerical digit, `false` otherwise.\n */\nexport function requireNumeric(value: BentoInputFieldValue): boolean {\n    return /\\d/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one special character (non-alphanumeric).\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one special character, `false` otherwise.\n */\nexport function requireSpecialCharacter(value: BentoInputFieldValue): boolean {\n    return /[^a-zA-Z0-9]/.test(stringifyValue(value));\n}\n","<template>\n    <div ref=\"inputFieldPasswordRef\" @focusout=\"onFocusOut\">\n        <bento-input-field\n            ref=\"inputFieldPasswordInputRef\"\n            v-bind=\"inputFieldArgs\"\n            class=\"b-input-field-password__input\"\n            autocapitalize=\"none\"\n            autocorrect=\"off\"\n            spellcheck=\"false\"\n            @blur=\"onBlur\"\n            @focus=\"onFocus\"\n            @update:model-value=\"onUpdateModelValue\"\n            @keydown=\"checkCapsLock\"\n            @keyup=\"checkCapsLock\"\n        >\n            <template v-if=\"label\">{{ label }}</template>\n            <template v-else><slot /></template>\n            <template v-if=\"description\" #description>\n                <slot name=\"description\">{{ description }}</slot>\n            </template>\n\n            <template v-if=\"isCapsLockOn\" #iconBefore>\n                <div\n                    class=\"b-input-field-password__caps-lock-indicator\"\n                    @mouseenter=\"handleCapsLockMouseEnter\"\n                    @mouseleave=\"handleCapsLockMouseLeave\"\n                >\n                    <bento-image\n                        ref=\"inputFieldPasswordCapsLockIconRef\"\n                        :src=\"CapsLockIcon\"\n                        :alt=\"t('capsLockEnabled')\"\n                    />\n                </div>\n\n                <tooltip\n                    v-if=\"inputFieldPasswordCapsLockIconRef\"\n                    :class=\"tooltipConditionalClass\"\n                    :content=\"t('capsLockEnabled')\"\n                    :disabled-focus-trap=\"true\"\n                    :fallback-position=\"['top', 'bottom']\"\n                    :is-shown=\"isTooltipDisplayed\"\n                    :target-element=\"inputFieldPasswordCapsLockIconRef\"\n                />\n            </template>\n\n            <template v-if=\"!disabled\" #iconAfter>\n                <bento-button variant=\"tertiary\" @click=\"toggleInputType\" @mousedown.native.prevent>\n                    <template #iconLeft>\n                        <show-icon v-if=\"!isPasswordReadable\" :svg-title=\"t('showPassword')\" />\n                        <hide-icon v-if=\"isPasswordReadable\" :svg-title=\"t('hidePassword')\" />\n                    </template>\n                </bento-button>\n            </template>\n        </bento-input-field>\n\n        <bento-popover\n            v-if=\"hasValidations\"\n            :open=\"isHintDisplayed\"\n            :target-element=\"inputFieldPasswordInputRef\"\n            :disable-focus-trap=\"true\"\n            :aria-label=\"computedValidations.title\"\n            :aria-describedby=\"validationListId\"\n            position=\"right-start\"\n        >\n            <div :id=\"validationPopoverId\">\n                <bento-typography v-if=\"computedValidations.title\" class=\"b-input-field-password__validation-title\">\n                    {{ computedValidations.title }}\n                </bento-typography>\n\n                <p v-if=\"!hasErrors\" class=\"b-input-field-password__validation-status--valid\" role=\"alert\">\n                    {{ t('validationValid') }}\n                </p>\n\n                <ul :id=\"validationListId\" class=\"b-input-field-password__validation-list\">\n                    <li\n                        v-for=\"(rule, index) in computedValidationList\"\n                        :key=\"index\"\n                        :class=\"passwordValidityConditionalClass[index]\"\n                        aria-live=\"polite\"\n                        aria-atomic=\"true\"\n                    >\n                        <span class=\"b-input-field-password__validation-list-icon\">\n                            <checkmark-circle-fill-icon\n                                v-if=\"passwordValidity[index]\"\n                                :svg-title=\"t('validationChecked')\"\n                            />\n\n                            <dot-icon v-else :svg-title=\"t('validationUnchecked')\" />\n                        </span>\n\n                        <bento-typography class=\"b-input-field-password__validation-list-text\" el=\"span\">\n                            {{ rule.label }}\n                        </bento-typography>\n                    </li>\n                </ul>\n\n                <bento-typography\n                    v-if=\"computedValidations.suggestion\"\n                    class=\"b-input-field-password__validation-suggestion\"\n                >\n                    {{ computedValidations.suggestion }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButton } from '@/components/button';\n    import { BentoImage } from '@/components/image';\n    import { BentoInputField } from '@/components/input-field';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTypography } from '@/components/typography';\n    import { Tooltip } from '@/internal';\n    import type { BentoInputFieldProps } from '@/components/input-field/input-field.types';\n    import {\n        BentoInputFieldPasswordDefaultRule,\n        BentoInputFieldPasswordType,\n    } from './input-field-password.internal.types';\n    import {\n        type BentoInputFieldPasswordErrorsList,\n        type BentoInputFieldPasswordProps,\n        type BentoInputFieldPasswordValidation,\n        type BentoInputFieldPasswordValidationListItem,\n    } from './input-field-password.types';\n    import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import DotIcon from '@adyen/ui-assets-icons-16/vue/dot';\n    import HideIcon from '@adyen/ui-assets-icons-16/vue/hide';\n    import ShowIcon from '@adyen/ui-assets-icons-16/vue/show';\n    import CapsLockIcon from './assets/capslock.svg';\n\n    import { watchDebounced } from '@vueuse/core';\n    import { computed, provide, ref, type SetupContext, useAttrs, watch } from 'vue';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import {\n        minLength,\n        requireLowercase,\n        requireNumeric,\n        requireSpecialCharacter,\n        requireUppercase,\n    } from '@/components/input-field-password/utilities/input-field-password.validation';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    import messages from './messages.json';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  condensed: { default: false },\n  debounceTime: { default: DEBOUNCE_DURATION },\n  disableValidation: { type: Boolean, default: false },\n  modelValue: { default: undefined },\n  validation: { default: undefined },\n  withHint: { type: Boolean, default: true }\n});\n\n    const emit = defineEmits([\"blur\", \"focus\", \"input:valid\", \"input:error\", \"update:model-value\"]);\n\n    const attrs = useAttrs();\n\n    const inputType = ref(BentoInputFieldPasswordType.PASSWORD);\n    const inputValue = ref(props.modelValue);\n    const isHintDisplayed = ref(false);\n    const isTouched = ref(false);\n    const passwordValidity = ref<Array<boolean>>([]);\n    const errorsList = ref<BentoInputFieldPasswordErrorsList>({});\n    const capsLockTooltipTimeoutID = ref<ReturnType<typeof setTimeout>>(null);\n    const isTooltipDisplayed = ref(false);\n    const inputFieldPasswordRef = ref(null);\n    const inputFieldPasswordInputRef = ref(null);\n    const inputFieldPasswordCapsLockIconRef = ref(null);\n    const isCapsLockOn = ref(false);\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-field-password');\n\n    const onFocusOut = (event: FocusEvent) => {\n        const container = inputFieldPasswordRef.value as HTMLElement | null;\n\n        // If focus moved to another element still inside the container, keep the popover open.\n        if (container && event.relatedTarget instanceof Node && container.contains(event.relatedTarget)) {\n            return;\n        }\n\n        isTouched.value = true;\n\n        if (!props.disableValidation) {\n            if (props.withHint) {\n                isHintDisplayed.value = false;\n            }\n            checkValidity(inputValue.value);\n        }\n    };\n\n    const { emitValue } = useFormFieldEmits<BentoInputFieldPasswordProps['modelValue']>(emit);\n\n    const validationListId = generateUid('validationListId');\n    const validationPopoverId = generateUid('validationPopoverId');\n\n    const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT);\n\n    const passwordValidityConditionalClass = computed(() =>\n        passwordValidity.value.map(validity =>\n            validity\n                ? 'b-input-field-password__validation-list--valid'\n                : 'b-input-field-password__validation-list--invalid'\n        )\n    );\n\n    const tooltipConditionalClass = computed(() =>\n        capsLockTooltipTimeoutID.value ? 'b-input-field-password__input-tooltip--timed' : ''\n    );\n\n    const inputFieldArgs = computed<BentoInputFieldProps & SetupContext['attrs']>(() => ({\n        ariaHidden: false,\n        condensed: props.condensed,\n        disabled: props.disabled,\n        errorMessage: props.errorMessage,\n        optional: props.optional,\n        placeholder: props.placeholder,\n        readonly: props.readonly,\n        required: props.required,\n        tooltipText: props.tooltipText,\n        type: inputType.value,\n        modelValue: inputValue.value,\n\n        'aria-haspopup': hasValidations.value ? 'dialog' : false,\n        'aria-describedby': hasValidations.value ? validationPopoverId : '',\n\n        ...attrs,\n    }));\n\n    const computedValidations = computed<BentoInputFieldPasswordValidation>(() => {\n        if (props.validation && !props.validation.extendDefaultValidation) {\n            return props.validation;\n        }\n\n        const defaultValidationList = [\n            {\n                label: t('validationMinLength', { numberOfCharacters: n(MIN_PASSWORD_LENGTH) }),\n                key: BentoInputFieldPasswordDefaultRule.MIN_LENGTH,\n                validate: minLength,\n            },\n            {\n                label: t('validationRequireLowercase', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_LOWERCASE,\n                validate: requireLowercase,\n            },\n            {\n                label: t('validationRequireUppercase', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_UPPERCASE,\n                validate: requireUppercase,\n            },\n            {\n                label: t('validationRequireNumeric', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_NUMERIC,\n                validate: requireNumeric,\n            },\n            {\n                label: t('validationRequireSpecialCharacter', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_SPECIAL_CHARACTER,\n                validate: requireSpecialCharacter,\n            },\n        ];\n\n        let validationList: Array<BentoInputFieldPasswordValidationListItem> = defaultValidationList;\n\n        if (props.validation) {\n            const defaultValidationKeys: Array<string> = defaultValidationList.map(rule => rule.key);\n            const customRuleKeys = props.validation?.list?.map(rule => rule.key);\n            // remove from the custom list any rules with default keys (rules that are overriding existent rules)\n            const customValidationList =\n                props.validation?.list?.filter(rule => !defaultValidationKeys.includes(rule.key)) ?? [];\n\n            // loop through the default list and replace default rule with the custom rule if it exists\n            const validationListWithOverrides = defaultValidationList.map(rule => {\n                if (customRuleKeys?.includes(rule.key)) {\n                    const customRule = props.validation?.list?.find(customRule => customRule.key === rule.key);\n                    return customRule;\n                } else {\n                    return rule;\n                }\n            });\n            validationList = [...validationListWithOverrides, ...customValidationList];\n        }\n\n        return {\n            title: props.validation?.title ?? t('validationTitle'),\n            suggestion: props.validation?.suggestion ?? t('validationSuggestion'),\n            list: validationList,\n        };\n    });\n\n    const computedValidationList = computed(() => computedValidations.value?.list?.filter(rule => !rule.disabled));\n\n    const hasErrors = computed(() => passwordValidity.value?.some(validation => !validation));\n    const hasValidations = computed(\n        () => inputFieldPasswordInputRef.value && computedValidations.value?.list?.length > 0\n    );\n\n    const checkCapsLock = (e: KeyboardEvent) => {\n        // Check if getModifierState exists and is a function in case the user's browser is autofilling\n        if (typeof e.getModifierState === 'function') {\n            isCapsLockOn.value = e.getModifierState('CapsLock');\n        }\n    };\n\n    const toggleInputType = () => {\n        if (isPasswordReadable.value) {\n            inputType.value = BentoInputFieldPasswordType.PASSWORD;\n        } else {\n            inputType.value = BentoInputFieldPasswordType.TEXT;\n        }\n    };\n\n    const onUpdateModelValue = (value: string) => {\n        if (props.disabled) {\n            return;\n        }\n\n        inputValue.value = value;\n\n        emitValue(inputValue.value);\n    };\n\n    const onFocus = () => {\n        emit('focus');\n\n        if (!props.disableValidation) {\n            if (props.withHint) {\n                isHintDisplayed.value = true;\n            }\n            checkValidity(inputValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        emit('blur');\n    };\n\n    const checkValidity = (value: BentoInputFieldPasswordProps['modelValue']) => {\n        const rulesValidityObj = computedValidationList.value?.map(validationItem => ({\n            key: validationItem.key,\n            label: validationItem.label,\n            isValid: validationItem.validate(value, ...(validationItem.additionalArgs ?? [])),\n        }));\n        let customRuleIndex = 1;\n\n        passwordValidity.value = rulesValidityObj?.map(error => error.isValid);\n\n        errorsList.value = rulesValidityObj\n            ?.filter(rule => !rule.isValid)\n            .reduce((errorsObject, error) => {\n                const key = error.key ?? `custom-rule-${customRuleIndex++}`;\n                return {\n                    ...errorsObject,\n                    [key]: error.label,\n                };\n            }, {});\n    };\n\n    const handleCapsLockMouseLeave = () => {\n        isTooltipDisplayed.value = false;\n        capsLockTooltipTimeoutID.value = null;\n    };\n\n    const handleCapsLockMouseEnter = () => {\n        isTooltipDisplayed.value = true;\n    };\n\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    watch(isCapsLockOn, isCapsLockOn => {\n        if (!isCapsLockOn) {\n            clearTimeout(capsLockTooltipTimeoutID.value);\n\n            capsLockTooltipTimeoutID.value = null;\n            isTooltipDisplayed.value = false;\n        } else {\n            isTooltipDisplayed.value = true;\n\n            capsLockTooltipTimeoutID.value = setTimeout(() => {\n                capsLockTooltipTimeoutID.value = null;\n                isTooltipDisplayed.value = false;\n            }, TOOLTIP_TIMEOUT);\n        }\n    });\n\n    watchDebounced(\n        inputValue,\n        inputValue => {\n            checkValidity(inputValue);\n\n            if (!hasErrors.value) {\n                emit('input:valid');\n            } else {\n                emit('input:error', errorsList.value);\n            }\n        },\n        // wait for 0.5s before checking validity OR 2s of continuous typing\n        { debounce: props.debounceTime, maxWait: DEBOUNCE_MAX_WAIT }\n    );\n</script>\n\n<script lang=\"ts\">\n    const MIN_PASSWORD_LENGTH = 12;\n    const DEBOUNCE_DURATION = 500;\n    const DEBOUNCE_MAX_WAIT = 2000;\n    const TOOLTIP_TIMEOUT = 2000;\n\n    /**\n     * The input field password is a component designed to support users' preference for entering values securely.\n     * This is an extension of the `bento-input-field` component.\n     *\n     * @example\n     * import { BentoInputFieldPassword } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInputFieldPassword },\n     *     template: `\n     *          <bento-input-field-password\n     *              label=\"Label\"\n     *              error-message=\"Error\"\n     *              :validation=\"{\n     *                  extendDefaultValidation: true,\n     *                  list: [\n     *                      { label: '18 characters', key: 'minLength', validate: minLength, additionalArgs: [18] },\n     *                      { label: 'Always true', key: 'alwaysTrue', validate: () => true },\n     *                      { key: 'requireSpecialCharacter', disabled: true }\n     *                  ],\n     *              }\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-field-password',\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field-password.scss\" />\n"],"names":["BentoInputFieldPasswordType","BentoInputFieldPasswordType2","BentoInputFieldPasswordDefaultRule","BentoInputFieldPasswordDefaultRule2","CapsLockIcon","stringifyValue","value","minLength","length","requireLowercase","requireUppercase","requireNumeric","requireSpecialCharacter","MIN_PASSWORD_LENGTH","DEBOUNCE_DURATION","DEBOUNCE_MAX_WAIT","TOOLTIP_TIMEOUT","__default__","messages","t","n","useI18n","attrs","useAttrs","inputType","ref","inputValue","props","isHintDisplayed","isTouched","passwordValidity","errorsList","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","onFocusOut","event","container","checkValidity","emitValue","useFormFieldEmits","emit","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","defaultValidationList","validationList","defaultValidationKeys","rule","customRuleKeys","customValidationList","customRule2","computedValidationList","hasErrors","validation","checkCapsLock","e","toggleInputType","onUpdateModelValue","onFocus","onBlur","rulesValidityObj","validationItem","customRuleIndex","error","errorsObject","key","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","isCapsLockOn2","watchDebounced","inputValue2"],"mappings":"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"}
+{"version":3,"file":"input-field-password.D4Jn2yCi.js","sources":["../../src/components/input-field-password/input-field-password.internal.types.ts","../../src/components/input-field-password/assets/capslock.svg","../../src/components/input-field-password/utilities/input-field-password.validation.ts","../../src/components/input-field-password/input-field-password.vue"],"sourcesContent":["export enum BentoInputFieldPasswordType {\n    TEXT = 'text',\n    PASSWORD = 'password',\n}\n\nexport enum BentoInputFieldPasswordDefaultRule {\n    MIN_LENGTH = 'minLength',\n    REQUIRE_LOWERCASE = 'requireLowercase',\n    REQUIRE_NUMERIC = 'requireNumeric',\n    REQUIRE_SPECIAL_CHARACTER = 'requireSpecialCharacter',\n    REQUIRE_UPPERCASE = 'requireUppercase',\n}\n","export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='capslock'%3e%3cg%20id='Union'%3e%3cpath%20d='M13.75%205.63952L8%201.03952L2.25%205.63952V7.74999H4.75V11.75H11.25V7.74999H13.75V5.63952ZM6.25%206.24999H3.88809L8%202.96046L12.1119%206.24999H9.75V10.25H6.25V6.24999Z'%20fill='%2300112C'/%3e%3cpath%20d='M11.25%2014.75V13.25H4.75V14.75H11.25Z'%20fill='%2300112C'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e\"","import { type BentoInputFieldValue } from '@/components/input-field';\n\nfunction stringifyValue(value: BentoInputFieldValue): string {\n    return value?.toString() ?? '';\n}\n\n/**\n * Validates if the length of the provided value is greater than or equal to the specified length.\n *\n * @param value - The input value to check.\n * @param length - The minimum required length of the value. Defaults to 12.\n * @returns `true` if the length of the value is greater than or equal to the specified length, `false` otherwise.\n */\nexport function minLength(value: BentoInputFieldValue, length = 12): boolean {\n    return stringifyValue(value).length >= length;\n}\n\n/**\n * Validates if the provided value contains at least one lowercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one lowercase letter, `false` otherwise.\n */\nexport function requireLowercase(value: BentoInputFieldValue): boolean {\n    return /[a-z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one uppercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one uppercase letter, `false` otherwise.\n */\nexport function requireUppercase(value: BentoInputFieldValue): boolean {\n    return /[A-Z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one numerical digit.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one numerical digit, `false` otherwise.\n */\nexport function requireNumeric(value: BentoInputFieldValue): boolean {\n    return /\\d/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one special character (non-alphanumeric).\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one special character, `false` otherwise.\n */\nexport function requireSpecialCharacter(value: BentoInputFieldValue): boolean {\n    return /[^a-zA-Z0-9]/.test(stringifyValue(value));\n}\n","<template>\n    <div ref=\"inputFieldPasswordRef\" @focusout=\"onFocusOut\">\n        <bento-input-field\n            ref=\"inputFieldPasswordInputRef\"\n            v-bind=\"inputFieldArgs\"\n            class=\"b-input-field-password__input\"\n            autocapitalize=\"none\"\n            autocorrect=\"off\"\n            spellcheck=\"false\"\n            @blur=\"onBlur\"\n            @focus=\"onFocus\"\n            @update:model-value=\"onUpdateModelValue\"\n            @keydown=\"checkCapsLock\"\n            @keyup=\"checkCapsLock\"\n        >\n            <template v-if=\"label\">{{ label }}</template>\n            <template v-else><slot /></template>\n            <template v-if=\"description\" #description>\n                <slot name=\"description\">{{ description }}</slot>\n            </template>\n\n            <template v-if=\"isCapsLockOn\" #iconBefore>\n                <div\n                    class=\"b-input-field-password__caps-lock-indicator\"\n                    @mouseenter=\"handleCapsLockMouseEnter\"\n                    @mouseleave=\"handleCapsLockMouseLeave\"\n                >\n                    <bento-image\n                        ref=\"inputFieldPasswordCapsLockIconRef\"\n                        :src=\"CapsLockIcon\"\n                        :alt=\"t('capsLockEnabled')\"\n                    />\n                </div>\n\n                <tooltip\n                    v-if=\"inputFieldPasswordCapsLockIconRef\"\n                    :class=\"tooltipConditionalClass\"\n                    :content=\"t('capsLockEnabled')\"\n                    :disabled-focus-trap=\"true\"\n                    :fallback-position=\"['top', 'bottom']\"\n                    :is-shown=\"isTooltipDisplayed\"\n                    :target-element=\"inputFieldPasswordCapsLockIconRef\"\n                />\n            </template>\n\n            <template v-if=\"!disabled\" #iconAfter>\n                <bento-button variant=\"tertiary\" @click=\"toggleInputType\" @mousedown.native.prevent>\n                    <template #iconLeft>\n                        <show-icon v-if=\"!isPasswordReadable\" :svg-title=\"t('showPassword')\" />\n                        <hide-icon v-if=\"isPasswordReadable\" :svg-title=\"t('hidePassword')\" />\n                    </template>\n                </bento-button>\n            </template>\n        </bento-input-field>\n\n        <bento-popover\n            v-if=\"hasValidations\"\n            :open=\"isHintDisplayed\"\n            :target-element=\"inputFieldPasswordInputRef\"\n            :disable-focus-trap=\"true\"\n            :aria-label=\"computedValidations.title\"\n            :aria-describedby=\"validationListId\"\n            position=\"right-start\"\n        >\n            <div :id=\"validationPopoverId\">\n                <bento-typography v-if=\"computedValidations.title\" class=\"b-input-field-password__validation-title\">\n                    {{ computedValidations.title }}\n                </bento-typography>\n\n                <p v-if=\"!hasErrors\" class=\"b-input-field-password__validation-status--valid\" role=\"alert\">\n                    {{ t('validationValid') }}\n                </p>\n\n                <ul :id=\"validationListId\" class=\"b-input-field-password__validation-list\">\n                    <li\n                        v-for=\"(rule, index) in computedValidationList\"\n                        :key=\"index\"\n                        :class=\"passwordValidityConditionalClass[index]\"\n                        aria-live=\"polite\"\n                        aria-atomic=\"true\"\n                    >\n                        <span class=\"b-input-field-password__validation-list-icon\">\n                            <checkmark-circle-fill-icon\n                                v-if=\"passwordValidity[index]\"\n                                :svg-title=\"t('validationChecked')\"\n                            />\n\n                            <dot-icon v-else :svg-title=\"t('validationUnchecked')\" />\n                        </span>\n\n                        <bento-typography class=\"b-input-field-password__validation-list-text\" el=\"span\">\n                            {{ rule.label }}\n                        </bento-typography>\n                    </li>\n                </ul>\n\n                <bento-typography\n                    v-if=\"computedValidations.suggestion\"\n                    class=\"b-input-field-password__validation-suggestion\"\n                >\n                    {{ computedValidations.suggestion }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoButton } from '@/components/button';\n    import { BentoImage } from '@/components/image';\n    import { BentoInputField } from '@/components/input-field';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTypography } from '@/components/typography';\n    import { Tooltip } from '@/internal';\n    import type { BentoInputFieldProps } from '@/components/input-field/input-field.types';\n    import {\n        BentoInputFieldPasswordDefaultRule,\n        BentoInputFieldPasswordType,\n    } from './input-field-password.internal.types';\n    import {\n        type BentoInputFieldPasswordErrorsList,\n        type BentoInputFieldPasswordProps,\n        type BentoInputFieldPasswordValidation,\n        type BentoInputFieldPasswordValidationListItem,\n    } from './input-field-password.types';\n    import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import DotIcon from '@adyen/ui-assets-icons-16/vue/dot';\n    import HideIcon from '@adyen/ui-assets-icons-16/vue/hide';\n    import ShowIcon from '@adyen/ui-assets-icons-16/vue/show';\n    import CapsLockIcon from './assets/capslock.svg';\n\n    import { watchDebounced } from '@vueuse/core';\n    import { computed, provide, ref, type SetupContext, useAttrs, watch } from 'vue';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import {\n        minLength,\n        requireLowercase,\n        requireNumeric,\n        requireSpecialCharacter,\n        requireUppercase,\n    } from '@/components/input-field-password/utilities/input-field-password.validation';\n    import { generateUid } from '@/utils/ts/generate-uid';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    import messages from './messages.json';\n    import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  description: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  label: { default: null },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  condensed: { default: false },\n  debounceTime: { default: DEBOUNCE_DURATION },\n  disableValidation: { type: Boolean, default: false },\n  modelValue: { default: undefined },\n  validation: { default: undefined },\n  withHint: { type: Boolean, default: true }\n});\n\n    const emit = defineEmits([\"blur\", \"focus\", \"input:valid\", \"input:error\", \"update:model-value\"]);\n\n    const attrs = useAttrs();\n\n    const inputType = ref(BentoInputFieldPasswordType.PASSWORD);\n    const inputValue = ref(props.modelValue);\n    const isHintDisplayed = ref(false);\n    const isTouched = ref(false);\n    const passwordValidity = ref<Array<boolean>>([]);\n    const errorsList = ref<BentoInputFieldPasswordErrorsList>({});\n    const capsLockTooltipTimeoutID = ref<ReturnType<typeof setTimeout>>(null);\n    const isTooltipDisplayed = ref(false);\n    const inputFieldPasswordRef = ref(null);\n    const inputFieldPasswordInputRef = ref(null);\n    const inputFieldPasswordCapsLockIconRef = ref(null);\n    const isCapsLockOn = ref(false);\n\n    provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-field-password');\n\n    const onFocusOut = (event: FocusEvent) => {\n        const container = inputFieldPasswordRef.value as HTMLElement | null;\n\n        // If focus moved to another element still inside the container, keep the popover open.\n        if (container && event.relatedTarget instanceof Node && container.contains(event.relatedTarget)) {\n            return;\n        }\n\n        isTouched.value = true;\n\n        if (!props.disableValidation) {\n            if (props.withHint) {\n                isHintDisplayed.value = false;\n            }\n            checkValidity(inputValue.value);\n        }\n    };\n\n    const { emitValue } = useFormFieldEmits<BentoInputFieldPasswordProps['modelValue']>(emit);\n\n    const validationListId = generateUid('validationListId');\n    const validationPopoverId = generateUid('validationPopoverId');\n\n    const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT);\n\n    const passwordValidityConditionalClass = computed(() =>\n        passwordValidity.value.map(validity =>\n            validity\n                ? 'b-input-field-password__validation-list--valid'\n                : 'b-input-field-password__validation-list--invalid'\n        )\n    );\n\n    const tooltipConditionalClass = computed(() =>\n        capsLockTooltipTimeoutID.value ? 'b-input-field-password__input-tooltip--timed' : ''\n    );\n\n    const inputFieldArgs = computed<BentoInputFieldProps & SetupContext['attrs']>(() => ({\n        ariaHidden: false,\n        condensed: props.condensed,\n        disabled: props.disabled,\n        errorMessage: props.errorMessage,\n        optional: props.optional,\n        placeholder: props.placeholder,\n        readonly: props.readonly,\n        required: props.required,\n        tooltipText: props.tooltipText,\n        type: inputType.value,\n        modelValue: inputValue.value,\n\n        'aria-haspopup': hasValidations.value ? 'dialog' : false,\n        'aria-describedby': hasValidations.value ? validationPopoverId : '',\n\n        ...attrs,\n    }));\n\n    const computedValidations = computed<BentoInputFieldPasswordValidation>(() => {\n        if (props.validation && !props.validation.extendDefaultValidation) {\n            return props.validation;\n        }\n\n        const defaultValidationList = [\n            {\n                label: t('validationMinLength', { numberOfCharacters: n(MIN_PASSWORD_LENGTH) }),\n                key: BentoInputFieldPasswordDefaultRule.MIN_LENGTH,\n                validate: minLength,\n            },\n            {\n                label: t('validationRequireLowercase', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_LOWERCASE,\n                validate: requireLowercase,\n            },\n            {\n                label: t('validationRequireUppercase', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_UPPERCASE,\n                validate: requireUppercase,\n            },\n            {\n                label: t('validationRequireNumeric', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_NUMERIC,\n                validate: requireNumeric,\n            },\n            {\n                label: t('validationRequireSpecialCharacter', { numberOne: n(1) }),\n                key: BentoInputFieldPasswordDefaultRule.REQUIRE_SPECIAL_CHARACTER,\n                validate: requireSpecialCharacter,\n            },\n        ];\n\n        let validationList: Array<BentoInputFieldPasswordValidationListItem> = defaultValidationList;\n\n        if (props.validation) {\n            const defaultValidationKeys: Array<string> = defaultValidationList.map(rule => rule.key);\n            const customRuleKeys = props.validation?.list?.map(rule => rule.key);\n            // remove from the custom list any rules with default keys (rules that are overriding existent rules)\n            const customValidationList =\n                props.validation?.list?.filter(rule => !defaultValidationKeys.includes(rule.key)) ?? [];\n\n            // loop through the default list and replace default rule with the custom rule if it exists\n            const validationListWithOverrides = defaultValidationList.map(rule => {\n                if (customRuleKeys?.includes(rule.key)) {\n                    const customRule = props.validation?.list?.find(customRule => customRule.key === rule.key);\n                    return customRule;\n                } else {\n                    return rule;\n                }\n            });\n            validationList = [...validationListWithOverrides, ...customValidationList];\n        }\n\n        return {\n            title: props.validation?.title ?? t('validationTitle'),\n            suggestion: props.validation?.suggestion ?? t('validationSuggestion'),\n            list: validationList,\n        };\n    });\n\n    const computedValidationList = computed(() => computedValidations.value?.list?.filter(rule => !rule.disabled));\n\n    const hasErrors = computed(() => passwordValidity.value?.some(validation => !validation));\n    const hasValidations = computed(\n        () => inputFieldPasswordInputRef.value && computedValidations.value?.list?.length > 0\n    );\n\n    const checkCapsLock = (e: KeyboardEvent) => {\n        // Check if getModifierState exists and is a function in case the user's browser is autofilling\n        if (typeof e.getModifierState === 'function') {\n            isCapsLockOn.value = e.getModifierState('CapsLock');\n        }\n    };\n\n    const toggleInputType = () => {\n        if (isPasswordReadable.value) {\n            inputType.value = BentoInputFieldPasswordType.PASSWORD;\n        } else {\n            inputType.value = BentoInputFieldPasswordType.TEXT;\n        }\n    };\n\n    const onUpdateModelValue = (value: string) => {\n        if (props.disabled) {\n            return;\n        }\n\n        inputValue.value = value;\n\n        emitValue(inputValue.value);\n    };\n\n    const onFocus = () => {\n        emit('focus');\n\n        if (!props.disableValidation) {\n            if (props.withHint) {\n                isHintDisplayed.value = true;\n            }\n            checkValidity(inputValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        emit('blur');\n    };\n\n    const checkValidity = (value: BentoInputFieldPasswordProps['modelValue']) => {\n        const rulesValidityObj = computedValidationList.value?.map(validationItem => ({\n            key: validationItem.key,\n            label: validationItem.label,\n            isValid: validationItem.validate(value, ...(validationItem.additionalArgs ?? [])),\n        }));\n        let customRuleIndex = 1;\n\n        passwordValidity.value = rulesValidityObj?.map(error => error.isValid);\n\n        errorsList.value = rulesValidityObj\n            ?.filter(rule => !rule.isValid)\n            .reduce((errorsObject, error) => {\n                const key = error.key ?? `custom-rule-${customRuleIndex++}`;\n                return {\n                    ...errorsObject,\n                    [key]: error.label,\n                };\n            }, {});\n    };\n\n    const handleCapsLockMouseLeave = () => {\n        isTooltipDisplayed.value = false;\n        capsLockTooltipTimeoutID.value = null;\n    };\n\n    const handleCapsLockMouseEnter = () => {\n        isTooltipDisplayed.value = true;\n    };\n\n    watch(\n        () => props.modelValue,\n        () => {\n            inputValue.value = props.modelValue;\n        }\n    );\n\n    watch(isCapsLockOn, isCapsLockOn => {\n        if (!isCapsLockOn) {\n            clearTimeout(capsLockTooltipTimeoutID.value);\n\n            capsLockTooltipTimeoutID.value = null;\n            isTooltipDisplayed.value = false;\n        } else {\n            isTooltipDisplayed.value = true;\n\n            capsLockTooltipTimeoutID.value = setTimeout(() => {\n                capsLockTooltipTimeoutID.value = null;\n                isTooltipDisplayed.value = false;\n            }, TOOLTIP_TIMEOUT);\n        }\n    });\n\n    watchDebounced(\n        inputValue,\n        inputValue => {\n            checkValidity(inputValue);\n\n            if (!hasErrors.value) {\n                emit('input:valid');\n            } else {\n                emit('input:error', errorsList.value);\n            }\n        },\n        // wait for 0.5s before checking validity OR 2s of continuous typing\n        { debounce: props.debounceTime, maxWait: DEBOUNCE_MAX_WAIT }\n    );\n</script>\n\n<script lang=\"ts\">\n    const MIN_PASSWORD_LENGTH = 12;\n    const DEBOUNCE_DURATION = 500;\n    const DEBOUNCE_MAX_WAIT = 2000;\n    const TOOLTIP_TIMEOUT = 2000;\n\n    /**\n     * The input field password is a component designed to support users' preference for entering values securely.\n     * This is an extension of the `bento-input-field` component.\n     *\n     * @example\n     * import { BentoInputFieldPassword } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInputFieldPassword },\n     *     template: `\n     *          <bento-input-field-password\n     *              label=\"Label\"\n     *              error-message=\"Error\"\n     *              :validation=\"{\n     *                  extendDefaultValidation: true,\n     *                  list: [\n     *                      { label: '18 characters', key: 'minLength', validate: minLength, additionalArgs: [18] },\n     *                      { label: 'Always true', key: 'alwaysTrue', validate: () => true },\n     *                      { key: 'requireSpecialCharacter', disabled: true }\n     *                  ],\n     *              }\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-field-password',\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field-password.scss\" />\n"],"names":["BentoInputFieldPasswordType","BentoInputFieldPasswordType2","BentoInputFieldPasswordDefaultRule","BentoInputFieldPasswordDefaultRule2","CapsLockIcon","stringifyValue","value","minLength","length","requireLowercase","requireUppercase","requireNumeric","requireSpecialCharacter","MIN_PASSWORD_LENGTH","DEBOUNCE_DURATION","DEBOUNCE_MAX_WAIT","TOOLTIP_TIMEOUT","__default__","messages","t","n","useI18n","attrs","useAttrs","inputType","ref","inputValue","props","isHintDisplayed","isTouched","passwordValidity","errorsList","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","onFocusOut","event","container","checkValidity","emitValue","useFormFieldEmits","emit","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","defaultValidationList","validationList","defaultValidationKeys","rule","customRuleKeys","customValidationList","customRule2","computedValidationList","hasErrors","validation","checkCapsLock","e","toggleInputType","onUpdateModelValue","onFocus","onBlur","rulesValidityObj","validationItem","customRuleIndex","error","errorsObject","key","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","isCapsLockOn2","watchDebounced","inputValue2"],"mappings":"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"}

package/dist/chunks/{input-field-phone-number.CCn1N9St.js → input-field-phone-number.lV7yePoJ.js}

@@ -1,8 +1,8 @@
 import { defineComponent as Te, ref as X, provide as Ie, computed as Z, watch as Ae, nextTick as Fe } from "vue";
-import { f as xe, B as we } from "./input-field.D912rZS_.js";
+import { f as xe, B as we } from "./input-field.90DWNO1a.js";
 import { u as Oe } from "./index.CPOlyau9.js";
 import { u as Re } from "./form-field.B60VsF8d.js";
-import { p as De } from "./typography.D1OZJbEa.js";
+import { p as De } from "./typography.Cd386LC_.js";
 import { a as q, u as $e } from "./use-country-phon-code.Cv5YgCOo.js";
 import { n as Me } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field-phone-number.css";
@@ -3308,4 +3308,4 @@ export {
   f1 as B,
   I1 as i
 };
-//# sourceMappingURL=input-field-phone-number.CCn1N9St.js.map
+//# sourceMappingURL=input-field-phone-number.lV7yePoJ.js.map