@adyen/adyen-web 6.27.1 → 6.28.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.
- package/dist/cjs/adyen.css +2 -2
- package/dist/cjs/adyen.css.map +1 -1
- package/dist/cjs/index.cjs +2 -2
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +223 -179
- package/dist/es/adyen.css +2 -2
- package/dist/es/adyen.css.map +1 -1
- package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js +1 -1
- package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js.map +1 -1
- package/dist/es/components/ThreeDS2/ThreeDS2Challenge.js.map +1 -1
- package/dist/es/components/ThreeDS2/ThreeDS2DeviceFingerprint.js.map +1 -1
- package/dist/es/components/ThreeDS2/components/utils.js +1 -1
- package/dist/es/components/ThreeDS2/components/utils.js.map +1 -1
- package/dist/es/components/internal/Address/Address.js +1 -1
- package/dist/es/components/internal/Address/Address.js.map +1 -1
- package/dist/es/components/internal/Address/constants.js +1 -1
- package/dist/es/components/internal/Address/constants.js.map +1 -1
- package/dist/es/components/internal/Button/Button.js +1 -1
- package/dist/es/components/internal/Button/Button.js.map +1 -1
- package/dist/es/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.js +1 -1
- package/dist/es/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.js.map +1 -1
- package/dist/es/components/internal/FormFields/Select/Select.js +1 -1
- package/dist/es/components/internal/FormFields/Select/Select.js.map +1 -1
- package/dist/es/components/internal/FormFields/Select/components/SelectButton.js +1 -1
- package/dist/es/components/internal/FormFields/Select/components/SelectButton.js.map +1 -1
- package/dist/es/core/ProcessResponse/PaymentAction/actionTypes.js.map +1 -1
- package/dist/es/core/config.js +1 -1
- package/dist/es/index.d.ts +223 -179
- package/dist/es-legacy/adyen.css +2 -2
- package/dist/es-legacy/adyen.css.map +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/components/Installments/Installments.js +1 -1
- package/dist/es-legacy/components/Card/components/CardInput/components/Installments/Installments.js.map +1 -1
- package/dist/es-legacy/components/ThreeDS2/ThreeDS2Challenge.js.map +1 -1
- package/dist/es-legacy/components/ThreeDS2/ThreeDS2DeviceFingerprint.js.map +1 -1
- package/dist/es-legacy/components/ThreeDS2/components/utils.js +1 -1
- package/dist/es-legacy/components/ThreeDS2/components/utils.js.map +1 -1
- package/dist/es-legacy/components/internal/Address/Address.js +1 -1
- package/dist/es-legacy/components/internal/Address/Address.js.map +1 -1
- package/dist/es-legacy/components/internal/Address/constants.js +1 -1
- package/dist/es-legacy/components/internal/Address/constants.js.map +1 -1
- package/dist/es-legacy/components/internal/Button/Button.js +1 -1
- package/dist/es-legacy/components/internal/Button/Button.js.map +1 -1
- package/dist/es-legacy/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.js +1 -1
- package/dist/es-legacy/components/internal/ClickToPay/components/CtPCards/CtPCardsList/CtPCardsList.js.map +1 -1
- package/dist/es-legacy/components/internal/FormFields/Select/Select.js +1 -1
- package/dist/es-legacy/components/internal/FormFields/Select/Select.js.map +1 -1
- package/dist/es-legacy/components/internal/FormFields/Select/components/SelectButton.js +1 -1
- package/dist/es-legacy/components/internal/FormFields/Select/components/SelectButton.js.map +1 -1
- package/dist/es-legacy/core/ProcessResponse/PaymentAction/actionTypes.js.map +1 -1
- package/dist/es-legacy/core/config.js +1 -1
- package/package.json +17 -17
- package/styles/adyen.css +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../../../../src/components/internal/FormFields/Select/Select.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport SelectButton from './components/SelectButton';\nimport SelectList from './components/SelectList';\nimport uuid from '../../../../utils/uuid';\nimport { keys } from './constants';\nimport { SelectItem, SelectProps } from './types';\nimport './Select.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { simulateFocusScroll } from '../utils';\n\nfunction Select({\n items = [],\n className = '',\n classNameModifiers = [],\n filterable = true,\n readonly = false,\n onChange = () => {},\n onInput,\n selectedValue,\n name,\n isInvalid,\n isValid,\n placeholder,\n uniqueId,\n disabled,\n disableTextFilter,\n clearOnSelect,\n blurOnClose,\n onListToggle,\n allowIdOnButton = false,\n required\n}: SelectProps) {\n const filterInputRef = useRef(null);\n const selectContainerRef = useRef(null);\n const toggleButtonRef = useRef(null);\n const selectListRef = useRef(null);\n const [textFilter, setTextFilter] = useState<string>(null);\n const [showList, setShowList] = useState<boolean>(false);\n const selectListId: string = useMemo(() => `select-${uuid()}`, []);\n\n const active: SelectItem = items.find(i => i.id === selectedValue) || ({} as SelectItem);\n\n const [inputText, setInputText] = useState<string>();\n\n const [activeOption, setActiveOption] = useState<SelectItem>(active);\n\n const selectedOption = active;\n\n const filteredItems = disableTextFilter ? items : items.filter(item => !textFilter || item.name.toLowerCase().includes(textFilter.toLowerCase()));\n\n const suffix = isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX;\n const ariaDescribedBy = uniqueId ? `${uniqueId}${suffix}` : null;\n\n const setNextActive = () => {\n if (!filteredItems || filteredItems.length < 1) return;\n const possibleNextIndex = filteredItems.findIndex(listItem => listItem === activeOption) + 1;\n const nextIndex = possibleNextIndex < filteredItems.length ? possibleNextIndex : 0;\n const nextItem = filteredItems[nextIndex];\n scrollToItem(nextItem);\n setActiveOption(nextItem);\n };\n\n const setPreviousActive = () => {\n if (!filteredItems || filteredItems.length < 1) return;\n const possibleNextIndex = filteredItems.findIndex(listItem => listItem === activeOption) - 1;\n const nextIndex = possibleNextIndex < 0 ? filteredItems.length - 1 : possibleNextIndex;\n const nextItem = filteredItems[nextIndex];\n scrollToItem(nextItem);\n setActiveOption(nextItem);\n };\n\n const scrollToItem = (item: SelectItem) => {\n if (!item) return;\n const nextElement = document.getElementById(`listItem-${item.id}`);\n simulateFocusScroll(nextElement);\n };\n\n /**\n * Closes the selectList, empties the text filter and focuses the button element\n */\n const closeList = () => {\n //blurs the field when the list is closed, makes for a better UX for most users, needs more testing\n blurOnClose && filterInputRef.current.blur();\n setShowList(false);\n };\n\n const openList = () => {\n setShowList(true);\n };\n\n const extractItemFromEvent = (e: Event): SelectItem => {\n const value = (e.currentTarget as HTMLInputElement).getAttribute('data-value');\n return filteredItems.find(listItem => listItem.id == value);\n };\n\n /**\n * Closes the select list and fires an onChange\n * @param e - Event\n */\n const handleSelect = (e: Event) => {\n e.preventDefault();\n\n // We use a local variable here since writing and if statement is cleaner then a long ternary\n let valueToEmit;\n\n if (e.currentTarget instanceof HTMLElement && e.currentTarget.getAttribute('role') === 'option') {\n // This is the main scenario when clicking and item in the list\n // Item comes from the event\n valueToEmit = extractItemFromEvent(e);\n } else if (activeOption.id && filteredItems.some(item => item.id === activeOption.id)) {\n // This is the scenario where a user is using the keyboard to navigate\n // In the case item comes from the visually select item\n valueToEmit = activeOption;\n } else {\n // This is the scenario the user didn't select anything\n if (textFilter) {\n // if we filtering for something then select the first option\n valueToEmit = filteredItems[0];\n } else {\n // This will happen when we want to keep an already chosen option\n // If no active option we should just emit again with the value that was already selected\n valueToEmit = { id: selectedValue };\n }\n }\n\n if (valueToEmit && !valueToEmit.disabled) {\n onChange({ target: { value: valueToEmit.id, name: name } });\n\n if (clearOnSelect) setInputText(null);\n\n closeList();\n }\n };\n\n /**\n * Handles hovering and directions\n * @param e - Event\n */\n const handleHover = (e: Event) => {\n e.preventDefault();\n const item = extractItemFromEvent(e);\n setActiveOption(item);\n };\n\n /**\n * Handle keyDown events on the selectList button\n * Responsible for opening and closing the list\n * @param e - KeyboardEvent\n */\n const handleButtonKeyDown = (e: KeyboardEvent) => {\n if (e.key === keys.enter && filterable && showList && textFilter) {\n handleSelect(e);\n } else if (e.key === keys.escape) {\n // When user has focused Select button but not yet moved into Select list - close list and keep focus on the Select Button re. a11y guidelines\n // https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html\n closeList();\n } else if ([keys.arrowUp, keys.arrowDown, keys.enter].includes(e.key) || (e.key === keys.space && (!filterable || !showList))) {\n e.preventDefault();\n if (!showList) {\n openList();\n } else {\n handleNavigationKeys(e);\n }\n } else if (e.shiftKey && e.key === keys.tab) {\n // Shift-Tab out of Select - close list re. a11y guidelines (above)\n closeList();\n } else if (e.key === keys.tab) {\n closeList();\n }\n };\n\n /**\n * Handles movement with navigation keys and enter\n * Navigates through the list, or select an element, or focus the filter input, or close the menu.\n * @param e - KeyDownEvent\n */\n const handleNavigationKeys = (e: KeyboardEvent) => {\n switch (e.key) {\n case keys.space:\n case keys.enter:\n handleSelect(e);\n break;\n case keys.arrowDown:\n e.preventDefault();\n setNextActive();\n break;\n case keys.arrowUp:\n e.preventDefault();\n setPreviousActive();\n break;\n default:\n }\n };\n\n /**\n * Updates the state with the current text filter value\n * @param e - KeyboardEvent\n */\n const handleTextFilter = (e: KeyboardEvent) => {\n const value: string = (e.target as HTMLInputElement).value;\n setInputText(value);\n setTextFilter(value);\n if (onInput) {\n onInput(value);\n }\n };\n\n /**\n * Toggles the selectList and focuses in either the filter input or in the selectList button\n * @param e - Event\n */\n const toggleList = (e: Event) => {\n e.preventDefault();\n if (!showList) {\n setInputText(null);\n openList();\n } else {\n setInputText(selectedOption.name);\n closeList();\n }\n };\n\n useEffect(() => {\n if (showList) {\n setInputText(null);\n } else {\n setTextFilter(null);\n }\n }, [showList]);\n\n /**\n * Focus on the input if filterable\n */\n useEffect(() => {\n if (showList && filterable && filterInputRef.current) {\n filterInputRef.current.focus();\n }\n onListToggle?.(showList);\n }, [showList]);\n\n useEffect(() => {\n /**\n * Close the select list when clicking outside the list\n * @param e - MouseEvent\n */\n function handleClickOutside(e: MouseEvent) {\n // use composedPath so it can also check when inside a web component\n // if composedPath is not available fallback to e.target\n const clickIsOutside = e.composedPath\n ? !e.composedPath().includes(selectContainerRef.current)\n : !selectContainerRef.current.contains(e.target);\n if (clickIsOutside) {\n closeList();\n }\n }\n\n document.addEventListener('click', handleClickOutside, false);\n\n return () => {\n document.removeEventListener('click', handleClickOutside, false);\n };\n }, [selectContainerRef]);\n\n return (\n <div\n className={cx(['adyen-checkout__dropdown', className, ...classNameModifiers.map(m => `adyen-checkout__dropdown--${m}`)])}\n ref={selectContainerRef}\n >\n <SelectButton\n inputText={inputText}\n id={uniqueId ?? null}\n active={activeOption}\n selected={selectedOption}\n filterInputRef={filterInputRef}\n filterable={filterable}\n isInvalid={isInvalid}\n isValid={isValid}\n onButtonKeyDown={handleButtonKeyDown}\n onFocus={openList}\n onInput={handleTextFilter}\n placeholder={placeholder}\n readonly={readonly}\n selectListId={selectListId}\n showList={showList}\n toggleButtonRef={toggleButtonRef}\n toggleList={toggleList}\n disabled={disabled}\n ariaDescribedBy={ariaDescribedBy}\n allowIdOnButton={allowIdOnButton}\n required={required}\n />\n <SelectList\n active={activeOption}\n filteredItems={filteredItems}\n onHover={handleHover}\n onSelect={handleSelect}\n selected={selectedOption}\n selectListId={selectListId}\n selectListRef={selectListRef}\n showList={showList}\n />\n </div>\n );\n}\n\nSelect.defaultProps = {\n className: '',\n classNameModifiers: [],\n filterable: true,\n items: [],\n readonly: false,\n onChange: () => {}\n};\n\nexport default Select;\n"],"names":["Select","items","className","classNameModifiers","filterable","readonly","onChange","onInput","selectedValue","name","isInvalid","isValid","placeholder","uniqueId","disabled","disableTextFilter","clearOnSelect","blurOnClose","onListToggle","allowIdOnButton","required","filterInputRef","useRef","selectContainerRef","toggleButtonRef","selectListRef","textFilter","setTextFilter","useState","showList","setShowList","selectListId","useMemo","uuid","active","find","i","id","inputText","setInputText","activeOption","setActiveOption","selectedOption","filteredItems","filter","item","toLowerCase","includes","ariaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","scrollToItem","nextElement","document","getElementById","simulateFocusScroll","closeList","current","blur","openList","extractItemFromEvent","e","value","currentTarget","getAttribute","listItem","handleSelect","valueToEmit","preventDefault","HTMLElement","some","target","handleNavigationKeys","key","keys","space","enter","arrowDown","length","possibleNextIndex","findIndex","nextIndex","nextItem","setNextActive","arrowUp","setPreviousActive","useEffect","focus","handleClickOutside","composedPath","contains","addEventListener","removeEventListener","h","div","cx","map","m","ref","SelectButton","selected","onButtonKeyDown","escape","shiftKey","tab","onFocus","toggleList","SelectList","onHover","onSelect","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../../../../src/components/internal/FormFields/Select/Select.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport SelectButton from './components/SelectButton';\nimport SelectList from './components/SelectList';\nimport uuid from '../../../../utils/uuid';\nimport { keys } from './constants';\nimport { SelectItem, SelectProps } from './types';\nimport './Select.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { simulateFocusScroll } from '../utils';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nfunction Select({\n items = [],\n className = '',\n classNameModifiers = [],\n filterable = true,\n readonly = false,\n onChange = () => {},\n onInput,\n selectedValue,\n name,\n isInvalid,\n isValid,\n placeholder,\n uniqueId,\n disabled,\n disableTextFilter,\n clearOnSelect,\n blurOnClose,\n onListToggle,\n required\n}: SelectProps) {\n const { i18n } = useCoreContext();\n const filterInputRef = useRef(null);\n const selectContainerRef = useRef(null);\n const toggleButtonRef = useRef(null);\n const selectListRef = useRef(null);\n const [textFilter, setTextFilter] = useState<string>(null);\n const [showList, setShowList] = useState<boolean>(false);\n const [statusMessage, setStatusMessage] = useState<string>(null);\n const selectListId: string = useMemo(() => `select-${uuid()}`, []);\n\n const active: SelectItem = items.find(i => i.id === selectedValue) || ({} as SelectItem);\n\n const [inputText, setInputText] = useState<string>();\n\n const [activeOption, setActiveOption] = useState<SelectItem>(active);\n\n const selectedOption = active;\n\n const filteredItems = disableTextFilter ? items : items.filter(item => !textFilter || item.name.toLowerCase().includes(textFilter.toLowerCase()));\n\n const suffix = isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX;\n const ariaDescribedBy = uniqueId ? `${uniqueId}${suffix}` : null;\n\n const setNextActive = () => {\n if (!filteredItems || filteredItems.length < 1) return;\n const possibleNextIndex = filteredItems.findIndex(listItem => listItem === activeOption) + 1;\n const nextIndex = possibleNextIndex < filteredItems.length ? possibleNextIndex : 0;\n const nextItem = filteredItems[nextIndex];\n scrollToItem(nextItem);\n setActiveOption(nextItem);\n };\n\n const setPreviousActive = () => {\n if (!filteredItems || filteredItems.length < 1) return;\n const possibleNextIndex = filteredItems.findIndex(listItem => listItem === activeOption) - 1;\n const nextIndex = possibleNextIndex < 0 ? filteredItems.length - 1 : possibleNextIndex;\n const nextItem = filteredItems[nextIndex];\n scrollToItem(nextItem);\n setActiveOption(nextItem);\n };\n\n const scrollToItem = (item: SelectItem) => {\n if (!item) return;\n const nextElement = document.getElementById(`listItem-${item.id}`);\n simulateFocusScroll(nextElement);\n };\n\n /**\n * Closes the selectList, empties the text filter and focuses the button element\n */\n const closeList = () => {\n //blurs the field when the list is closed, makes for a better UX for most users, needs more testing\n blurOnClose && filterInputRef.current.blur();\n setShowList(false);\n };\n\n const openList = () => {\n setShowList(true);\n };\n\n const extractItemFromEvent = (e: Event): SelectItem => {\n const value = (e.currentTarget as HTMLInputElement).getAttribute('data-value');\n return filteredItems.find(listItem => listItem.id == value);\n };\n\n /**\n * Closes the select list and fires an onChange\n * @param e - Event\n */\n const handleSelect = (e: Event) => {\n e.preventDefault();\n\n // We use a local variable here since writing and if statement is cleaner then a long ternary\n let valueToEmit;\n\n if (e.currentTarget instanceof HTMLElement && e.currentTarget.getAttribute('role') === 'option') {\n // This is the main scenario when clicking and item in the list\n // Item comes from the event\n valueToEmit = extractItemFromEvent(e);\n } else if (activeOption.id && filteredItems.some(item => item.id === activeOption.id)) {\n // This is the scenario where a user is using the keyboard to navigate\n // In the case item comes from the visually select item\n valueToEmit = activeOption;\n } else {\n // This is the scenario the user didn't select anything\n if (textFilter) {\n // if we filtering for something then select the first option\n valueToEmit = filteredItems[0];\n } else {\n // This will happen when we want to keep an already chosen option\n // If no active option we should just emit again with the value that was already selected\n valueToEmit = { id: selectedValue };\n }\n }\n\n if (valueToEmit && !valueToEmit.disabled) {\n onChange({ target: { value: valueToEmit.id, name: name } });\n\n if (clearOnSelect) setInputText(null);\n\n closeList();\n }\n };\n\n /**\n * Handles hovering and directions\n * @param e - Event\n */\n const handleHover = (e: Event) => {\n e.preventDefault();\n const item = extractItemFromEvent(e);\n setActiveOption(item);\n };\n\n /**\n * Handle keyDown events on the selectList button\n * Responsible for opening and closing the list\n * @param e - KeyboardEvent\n */\n const handleButtonKeyDown = (e: KeyboardEvent) => {\n if (e.key === keys.enter && filterable && showList && textFilter) {\n handleSelect(e);\n } else if (e.key === keys.escape) {\n // When user has focused Select button but not yet moved into Select list - close list and keep focus on the Select Button re. a11y guidelines\n // https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html\n closeList();\n } else if ([keys.arrowUp, keys.arrowDown, keys.enter].includes(e.key) || (e.key === keys.space && (!filterable || !showList))) {\n e.preventDefault();\n if (!showList) {\n openList();\n } else {\n handleNavigationKeys(e);\n }\n } else if (e.shiftKey && e.key === keys.tab) {\n // Shift-Tab out of Select - close list re. a11y guidelines (above)\n closeList();\n } else if (e.key === keys.tab) {\n closeList();\n }\n };\n\n /**\n * Handles movement with navigation keys and enter\n * Navigates through the list, or select an element, or focus the filter input, or close the menu.\n * @param e - KeyDownEvent\n */\n const handleNavigationKeys = (e: KeyboardEvent) => {\n switch (e.key) {\n case keys.space:\n case keys.enter:\n handleSelect(e);\n break;\n case keys.arrowDown:\n e.preventDefault();\n setNextActive();\n break;\n case keys.arrowUp:\n e.preventDefault();\n setPreviousActive();\n break;\n default:\n }\n };\n\n /**\n * Updates the state with the current text filter value and opens the dropdown\n * @param e - KeyboardEvent\n */\n const handleTextFilter = (e: KeyboardEvent) => {\n const value: string = (e.target as HTMLInputElement).value;\n setInputText(value);\n setTextFilter(value);\n \n // Open the dropdown when user starts typing\n if (!showList) {\n openList();\n }\n \n if (onInput) {\n onInput(value);\n }\n };\n\n /**\n * Toggles the selectList and focuses in either the filter input or in the selectList button\n * @param e - Event\n */\n const toggleList = (e: Event) => {\n e.preventDefault();\n if (!showList) {\n setInputText(null);\n openList();\n } else {\n setInputText(selectedOption.name);\n closeList();\n }\n };\n\n useEffect(() => {\n if (showList) {\n setInputText(null);\n } else {\n setTextFilter(null);\n }\n }, [showList]);\n\n /**\n * Focus on the input if filterable\n */\n useEffect(() => {\n if (showList && filterable && filterInputRef.current) {\n filterInputRef.current.focus();\n }\n onListToggle?.(showList);\n }, [showList]);\n\n useEffect(() => {\n /**\n * Close the select list when clicking outside the list\n * @param e - MouseEvent\n */\n function handleClickOutside(e: MouseEvent) {\n // use composedPath so it can also check when inside a web component\n // if composedPath is not available fallback to e.target\n const clickIsOutside = e.composedPath\n ? !e.composedPath().includes(selectContainerRef.current)\n : !selectContainerRef.current.contains(e.target);\n if (clickIsOutside) {\n closeList();\n }\n }\n\n document.addEventListener('click', handleClickOutside, false);\n\n return () => {\n document.removeEventListener('click', handleClickOutside, false);\n };\n }, [selectContainerRef]);\n\n /**\n * Update status message for screen readers when no options are found\n */\n useEffect(() => {\n if (showList && filteredItems.length === 0) {\n setStatusMessage(i18n.get('select.noOptionsFound'));\n } else {\n setStatusMessage(null);\n }\n }, [showList, filteredItems.length, i18n]);\n\n return (\n <div\n className={cx(['adyen-checkout__dropdown', className, ...classNameModifiers.map(m => `adyen-checkout__dropdown--${m}`)])}\n ref={selectContainerRef}\n >\n <SelectButton\n inputText={inputText}\n id={uniqueId ?? null}\n active={activeOption}\n selected={selectedOption}\n filterInputRef={filterInputRef}\n filterable={filterable}\n isInvalid={isInvalid}\n isValid={isValid}\n onButtonKeyDown={handleButtonKeyDown}\n onInput={handleTextFilter}\n placeholder={placeholder}\n readonly={readonly}\n selectListId={selectListId}\n showList={showList}\n toggleButtonRef={toggleButtonRef}\n toggleList={toggleList}\n disabled={disabled}\n ariaDescribedBy={ariaDescribedBy}\n required={required}\n />\n <SelectList\n active={activeOption}\n filteredItems={filteredItems}\n onHover={handleHover}\n onSelect={handleSelect}\n selected={selectedOption}\n selectListId={selectListId}\n selectListRef={selectListRef}\n showList={showList}\n />\n <div\n role=\"status\"\n aria-live=\"polite\"\n // aria-relevant seems to be needed here make make sure a second time we get \n // \"No options found\" we still announce the status message.\n // What happens otherwise is that just the first status message is announced\n // tested on VoiceOver on Chrome\n aria-relevant=\"all\"\n className=\"adyen-checkout-sr-panel--sr-only\"\n > \n {statusMessage} \n </div>\n </div>\n );\n}\n\nSelect.defaultProps = {\n className: '',\n classNameModifiers: [],\n filterable: true,\n items: [],\n readonly: false,\n onChange: () => {}\n};\n\nexport default Select;\n"],"names":["Select","items","className","classNameModifiers","filterable","readonly","onChange","onInput","selectedValue","name","isInvalid","isValid","placeholder","uniqueId","disabled","disableTextFilter","clearOnSelect","blurOnClose","onListToggle","required","i18n","useCoreContext","filterInputRef","useRef","selectContainerRef","toggleButtonRef","selectListRef","textFilter","setTextFilter","useState","showList","setShowList","statusMessage","setStatusMessage","selectListId","useMemo","uuid","active","find","i","id","inputText","setInputText","activeOption","setActiveOption","selectedOption","filteredItems","filter","item","toLowerCase","includes","ariaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","scrollToItem","nextElement","document","getElementById","simulateFocusScroll","closeList","current","blur","openList","extractItemFromEvent","e","value","currentTarget","getAttribute","listItem","handleSelect","valueToEmit","preventDefault","HTMLElement","some","target","handleNavigationKeys","key","keys","space","enter","arrowDown","length","possibleNextIndex","findIndex","nextIndex","nextItem","setNextActive","arrowUp","setPreviousActive","useEffect","focus","handleClickOutside","composedPath","contains","addEventListener","removeEventListener","get","h","div","cx","map","m","ref","SelectButton","selected","onButtonKeyDown","escape","shiftKey","tab","toggleList","SelectList","onHover","onSelect","role","aria-live","aria-relevant","defaultProps"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../_virtual/index.js";import n from"../../../Img/Img.js";import{useMemo as a}from"../../../../../external/preact/hooks/dist/hooks.js";function d({filterable:t,toggleButtonRef:o,...n}){if(t){const{id:t,...a}=n;return e("div",{...a,ref:o})}return e("button",{id:n.id,"aria-describedby":n.ariaDescribedBy,type:"button",...n,ref:o})}function r(r){const{active:
|
|
1
|
+
import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import o from"../../../../../_virtual/index.js";import n from"../../../Img/Img.js";import{useMemo as a}from"../../../../../external/preact/hooks/dist/hooks.js";function d({filterable:t,toggleButtonRef:o,...n}){if(t){const{id:t,...a}=n;return e("div",{...a,ref:o})}return e("button",{id:n.id,"aria-expanded":n.showList,"aria-disabled":n.readonly,"aria-describedby":n.ariaDescribedBy,type:"button",...n,ref:o})}function r(r){const{active:i,selected:c,inputText:l,readonly:s,showList:u,required:_}=r,p=a(()=>{const e=c.selectedOptionName||c.name;return!0!==("string"==typeof e&&""!==e.trim())},[c,r.placeholder]),y=c.selectedOptionName||c.name||r.placeholder||"",b=u?l:y,f=s?null:r.filterable?e=>{e.preventDefault(),document.activeElement===r.filterInputRef.current?r.showList||r.toggleList(e):r.filterInputRef.current&&r.filterInputRef.current.focus()}:r.toggleList,m=i.id?`listItem-${i.id}`:"";return e(d,{className:o({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":u,"adyen-checkout__dropdown__button--invalid":r.isInvalid,"adyen-checkout__dropdown__button--valid":r.isValid,"adyen-checkout__dropdown__button--disabled":c.disabled}),disabled:r.disabled,filterable:r.filterable,onClick:f,onKeyDown:s?null:r.onButtonKeyDown,toggleButtonRef:r.toggleButtonRef,id:r.id},r.filterable?e(t,null,!u&&c.icon&&e(n,{className:"adyen-checkout__dropdown__button__icon",src:c.icon,alt:c.name}),e("input",{value:b,"aria-autocomplete":"list","aria-controls":r.selectListId,"aria-expanded":u,"aria-owns":r.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:r.onInput,ref:r.filterInputRef,role:"combobox","aria-activedescendant":m,type:"text",readOnly:r.readonly,"aria-disabled":r.readonly,id:r.id,"aria-describedby":r.ariaDescribedBy,required:_}),!u&&c.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},c.secondaryText)):e(t,null,c.icon&&e(n,{className:"adyen-checkout__dropdown__button__icon",src:c.icon,alt:c.name}),e("span",{className:o("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":p})},y),c.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},c.secondaryText)))}export{r as default};
|
|
2
2
|
//# sourceMappingURL=SelectButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n if (filterable) {\n // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element\n const { id, ...strippedProps } = props;\n return <div {...strippedProps} ref={toggleButtonRef} />;\n }\n\n return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n const { active, selected, inputText, readonly, showList, required } = props;\n\n const isShowingPlaceholder = useMemo(() => {\n const displayText = selected.selectedOptionName || selected.name;\n const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n return isValidValue !== true;\n }, [selected, props.placeholder]);\n\n // display fallback order\n const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n // displayInputText only used for the text input for the filter\n // display the \"typed\" filter text when showing the dropdown,\n // hide it and show the \"selected\" value when collapsed\n const displayInputText = showList ? inputText : displayText;\n\n const setFocus = (e: Event) => {\n e.preventDefault();\n if (document.activeElement === props.filterInputRef.current) {\n if (!props.showList) {\n props.toggleList(e);\n }\n } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n };\n\n // 1. If readonly we ignore the click action\n // 2. If filterable we want to show the list and focus on the input\n // 3. Otherwise we just toggle the list\n const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n
|
|
1
|
+
{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n if (filterable) {\n // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element\n const { id, ...strippedProps } = props;\n return <div {...strippedProps} ref={toggleButtonRef} />;\n }\n\n return <button id={props.id} aria-expanded={props.showList} aria-disabled={props.readonly} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n const { active, selected, inputText, readonly, showList, required } = props;\n\n const isShowingPlaceholder = useMemo(() => {\n const displayText = selected.selectedOptionName || selected.name;\n const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n return isValidValue !== true;\n }, [selected, props.placeholder]);\n\n // display fallback order\n const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n // displayInputText only used for the text input for the filter\n // display the \"typed\" filter text when showing the dropdown,\n // hide it and show the \"selected\" value when collapsed\n const displayInputText = showList ? inputText : displayText;\n\n const setFocus = (e: Event) => {\n e.preventDefault();\n if (document.activeElement === props.filterInputRef.current) {\n if (!props.showList) {\n props.toggleList(e);\n }\n } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n };\n\n // 1. If readonly we ignore the click action\n // 2. If filterable we want to show the list and focus on the input\n // 3. Otherwise we just toggle the list\n const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n\n // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n return (\n <SelectButtonElement\n className={cx({\n 'adyen-checkout__dropdown__button': true,\n 'adyen-checkout__dropdown__button--readonly': readonly,\n 'adyen-checkout__dropdown__button--active': showList,\n 'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n 'adyen-checkout__dropdown__button--valid': props.isValid,\n 'adyen-checkout__dropdown__button--disabled': selected.disabled\n })}\n disabled={props.disabled}\n filterable={props.filterable}\n onClick={onClickHandler}\n onKeyDown={!readonly ? props.onButtonKeyDown : null}\n toggleButtonRef={props.toggleButtonRef}\n id={props.id}\n >\n {!props.filterable ? (\n <Fragment>\n {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <span\n className={classnames('adyen-checkout__dropdown__button__text', {\n 'adyen-checkout__dropdown__button__text-placeholder': isShowingPlaceholder\n })}\n >\n {displayText}\n </span>\n {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n </Fragment>\n ) : (\n <Fragment>\n {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <input\n value={displayInputText}\n aria-autocomplete=\"list\"\n aria-controls={props.selectListId}\n aria-expanded={showList}\n aria-owns={props.selectListId}\n autoComplete=\"off\"\n className=\"adyen-checkout__filter-input\"\n onInput={props.onInput}\n ref={props.filterInputRef}\n role=\"combobox\"\n aria-activedescendant={currentSelectedItemId}\n type=\"text\"\n readOnly={props.readonly}\n aria-disabled={props.readonly}\n id={props.id}\n aria-describedby={props.ariaDescribedBy}\n required={required}\n />\n {!showList && selected.secondaryText && (\n <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n )}\n </Fragment>\n )}\n </SelectButtonElement>\n );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","filterable","toggleButtonRef","props","id","strippedProps","h","div","ref","button","aria-expanded","showList","aria-disabled","readonly","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span","classnames"],"mappings":"4PAOA,SAASA,GAAoBC,WAAEA,EAAUC,gBAAEA,KAAoBC,IAC3D,GAAIF,EAAY,CAEZ,MAAMG,GAAEA,KAAOC,GAAkBF,EACjC,OAAOG,EAACC,MAAAA,IAAQF,EAAeG,IAAKN,GACxC,CAEA,OAAOI,EAACG,SAAAA,CAAOL,GAAID,EAAMC,GAAIM,gBAAeP,EAAMQ,SAAUC,gBAAeT,EAAMU,SAAUC,mBAAkBX,EAAMY,gBAAiBC,KAAM,YAAcb,EAAOK,IAAKN,GACxK,CAEA,SAASe,EAAad,GAClB,MAAMe,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASP,SAAEA,EAAQF,SAAEA,EAAQU,SAAEA,GAAalB,EAEhEmB,EAAuBC,EAAQ,KACjC,MAAMC,EAAcL,EAASM,oBAAsBN,EAASO,KAE5D,OAAwB,KADoB,iBAAhBF,GAAmD,KAAvBA,EAAYG,SAErE,CAACR,EAAUhB,EAAMyB,cAGdJ,EAAcL,EAASM,oBAAsBN,EAASO,MAAQvB,EAAMyB,aAAe,GAInFC,EAAmBlB,EAAWS,EAAYI,EAc1CM,EAAiBjB,EAAW,KAAOV,EAAMF,WAZ7B8B,IACdA,EAAEC,iBACEC,SAASC,gBAAkB/B,EAAMgC,eAAeC,QAC3CjC,EAAMQ,UACPR,EAAMkC,WAAWN,GAEd5B,EAAMgC,eAAeC,SAASjC,EAAMgC,eAAeC,QAAQE,SAMHnC,EAAMkC,WAIvEE,EAAwBrB,EAAOd,GAAK,YAAYc,EAAOd,KAAO,GAEpE,OACIE,EAACN,EAAAA,CACGwC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8C5B,EAC9C,2CAA4CF,EAC5C,4CAA6CR,EAAMuC,UACnD,0CAA2CvC,EAAMwC,QACjD,6CAA8CxB,EAASyB,WAE3DA,SAAUzC,EAAMyC,SAChB3C,WAAYE,EAAMF,WAClB4C,QAASf,EACTgB,UAAYjC,EAAmC,KAAxBV,EAAM4C,gBAC7B7C,gBAAiBC,EAAMD,gBACvBE,GAAID,EAAMC,IAERD,EAAMF,WAaJK,EAAC0C,EAAAA,MACKrC,GAAYQ,EAAS8B,MAAQ3C,EAAC4C,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASO,OACzHpB,EAAC+C,QAAAA,CACGC,MAAOzB,EACP0B,oBAAkB,OAClBC,gBAAerD,EAAMsD,aACrB/C,gBAAeC,EACf+C,YAAWvD,EAAMsD,aACjBE,aAAa,MACbnB,UAAU,+BACVoB,QAASzD,EAAMyD,QACfpD,IAAKL,EAAMgC,eACX0B,KAAK,WACLC,wBAAuBvB,EACvBvB,KAAK,OACL+C,SAAU5D,EAAMU,SAChBD,gBAAeT,EAAMU,SACrBT,GAAID,EAAMC,GACVU,mBAAkBX,EAAMY,gBACxBM,SAAUA,KAEZV,GAAYQ,EAAS6C,eACnB1D,EAAC2D,OAAAA,CAAKzB,UAAU,oDAAoDrB,EAAS6C,gBAlCrF1D,EAAC0C,OACI7B,EAAS8B,MAAQ3C,EAAC4C,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASO,OAC5GpB,EAAC2D,OAAAA,CACGzB,UAAW0B,EAAW,yCAA0C,CAC5D,qDAAsD5C,KAGzDE,GAEJL,EAAS6C,eAAiB1D,EAAC2D,OAAAA,CAAKzB,UAAU,oDAAoDrB,EAAS6C,gBA+B5H"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actionTypes.js","sources":["../../../../../src/core/ProcessResponse/PaymentAction/actionTypes.ts"],"sourcesContent":["import { get3DS2FlowProps } from '../../../components/ThreeDS2/components/utils';\nimport uuid from '../../../utils/uuid';\nimport UIElement from '../../../
|
|
1
|
+
{"version":3,"file":"actionTypes.js","sources":["../../../../../src/core/ProcessResponse/PaymentAction/actionTypes.ts"],"sourcesContent":["import { get3DS2FlowProps } from '../../../components/ThreeDS2/components/utils';\nimport uuid from '../../../utils/uuid';\nimport type { StatusFromAction, ThreeDS2ActionProps, UIElement, UIElementProps } from '../../../types';\nimport type { PaymentAction } from '../../../types/global-types';\nimport type { IRegistry } from '../../core.registry';\nimport type { ICore } from '../../types';\nimport type { ThreeDS2ConfigProps } from '../../../types';\nimport type { ActionHandlerConfig } from './types';\n\nconst createComponent = (core: ICore, registry: IRegistry, componentType: string, props: ActionHandlerConfig | ThreeDS2ConfigProps): UIElement => {\n const Element = registry.getComponent(componentType);\n\n if (!Element) {\n throw Error(`Action Element of type ${componentType} not found in the registry`);\n }\n\n const element = new Element(core, { ...props, id: `${componentType}-${uuid()}` });\n return element;\n};\n\nconst getActionHandler = (statusType: StatusFromAction) => {\n return (core: ICore, registry: IRegistry, action: PaymentAction, props: UIElementProps): UIElement => {\n const config: ActionHandlerConfig = {\n ...props,\n ...action,\n onError: props.onError,\n statusType,\n originalAction: action\n };\n\n return createComponent(core, registry, action.paymentMethodType, config);\n };\n};\n\nconst actionTypes = {\n redirect: (core: ICore, registry, action: PaymentAction, props: UIElementProps): UIElement => {\n const config: ActionHandlerConfig = {\n ...props,\n ...action,\n statusType: 'redirect',\n originalAction: action\n };\n\n return createComponent(core, registry, 'redirect', config);\n },\n\n threeDS2: (core: ICore, registry, action: PaymentAction, props: ThreeDS2ActionProps): UIElement => {\n const componentType = action.subtype === 'fingerprint' ? 'threeDS2DeviceFingerprint' : 'threeDS2Challenge';\n\n /**\n * NOTE: the isMDFlow prop comes from the options object, added within the MDFlow when it calls createFromAction(action, options) to initiate a 3DS2 component\n * It replaces the useOriginalFlow config prop that the MDFlow used to pass when directly initiating the threeDS2Fingerprint or threeDS2Challenge components\n */\n const paymentData = action.subtype === 'fingerprint' || props.isMDFlow ? action.paymentData : action.authorisationToken;\n\n const config: ThreeDS2ConfigProps = {\n // Props common to both flows\n core,\n token: action.token,\n paymentData,\n onActionHandled: props.onActionHandled,\n onComplete: props.onComplete, // NOTE: We only ever expect props.onComplete to be defined for the MDFlow\n onAdditionalDetails: props.onAdditionalDetails, // Needed to prevent regression in v6.24.0 re. supporting onAdditionalDetails being directly set on Card component (in v7 we will *not* allow this, & this line can be removed)\n onError: props.onError,\n isDropin: !!props.isDropin,\n loadingContext: props.loadingContext,\n clientKey: props.clientKey,\n paymentMethodType: props.paymentMethodType,\n challengeWindowSize: props.challengeWindowSize, // always pass challengeWindowSize in case it's been set directly in the handleAction config object\n isMDFlow: props.isMDFlow,\n modules: {\n analytics: props.modules?.analytics,\n resources: props.modules?.resources\n },\n\n // Props unique to a particular flow\n ...get3DS2FlowProps(action.subtype, props)\n };\n\n return createComponent(core, registry, componentType, config);\n },\n\n voucher: getActionHandler('custom'),\n qrCode: getActionHandler('custom'),\n await: getActionHandler('custom'),\n bankTransfer: getActionHandler('custom'),\n sdk: getActionHandler('custom')\n} as const;\n\nexport default actionTypes;\n"],"names":["createComponent","core","registry","componentType","props","Element","getComponent","Error","id","uuid","getActionHandler","statusType","action","config","onError","originalAction","paymentMethodType","actionTypes","redirect","threeDS2","subtype","paymentData","isMDFlow","authorisationToken","token","onActionHandled","onComplete","onAdditionalDetails","isDropin","loadingContext","clientKey","challengeWindowSize","modules","analytics","resources","get3DS2FlowProps","voucher","qrCode","await","bankTransfer","sdk"],"mappings":"0HASA,MAAMA,EAAkB,CAACC,EAAaC,EAAqBC,EAAuBC,KAC9E,MAAMC,EAAUH,EAASI,aAAaH,GAEtC,IAAKE,EACD,MAAME,MAAM,0BAA0BJ,+BAI1C,OADgB,IAAIE,EAAQJ,EAAM,IAAKG,EAAOI,GAAI,GAAGL,KAAiBM,SAIpEC,EAAoBC,GACf,CAACV,EAAaC,EAAqBU,EAAuBR,KAC7D,MAAMS,EAA8B,IAC7BT,KACAQ,EACHE,QAASV,EAAMU,QACfH,aACAI,eAAgBH,GAGpB,OAAOZ,EAAgBC,EAAMC,EAAUU,EAAOI,kBAAmBH,IAInEI,EAAc,CAChBC,SAAU,CAACjB,EAAaC,EAAUU,EAAuBR,KACrD,MAAMS,EAA8B,IAC7BT,KACAQ,EACHD,WAAY,WACZI,eAAgBH,GAGpB,OAAOZ,EAAgBC,EAAMC,EAAU,WAAYW,IAGvDM,SAAU,CAAClB,EAAaC,EAAUU,EAAuBR,KACrD,MAAMD,EAAmC,gBAAnBS,EAAOQ,QAA4B,4BAA8B,oBAMjFC,EAAiC,gBAAnBT,EAAOQ,SAA6BhB,EAAMkB,SAAWV,EAAOS,YAAcT,EAAOW,mBAE/FV,EAA8B,CAEhCZ,OACAuB,MAAOZ,EAAOY,MACdH,cACAI,gBAAiBrB,EAAMqB,gBACvBC,WAAYtB,EAAMsB,WAClBC,oBAAqBvB,EAAMuB,oBAC3Bb,QAASV,EAAMU,QACfc,WAAYxB,EAAMwB,SAClBC,eAAgBzB,EAAMyB,eACtBC,UAAW1B,EAAM0B,UACjBd,kBAAmBZ,EAAMY,kBACzBe,oBAAqB3B,EAAM2B,oBAC3BT,SAAUlB,EAAMkB,SAChBU,QAAS,CACLC,UAAW7B,EAAM4B,SAASC,UAC1BC,UAAW9B,EAAM4B,SAASE,cAI3BC,EAAiBvB,EAAOQ,QAAShB,IAGxC,OAAOJ,EAAgBC,EAAMC,EAAUC,EAAeU,IAG1DuB,QAAS1B,EAAiB,UAC1B2B,OAAQ3B,EAAiB,UACzB4B,MAAO5B,EAAiB,UACxB6B,aAAc7B,EAAiB,UAC/B8B,IAAK9B,EAAiB"}
|
package/dist/es/core/config.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e="https://checkoutshopper-live.adyen.com/checkoutshopper/",n="6.
|
|
1
|
+
const e="https://checkoutshopper-live.adyen.com/checkoutshopper/",n="6.28.0",o="esm",t=["amount","secondaryAmount","countryCode","environment","_environmentUrls","loadingContext","i18n","modules","order","session","clientKey","showPayButton","redirectFromTopWhenInIframe","onPaymentCompleted","onPaymentFailed","beforeRedirect","beforeSubmit","onSubmit","onActionHandled","onAdditionalDetails","onChange","onEnterKeyPressed","onError","onBalanceCheck","onOrderCancel","onOrderRequest","onOrderUpdated","onPaymentMethodsRequest"],r=6e4;export{r as DEFAULT_HTTP_TIMEOUT,e as FALLBACK_CONTEXT,t as GENERIC_OPTIONS,o as LIBRARY_BUNDLE_TYPE,n as LIBRARY_VERSION};
|
|
2
2
|
//# sourceMappingURL=config.js.map
|