@adyen/bento-vue2 1.56.0 → 1.56.2

package/dist/chunks/{input-field-password.CbPAafAh.js → input-field-password.DwRXYgcD.js}

@@ -1,7 +1,7 @@
 import { defineComponent as Y, useAttrs as $, ref as o, provide as ee, computed as r, watch as I } from "vue";
 import { B as ae } from "./button.D7K0uXQm.js";
 import { B as te } from "./image.C2D2hKat.js";
-import { B as ie } from "./input-field._ceh_k5o.js";
+import { B as ie } from "./input-field.BdJBLLFI.js";
 import { B as se } from "./popover.Bb9JeZVy.js";
 import { B as oe } from "./typography.J1v_SPG3.js";
 import { C as le } from "./checkmark-circle-fill.DZBl7CeY.js";
@@ -10,7 +10,7 @@ import { S as re, H as de } from "./show.e4LEpZKG.js";
 import { d as ce, w as ue } from "./index.48Mn1OCp.js";
 import { u as pe } from "./i18n.BQkEbtPM.js";
 import { g as O } from "./generate-uid.NJ8tVoha.js";
-import { b as ve } from "./dropdown.aeiLxODy.js";
+import { b as ve } from "./dropdown.DfnKDRBQ.js";
 import { T as fe } from "./tooltip.CfER_5In.js";
 import { n as me } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/input-field-password.css";
@@ -230,4 +230,4 @@ export {
   he as m,
   ge as r
 };
-//# sourceMappingURL=input-field-password.CbPAafAh.js.map
+//# sourceMappingURL=input-field-password.DwRXYgcD.js.map

package/dist/chunks/{input-field-password.CbPAafAh.js.map → input-field-password.DwRXYgcD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-field-password.CbPAafAh.js","sources":["../../src/components/input-field-password/input-field-password.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":["import type { BentoInputFieldProps, BentoInputFieldValue } from '@/components/input-field/input-field.types';\n\n/**\n * Public\n */\n\nexport interface BentoInputFieldPasswordValidationListItem {\n    label: string;\n    key?: BentoInputFieldPasswordDefaultRuleKeys | string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    validate: (value: BentoInputFieldValue, ...args: any[]) => boolean;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    additionalArgs?: any[];\n}\n\nexport type BentoInputFieldPasswordDefaultRuleKeys =\n    | 'minLength'\n    | 'requireLowercase'\n    | 'requireNumeric'\n    | 'requireSpecialCharacter'\n    | 'requireUppercase';\n\nexport type BentoInputFieldPasswordErrorsList = Record<BentoInputFieldPasswordDefaultRuleKeys | string, string>;\n\nexport interface BentoInputFieldPasswordValidation {\n    title?: string;\n    suggestion?: string;\n    list: BentoInputFieldPasswordValidationListItem[];\n}\n\nexport interface BentoInputFieldPasswordProps {\n    /**\n     * Reduces height of the input\n     */\n    condensed?: BentoInputFieldProps['condensed'];\n\n    /**\n     * Disables the possibility of changing value in the input-field\n     */\n    disabled?: BentoInputFieldProps['disabled'];\n\n    /**\n     * Performs real-time validations over the input value. Default: `false`.\n     * Disabling the option (set to `true`) will not run pre-defined validations or custom validations defined in the `validation` field.\n     */\n    disableValidation?: boolean;\n\n    /**\n     * Renders input-field with an error state and the error message beneath the input box\n     */\n    errorMessage?: BentoInputFieldProps['errorMessage'];\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: BentoInputFieldProps['placeholder'];\n\n    /**\n     * Setting this property to true will set the input field to read only state.\n     */\n    readonly?: BentoInputFieldProps['readonly'];\n\n    /**\n     * Text displayed as the value of the input-field\n     */\n    value?: BentoInputFieldProps['value'];\n\n    /**\n     * Label to be shown with the input field\n     */\n    label?: string;\n\n    /**\n     * Configuration object for password field validation.\n     *\n     * This object defines the validation criteria and associated messages for a password field.\n     * It includes the following properties:\n     *\n     * - `title`: The title displayed at the top of the validation hint.\n     * - `suggestion`: The message displayed at the bottom of the validation hint, providing additional guidance.\n     * - `list`: An array of callback functions to be executed on the value after each user input, validating the password against the specified rules.\n     *\n     * By default, the validation checks that:\n     *\n     * - The value has a minimum length of 12 characters.\n     * - The value contains at least one lowercase letter.\n     * - The value contains at least one uppercase letter.\n     * - The value contains at least one numeric digit.\n     * - The value contains at least one special character.\n     *\n     *\n     */\n    validation?: BentoInputFieldPasswordValidation;\n\n    /**\n     * Whether the password validation hint is displayed when the input field is activated via focus or input\n     */\n    withHint?: boolean;\n}\n\n/**\n * Private\n */\n\nexport 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 { 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\">\n        <bento-input-field\n            ref=\"inputFieldPasswordInputRef\"\n            v-bind=\"inputFieldArgs\"\n            class=\"b-input-field-password__input\"\n            spellcheck=\"false\"\n            @input=\"onInput\"\n            @keydown=\"checkCapsLock\"\n            @keyup=\"checkCapsLock\"\n        >\n            <template #default>{{ label }}</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                    ></bento-image>\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                ></tooltip>\n            </template>\n\n            <template v-if=\"!disabled\" #iconAfter>\n                <bento-button variant=\"tertiary\" @click=\"toggleInputType\">\n                    <template #iconLeft>\n                        <show-icon v-if=\"!isPasswordReadable\" :svg-title=\"t('showPassword')\" />\n\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=\"(validation, index) in computedValidations.list\"\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                            {{ validation.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        BentoInputFieldPasswordErrorsList,\n        type BentoInputFieldPasswordProps,\n        BentoInputFieldPasswordType,\n        BentoInputFieldPasswordValidation,\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 { useFocusWithin, watchDebounced } from '@vueuse/core';\n    import { computed, provide, ref, 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 '@/core/utils/ts';\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 DEBOUNCE_DURATION = 500;\n    const DEBOUNCE_MAX_WAIT = 2000;\n    const TOOLTIP_TIMEOUT = 2000;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  condensed: { default: false },\n  disabled: { default: false },\n  disableValidation: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  placeholder: { default: '' },\n  readonly: { default: false },\n  value: { default: undefined },\n  label: { default: null },\n  validation: { default: undefined },\n  withHint: { type: Boolean, default: true }\n});\n\n    const emit = defineEmits([\"input:valid\", \"input:error\", \"input\"]);\n\n    const attrs = useAttrs();\n\n    const inputType = ref(BentoInputFieldPasswordType.PASSWORD);\n    const inputValue = ref(props.value);\n    const isHintDisplayed = ref(false);\n    const isTouched = ref(false);\n    const passwordValidity = ref<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 { focused } = useFocusWithin(inputFieldPasswordRef);\n\n    const validationListId = generateUid('validationListId');\n    const validationPopoverId = generateUid('validationPopoverId');\n\n    const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT);\n    const computedErrorMessage = computed(() => {\n        const hasRealTimeValidationErrors = isTouched.value && hasErrors.value;\n        const hasAsyncValidationErrors = props.disableValidation && props.errorMessage;\n\n        return hasRealTimeValidationErrors || hasAsyncValidationErrors ? props.errorMessage : '';\n    });\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: computedErrorMessage.value,\n        placeholder: props.placeholder,\n        readonly: props.readonly,\n        type: inputType.value,\n        value: 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        props.validation === undefined\n            ? {\n                  title: t('validationTitle'),\n                  suggestion: t('validationSuggestion'),\n                  list: [\n                      {\n                          label: t('validationMinLength'),\n                          key: BentoInputFieldPasswordDefaultRule.MIN_LENGTH,\n                          validate: minLength,\n                      },\n                      {\n                          label: t('validationRequireLowercase'),\n                          key: BentoInputFieldPasswordDefaultRule.REQUIRE_LOWERCASE,\n                          validate: requireLowercase,\n                      },\n                      {\n                          label: t('validationRequireUppercase'),\n                          key: BentoInputFieldPasswordDefaultRule.REQUIRE_UPPERCASE,\n                          validate: requireUppercase,\n                      },\n                      {\n                          label: t('validationRequireNumeric'),\n                          key: BentoInputFieldPasswordDefaultRule.REQUIRE_NUMERIC,\n                          validate: requireNumeric,\n                      },\n                      {\n                          label: t('validationRequireSpecialCharacter'),\n                          key: 'requireSpecialCharacter',\n                          validate: requireSpecialCharacter,\n                      },\n                  ],\n              }\n            : props.validation\n    );\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 onInput = (value: string) => {\n        if (props.disabled) {\n            return;\n        }\n\n        inputValue.value = value;\n\n        emit('input', inputValue.value);\n    };\n\n    const checkValidity = (value: BentoInputFieldPasswordProps['value']) => {\n        const rulesValidityObj = computedValidations.value?.list?.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.value,\n        newValue => {\n            inputValue.value = newValue;\n        }\n    );\n\n    watch(focused, focused => {\n        // Always set dirty to true when blur occurs\n        if (!focused) {\n            isTouched.value = true;\n        }\n\n        // Disable validations & hint if \"disableValidation\" is \"true\"\n        if (!props.disableValidation) {\n            if (props.withHint) {\n                isHintDisplayed.value = focused;\n            }\n            checkValidity(inputValue.value);\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: DEBOUNCE_DURATION, maxWait: DEBOUNCE_MAX_WAIT }\n    );\n</script>\n\n<script lang=\"ts\">\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     *                  title: 'Password must contain at least:',\n     *                  suggestion: 'Avoid using currency symbols or accented letters.',\n     *                  list: [\n     *                      { label: '12 characters', key: 'minLength', validate: minLength, additionalArgs: [12] },\n     *                      { label: '1 lowercase (a-z)', key: 'requireLowercase', validate: requireLowercase },\n     *                      { label: '1 uppercase (A-Z)', key: 'requireUppercase', validate: requireUppercase },\n     *                      { label: '1 numerical (0-9)', key: 'requireNumeric', validate: requireNumeric },\n     *                      { label: '1 special character', key: 'requireSpecialCharacter', validate: requireSpecialCharacter },\n     *                      {\n     *                          label: 'Always true',\n     *                          key: 'alwaysTrue',\n     *                          validate: () => {\n     *                              const example = 'Example';\n     *\n     *                              return () => example.length > 1;\n     *                          },\n     *                      },\n     *                  ],\n     *              }\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-field-password',\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","__default__","messages","DEBOUNCE_DURATION","DEBOUNCE_MAX_WAIT","TOOLTIP_TIMEOUT","t","useI18n","attrs","useAttrs","inputType","ref","inputValue","props","isHintDisplayed","isTouched","passwordValidity","errorsList","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","focused","useFocusWithin","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","computedErrorMessage","hasRealTimeValidationErrors","hasErrors","hasAsyncValidationErrors","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","validation","_b","_a","checkCapsLock","e","toggleInputType","onInput","emit","checkValidity","rulesValidityObj","validationItem","customRuleIndex","error","rule","errorsObject","key","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","newValue","focused2","isCapsLockOn2","watchDebounced","inputValue2"],"mappings":"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"}
+{"version":3,"file":"input-field-password.DwRXYgcD.js","sources":["../../src/components/input-field-password/input-field-password.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":["import type { BentoInputFieldProps, BentoInputFieldValue } from '@/components/input-field/input-field.types';\n\n/**\n * Public\n */\n\nexport interface BentoInputFieldPasswordValidationListItem {\n    label: string;\n    key?: BentoInputFieldPasswordDefaultRuleKeys | string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    validate: (value: BentoInputFieldValue, ...args: any[]) => boolean;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    additionalArgs?: any[];\n}\n\nexport type BentoInputFieldPasswordDefaultRuleKeys =\n    | 'minLength'\n    | 'requireLowercase'\n    | 'requireNumeric'\n    | 'requireSpecialCharacter'\n    | 'requireUppercase';\n\nexport type BentoInputFieldPasswordErrorsList = Record<BentoInputFieldPasswordDefaultRuleKeys | string, string>;\n\nexport interface BentoInputFieldPasswordValidation {\n    title?: string;\n    suggestion?: string;\n    list: BentoInputFieldPasswordValidationListItem[];\n}\n\nexport interface BentoInputFieldPasswordProps {\n    /**\n     * Reduces height of the input\n     */\n    condensed?: BentoInputFieldProps['condensed'];\n\n    /**\n     * Disables the possibility of changing value in the input-field\n     */\n    disabled?: BentoInputFieldProps['disabled'];\n\n    /**\n     * Performs real-time validations over the input value. Default: `false`.\n     * Disabling the option (set to `true`) will not run pre-defined validations or custom validations defined in the `validation` field.\n     */\n    disableValidation?: boolean;\n\n    /**\n     * Renders input-field with an error state and the error message beneath the input box\n     */\n    errorMessage?: BentoInputFieldProps['errorMessage'];\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: BentoInputFieldProps['placeholder'];\n\n    /**\n     * Setting this property to true will set the input field to read only state.\n     */\n    readonly?: BentoInputFieldProps['readonly'];\n\n    /**\n     * Text displayed as the value of the input-field\n     */\n    value?: BentoInputFieldProps['value'];\n\n    /**\n     * Label to be shown with the input field\n     */\n    label?: string;\n\n    /**\n     * Configuration object for password field validation.\n     *\n     * This object defines the validation criteria and associated messages for a password field.\n     * It includes the following properties:\n     *\n     * - `title`: The title displayed at the top of the validation hint.\n     * - `suggestion`: The message displayed at the bottom of the validation hint, providing additional guidance.\n     * - `list`: An array of callback functions to be executed on the value after each user input, validating the password against the specified rules.\n     *\n     * By default, the validation checks that:\n     *\n     * - The value has a minimum length of 12 characters.\n     * - The value contains at least one lowercase letter.\n     * - The value contains at least one uppercase letter.\n     * - The value contains at least one numeric digit.\n     * - The value contains at least one special character.\n     *\n     *\n     */\n    validation?: BentoInputFieldPasswordValidation;\n\n    /**\n     * Whether the password validation hint is displayed when the input field is activated via focus or input\n     */\n    withHint?: boolean;\n}\n\n/**\n * Private\n */\n\nexport 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 { 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\">\n        <bento-input-field\n            ref=\"inputFieldPasswordInputRef\"\n            v-bind=\"inputFieldArgs\"\n            class=\"b-input-field-password__input\"\n            spellcheck=\"false\"\n            @input=\"onInput\"\n            @keydown=\"checkCapsLock\"\n            @keyup=\"checkCapsLock\"\n        >\n            <template #default>{{ label }}</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                    ></bento-image>\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                ></tooltip>\n            </template>\n\n            <template v-if=\"!disabled\" #iconAfter>\n                <bento-button variant=\"tertiary\" @click=\"toggleInputType\">\n                    <template #iconLeft>\n                        <show-icon v-if=\"!isPasswordReadable\" :svg-title=\"t('showPassword')\" />\n\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=\"(validation, index) in computedValidations.list\"\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                            {{ validation.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        BentoInputFieldPasswordErrorsList,\n        type BentoInputFieldPasswordProps,\n        BentoInputFieldPasswordType,\n        BentoInputFieldPasswordValidation,\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 { useFocusWithin, watchDebounced } from '@vueuse/core';\n    import { computed, provide, ref, 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 '@/core/utils/ts';\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 DEBOUNCE_DURATION = 500;\n    const DEBOUNCE_MAX_WAIT = 2000;\n    const TOOLTIP_TIMEOUT = 2000;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  condensed: { default: false },\n  disabled: { default: false },\n  disableValidation: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  placeholder: { default: '' },\n  readonly: { default: false },\n  value: { default: undefined },\n  label: { default: null },\n  validation: { default: undefined },\n  withHint: { type: Boolean, default: true }\n});\n\n    const emit = defineEmits([\"input:valid\", \"input:error\", \"input\"]);\n\n    const attrs = useAttrs();\n\n    const inputType = ref(BentoInputFieldPasswordType.PASSWORD);\n    const inputValue = ref(props.value);\n    const isHintDisplayed = ref(false);\n    const isTouched = ref(false);\n    const passwordValidity = ref<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 { focused } = useFocusWithin(inputFieldPasswordRef);\n\n    const validationListId = generateUid('validationListId');\n    const validationPopoverId = generateUid('validationPopoverId');\n\n    const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT);\n    const computedErrorMessage = computed(() => {\n        const hasRealTimeValidationErrors = isTouched.value && hasErrors.value;\n        const hasAsyncValidationErrors = props.disableValidation && props.errorMessage;\n\n        return hasRealTimeValidationErrors || hasAsyncValidationErrors ? props.errorMessage : '';\n    });\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: computedErrorMessage.value,\n        placeholder: props.placeholder,\n        readonly: props.readonly,\n        type: inputType.value,\n        value: 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        props.validation === undefined\n            ? {\n                  title: t('validationTitle'),\n                  suggestion: t('validationSuggestion'),\n                  list: [\n                      {\n                          label: t('validationMinLength'),\n                          key: BentoInputFieldPasswordDefaultRule.MIN_LENGTH,\n                          validate: minLength,\n                      },\n                      {\n                          label: t('validationRequireLowercase'),\n                          key: BentoInputFieldPasswordDefaultRule.REQUIRE_LOWERCASE,\n                          validate: requireLowercase,\n                      },\n                      {\n                          label: t('validationRequireUppercase'),\n                          key: BentoInputFieldPasswordDefaultRule.REQUIRE_UPPERCASE,\n                          validate: requireUppercase,\n                      },\n                      {\n                          label: t('validationRequireNumeric'),\n                          key: BentoInputFieldPasswordDefaultRule.REQUIRE_NUMERIC,\n                          validate: requireNumeric,\n                      },\n                      {\n                          label: t('validationRequireSpecialCharacter'),\n                          key: 'requireSpecialCharacter',\n                          validate: requireSpecialCharacter,\n                      },\n                  ],\n              }\n            : props.validation\n    );\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 onInput = (value: string) => {\n        if (props.disabled) {\n            return;\n        }\n\n        inputValue.value = value;\n\n        emit('input', inputValue.value);\n    };\n\n    const checkValidity = (value: BentoInputFieldPasswordProps['value']) => {\n        const rulesValidityObj = computedValidations.value?.list?.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.value,\n        newValue => {\n            inputValue.value = newValue;\n        }\n    );\n\n    watch(focused, focused => {\n        // Always set dirty to true when blur occurs\n        if (!focused) {\n            isTouched.value = true;\n        }\n\n        // Disable validations & hint if \"disableValidation\" is \"true\"\n        if (!props.disableValidation) {\n            if (props.withHint) {\n                isHintDisplayed.value = focused;\n            }\n            checkValidity(inputValue.value);\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: DEBOUNCE_DURATION, maxWait: DEBOUNCE_MAX_WAIT }\n    );\n</script>\n\n<script lang=\"ts\">\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     *                  title: 'Password must contain at least:',\n     *                  suggestion: 'Avoid using currency symbols or accented letters.',\n     *                  list: [\n     *                      { label: '12 characters', key: 'minLength', validate: minLength, additionalArgs: [12] },\n     *                      { label: '1 lowercase (a-z)', key: 'requireLowercase', validate: requireLowercase },\n     *                      { label: '1 uppercase (A-Z)', key: 'requireUppercase', validate: requireUppercase },\n     *                      { label: '1 numerical (0-9)', key: 'requireNumeric', validate: requireNumeric },\n     *                      { label: '1 special character', key: 'requireSpecialCharacter', validate: requireSpecialCharacter },\n     *                      {\n     *                          label: 'Always true',\n     *                          key: 'alwaysTrue',\n     *                          validate: () => {\n     *                              const example = 'Example';\n     *\n     *                              return () => example.length > 1;\n     *                          },\n     *                      },\n     *                  ],\n     *              }\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-input-field-password',\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","__default__","messages","DEBOUNCE_DURATION","DEBOUNCE_MAX_WAIT","TOOLTIP_TIMEOUT","t","useI18n","attrs","useAttrs","inputType","ref","inputValue","props","isHintDisplayed","isTouched","passwordValidity","errorsList","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","focused","useFocusWithin","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","computedErrorMessage","hasRealTimeValidationErrors","hasErrors","hasAsyncValidationErrors","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","validation","_b","_a","checkCapsLock","e","toggleInputType","onInput","emit","checkValidity","rulesValidityObj","validationItem","customRuleIndex","error","rule","errorsObject","key","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","newValue","focused2","isCapsLockOn2","watchDebounced","inputValue2"],"mappings":"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"}

package/dist/chunks/{input-field-phone-number.DAE8TPO4.js → input-field-phone-number.DGNoMZfu.js}

@@ -1,7 +1,7 @@
 import { defineComponent as oe, ref as G, provide as $e, computed as B, onMounted as ue, nextTick as le } from "vue";
-import { B as se } from "./input-field._ceh_k5o.js";
+import { B as se } from "./input-field.BdJBLLFI.js";
 import { u as fe } from "./i18n.BQkEbtPM.js";
-import { b as ce } from "./dropdown.aeiLxODy.js";
+import { b as ce } from "./dropdown.DfnKDRBQ.js";
 import { p as he } from "./typography.J1v_SPG3.js";
 import { a as jt, u as ge } from "./use-country-phon-code.DVgE19zT.js";
 import { n as me } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -3094,4 +3094,4 @@ const kd = Fd.exports;
 export {
   kd as i
 };
-//# sourceMappingURL=input-field-phone-number.DAE8TPO4.js.map
+//# sourceMappingURL=input-field-phone-number.DGNoMZfu.js.map