npm - @adyen/bento-vue3 - Versions diffs - 1.90.0 → 1.92.0 - Mend

@adyen/bento-vue3 1.90.0 → 1.92.0

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 (273) hide show

package/dist/chunks/form-layout-title.Cr3wdpK_.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"form-layout-title.Cr3wdpK_.js","sources":["../../../vue2/src/components/form-layout/form-layout.vue","../../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-tip.types.ts","../../../vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue","../../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.ts","../../../vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue","../../../vue2/src/components/form-layout/components/form-layout-title/form-layout-title.vue"],"sourcesContent":["<template>\n <component :is=\"formLayoutElement\" class=\"b-form-layout\" role=\"form\" @submit=\"emit('submit', $event)\">\n <bento-alert v-if=\"hasSlot('error-message')\" class=\"b-form-layout__error-message\" type=\"critical\">\n <template #description>\n <slot name=\"error-message\" />\n </template>\n </bento-alert>\n\n <slot />\n\n <div v-if=\"hasActions\" class=\"b-form-layout__actions-container\">\n <div class=\"b-form-layout__actions\">\n <slot name=\"actions-left\" />\n </div>\n\n <div class=\"b-form-layout__actions\">\n <slot name=\"actions-right\" />\n </div>\n </div>\n </component>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, provide, toRef, useSlots } from 'vue';\n import { BentoAlert } from '@/components/alert';\n import { useHasSlot } from '@/composables';\n import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types';\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const emit = defineEmits<{\n /**\n * Emits the submit event from the form\n */\n (e: 'submit', event: SubmitEvent): void;\n }>();\n\n const props = defineProps({\n /**\n * Renders the form layout as an HTML `form`\n */\n form: { type: Boolean, default: false },\n\n /**\n * Sets the state of the form and its fields to\n * a read only status.\n */\n loading: { type: Boolean, default: false },\n });\n\n const formLayoutElement = computed(() => (props.form ? 'form' : 'div'));\n const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right'));\n\n provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading'));\n</script>\n\n<script lang=\"ts\">\n /**\n * Form layout component is a pre-designed layout that serves\n * as a starting point for creating a form.\n *\n * It can include various common form components:\n * input field, dropdown, date picker, checkbox group, radio group,\n * textarea, etc.\n *\n * Form layout is context agnostic and can be dropped in different\n * places, for example in modals, side panels or pages.\n *\n * @example\n * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoFormLayout, BentoFormLayoutFieldTip },\n * template: `\n * <bento-form-layout>\n * <template #error-message>There is an error. Correct the highlighted field.</template>\n *\n * <bento-input-field>Input field</bento-input-field>\n *\n * <bento-form-layout-field-tip>\n * <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n * <template #message>This is a small tip that can be used in small spaces</template>\n * </bento-form-layout-field-tip>\n *\n * <bento-form-layout-title subsection>\n * Section title\n * <template #description>Optional section description</template>\n * </bento-form-layout-title>\n * </bento-form-layout>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout.scss\" />\n","import { type BentoAlertTypeOption } from '@/components/alert/alert.types';\n\nexport type BentoFormLayoutFieldTipTypeOption = `${BentoAlertTypeOption}`;\nexport const BentoFormLayoutFieldTipTypeOptions = ['warning', 'critical', 'highlight', 'success'];\n","<template>\n <div class=\"b-form-layout-field-tip\">\n <slot />\n <bento-alert v-if=\"hasSlot('message')\" :id=\"id\" variant=\"tip\" :type=\"type\">\n <template #description>\n <slot name=\"message\" />\n </template>\n </bento-alert>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { type PropType, useSlots } from 'vue';\n import {\n type BentoFormLayoutFieldTipTypeOption,\n BentoFormLayoutFieldTipTypeOptions,\n } from './form-layout-tip.types';\n import { BentoAlert } from '@/components/alert';\n import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n defineProps({\n /**\n * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n * @values highlight, success, critical, warning\n */\n type: {\n type: String as PropType<BentoFormLayoutFieldTipTypeOption>,\n default: 'highlight',\n validator: (value: BentoFormLayoutFieldTipTypeOption) => BentoFormLayoutFieldTipTypeOptions.includes(value),\n },\n /**\n * Unique identifier to the form field. Used for accessibility.\n */\n id: {\n type: String,\n default: undefined,\n },\n });\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n /**\n * You can help users provide accurate and well formatted information\n * by using various elements that come with an input field.\n *\n * Use description/supporting text to add additional context to the\n * field or guidance how to format the input correctly.\n * Because description is always visible it should be the first\n * choice in providing guidance.\n *\n * @example\n * import { BentoFormLayoutFieldTip } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoFormLayoutFieldTip },\n * template: `\n * <bento-form-layout-field-tip>\n * <bento-dropdown label=\"Dropdown\" :items=\"dropdownItems\" placeholder=\"Select an animal\" />\n *\n * <template #message>This is a small tip that can be used in small spaces</template>\n * </bento-form-layout-field-tip>\n * `\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-field-tip.scss\" />\n","export type BentoLayoutGroupProportions =\n | '33-33-33'\n | '50-50'\n | '25-75'\n | '75-25'\n | '33-66'\n | '66-33'\n | '25'\n | '33'\n | '50'\n | '100';\n\nexport const BentoLayoutGroupProportions = [\n '100',\n '50',\n '33',\n '25',\n '66-33',\n '33-66',\n '75-25',\n '25-75',\n '50-50',\n '33-33-33',\n];\n","<template>\n <div class=\"b-form-layout-group\" :class=\"conditionalClasses\">\n <slot></slot>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, type PropType } from 'vue';\n import { BentoLayoutGroupProportions } from './form-layout-group.types';\n\n // Default proportion\n const DEFAULT_PROPORTION = 100;\n\n const props = defineProps({\n /**\n * The layout of the pair group of components.\n * This will render the components within the width of the proportions.\n * Only two colums are available.\n *\n * If only one value is entered, then it will assume there's only one child in the group.\n * If two values are entered, the first value will be use for the first child and the second\n * value for the second child.\n *\n * If the value entered is not listed in the example\n * list below it will use 100% by default.\n * @example\n * '33-33-33'\n * '50-50'\n * '25-75'\n * '75-25'\n * '33-66'\n * '66-33'\n * '25'\n * '33'\n * '50'\n * '100'\n */\n layout: {\n type: String as PropType<BentoLayoutGroupProportions>,\n default: '100',\n validator: (value: BentoLayoutGroupProportions) => BentoLayoutGroupProportions.includes(value),\n },\n });\n\n // Sets DEFAULT_PROPORTION by default if `layout` is not in the list\n const computedLayout = computed(() =>\n BentoLayoutGroupProportions.includes(props.layout) ? props.layout : DEFAULT_PROPORTION\n );\n\n const conditionalClasses = computed(() => ({\n // Transform into column if the layout is unsupported\n 'b-form-layout-group--column': !BentoLayoutGroupProportions.includes(props.layout),\n // Assings the correct layout class\n [`b-form-layout-group--${computedLayout.value}`]: true,\n }));\n</script>\n\n<script lang=\"ts\">\n /**\n * Use to provide horizontal layouts to build forms\n * with two fields per line.\n *\n * These can be used for field combinations,\n * such as post code and city or title and first name.\n *\n * @example\n * import { BentoFormLayoutGroup } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoFormLayoutGroup },\n * template: `\n * <bento-form-layout-group>\n * <first-element />\n * <second-element />\n * </bento-form-layout-group>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-group.scss\" />\n","<template>\n <div class=\"b-form-layout-title\" :class=\"conditionalClasses\">\n <bento-typography :el=\"el\" variant=\"title\" :medium=\"isSection\">\n <slot />\n </bento-typography>\n\n <bento-typography\n v-if=\"hasSlot('description') || allFieldsRequired\"\n class=\"b-form-layout-title__description\"\n el=\"span\"\n wide\n >\n <slot name=\"description\" />\n <template v-if=\"allFieldsRequired\">\n {{ hasSlot('description') ? ` ${t('requiredFields')}` : t('requiredFields') }}\n </template>\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, useSlots } from 'vue';\n import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const slots = useSlots();\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = defineProps({\n /**\n * Defines if the Form Layout title is\n * a \"section\" or a \"subsection\".\n * Default is \"section\" (false). Turn into \"true\" for \"subsection\"\n */\n subsection: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the HTML DOM element.\n * @values h1, h2, h3, h4, h5, h6, div, p, span\n */\n el: {\n type: BentoTypography.props.el.type,\n required: true,\n validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n },\n\n /**\n * Defines if the Form Layout title displays\n * a message indicating that all fields are required.\n */\n allFieldsRequired: {\n type: Boolean,\n default: false,\n },\n });\n\n // Uses \"medium\" typography if it is a section title\n const isSection = computed(() => !props.subsection);\n const hasSlot = useHasSlot(slots);\n const conditionalClasses = computed(() => ({\n 'b-form-layout-title--subsection': props.subsection,\n }));\n</script>\n\n<script lang=\"ts\">\n /**\n * If you’re building a lengthy form, organize related\n * fields into sections and, if needed, subsections.\n *\n * A form can have a \"Section Title\" and multiple \"Subsection titles\".\n *\n * One of the values provided in @see BentoTypographyElement must always be provided as a string\n * to define correct HTML sementic from the application's context\n *\n * @example\n * import { BentoFormLayoutTitle } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoFormLayoutTitle },\n * template: `\n * <bento-form-layout-title subsection el=\"h2\">\n * Title\n * <template #description>Description text</template>\n * </bento-form-layout-title>\n * `\n * }\n */\n export default {\n name: 'bento-form-layout-title',\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./form-layout-title.scss\" />\n"],"names":["__default__$3","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","formLayoutElement","computed","hasActions","provide","FORM_LAYOUT_LOADING_INJECTION_KEY","toRef","BentoFormLayoutFieldTipTypeOptions","__default__$2","BentoLayoutGroupProportions","__default__$1","computedLayout","conditionalClasses","__default__","messages","useI18n","isSection"],"mappings":";;;;;;;;;;;qFA6FIA,IAAA,CAAA;;;;;;;;;;;;;;;;AAjEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GAaAC,IAAAC,EAAA,MAAAH,EAAA,OAAA,SAAA,KAAA,GACAI,IAAAD,EAAA,MAAAP,EAAA,cAAA,KAAAA,EAAA,eAAA,CAAA;AAEA,WAAAS,EAAAC,GAAAC,EAAAP,GAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mECnDGQ,IAAA,CAAA,WAAA,YAAA,aAAA,SAAA,6CC+DHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;AA3BA,UAAAf,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;mEC5BGgB,IAAA;AAAA,EAAoC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAEJ,GCuDIC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjEA,UAAAX,IAAAC,GAgCAW,IAAAT;AAAA,MAAuB,MAAAO,EAAA,SAAAV,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACiD,GAGxEa,IAAAV,EAAA,OAAA;AAAA;AAAA,MAA2C,+BAAA,CAAAO,EAAA,SAAAV,EAAA,MAAA;AAAA;AAAA,MAE0C,CAAA,wBAAAY,EAAA,KAAA,EAAA,GAAA;AAAA,IAE/B,EAAA;;;;;;;;;;;;;;;;;;GCyCtDE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,MAAA,EAAA,UAAAC,EAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApEA,UAAArB,IAAAC,EAAA,GACA,EAAA,EAAA,IAAAqB,EAAA,EAAA,UAAAD,EAAA,CAAA,GAEAf,IAAAC,GAgCAgB,IAAAd,EAAA,MAAA,CAAAH,EAAA,UAAA,GACAJ,IAAAC,EAAAH,CAAA,GACAmB,IAAAV,EAAA,OAAA;AAAA,MAA2C,mCAAAH,EAAA;AAAA,IACE,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/header.BVM8Usdi.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"header.BVM8Usdi.js","sources":["../../../vue2/src/components/header/header.types.ts","../../../vue2/src/components/header/header.vue"],"sourcesContent":["import { type BentoLoadingButtonState } from '../button/components/loading-button/loading-button.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoHeaderVariant {\n PAGE = 'page',\n COMPONENT = 'component',\n}\n\nexport interface BentoHeaderReloadButton {\n title: string;\n event?: (event: Event) => void;\n state?: `${BentoLoadingButtonState}`;\n}\n","<template>\n <header class=\"b-header\" :class=\"conditionalClasses\">\n <div class=\"b-header__wrapper\">\n <div class=\"b-header__title\">\n <div>\n <bento-typography v-bind=\"typography\" class=\"b-header__text\">{{ title }}</bento-typography>\n <info-icon-with-popover\n v-if=\"infoIconTooltipText || hasSlot('infoIconTooltipContent')\"\n class=\"b-header__tooltip\"\n :popover-text=\"infoIconTooltipText\"\n >\n <template v-if=\"hasSlot('infoIconTooltipContent')\" #default\n ><slot name=\"infoIconTooltipContent\"\n /></template>\n </info-icon-with-popover>\n </div>\n </div>\n <header-meta\n v-if=\"description || hasSlot('description') || lastUpdated\"\n class=\"b-header__meta-container\"\n :description=\"description\"\n :last-updated=\"lastUpdated\"\n :reload-button=\"reloadButton\"\n >\n <template v-if=\"hasSlot('description')\" #description><slot name=\"description\" /></template>\n </header-meta>\n <button-actions-with-menu\n v-if=\"actions\"\n :actions=\"actions\"\n :displayed-actions=\"2\"\n class=\"b-header__actions\"\n />\n </div>\n </header>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { InfoIconWithPopover } from '@/internal';\n import { type BentoButtonActionsList } from '@/components/button';\n import { useHasSlot } from '@/composables';\n import { type BentoHeaderReloadButton, BentoHeaderVariant } from './header.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { HeaderMeta } from '@/internal/header-meta';\n import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue';\n\n export default defineComponent({\n name: 'bento-header',\n components: {\n BentoTypography,\n ButtonActionsWithMenu,\n InfoIconWithPopover,\n HeaderMeta,\n },\n props: {\n /**\n * Array of BentoButtonActionsList to show to the right of the title\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * Text showed under the title\n */\n description: { type: String, default: null },\n\n /**\n * Text showed in the info-icon tooltip on hover\n */\n infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null },\n\n /**\n * Popover position of the info icon text.\n */\n infoIconPopoverPosition: {\n type: InfoIconWithPopover.props.popoverPosition.type,\n default: InfoIconWithPopover.props.popoverPosition.default,\n validator: InfoIconWithPopover.props.popoverPosition.validator,\n },\n\n /**\n * JavaScript \"Date\" object for when the content was last updated\n */\n lastUpdated: { type: [Date, Number], default: null },\n\n /**\n * Variant represents type of Header\n * @values page, component\n */\n variant: {\n type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>,\n default: BentoHeaderVariant.PAGE,\n validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value),\n },\n\n /**\n * Text used as a title\n */\n title: { type: String, required: true },\n\n /**\n * Reload button which shows next to the header's timestamp\n * {@see BentoHeaderReloadButton}\n */\n reloadButton: {\n type: Object as PropType<BentoHeaderReloadButton>,\n default: null,\n },\n },\n emits: ['reload'],\n setup(props, { slots }) {\n const conditionalClasses = computed(() => ({\n 'b-header--component': props.variant === BentoHeaderVariant.COMPONENT,\n }));\n\n const typography = computed(() => ({\n el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2,\n variant: BentoTypographyVariant.TITLE,\n medium: props.variant === BentoHeaderVariant.COMPONENT,\n large: props.variant === BentoHeaderVariant.PAGE,\n }));\n return {\n hasSlot: useHasSlot(slots),\n conditionalClasses,\n typography,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./header.scss\" />\n"],"names":["BentoHeaderVariant","BentoHeaderVariant2","_sfc_main","defineComponent","BentoTypography","ButtonActionsWithMenu","InfoIconWithPopover","HeaderMeta","value","props","slots","conditionalClasses","computed","typography","BentoTypographyElement","BentoTypographyVariant","useHasSlot","_component_button_actions_with_menu","resolveComponent","normalizeClass","_ctx","createElementVNode","_hoisted_2","createVNode","_component_bento_typography","mergeProps","withCtx","createTextVNode","toDisplayString","infoIconTooltipText","openBlock","createBlock","_component_info_icon_with_popover","createSlots","renderSlot","createCommentVNode","description","_component_header_meta","reloadButton"],"mappings":"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"}

package/dist/chunks/input-field-password.CHb2Ros_.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"input-field-password.CHb2Ros_.js","sources":["../../../vue2/src/components/input-field-password/input-field-password.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":["import type { BentoInputFieldProps, BentoInputFieldValue } from '@/components/input-field/input-field.types';\nimport { type FormField } from '../../types/form-field';\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: Array<any>) => boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n additionalArgs?: Array<any>;\n disabled?: boolean;\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 extendDefaultValidation?: boolean;\n list: Array<BentoInputFieldPasswordValidationListItem>;\n}\n\nexport interface BentoInputFieldPasswordProps extends FormField {\n /**\n * Reduces height of the input\n */\n condensed?: BentoInputFieldProps['condensed'];\n\n /**\n * The debounce time in milliseconds for running validation and emitting the `input` event after the user has stopped typing.\n * This helps to avoid excessive validation checks on every keystroke. Defaults to `500`.\n */\n debounceTime?: number;\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 * Text displayed as the value of the input-field\n * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead.\n */\n value?: BentoInputFieldProps['value'];\n\n /**\n * Text displayed as the value of the input-field\n */\n modelValue?: BentoInputFieldProps['modelValue'];\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 * - `extendDefaultValidation`: Set to true if you want to add your custom rules to the default validation instead of overriding the list.\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 { 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\">\n <bento-input-field\n ref=\"inputFieldPasswordInputRef\"\n v-bind=\"inputFieldArgs\"\n class=\"b-input-field-password__input\"\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\">\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 type BentoInputFieldPasswordErrorsList,\n type BentoInputFieldPasswordProps,\n BentoInputFieldPasswordType,\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 { useFocusWithin, 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 '@/core/utils/ts';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\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 value: 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 `input` event whenever the value in the input is changed.\n * @deprecated from version 2.0.0. Use `v-model` or `update:model-value` instead.\n */\n (e: 'input', value: BentoInputFieldPasswordProps['value']): 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 ?? props.value);\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 { focused } = useFocusWithin(inputFieldPasswordRef);\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\n const onBlur = () => {\n emit('blur');\n };\n\n const checkValidity = (value: BentoInputFieldPasswordProps['value']) => {\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.value, props.modelValue],\n () => {\n inputValue.value = props.modelValue ?? props.value;\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: props.debounceTime, maxWait: DEBOUNCE_MAX_WAIT }\n );\n\n if (props.value) {\n deprecate(\n 'BentoInputFieldPassword \"value\" property',\n `The use of \"value\" prop in \"BentoInputFieldPassword\" is no longer supported.\n Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\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' },\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","focused","useFocusWithin","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","checkValidity","rulesValidityObj","validationItem","customRuleIndex","error","errorsObject","key","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","focused2","isCapsLockOn2","watchDebounced","inputValue2","deprecate"],"mappings":"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"}

package/dist/chunks/input-field.DnYjM6yy.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/chunks/input-time.DeJ8lDio.js DELETED Viewed

@@ -1,103 +0,0 @@
-import { defineComponent as I, useSlots as _, ref as b, computed as B, watch as D, openBlock as V, createBlock as S, unref as d, mergeProps as $, createSlots as k, withCtx as p, renderSlot as m, createTextVNode as w, toDisplayString as x } from "vue";
-import { B as E } from "./input-field.DnYjM6yy.js";
-import { d as M } from "./debounce.DUTu11PS.js";
-import { u as A } from "./index.B875RXHM.js";
-import { u as F } from "./use-has-slot.CyMiImRQ.js";
-import { _ as C } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/input-time.css";
-const N = /[\d]/, q = /^\d{2}$/, K = /^\d{2}:\d{2}$/, f = (o) => /^(?:[01]\d|2[0-4]):(?:[0-5]\d):(?:[0-5]\d)$/.test(o), L = (o) => {
-  const { selectionStart: t } = o.target, n = ["Backspace", "Tab", "ArrowLeft", "ArrowRight"], i = N.test(o.key) || n.includes(o.key), u = [1, 2, 4, 5].includes(t) && o.key === ":";
-  !i && !u && o.preventDefault();
-}, O = (o) => {
-  if (!o)
-    return o;
-  let t = o;
-  if (t.length === 1 && parseInt(o, 10) > 2)
-    return `0${t}:`;
-  const [n, i] = t.slice(-2);
-  return [2, 5].includes(t.length) && i === ":" && (t = `${t.slice(0, t.length - 2)}0${n}`), (q.test(t) || K.test(t)) && (t += ":"), t;
-}, g = {
-  "en-US": { invalidTimeFormat: "Invalid time format", timeFormatDescription: "HH:MM:SS" }
-}, R = {
-  i18n: { messages: g },
-  name: "bento-input-time",
-  inheritAttrs: !1,
-  model: { prop: "modelValue" }
-}, U = /* @__PURE__ */ I({
-  ...R,
-  props: {
-    condensed: { type: Boolean, default: !1 },
-    modelValue: { default: void 0 },
-    description: { default: void 0 },
-    disabled: { type: Boolean, default: !1 },
-    errorMessage: { default: null },
-    label: { default: "" },
-    optional: { type: Boolean, default: !1 },
-    placeholder: { default: "" },
-    readonly: { type: Boolean, default: !1 },
-    required: { type: Boolean, default: !1 },
-    tooltipText: { default: null }
-  },
-  emits: ["update:model-value", "keydown", "input:valid", "input:error"],
-  setup(o, { emit: t }) {
-    const i = _(), u = F(i), { t: c } = A({ messages: g }), e = o, r = t, s = b(!1), y = B(() => e.errorMessage ? e.errorMessage : s.value ? c("invalidTimeFormat") : null), T = M((l) => {
-      if (!l) {
-        s.value = !1;
-        return;
-      }
-      const a = f(l);
-      s.value = !a, r(a ? "input:valid" : "input:error");
-    }, 300);
-    D(
-      () => e.modelValue,
-      (l) => {
-        const a = String(l ?? "");
-        a.length === 8 && f(a) && (s.value = !1);
-      }
-    );
-    const v = (l) => {
-      if (e.disabled || e.readonly)
-        return;
-      const a = O(String(l ?? ""));
-      r("update:model-value", a), T(a);
-    }, h = (l) => {
-      L(l), r("keydown", l);
-    };
-    return (l, a) => (V(), S(d(E), $({
-      class: "b-input-time",
-      condensed: e.condensed,
-      disabled: e.disabled,
-      "error-message": y.value,
-      label: e.label,
-      "model-value": e.modelValue,
-      optional: e.optional,
-      placeholder: e.placeholder,
-      readonly: e.readonly,
-      required: e.required,
-      "tooltip-text": e.tooltipText
-    }, l.$attrs, {
-      "onUpdate:modelValue": v,
-      onKeydown: h
-    }), k({
-      description: p(() => [
-        m(l.$slots, "description", {}, () => [
-          w(x(e.description ? `${e.description} ${d(c)("timeFormatDescription")}` : d(c)("timeFormatDescription")), 1)
-        ], !0)
-      ]),
-      _: 2
-    }, [
-      d(u)("default") ? {
-        name: "default",
-        fn: p(() => [
-          m(l.$slots, "default", {}, void 0, !0)
-        ]),
-        key: "0"
-      } : void 0
-    ]), 1040, ["condensed", "disabled", "error-message", "label", "model-value", "optional", "placeholder", "readonly", "required", "tooltip-text"]));
-  }
-}), Q = /* @__PURE__ */ C(U, [["__scopeId", "data-v-250fa173"]]);
-export {
-  Q as B,
-  f as i
-};
-//# sourceMappingURL=input-time.DeJ8lDio.js.map

package/dist/chunks/input-time.DeJ8lDio.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"input-time.DeJ8lDio.js","sources":["../../../vue2/src/utils/ts/time-input.ts","../../../vue2/src/components/input-time/input-time.vue"],"sourcesContent":["const validDigitRegex = /[\\d]/;\n\nconst hourRegex = /^\\d{2}$/;\nconst minuteRegex = /^\\d{2}:\\d{2}$/;\n\n/**\n * Validates a complete time string in HH:MM:SS format.\n * Hours: 00-24, Minutes: 00-59, Seconds: 00-59\n * @param timeText The time string to validate\n * @returns True if the time string is valid, false otherwise\n */\nexport const isValidTimeString = (timeText: string): boolean =>\n /^(?:[01]\\d|2[0-4]):(?:[0-5]\\d):(?:[0-5]\\d)$/.test(timeText);\n\nexport const validateTimeInput = (event: KeyboardEvent) => {\n const { selectionStart } = event.target as HTMLInputElement;\n\n const allowedKeys = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight'];\n const isValidKey = validDigitRegex.test(event.key) || allowedKeys.includes(event.key);\n const isValidColon = [1, 2, 4, 5].includes(selectionStart) && event.key === ':';\n\n if (!isValidKey && !isValidColon) {\n event.preventDefault();\n }\n};\n\nexport const formatTimeInputValue = (value: string) => {\n if (!value) {\n return value;\n }\n\n let formattedValue = value;\n\n // Format if the first value is bigger than 2, because it can't be bigger than 24 hours\n if (formattedValue.length === 1 && parseInt(value, 10) > 2) {\n return `0${formattedValue}:`;\n }\n\n const [secondToLastDigit, lastDigit] = formattedValue.slice(-2);\n if ([2, 5].includes(formattedValue.length) && lastDigit === ':') {\n formattedValue = `${formattedValue.slice(0, formattedValue.length - 2)}0${secondToLastDigit}`;\n }\n\n // Add `:` after hour/minute\n if (hourRegex.test(formattedValue) || minuteRegex.test(formattedValue)) {\n formattedValue += ':';\n }\n return formattedValue;\n};\n","<template>\n <bento-input-field\n class=\"b-input-time\"\n :condensed=\"props.condensed\"\n :disabled=\"props.disabled\"\n :error-message=\"computedErrorMessage\"\n :label=\"props.label\"\n :model-value=\"props.modelValue\"\n :optional=\"props.optional\"\n :placeholder=\"props.placeholder\"\n :readonly=\"props.readonly\"\n :required=\"props.required\"\n :tooltip-text=\"props.tooltipText\"\n v-bind=\"$attrs\"\n @update:model-value=\"onInput\"\n @keydown=\"onKeyDown\"\n >\n <template v-if=\"hasSlot('default')\" #default>\n <slot name=\"default\"></slot>\n </template>\n <template #description>\n <slot name=\"description\">{{\n props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription')\n }}</slot>\n </template>\n </bento-input-field>\n</template>\n\n<script setup lang=\"ts\">\n // Components\n import { BentoInputField } from '@/components/input-field';\n\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { useI18n } from '@/utils/ts/i18n';\n import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input';\n\n // Types\n import type { BentoInputFieldValue } from '@/components/input-field/input-field.types';\n import { type BentoInputTimeProps } from './input-time.types';\n\n // Localization\n import messages from './messages.json';\n\n import { computed, ref, useSlots, watch } from 'vue';\n import { useHasSlot } from '@/composables';\n\n const VALIDATION_DEBOUNCE_TIME = 300;\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n type MessageSchema = (typeof messages)['en-US'];\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = withDefaults(defineProps<BentoInputTimeProps>(), {\n condensed: false,\n description: undefined,\n disabled: false,\n errorMessage: null,\n label: '',\n modelValue: undefined,\n optional: false,\n placeholder: '',\n readonly: false,\n required: false,\n tooltipText: null,\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the component's model changes\n */\n (e: 'update:model-value', value: BentoInputFieldValue): void;\n\n /**\n * Emitted when a key is pressed down\n */\n (e: 'keydown', event: KeyboardEvent): void;\n\n /**\n * Emitted when the time value passes validation (complete HH:MM:SS format)\n */\n (e: 'input:valid'): void;\n\n /**\n * Emitted when the time value fails validation\n */\n (e: 'input:error'): void;\n }>();\n\n const internalError = ref(false);\n\n const computedErrorMessage = computed(() => {\n if (props.errorMessage) {\n return props.errorMessage;\n }\n return internalError.value ? t('invalidTimeFormat') : null;\n });\n\n const validateTime = (timeText: string) => {\n if (!timeText) {\n internalError.value = false;\n return;\n }\n\n const isValid = isValidTimeString(timeText);\n internalError.value = !isValid;\n\n if (isValid) {\n emit('input:valid');\n } else {\n emit('input:error');\n }\n };\n\n const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME);\n\n // Watch for external modelValue changes (e.g., when parent resets the value)\n watch(\n () => props.modelValue,\n newValue => {\n const timeText = String(newValue ?? '');\n // Clear the error only when the new value is a complete, valid time string\n if (timeText.length === 8 && isValidTimeString(timeText)) {\n internalError.value = false;\n }\n }\n );\n\n const onInput = (value: BentoInputFieldValue) => {\n if (props.disabled || props.readonly) {\n return;\n }\n const formatted = formatTimeInputValue(String(value ?? ''));\n emit('update:model-value', formatted);\n validateTimeWithDebounce(formatted);\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n validateTimeInput(event);\n emit('keydown', event);\n };\n</script>\n\n<script lang=\"ts\">\n /**\n * Input time component for entering time values in HH:MM:SS format.\n * This is an extension of the `bento-input-field` component with built-in\n * time formatting and validation logic.\n *\n * @usage\n * import { BentoInputTime } from '@adyen/bento-vue2';\n *\n * const timeValue = ref('');\n *\n * export default {\n * components: { BentoInputTime },\n * template: `\n * <bento-input-time\n * label=\"Start time\"\n * :model-value=\"timeValue\"\n * @update:model-value=\"newValue => timeValue.value = newValue\"\n * />\n * `\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-input-time',\n inheritAttrs: false,\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-time.scss\" />\n"],"names":["validDigitRegex","hourRegex","minuteRegex","isValidTimeString","timeText","validateTimeInput","event","selectionStart","allowedKeys","isValidKey","isValidColon","formatTimeInputValue","value","formattedValue","secondToLastDigit","lastDigit","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","props","__props","emit","__emit","internalError","ref","computedErrorMessage","computed","validateTimeWithDebounce","debounce","isValid","watch","newValue","onInput","formatted","onKeyDown"],"mappings":";;;;;;;AAAA,MAAAA,IAAA,QAEAC,IAAA,WACAC,IAAA,iBAQOC,IAAA,CAAAC,MAAA,8CAAA,KAAAA,CAAA,GAGAC,IAAA,CAAAC,MAAA;AACH,QAAA,EAAA,gBAAAC,EAAA,IAAAD,EAAA,QAEAE,IAAA,CAAA,aAAA,OAAA,aAAA,YAAA,GACAC,IAAAT,EAAA,KAAAM,EAAA,GAAA,KAAAE,EAAA,SAAAF,EAAA,GAAA,GACAI,IAAA,CAAA,GAAA,GAAA,GAAA,CAAA,EAAA,SAAAH,CAAA,KAAAD,EAAA,QAAA;AAEA,EAAA,CAAAG,KAAA,CAAAC,KACIJ,EAAA,eAAA;AAER,GAEOK,IAAA,CAAAC,MAAA;AACH,MAAA,CAAAA;AACI,WAAAA;AAGJ,MAAAC,IAAAD;AAGA,MAAAC,EAAA,WAAA,KAAA,SAAAD,GAAA,EAAA,IAAA;AACI,WAAA,IAAAC,CAAA;AAGJ,QAAA,CAAAC,GAAAC,CAAA,IAAAF,EAAA,MAAA,EAAA;AACA,SAAA,CAAA,GAAA,CAAA,EAAA,SAAAA,EAAA,MAAA,KAAAE,MAAA,QACIF,IAAA,GAAAA,EAAA,MAAA,GAAAA,EAAA,SAAA,CAAA,CAAA,IAAAC,CAAA,MAIJb,EAAA,KAAAY,CAAA,KAAAX,EAAA,KAAAW,CAAA,OACIA,KAAA,MAEJA;AACJ;;GCuHIG,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAAA,EACX,cAAA;AAAA,EACQ,OAAA,EAAA,MAAA,aAAA;AAElB;;;;;;;;;;;;;;;;;AA3HA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAGA,EAAA,GAAAI,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GAEAO,IAAAC,GAcAC,IAAAC,GAsBAC,IAAAC,EAAA,EAAA,GAEAC,IAAAC,EAAA,MACIP,EAAA,eACIA,EAAA,eAEJI,EAAA,QAAAN,EAAA,mBAAA,IAAA,IAAsD,GAmB1DU,IAAAC,EAhBA,CAAA7B,MAAA;AACI,UAAA,CAAAA,GAAA;AACI,QAAAwB,EAAA,QAAA;AACA;AAAA,MAAA;AAGJ,YAAAM,IAAA/B,EAAAC,CAAA;AACA,MAAAwB,EAAA,QAAA,CAAAM,GAGIR,EADJQ,IACI,gBAEA,aAFA;AAAA,IAGJ,GAGJ,GAAA;AAGA,IAAAC;AAAA,MAAA,MAAAX,EAAA;AAAA,MACgB,CAAAY,MAAA;AAER,cAAAhC,IAAA,OAAAgC,KAAA,EAAA;AAEA,QAAAhC,EAAA,WAAA,KAAAD,EAAAC,CAAA,MACIwB,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAAS,IAAA,CAAAzB,MAAA;AACI,UAAAY,EAAA,YAAAA,EAAA;AACI;AAEJ,YAAAc,IAAA3B,EAAA,OAAAC,KAAA,EAAA,CAAA;AACA,MAAAc,EAAA,sBAAAY,CAAA,GACAN,EAAAM,CAAA;AAAA,IAAkC,GAGtCC,IAAA,CAAAjC,MAAA;AACI,MAAAD,EAAAC,CAAA,GACAoB,EAAA,WAAApB,CAAA;AAAA,IAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/isSameWeek.Dj6luS8h.js DELETED Viewed

@@ -1,14 +0,0 @@
-import { n as s } from "./en-US.CCazFVNP.js";
-import { s as r } from "./startOfWeek.Cvmo-f5J.js";
-function o(a, t, e) {
-  const [i, m] = s(
-    e?.in,
-    a,
-    t
-  );
-  return +r(i, e) == +r(m, e);
-}
-export {
-  o as i
-};
-//# sourceMappingURL=isSameWeek.Dj6luS8h.js.map

package/dist/chunks/on-click-outside.ZUMLlxE_.js DELETED Viewed

@@ -1,90 +0,0 @@
-import { watch as P } from "vue";
-import { n as A, u, r as k, d as w, i as v } from "./utils.DWmc2mUI.js";
-const I = (o) => typeof o == "string";
-function m(...o) {
-  let c, n, r, a;
-  if (I(o[0]) || Array.isArray(o[0]) ? ([n, r, a] = o, c = w) : [c, n, r, a] = o, !c)
-    return A;
-  Array.isArray(n) || (n = [n]), Array.isArray(r) || (r = [r]);
-  const l = [], p = () => {
-    l.forEach((s) => s()), l.length = 0;
-  }, i = (s, d, e, t) => (s.addEventListener(d, e, t), () => s.removeEventListener(d, e, t)), f = P(
-    () => [u(c), k(a)],
-    ([s, d]) => {
-      p(), s && l.push(
-        ...n.flatMap(
-          (e) => r.map(
-            (t) => i(
-              s,
-              e,
-              t,
-              d
-            )
-          )
-        )
-      );
-    },
-    { immediate: !0, flush: "post" }
-  );
-  return () => {
-    f(), p();
-  };
-}
-let E = !1;
-function W(o, c, n = {}) {
-  const { window: r = w, ignore: a = [], capture: l = !0, detectIframe: p = !1 } = n;
-  if (!r)
-    return;
-  v && !E && (E = !0, Array.from(r.document.body.children).forEach((e) => e.addEventListener("click", A)));
-  let i = !0;
-  const f = (e) => (
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    a.some((t) => {
-      if (typeof t == "string")
-        return Array.from(r.document.querySelectorAll(t)).some(
-          (y) => y === e.target || e.composedPath().includes(y)
-        );
-      const h = u(t);
-      return h && (e.target === h || e.composedPath().includes(h));
-    })
-  ), s = [
-    m(r, "click", (e) => {
-      const t = u(o);
-      if (!(!t || t === e.target || e.composedPath().includes(t))) {
-        if (e.detail === 0 && (i = !f(e)), !i) {
-          i = !0;
-          return;
-        }
-        c(e);
-      }
-    }, { passive: !0, capture: l }),
-    m(
-      r,
-      "pointerdown",
-      (e) => {
-        const t = u(o);
-        t && (i = !e.composedPath().includes(t) && !f(e));
-      },
-      { passive: !0 }
-    ),
-    m(
-      r,
-      "pointerup",
-      (e) => {
-        const t = u(o);
-        t && (i = i && !e.composedPath().includes(t) && !f(e));
-      },
-      { passive: !0 }
-    ),
-    p && m(r, "blur", (e) => {
-      const t = u(o);
-      r.document.activeElement?.tagName === "IFRAME" && !t?.contains(r.document.activeElement) && c(e);
-    })
-  ].filter(Boolean);
-  return () => s.forEach((e) => e());
-}
-export {
-  W as o,
-  m as u
-};
-//# sourceMappingURL=on-click-outside.ZUMLlxE_.js.map

package/dist/chunks/on-click-outside.ZUMLlxE_.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"on-click-outside.ZUMLlxE_.js","sources":["../../../vue2/src/directives/click-outside/useEventListener/index.ts","../../../vue2/src/directives/click-outside/on-click-outside.ts"],"sourcesContent":["import type { Fn } from '@/types/functions';\nimport type { MaybeComputedRef } from '@/types/refs';\nimport type { Arrayable, GeneralEventListener } from './types';\nimport { watch } from 'vue';\nimport { defaultWindow, noop, resolveUnref, unrefElement } from '../utils';\n\n/**\n * Verify type of input value\n * @param val Value to be evaluated as string\n * @returns {boolean} true if the value is a \"string\", false if it's something else\n */\nconst isString = (val: unknown): val is string => typeof val === 'string';\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 1: Omitted Window target\n *\n * @see https://vueuse.org/useEventListener\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n event: Arrayable<E>,\n listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => unknown>,\n options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 2: Explicitly Window target\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n target: Window,\n event: Arrayable<E>,\n listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => unknown>,\n options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 3: Explicitly Document target\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<E extends keyof DocumentEventMap>(\n target: DocumentOrShadowRoot,\n event: Arrayable<E>,\n listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => unknown>,\n options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 4: Custom event target with event type infer\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<Names extends string, EventType = Event>(\n target: EventTarget,\n event: Arrayable<Names>,\n listener: Arrayable<GeneralEventListener<EventType>>,\n options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 5: Custom event target fallback\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<EventType = Event>(\n target: MaybeComputedRef<EventTarget | null | undefined>,\n event: Arrayable<string>,\n listener: Arrayable<GeneralEventListener<EventType>>,\n options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\nexport function useEventListener(...args) {\n let target: MaybeComputedRef<EventTarget> | undefined;\n let events: Arrayable<string>;\n let listeners: Arrayable<EventListenerOrEventListenerObject>;\n let options: MaybeComputedRef<boolean | AddEventListenerOptions> | undefined;\n\n if (isString(args[0]) || Array.isArray(args[0])) {\n [events, listeners, options] = args;\n target = defaultWindow;\n } else {\n [target, events, listeners, options] = args;\n }\n\n if (!target) {\n return noop;\n }\n\n if (!Array.isArray(events)) {\n events = [events];\n }\n\n if (!Array.isArray(listeners)) {\n listeners = [listeners];\n }\n\n const cleanups: Array<() => void> = [];\n const cleanup = () => {\n cleanups.forEach(fn => fn());\n cleanups.length = 0;\n };\n\n const register = (\n el: EventTarget,\n event: string,\n listener: EventListenerOrEventListenerObject,\n registerOptions: boolean | AddEventListenerOptions\n ) => {\n // eslint-disable-next-line scanjs-rules/call_addEventListener\n el.addEventListener(event, listener, registerOptions);\n return () => el.removeEventListener(event, listener, registerOptions);\n };\n\n const stopWatch = watch(\n () => [unrefElement(target as any), resolveUnref(options)],\n ([el, stopWatchOptions]) => {\n cleanup();\n\n if (!el) {\n return;\n }\n\n cleanups.push(\n ...(events as Array<string>).flatMap(event =>\n (listeners as Array<EventListenerOrEventListenerObject>).map(listener =>\n register(\n el as EventTarget,\n event,\n listener as EventListenerOrEventListenerObject,\n stopWatchOptions as boolean | AddEventListenerOptions\n )\n )\n )\n );\n },\n { immediate: true, flush: 'post' }\n );\n\n const stop = () => {\n stopWatch();\n cleanup();\n };\n\n return stop;\n}\n","import type { Fn } from '@/types/functions';\nimport type { MaybeElementRef } from '@/types/elements';\nimport type { OnClickOutsideHandler, OnClickOutsideOptions } from './types';\nimport { useEventListener } from './useEventListener';\nimport { defaultWindow, isIOS, noop, unrefElement } from './utils';\n\n// eslint-disable-next-line no-underscore-dangle\nlet _iOSWorkaround = false;\n\n/**\n * Listen for clicks outside of an element.\n *\n * @see https://vueuse.org/onClickOutside\n * @param target\n * @param handler\n * @param options\n */\nexport function onClickOutside<T extends OnClickOutsideOptions>(\n target: MaybeElementRef,\n handler: OnClickOutsideHandler,\n options: T = {} as T\n) {\n const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;\n\n if (!window) {\n return;\n }\n\n // Fixes \"onClickOutside not working on Safari iOS\": https://github.com/vueuse/vueuse/issues/1520\n // How it works: https://stackoverflow.com/a/39712411\n if (isIOS && !_iOSWorkaround) {\n _iOSWorkaround = true;\n // eslint-disable-next-line scanjs-rules/call_addEventListener\n Array.from(window.document.body.children).forEach((el: Element) => el.addEventListener('click', noop));\n }\n\n let shouldListen = true;\n\n const shouldIgnore = (event: PointerEvent) =>\n // eslint-disable-next-line @typescript-eslint/no-shadow\n ignore.some(target => {\n if (typeof target === 'string') {\n return Array.from(window.document.querySelectorAll(target)).some(\n (el: Element) => el === event.target || event.composedPath().includes(el)\n );\n }\n\n const el = unrefElement(target as any) as EventTarget;\n return el && (event.target === el || event.composedPath().includes(el));\n });\n\n const listener = (event: PointerEvent) => {\n const el = unrefElement(target as any) as EventTarget;\n\n if (!el || el === event.target || event.composedPath().includes(el)) {\n return;\n }\n\n if (event.detail === 0) {\n shouldListen = !shouldIgnore(event);\n }\n\n if (!shouldListen) {\n shouldListen = true;\n return;\n }\n\n handler(event);\n };\n\n const cleanup = [\n useEventListener(window, 'click', listener, { passive: true, capture }),\n useEventListener(\n window,\n 'pointerdown',\n e => {\n const el = unrefElement(target as any) as EventTarget;\n if (el) {\n shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);\n }\n },\n { passive: true }\n ),\n useEventListener(\n window,\n 'pointerup',\n e => {\n const el = unrefElement(target as any) as EventTarget;\n if (el) {\n shouldListen = shouldListen && !e.composedPath().includes(el) && !shouldIgnore(e);\n }\n },\n { passive: true }\n ),\n detectIframe &&\n useEventListener(window, 'blur', event => {\n const el: Element = unrefElement(target as any);\n if (\n window.document.activeElement?.tagName === 'IFRAME' &&\n !el?.contains(window.document.activeElement)\n ) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n handler(event as any);\n }\n }),\n ].filter(Boolean) as Array<Fn>;\n\n const stop = () => cleanup.forEach(fn => fn());\n\n // eslint-disable-next-line consistent-return\n return stop;\n}\n"],"names":["isString","val","useEventListener","args","target","events","listeners","options","defaultWindow","noop","cleanups","cleanup","fn","register","el","event","listener","registerOptions","stopWatch","watch","unrefElement","resolveUnref","stopWatchOptions","_iOSWorkaround","onClickOutside","handler","window","ignore","capture","detectIframe","isIOS","shouldListen","shouldIgnore"],"mappings":"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"}

package/dist/chunks/radio-group.DzhQgXv9.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"radio-group.DzhQgXv9.js","sources":["../../../vue2/src/components/radio-group/components/radio-button/radio-button.vue","../../../vue2/src/components/radio-group/radio-group.types.ts","../../../vue2/src/components/radio-group/radio-group.vue"],"sourcesContent":["<template>\n <div class=\"b-radio-button\" data-testid=\"radio-button-container\" :class=\"conditionalClassContainer\">\n <radio-input\n :id=\"radioButtonId\"\n ref=\"radioInputRef\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"hasSlot('description') ? descriptionId : ''\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n :readonly=\"readonly\"\n :has-error=\"hasError\"\n :value=\"value\"\n :model-value=\"modelValue\"\n :name=\"name\"\n @update:model-value=\"onChange\"\n />\n <div>\n <label v-if=\"hasSlot('default')\" :for=\"radioButtonId\" class=\"b-radio-button__label-container\">\n <span v-if=\"hasSlot('default')\" class=\"b-radio-button__primary-label\">\n <bento-typography class=\"b-radio-button__label\" el=\"span\" variant=\"body\"><slot /></bento-typography>\n <bento-tag v-if=\"tag\" class=\"b-radio-button__label-tag\" v-bind=\"tag\" />\n </span>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n class=\"b-radio-button__description\"\n el=\"span\"\n variant=\"body\"\n >\n <slot name=\"description\"></slot>\n </bento-typography>\n </label>\n <bento-typography v-if=\"hasSlot('content') && isChecked\" class=\"b-radio-button__content\" el=\"div\">\n <slot name=\"content\"></slot>\n </bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTag } from '@/components/tag';\n import { BentoTypography } from '@/components/typography';\n import { RadioInput } from '../../../internal/radio-input';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/core/utils/ts';\n import { computed, type ComputedRef, type PropType, ref, toRefs, useSlots } from 'vue';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import { BentoRadioButtonStateClass, type BentoRadioButtonTag, type BentoRadioButtonValue } from './radio-button.types';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const props = defineProps({\n /**\n * Disable the radio button (optional)\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Shows bento-radio-button in error state (optional)\n */\n hasError: { type: Boolean, default: false },\n\n /**\n * This property should not be used directly.\n * It will be used by v-model directive on radio component.\n */\n modelValue: {\n type: [String, Number] as PropType<BentoRadioButtonValue>,\n default: null,\n },\n\n /**\n * Sets the radio button to readonly (optional)\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * Sets the properties of the BentoTag component that is placed next to the label.\n * {@see BentoTag}\n */\n tag: { type: Object as PropType<BentoRadioButtonTag>, default: undefined },\n\n /**\n * Indicates the value of the input that will be returned when it's checked\n */\n value: {\n type: [String, Number] as PropType<BentoRadioButtonValue>,\n required: true,\n },\n\n /**\n * Sets the name of the radio input.\n * Used for differentiating radio groups or accessing input via form submission.\n */\n name: {\n type: String,\n default: null,\n },\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the radio button is clicked. Enables Vue2 \"v-model\"\n */\n (e: 'input', value: BentoRadioButtonValue);\n\n /**\n * Emitted when the radio button is clicked. Enables Vue3 \"v-model\"\n */\n (e: 'update:model-value', value: BentoRadioButtonValue);\n }>();\n\n const { value } = toRefs(props);\n const radioButtonId = generateUid('bento-radio-button');\n const descriptionId = generateUid('description');\n const radioInputRef = ref(null);\n\n useDefaultSlotValidator('bento-radio-button', slots.default, slots.description);\n\n const conditionalClassContainer = computed(() => ({\n [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled,\n [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly,\n }));\n\n const ariaLabel = useAriaLabel({\n ariaLabel: getSlotText(slots)('default'),\n label: value.value as string,\n });\n\n const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue);\n\n const onChange = () => {\n if (!props.disabled && !props.readonly) {\n emit('update:model-value', props.value);\n emit('input', props.value);\n }\n };\n\n const focus = () => {\n radioInputRef.value.focus();\n };\n\n defineExpose({\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * Radio buttons are used when two or more options are mutually exclusive,\n * the user can only select a single option from a list of pre-defined options.\n * The label tag area is also clickable.\n * Only to be used internally.\n *\n * @example\n * import { BentoRadioButton } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoRadioButton },\n * template: `\n * <bento-radio-button\n * disabled\n * value=\"inputRadio\"\n * model-value.sync=\"modelValue\"\n * >\n * Label text\n * <template #description>Description text below label</template>\n * <template #content>Content shown when checked</template>\n * </bento-radio-button>\n * `,\n * setup() {\n * const modelValue = ref('anyValue')\n * const value = 'option-value'\n *\n * return {\n * modelValue,\n * value,\n * }\n * }\n * }\n */\n export default {\n name: 'bento-radio-button',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-button.scss\" />\n","import type { FormField, FormFieldEmits } from '../../types/form-field';\nimport type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoRadioGroupVariant {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n\nexport type BentoRadioGroupValue = BentoRadioButtonValue;\n\nexport interface BentoRadioGroupItem {\n value: BentoRadioGroupValue;\n label: string;\n description?: string;\n disabled?: boolean;\n readonly?: boolean;\n hasError?: boolean;\n tag?: BentoRadioButtonTag;\n}\n\nexport type BentoRadioGroupItems = Array<BentoRadioGroupItem>;\n\nexport type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>;\n\nexport interface BentoRadioGroupProps extends FormField {\n /**\n * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone.\n * @default null\n */\n formId?: string | null;\n\n /**\n * If set to true, renders all bento-radio-buttons in the group in an error state.\n * @deprecated Use \"errorMessage\" prop instead\n * @default false\n */\n hasError?: boolean;\n\n /**\n * Shows/hides the group label.\n * @default null\n */\n hideLabel?: boolean | null;\n\n /**\n * The radio group's items.\n * Required.\n */\n items: BentoRadioGroupItems;\n\n /**\n * The name associated with the group. Required for accessibility purposes.\n * Required.\n */\n label: string;\n\n /**\n * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value.\n * Defaults to no value selected.\n * @default null\n */\n modelValue?: BentoRadioGroupValue | null;\n\n /**\n * The radio group's layout. It can be vertical or horizontal. Defaults to vertical.\n * @default BentoRadioGroupVariant.VERTICAL\n */\n variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`;\n}\n","<template>\n <div class=\"b-radio-group\">\n <controls-group\n class=\"b-radio-group__buttons\"\n :aria-describedby=\"shouldShowErrorMessage ? errorId : ''\"\n :aria-required=\"required\"\n :component-name=\"COMPONENT_NAME\"\n :class=\"conditionalClasses\"\n :description=\"description\"\n :disabled=\"disabled\"\n :form=\"formId\"\n :label=\"label\"\n :optional=\"optional\"\n :required=\"required\"\n :hide-label=\"hideLabel\"\n :tooltip-text=\"tooltipText\"\n role=\"radiogroup\"\n :aria-readonly=\"isReadOnly\"\n >\n <bento-radio-button\n v-for=\"item in items\"\n ref=\"radioButton\"\n :key=\"item.value\"\n :model-value=\"inputValue\"\n :value=\"item.value\"\n :disabled=\"disabled || item.disabled\"\n :readonly=\"isReadOnly || item.readonly\"\n :has-error=\"shouldShowError || item.hasError\"\n :tag=\"item.tag\"\n :name=\"formId || label\"\n @update:model-value=\"onUpdateModelValue\"\n >\n <template #default>{{ item.label }}</template>\n <template v-if=\"item.description\" #description>{{ item.description }}</template>\n <template v-if=\"hasSlot('content') && isVertical\" #content>\n <slot name=\"content\"></slot>\n </template>\n </bento-radio-button>\n <template v-if=\"hasSlot('description')\" #description>\n <slot name=\"description\" />\n </template>\n </controls-group>\n <error-message\n v-if=\"shouldShowErrorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-radio-group__error-message\"\n />\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, toRef, useSlots, watch } from 'vue';\n import { ControlsGroup, ErrorMessage } from '@/components/internal';\n import { BentoRadioButton } from './components/radio-button';\n import { useHasSlot } from '@/composables';\n import { generateUid } from '@/core/utils/ts';\n import { deprecate } from '@/utils/ts/deprecate';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types';\n import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n /**\n * The name of the component to be used in the Vue devtools and console warnings.\n */\n const COMPONENT_NAME = 'bento-radio-group';\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const emit = defineEmits<BentoRadioGroupEmits>();\n\n const props = withDefaults(defineProps<BentoRadioGroupProps>(), {\n description: null,\n disabled: false,\n errorMessage: null,\n formId: null,\n hasError: false,\n hideLabel: null,\n modelValue: null,\n optional: false,\n readonly: false,\n required: false,\n tooltipText: null,\n variant: BentoRadioGroupVariant.VERTICAL,\n });\n\n const inputValue = toRef(props, 'modelValue');\n const errorId = generateUid('error');\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n const { emitValue } = useFormFieldEmits(emit);\n const radioButton = ref(null);\n\n const shouldShowError = computed(\n () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError)\n );\n const shouldShowErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage);\n\n const conditionalClasses = computed(() => ({\n 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL,\n }));\n\n // Content slot logic\n const isVertical = computed(() => props.variant === 'vertical');\n const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value);\n\n const onUpdateModelValue = value => {\n emitValue(value);\n };\n\n if (props.hasError) {\n deprecate(\n 'BentoRadioGroup \"hasError\" property',\n `Use the BentoRadioGroup \"errorMessage\" property instead to indicate that there is a modifier error.\n Having the field as \"undefined\" will hide/remove the error.\n <bento-radio-group errorMessage=\"Error message text\" />`,\n '2.0.0'\n );\n }\n\n watch(\n shouldShowSlotError,\n newVal => {\n if (newVal) {\n throw new Error('The content slot is only available for the vertical radio group layout');\n }\n },\n {\n immediate: true,\n }\n );\n\n const focus = () => {\n radioButton.value[0].focus();\n };\n\n defineExpose({\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * A radio group component should be used whenever it is necessary to use a set of radio buttons\n * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n *\n * import { BentoRadioGroup } from '@adyen/bento-vue2/';\n *\n * export default {\n * components: { BentoRadioGroup },\n * template: `\n * <bento-radio-group\n * label=\"Your group label\"\n * :items=\"[\n * { value: 1, label: 'Your label' },\n * { value: 2, label: 'Another label', description: 'Your descriptive sub label' },\n * ]\"\n * variant=\"horizontal\"\n * />\n * `\n * };\n */\n export default {\n name: 'bento-radio-group',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./radio-group.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","props","__props","emit","__emit","value","toRefs","radioButtonId","generateUid","descriptionId","radioInputRef","ref","useDefaultSlotValidator","conditionalClassContainer","computed","RadioInputStateClass","ariaLabel","useAriaLabel","getSlotText","isChecked","onChange","__expose","BentoRadioGroupVariant","BentoRadioGroupVariant2","__default__","COMPONENT_NAME","inputValue","toRef","errorId","isReadOnly","useFormLayoutFieldLoading","emitValue","useFormFieldEmits","radioButton","shouldShowError","shouldShowErrorMessage","conditionalClasses","isVertical","shouldShowSlotError","onUpdateModelValue","deprecate","watch","newVal"],"mappings":"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"}