npm - @adyen/bento-vue3 - Versions diffs - 2.1.0 → 2.1.1 - Mend

@adyen/bento-vue3 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/chunks/{input-field-password.BXptrVTT.js → input-field-password.CFBPscot.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { defineComponent as fe, useAttrs as he, ref as s, provide as be, computed as u, watch as j, openBlock as l, createElementBlock as C, createVNode as S, unref as t, mergeProps as ge, createSlots as ke, withCtx as c, Fragment as G, createTextVNode as O, toDisplayString as g, renderSlot as X, createElementVNode as T, createBlock as v, normalizeClass as J, createCommentVNode as f, withModifiers as we, renderList as Re } from "vue";
 import { B as Le } from "./button.DAcwNdtP.js";
 import { _ as Ce } from "./image.vue_vue_type_script_setup_true_lang.BMoSMeM-.js";
-import { f as Oe, B as _e } from "./input-field._keU91LW.js";
+import { f as Oe, B as _e } from "./input-field.BBSr4o-k.js";
 import { h as ye } from "./button-actions.DvuGEQxM.js";
 import { B as H } from "./typography.B6elnWpr.js";
 import { _ as Ee } from "./checkmark-circle-fill.Caog04lx.js";
@@ -350,4 +350,4 @@ export {
   Ie as m,
   Be as r
 };
-//# sourceMappingURL=input-field-password.BXptrVTT.js.map
+//# sourceMappingURL=input-field-password.CFBPscot.js.map

package/dist/chunks/{input-field-password.BXptrVTT.js.map → input-field-password.CFBPscot.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-field-password.BXptrVTT.js","sources":["../../../vue2/src/components/input-field-password/input-field-password.internal.types.ts","../../../vue2/src/components/input-field-password/assets/capslock.svg","../../../vue2/src/components/input-field-password/utilities/input-field-password.validation.ts","../../../vue2/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 = withDefaults(defineProps<BentoInputFieldPasswordProps>(), {\n condensed: false,\n debounceTime: DEBOUNCE_DURATION,\n description: null,\n disabled: false,\n disableValidation: false,\n errorMessage: null,\n label: null,\n optional: false,\n placeholder: '',\n readonly: false,\n required: false,\n tooltipText: null,\n validation: undefined,\n modelValue: undefined,\n withHint: true,\n });\n\n const emit = defineEmits<{\n /\n Emitted when the element has lost focus\n /\n (e: 'blur'): void;\n\n /\n Emitted when the element has received focus\n /\n (e: 'focus'): void;\n\n /\n Emits an `input:valid` event when the value is validated against the provided validations.\n * This emit has a debounce and is emitted after an `input` event.\n /\n (e: 'input:valid'): void;\n\n /\n Emits an `input:error` event when the value fails the validation.\n * This emit has a debounce and is emitted after an `input` event.\n /\n (e: 'input:error', errors: BentoInputFieldPasswordErrorsList): void;\n\n /\n Emits an `update:model-value` event whenever the value in the input is changed.\n /\n (e: 'update:model-value', value: BentoInputFieldPasswordProps['modelValue']): void;\n }>();\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","props","__props","emit","__emit","attrs","useAttrs","inputType","ref","inputValue","isHintDisplayed","isTouched","passwordValidity","errorsList","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","onFocusOut","event","container","checkValidity","emitValue","useFormFieldEmits","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","defaultValidationList","validationList","defaultValidationKeys","rule","customRuleKeys","customValidationList","customRule2","computedValidationList","hasErrors","validation","checkCapsLock","toggleInputType","onUpdateModelValue","onFocus","onBlur","rulesValidityObj","validationItem","customRuleIndex","error","errorsObject","key","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","isCapsLockOn2","watchDebounced","inputValue2"],"mappings":"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"}
1	+ {"version":3,"file":"input-field-password.CFBPscot.js","sources":["../../../vue2/src/components/input-field-password/input-field-password.internal.types.ts","../../../vue2/src/components/input-field-password/assets/capslock.svg","../../../vue2/src/components/input-field-password/utilities/input-field-password.validation.ts","../../../vue2/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 = withDefaults(defineProps<BentoInputFieldPasswordProps>(), {\n condensed: false,\n debounceTime: DEBOUNCE_DURATION,\n description: null,\n disabled: false,\n disableValidation: false,\n errorMessage: null,\n label: null,\n optional: false,\n placeholder: '',\n readonly: false,\n required: false,\n tooltipText: null,\n validation: undefined,\n modelValue: undefined,\n withHint: true,\n });\n\n const emit = defineEmits<{\n /\n Emitted when the element has lost focus\n /\n (e: 'blur'): void;\n\n /\n Emitted when the element has received focus\n /\n (e: 'focus'): void;\n\n /\n Emits an `input:valid` event when the value is validated against the provided validations.\n * This emit has a debounce and is emitted after an `input` event.\n /\n (e: 'input:valid'): void;\n\n /\n Emits an `input:error` event when the value fails the validation.\n * This emit has a debounce and is emitted after an `input` event.\n /\n (e: 'input:error', errors: BentoInputFieldPasswordErrorsList): void;\n\n /\n Emits an `update:model-value` event whenever the value in the input is changed.\n /\n (e: 'update:model-value', value: BentoInputFieldPasswordProps['modelValue']): void;\n }>();\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","props","__props","emit","__emit","attrs","useAttrs","inputType","ref","inputValue","isHintDisplayed","isTouched","passwordValidity","errorsList","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","onFocusOut","event","container","checkValidity","emitValue","useFormFieldEmits","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","defaultValidationList","validationList","defaultValidationKeys","rule","customRuleKeys","customValidationList","customRule2","computedValidationList","hasErrors","validation","checkCapsLock","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.Crxi8Wm7.js → input-field-phone-number.BNAKRBLr.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { defineComponent as Re, ref as Z, provide as De, computed as J, watch as Me, openBlock as Ft, createBlock as Le, unref as ke, mergeProps as Ge, withCtx as xt, createElementBlock as Be, Fragment as je, createTextVNode as _t, toDisplayString as wt, renderSlot as Ot, nextTick as Ue } from "vue";
-import { f as He, B as Ve } from "./input-field._keU91LW.js";
+import { f as He, B as Ve } from "./input-field.BBSr4o-k.js";
 import { u as We } from "./index.CGBfMQdv.js";
 import { u as Ke } from "./form-field.B60VsF8d.js";
 import { p as Ye } from "./typography.B6elnWpr.js";
@@ -3317,4 +3317,4 @@ export {
   S1 as B,
   M1 as i
 };
-//# sourceMappingURL=input-field-phone-number.Crxi8Wm7.js.map
+//# sourceMappingURL=input-field-phone-number.BNAKRBLr.js.map