npm - @adyen/adyen-web - Versions diffs - 6.18.0 → 6.19.0 - Mend

@adyen/adyen-web 6.18.0 → 6.19.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 (1425) hide show

package/dist/es/components/internal/FormFields/Select/Select.js.map CHANGED Viewed

	@@ -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';\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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"}

package/dist/es/components/internal/FormFields/Select/components/SelectButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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:c,selected:i,inputText:l,readonly:s,showList:u,required:_}=r,p=a((()=>{const e=i.selectedOptionName||i.name;return!0!==("string"==typeof e&&""!==e.trim())}),[i,r.placeholder]),f=i.selectedOptionName||i.name||r.placeholder||"",m=u?l:f,y=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,b=s?null:r.onFocus,h=c.id?`listItem-${c.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":i.disabled}),disabled:r.disabled,filterable:r.filterable,onClick:y,onKeyDown:s?null:r.onButtonKeyDown,toggleButtonRef:r.toggleButtonRef,...r.allowIdOnButton&&r.id&&{id:r.id}},r.filterable?e(t,null,!u&&i.icon&&e(n,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("input",{value:m,"aria-autocomplete":"list","aria-controls":r.selectListId,"aria-expanded":u,"aria-owns":r.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:r.onInput,onFocus:b,ref:r.filterInputRef,role:"combobox","aria-activedescendant":h,type:"text",readOnly:r.readonly,id:r.id,"aria-describedby":r.ariaDescribedBy,required:_}),!u&&i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)):e(t,null,i.icon&&e(n,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("span",{className:o("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":p})},f),i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)))}export{r as default};
+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:c,selected:i,inputText:l,readonly:s,showList:u,required:_}=r,p=a(()=>{const e=i.selectedOptionName||i.name;return!0!==("string"==typeof e&&""!==e.trim())},[i,r.placeholder]),f=i.selectedOptionName||i.name||r.placeholder||"",m=u?l:f,y=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,b=s?null:r.onFocus,h=c.id?`listItem-${c.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":i.disabled}),disabled:r.disabled,filterable:r.filterable,onClick:y,onKeyDown:s?null:r.onButtonKeyDown,toggleButtonRef:r.toggleButtonRef,...r.allowIdOnButton&&r.id&&{id:r.id}},r.filterable?e(t,null,!u&&i.icon&&e(n,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("input",{value:m,"aria-autocomplete":"list","aria-controls":r.selectListId,"aria-expanded":u,"aria-owns":r.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:r.onInput,onFocus:b,ref:r.filterInputRef,role:"combobox","aria-activedescendant":h,type:"text",readOnly:r.readonly,id:r.id,"aria-describedby":r.ariaDescribedBy,required:_}),!u&&i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)):e(t,null,i.icon&&e(n,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("span",{className:o("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":p})},f),i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)))}export{r as default};
 //# sourceMappingURL=SelectButton.js.map

package/dist/es/components/internal/FormFields/Select/components/SelectButton.js.map CHANGED Viewed

	@@ -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 const onFocusHandler = readonly ? null : props.onFocus;\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 // Only for some dropdowns e.g. the one found in installments when it is just in the form of a single dropdown, do we want to add an id that links to a label's for attr\n // If we allow an id to be added to the buttons in CtPCardsList, for example, unit tests start failing because it seems a button with an id no longer has a name property that can be used\n // as a qualifier in findByRole\n {...(props.allowIdOnButton && props.id && { 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 onFocus={onFocusHandler}\n ref={props.filterInputRef}\n role=\"combobox\"\n aria-activedescendant={currentSelectedItemId}\n type=\"text\"\n readOnly={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-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","allowIdOnButton","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","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,mBAAkBP,EAAMQ,gBAAiBC,KAAM,YAAcT,EAAOK,IAAKN,GAC1G,CAEA,SAASW,EAAaV,GAClB,MAAMW,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,EAAQC,SAAEA,GAAahB,EAEhEiB,EAAuBC,~~GAAQ~~,KACjC,MAAMC,EAAcP,EAASQ,oBAAsBR,EAASS,KAE5D,OAAwB,KADoB,iBAAhBF,GAAmD,KAAvBA,EAAYG,~~OAC5C~~,~~GACzB,~~CAACV,EAAUZ,EAAMuB,cAGdJ,EAAcP,EAASQ,oBAAsBR,EAASS,MAAQrB,EAAMuB,aAAe,GAInFC,EAAmBT,EAAWF,EAAYM,EAc1CM,EAAiBX,EAAW,KAAOd,EAAMF,WAZ7B4B,IACdA,EAAEC,iBACEC,SAASC,gBAAkB7B,EAAM8B,eAAeC,QAC3C/B,EAAMe,UACPf,EAAMgC,WAAWN,GAEd1B,EAAM8B,eAAeC,SAAS/B,EAAM8B,eAAeC,QAAQE,~~OAAK~~,~~EAMRjC,~~EAAMgC,WAEvEE,EAAiBpB,EAAW,KAAOd,EAAMmC,QAGzCC,EAAwBzB,EAAOV,GAAK,YAAYU,EAAOV,KAAO,GAEpE,OACIE,EAACN,EAAAA,CACGwC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CxB,EAC9C,2CAA4CC,EAC5C,4CAA6Cf,EAAMuC,UACnD,0CAA2CvC,EAAMwC,QACjD,6CAA8C5B,EAAS6B,WAE3DA,SAAUzC,EAAMyC,SAChB3C,WAAYE,EAAMF,WAClB4C,QAASjB,EACTkB,UAAY7B,EAAmC,KAAxBd,EAAM4C,gBAC7B7C,gBAAiBC,EAAMD,mBAIlBC,EAAM6C,iBAAmB7C,EAAMC,IAAM,CAAEA,GAAID,EAAMC,KAEpDD,EAAMF,WAaJK,EAAC2C,EAAAA,MACK/B,GAAYH,EAASmC,MAAQ5C,EAAC6C,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKrC,EAASmC,KAAMG,IAAKtC,EAASS,OACzHlB,EAACgD,QAAAA,CACGC,MAAO5B,EACP6B,oBAAkB,OAClBC,gBAAetD,EAAMuD,aACrBC,gBAAezC,EACf0C,YAAWzD,EAAMuD,aACjBG,aAAa,MACbrB,UAAU,+BACVsB,QAAS3D,EAAM2D,QACfxB,QAASD,EACT7B,IAAKL,EAAM8B,eACX8B,KAAK,WACLC,wBAAuBzB,EACvB3B,KAAK,OACLqD,SAAU9D,EAAMc,SAChBb,GAAID,EAAMC,GACVM,mBAAkBP,EAAMQ,gBACxBQ,SAAUA,KAEZD,GAAYH,EAASmD,eACnB5D,EAAC6D,OAAAA,CAAK3B,UAAU,oDAAoDzB,EAASmD,gBAlCrF5D,EAAC2C,OACIlC,EAASmC,MAAQ5C,EAAC6C,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKrC,EAASmC,KAAMG,IAAKtC,EAASS,OAC5GlB,EAAC6D,OAAAA,CACG3B,UAAW4B,EAAW,yCAA0C,CAC5D,qDAAsDhD,KAGzDE,GAEJP,EAASmD,eAAiB5D,EAAC6D,OAAAA,CAAK3B,UAAU,oDAAoDzB,EAASmD,gBA+B5H"}
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 const onFocusHandler = readonly ? null : props.onFocus;\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 // Only for some dropdowns e.g. the one found in installments when it is just in the form of a single dropdown, do we want to add an id that links to a label's for attr\n // If we allow an id to be added to the buttons in CtPCardsList, for example, unit tests start failing because it seems a button with an id no longer has a name property that can be used\n // as a qualifier in findByRole\n {...(props.allowIdOnButton && props.id && { 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 onFocus={onFocusHandler}\n ref={props.filterInputRef}\n role=\"combobox\"\n aria-activedescendant={currentSelectedItemId}\n type=\"text\"\n readOnly={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-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","allowIdOnButton","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","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,mBAAkBP,EAAMQ,gBAAiBC,KAAM,YAAcT,EAAOK,IAAKN,GAC1G,CAEA,SAASW,EAAaV,GAClB,MAAMW,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,EAAQC,SAAEA,GAAahB,EAEhEiB,EAAuBC,EAAQ,KACjC,MAAMC,EAAcP,EAASQ,oBAAsBR,EAASS,KAE5D,OAAwB,KADoB,iBAAhBF,GAAmD,KAAvBA,EAAYG,SAErE,CAACV,EAAUZ,EAAMuB,cAGdJ,EAAcP,EAASQ,oBAAsBR,EAASS,MAAQrB,EAAMuB,aAAe,GAInFC,EAAmBT,EAAWF,EAAYM,EAc1CM,EAAiBX,EAAW,KAAOd,EAAMF,WAZ7B4B,IACdA,EAAEC,iBACEC,SAASC,gBAAkB7B,EAAM8B,eAAeC,QAC3C/B,EAAMe,UACPf,EAAMgC,WAAWN,GAEd1B,EAAM8B,eAAeC,SAAS/B,EAAM8B,eAAeC,QAAQE,SAMHjC,EAAMgC,WAEvEE,EAAiBpB,EAAW,KAAOd,EAAMmC,QAGzCC,EAAwBzB,EAAOV,GAAK,YAAYU,EAAOV,KAAO,GAEpE,OACIE,EAACN,EAAAA,CACGwC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CxB,EAC9C,2CAA4CC,EAC5C,4CAA6Cf,EAAMuC,UACnD,0CAA2CvC,EAAMwC,QACjD,6CAA8C5B,EAAS6B,WAE3DA,SAAUzC,EAAMyC,SAChB3C,WAAYE,EAAMF,WAClB4C,QAASjB,EACTkB,UAAY7B,EAAmC,KAAxBd,EAAM4C,gBAC7B7C,gBAAiBC,EAAMD,mBAIlBC,EAAM6C,iBAAmB7C,EAAMC,IAAM,CAAEA,GAAID,EAAMC,KAEpDD,EAAMF,WAaJK,EAAC2C,EAAAA,MACK/B,GAAYH,EAASmC,MAAQ5C,EAAC6C,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKrC,EAASmC,KAAMG,IAAKtC,EAASS,OACzHlB,EAACgD,QAAAA,CACGC,MAAO5B,EACP6B,oBAAkB,OAClBC,gBAAetD,EAAMuD,aACrBC,gBAAezC,EACf0C,YAAWzD,EAAMuD,aACjBG,aAAa,MACbrB,UAAU,+BACVsB,QAAS3D,EAAM2D,QACfxB,QAASD,EACT7B,IAAKL,EAAM8B,eACX8B,KAAK,WACLC,wBAAuBzB,EACvB3B,KAAK,OACLqD,SAAU9D,EAAMc,SAChBb,GAAID,EAAMC,GACVM,mBAAkBP,EAAMQ,gBACxBQ,SAAUA,KAEZD,GAAYH,EAASmD,eACnB5D,EAAC6D,OAAAA,CAAK3B,UAAU,oDAAoDzB,EAASmD,gBAlCrF5D,EAAC2C,OACIlC,EAASmC,MAAQ5C,EAAC6C,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKrC,EAASmC,KAAMG,IAAKtC,EAASS,OAC5GlB,EAAC6D,OAAAA,CACG3B,UAAW4B,EAAW,yCAA0C,CAC5D,qDAAsDhD,KAGzDE,GAEJP,EAASmD,eAAiB5D,EAAC6D,OAAAA,CAAK3B,UAAU,oDAAoDzB,EAASmD,gBA+B5H"}

package/dist/es/components/internal/FormFields/Select/components/SelectList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import o from"./SelectListItem.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";function n({selected:n,active:r,filteredItems:d,showList:s,...c}){const{i18n:l}=i();return e("ul",{className:t({"adyen-checkout__dropdown__list":!0,"adyen-checkout__dropdown__list--active":s}),id:c.selectListId,ref:c.selectListRef,role:"listbox"},d.length?d.map((t=>e(o,{active:t.id===r.id,item:t,key:t.id,onSelect:c.onSelect,onHover:c.onHover,selected:t.id===n.id}))):e("div",{className:"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options"},l.get("select.noOptionsFound")))}export{n as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import o from"./SelectListItem.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";function n({selected:n,active:r,filteredItems:d,showList:s,...c}){const{i18n:l}=i();return e("ul",{className:t({"adyen-checkout__dropdown__list":!0,"adyen-checkout__dropdown__list--active":s}),id:c.selectListId,ref:c.selectListRef,role:"listbox"},d.length?d.map(t=>e(o,{active:t.id===r.id,item:t,key:t.id,onSelect:c.onSelect,onHover:c.onHover,selected:t.id===n.id})):e("div",{className:"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options"},l.get("select.noOptionsFound")))}export{n as default};
 //# sourceMappingURL=SelectList.js.map

package/dist/es/components/internal/FormFields/Select/components/SelectList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectList.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport SelectListItem from './SelectListItem';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { SelectListProps } from '../types';\n\nfunction SelectList({ selected, active, filteredItems, showList, ...props }: SelectListProps) {\n const { i18n } = useCoreContext();\n\n return (\n /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n <ul\n className={cx({\n 'adyen-checkout__dropdown__list': true,\n 'adyen-checkout__dropdown__list--active': showList\n })}\n id={props.selectListId}\n ref={props.selectListRef}\n role=\"listbox\"\n >\n {filteredItems.length ? (\n filteredItems.map(item => (\n <SelectListItem\n active={item.id === active.id}\n item={item}\n key={item.id}\n onSelect={props.onSelect}\n onHover={props.onHover}\n selected={item.id === selected.id}\n />\n ))\n ) : (\n <div className=\"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options\">\n {i18n.get('select.noOptionsFound')}\n </div>\n )}\n </ul>\n );\n}\n\nexport default SelectList;\n"],"names":["SelectList","selected","active","filteredItems","showList","props","i18n","useCoreContext","h","ul","className","cx","id","selectListId","ref","selectListRef","role","length","map","item","SelectListItem","key","onSelect","onHover","div","get"],"mappings":"8OAMA,SAASA,GAAWC,SAAEA,EAAQC,OAAEA,EAAMC,cAAEA,EAAaC,SAAEA,KAAaC,IAChE,MAAMC,KAAEA,GAASC,IAEjB,OAEIC,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,kCAAkC,EAClC,yCAA0CP,IAE9CQ,GAAIP,EAAMQ,aACVC,IAAKT,EAAMU,cACXC,KAAK,WAEJb,EAAcc,OACXd,EAAce,~~KAAIC~~,GACdX,EAACY,EAAAA,CACGlB,OAAQiB,EAAKP,KAAOV,EAAOU,GAC3BO,KAAMA,EACNE,IAAKF,EAAKP,GACVU,SAAUjB,EAAMiB,SAChBC,QAASlB,EAAMkB,QACftB,SAAUkB,EAAKP,KAAOX,EAASW,~~OAIvCJ~~,EAACgB,MAAAA,CAAId,UAAU,mFACVJ,EAAKmB,IAAI,0BAK9B"}
1	+ {"version":3,"file":"SelectList.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport SelectListItem from './SelectListItem';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { SelectListProps } from '../types';\n\nfunction SelectList({ selected, active, filteredItems, showList, ...props }: SelectListProps) {\n const { i18n } = useCoreContext();\n\n return (\n /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n <ul\n className={cx({\n 'adyen-checkout__dropdown__list': true,\n 'adyen-checkout__dropdown__list--active': showList\n })}\n id={props.selectListId}\n ref={props.selectListRef}\n role=\"listbox\"\n >\n {filteredItems.length ? (\n filteredItems.map(item => (\n <SelectListItem\n active={item.id === active.id}\n item={item}\n key={item.id}\n onSelect={props.onSelect}\n onHover={props.onHover}\n selected={item.id === selected.id}\n />\n ))\n ) : (\n <div className=\"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options\">\n {i18n.get('select.noOptionsFound')}\n </div>\n )}\n </ul>\n );\n}\n\nexport default SelectList;\n"],"names":["SelectList","selected","active","filteredItems","showList","props","i18n","useCoreContext","h","ul","className","cx","id","selectListId","ref","selectListRef","role","length","map","item","SelectListItem","key","onSelect","onHover","div","get"],"mappings":"8OAMA,SAASA,GAAWC,SAAEA,EAAQC,OAAEA,EAAMC,cAAEA,EAAaC,SAAEA,KAAaC,IAChE,MAAMC,KAAEA,GAASC,IAEjB,OAEIC,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,kCAAkC,EAClC,yCAA0CP,IAE9CQ,GAAIP,EAAMQ,aACVC,IAAKT,EAAMU,cACXC,KAAK,WAEJb,EAAcc,OACXd,EAAce,IAAIC,GACdX,EAACY,EAAAA,CACGlB,OAAQiB,EAAKP,KAAOV,EAAOU,GAC3BO,KAAMA,EACNE,IAAKF,EAAKP,GACVU,SAAUjB,EAAMiB,SAChBC,QAASlB,EAAMkB,QACftB,SAAUkB,EAAKP,KAAOX,EAASW,MAIvCJ,EAACgB,MAAAA,CAAId,UAAU,mFACVJ,EAAKmB,IAAI,0BAK9B"}

package/dist/es/components/internal/FormFields/Select/components/SelectListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectListItem.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectListItem.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport { SelectItemProps } from '../types';\nimport Img from '../../../Img';\nimport Icon from '../../../Icon';\nimport { PREFIX } from '../../../Icon/constants';\n\nconst SelectListItem = ({ item, active, selected, ...props }: SelectItemProps) => {\n return (\n /* eslint-disable jsx-a11y/click-events-have-key-events /\n <li\n aria-disabled={!!item.disabled}\n aria-selected={selected}\n className={cx([\n 'adyen-checkout__dropdown__element',\n {\n 'adyen-checkout__dropdown__element--active': active,\n 'adyen-checkout__dropdown__element--disabled': !!item.disabled\n }\n ])}\n // A change in Preact v10.11.1 means that all falsy values are assessed and set on data attributes.\n // In the case of data-disabled we only ever want it set if item.disabled is actually true, since the presence of the data-disabled attr,\n // regardless of its value, will disable the select list item\n data-disabled={item.disabled === true ? true : null}\n data-value={item.id}\n onClick={props.onSelect}\n onMouseEnter={props.onHover}\n / eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role */\n role=\"option\"\n //tabIndex={-1}\n id={`listItem-${item.id}`}\n >\n {item.icon && <Img className=\"adyen-checkout__dropdown__element__icon\" alt={item.name} src={item.icon} />}\n <span className=\"adyen-checkout__dropdown__element__text\">{item.name}</span>\n {item.secondaryText && <span className=\"adyen-checkout__dropdown__element__secondary-text\">{item.secondaryText}</span>}\n {selected && <Icon type={`${PREFIX}checkmark`} height={14} width={14} />}\n </li>\n );\n};\n\nexport default SelectListItem;\n"],"names":["SelectListItem","item","active","selected","props","h","li","aria-disabled","disabled","aria-selected","className","cx","data-disabled","data-value","id","onClick","onSelect","onMouseEnter","onHover","role","icon","Img","alt","name","src","span","secondaryText","Icon","type","PREFIX","height","width"],"mappings":"~~0PAOMA~~,~~MAAAA~~,EAAiB,EAAGC,OAAMC,SAAQC,cAAaC,KAG7CC,EAACC,KAAAA,CACGC,kBAAiBN,EAAKO,SACtBC,gBAAeN,EACfO,UAAWC,EAAG,CACV,oCACA,CACI,4CAA6CT,EAC7C,gDAAiDD,EAAKO,YAM9DI,iBAAiC,IAAlBX,EAAKO,UAA2B,KAC/CK,aAAYZ,EAAKa,GACjBC,QAASX,EAAMY,SACfC,aAAcb,EAAMc,QAEpBC,KAAK,SAELL,GAAI,YAAYb,EAAKa,MAEpBb,EAAKmB,MAAQf,EAACgB,EAAAA,CAAIX,UAAU,0CAA0CY,IAAKrB,EAAKsB,KAAMC,IAAKvB,EAAKmB,OACjGf,EAACoB,OAAAA,CAAKf,UAAU,2CAA2CT,EAAKsB,MAC/DtB,EAAKyB,eAAiBrB,EAACoB,OAAAA,CAAKf,UAAU,qDAAqDT,EAAKyB,eAChGvB,GAAYE,EAACsB,EAAAA,CAAKC,KAAM,GAAGC,aAAmBC,OAAQ,GAAIC,MAAO"}
1	+ {"version":3,"file":"SelectListItem.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectListItem.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport { SelectItemProps } from '../types';\nimport Img from '../../../Img';\nimport Icon from '../../../Icon';\nimport { PREFIX } from '../../../Icon/constants';\n\nconst SelectListItem = ({ item, active, selected, ...props }: SelectItemProps) => {\n return (\n /* eslint-disable jsx-a11y/click-events-have-key-events /\n <li\n aria-disabled={!!item.disabled}\n aria-selected={selected}\n className={cx([\n 'adyen-checkout__dropdown__element',\n {\n 'adyen-checkout__dropdown__element--active': active,\n 'adyen-checkout__dropdown__element--disabled': !!item.disabled\n }\n ])}\n // A change in Preact v10.11.1 means that all falsy values are assessed and set on data attributes.\n // In the case of data-disabled we only ever want it set if item.disabled is actually true, since the presence of the data-disabled attr,\n // regardless of its value, will disable the select list item\n data-disabled={item.disabled === true ? true : null}\n data-value={item.id}\n onClick={props.onSelect}\n onMouseEnter={props.onHover}\n / eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role */\n role=\"option\"\n //tabIndex={-1}\n id={`listItem-${item.id}`}\n >\n {item.icon && <Img className=\"adyen-checkout__dropdown__element__icon\" alt={item.name} src={item.icon} />}\n <span className=\"adyen-checkout__dropdown__element__text\">{item.name}</span>\n {item.secondaryText && <span className=\"adyen-checkout__dropdown__element__secondary-text\">{item.secondaryText}</span>}\n {selected && <Icon type={`${PREFIX}checkmark`} height={14} width={14} />}\n </li>\n );\n};\n\nexport default SelectListItem;\n"],"names":["SelectListItem","item","active","selected","props","h","li","aria-disabled","disabled","aria-selected","className","cx","data-disabled","data-value","id","onClick","onSelect","onMouseEnter","onHover","role","icon","Img","alt","name","src","span","secondaryText","Icon","type","PREFIX","height","width"],"mappings":"0PAOA,MAAMA,EAAiB,EAAGC,OAAMC,SAAQC,cAAaC,KAG7CC,EAACC,KAAAA,CACGC,kBAAiBN,EAAKO,SACtBC,gBAAeN,EACfO,UAAWC,EAAG,CACV,oCACA,CACI,4CAA6CT,EAC7C,gDAAiDD,EAAKO,YAM9DI,iBAAiC,IAAlBX,EAAKO,UAA2B,KAC/CK,aAAYZ,EAAKa,GACjBC,QAASX,EAAMY,SACfC,aAAcb,EAAMc,QAEpBC,KAAK,SAELL,GAAI,YAAYb,EAAKa,MAEpBb,EAAKmB,MAAQf,EAACgB,EAAAA,CAAIX,UAAU,0CAA0CY,IAAKrB,EAAKsB,KAAMC,IAAKvB,EAAKmB,OACjGf,EAACoB,OAAAA,CAAKf,UAAU,2CAA2CT,EAAKsB,MAC/DtB,EAAKyB,eAAiBrB,EAACoB,OAAAA,CAAKf,UAAU,qDAAqDT,EAAKyB,eAChGvB,GAAYE,EAACsB,EAAAA,CAAKC,KAAM,GAAGC,aAAmBC,OAAQ,GAAIC,MAAO"}

package/dist/es/components/internal/FormFields/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/FormFields/utils.ts"],"sourcesContent":["const convertFullToHalf = str => str.replace(/[！-～]/g, r => String.fromCharCode(r.charCodeAt(0) - 0xfee0));\n\n/*\n This function scrolls and element to view and simulates the default behaviour of .focus() by a given browser\n * This function is inspired, yet simplified of the code found here https://gist.github.com/hsablonniere/2581101\n * @param element - element to focus\n */\nconst simulateFocusScroll = (element: HTMLElement) => {\n const parent = element.parentNode as HTMLElement;\n const parentComputedStyle = window.getComputedStyle(parent, null);\n const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'));\n const overTop = element.offsetTop - parent.offsetTop < parent.scrollTop;\n const overBottom = element.offsetTop - parent.offsetTop + element.clientHeight - parentBorderTopWidth > parent.scrollTop + parent.clientHeight;\n\n if (overTop \|\| overBottom) {\n parent.scrollTop = element.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + element.clientHeight / 2;\n }\n};\n\nexport { convertFullToHalf, simulateFocusScroll };\n"],"names":["simulateFocusScroll","element","parent","parentNode","parentComputedStyle","window","getComputedStyle","parentBorderTopWidth","parseInt","getPropertyValue","overTop","offsetTop","scrollTop","overBottom","clientHeight"],"mappings":"AAOA,MAAMA,EAAuBC,IACzB,MAAMC,EAASD,EAAQE,WACjBC,EAAsBC,OAAOC,iBAAiBJ,EAAQ,MACtDK,EAAuBC,SAASJ,EAAoBK,iBAAiB,qBACrEC,EAAUT,EAAQU,UAAYT,EAAOS,UAAYT,EAAOU,UACxDC,EAAaZ,EAAQU,UAAYT,EAAOS,UAAYV,EAAQa,aAAeP,EAAuBL,EAAOU,UAAYV,EAAOY,cAE9HJ,GAAWG,KACXX,EAAOU,UAAYX,EAAQU,UAAYT,EAAOS,UAAYT,EAAOY,aAAe,EAAIP,EAAuBN,EAAQa,aAAe~~,EACtI~~"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/FormFields/utils.ts"],"sourcesContent":["const convertFullToHalf = str => str.replace(/[！-～]/g, r => String.fromCharCode(r.charCodeAt(0) - 0xfee0));\n\n/*\n This function scrolls and element to view and simulates the default behaviour of .focus() by a given browser\n * This function is inspired, yet simplified of the code found here https://gist.github.com/hsablonniere/2581101\n * @param element - element to focus\n */\nconst simulateFocusScroll = (element: HTMLElement) => {\n const parent = element.parentNode as HTMLElement;\n const parentComputedStyle = window.getComputedStyle(parent, null);\n const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'));\n const overTop = element.offsetTop - parent.offsetTop < parent.scrollTop;\n const overBottom = element.offsetTop - parent.offsetTop + element.clientHeight - parentBorderTopWidth > parent.scrollTop + parent.clientHeight;\n\n if (overTop \|\| overBottom) {\n parent.scrollTop = element.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + element.clientHeight / 2;\n }\n};\n\nexport { convertFullToHalf, simulateFocusScroll };\n"],"names":["simulateFocusScroll","element","parent","parentNode","parentComputedStyle","window","getComputedStyle","parentBorderTopWidth","parseInt","getPropertyValue","overTop","offsetTop","scrollTop","overBottom","clientHeight"],"mappings":"AAOA,MAAMA,EAAuBC,IACzB,MAAMC,EAASD,EAAQE,WACjBC,EAAsBC,OAAOC,iBAAiBJ,EAAQ,MACtDK,EAAuBC,SAASJ,EAAoBK,iBAAiB,qBACrEC,EAAUT,EAAQU,UAAYT,EAAOS,UAAYT,EAAOU,UACxDC,EAAaZ,EAAQU,UAAYT,EAAOS,UAAYV,EAAQa,aAAeP,EAAuBL,EAAOU,UAAYV,EAAOY,cAE9HJ,GAAWG,KACXX,EAAOU,UAAYX,EAAQU,UAAYT,EAAOS,UAAYT,EAAOY,aAAe,EAAIP,EAAuBN,EAAQa,aAAe"}

package/dist/es/components/internal/FormInstruction/FormInstruction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormInstruction.js","sources":["../../../../../src/components/internal/FormInstruction/FormInstruction.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './FormInstruction.scss';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\n\nconst FormInstruction = () => {\n const { i18n } = useCoreContext();\n return <p className=\"adyen-checkout-form-instruction\">{i18n.get('form.instruction')}</p>;\n};\n\nexport default FormInstruction;\n"],"names":["FormInstruction","i18n","useCoreContext","h","p","className","get"],"mappings":"+IAIA,MAAMA,EAAkB,KACpB,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,IAAAA,CAAEC,UAAU,mCAAmCJ,EAAKK,IAAI~~,oBAAA~~"}
1	+ {"version":3,"file":"FormInstruction.js","sources":["../../../../../src/components/internal/FormInstruction/FormInstruction.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './FormInstruction.scss';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\n\nconst FormInstruction = () => {\n const { i18n } = useCoreContext();\n return <p className=\"adyen-checkout-form-instruction\">{i18n.get('form.instruction')}</p>;\n};\n\nexport default FormInstruction;\n"],"names":["FormInstruction","i18n","useCoreContext","h","p","className","get"],"mappings":"+IAIA,MAAMA,EAAkB,KACpB,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,IAAAA,CAAEC,UAAU,mCAAmCJ,EAAKK,IAAI"}

package/dist/es/components/internal/IFrame/Iframe.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Component as e,createElement as i}from"../../../external/preact/dist/preact.js";import t from"../../../_virtual/index.js";function a(e,i,t){return i in e?Object.defineProperty(e,i,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[i]=t,e}class n extends e{iframeOnLoad(){this.props.callback&&"function"==typeof this.props.callback&&this.props.callback(this.iframeEl.contentWindow)}componentDidMount(){this.iframeEl.addEventListener?this.iframeEl.addEventListener("load",this.iframeOnLoad.bind(this),!1):this.iframeEl.attachEvent?this.iframeEl.attachEvent("onload",this.iframeOnLoad.bind(this)):this.iframeEl.onload=this.iframeOnLoad.bind(this)}componentWillUnmount(){this.iframeEl.removeEventListener?this.iframeEl.removeEventListener("load",this.iframeOnLoad.bind(this),!1):this.iframeEl.detachEvent?this.iframeEl.detachEvent("onload",this.iframeOnLoad.bind(this)):this.iframeEl.onload=null}render({name:e,src:a,width:n,height:r,minWidth:o,minHeight:l,allow:s,title:h,classNameModifiers:m}){const d=m.filter((e=>!!e));return i("iframe",{ref:e=>{this.iframeEl=e},allow:s,className:t("adyen-checkout__iframe",`adyen-checkout__iframe--${e}`,d.length&&m.map((i=>`adyen-checkout__iframe--${e}-${i}`))),name:e,src:a,width:n,height:r,frameBorder:"0",title:h,referrerpolicy:"origin","min-width":o,"min-height":l})}constructor(...e){super(...e),a(this,"iframeEl",void 0)}}a(n,"defaultProps",{width:"0",height:"0",minWidth:"0",minHeight:"0",src:null,allow:null,title:"components iframe",classNameModifiers:[]});export{n as default};
+import{Component as e,createElement as i}from"../../../external/preact/dist/preact.js";import t from"../../../_virtual/index.js";function a(e,i,t){return i in e?Object.defineProperty(e,i,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[i]=t,e}class n extends e{iframeOnLoad(){this.props.callback&&"function"==typeof this.props.callback&&this.props.callback(this.iframeEl.contentWindow)}componentDidMount(){this.iframeEl.addEventListener?this.iframeEl.addEventListener("load",this.iframeOnLoad.bind(this),!1):this.iframeEl.attachEvent?this.iframeEl.attachEvent("onload",this.iframeOnLoad.bind(this)):this.iframeEl.onload=this.iframeOnLoad.bind(this)}componentWillUnmount(){this.iframeEl.removeEventListener?this.iframeEl.removeEventListener("load",this.iframeOnLoad.bind(this),!1):this.iframeEl.detachEvent?this.iframeEl.detachEvent("onload",this.iframeOnLoad.bind(this)):this.iframeEl.onload=null}render({name:e,src:a,width:n,height:r,minWidth:o,minHeight:l,allow:s,title:h,classNameModifiers:m}){const d=m.filter(e=>!!e);return i("iframe",{ref:e=>{this.iframeEl=e},allow:s,className:t("adyen-checkout__iframe",`adyen-checkout__iframe--${e}`,d.length&&m.map(i=>`adyen-checkout__iframe--${e}-${i}`)),name:e,src:a,width:n,height:r,frameBorder:"0",title:h,referrerpolicy:"origin","min-width":o,"min-height":l})}constructor(...e){super(...e),a(this,"iframeEl",void 0)}}a(n,"defaultProps",{width:"0",height:"0",minWidth:"0",minHeight:"0",src:null,allow:null,title:"components iframe",classNameModifiers:[]});export{n as default};
 //# sourceMappingURL=Iframe.js.map

package/dist/es/components/internal/IFrame/Iframe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Iframe.js","sources":["../../../../../src/components/internal/IFrame/Iframe.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\nimport './Iframe.scss';\n\ninterface IframeProps {\n width?: string;\n height?: string;\n minWidth?: string;\n minHeight?: string;\n border?: string;\n src?: string;\n allow?: string;\n name?: string;\n title?: string;\n classNameModifiers?: string[];\n callback?: (contentWindow) => void;\n}\n\nclass Iframe extends Component<IframeProps> {\n public static defaultProps = {\n width: '0',\n height: '0',\n minWidth: '0',\n minHeight: '0',\n src: null,\n allow: null,\n title: 'components iframe',\n classNameModifiers: []\n };\n\n private iframeEl;\n\n iframeOnLoad() {\n if (this.props.callback && typeof this.props.callback === 'function') {\n this.props.callback(this.iframeEl.contentWindow);\n }\n }\n\n componentDidMount() {\n if (this.iframeEl.addEventListener) {\n this.iframeEl.addEventListener('load', this.iframeOnLoad.bind(this), false);\n } else if (this.iframeEl.attachEvent) {\n // IE fallback\n this.iframeEl.attachEvent('onload', this.iframeOnLoad.bind(this));\n } else {\n this.iframeEl.onload = this.iframeOnLoad.bind(this);\n }\n }\n\n componentWillUnmount() {\n if (this.iframeEl.removeEventListener) {\n this.iframeEl.removeEventListener('load', this.iframeOnLoad.bind(this), false);\n } else if (this.iframeEl.detachEvent) {\n // IE fallback\n this.iframeEl.detachEvent('onload', this.iframeOnLoad.bind(this));\n } else {\n this.iframeEl.onload = null;\n }\n }\n\n render({ name, src, width, height, minWidth, minHeight, allow, title, classNameModifiers }: IframeProps) {\n const validClassNameModifiers = classNameModifiers.filter(m => !!m);\n\n return (\n <iframe\n ref={ref => {\n this.iframeEl = ref;\n }}\n allow={allow}\n className={classNames(\n 'adyen-checkout__iframe',\n `adyen-checkout__iframe--${name}`,\n validClassNameModifiers.length && classNameModifiers.map(m => `adyen-checkout__iframe--${name}-${m}`)\n )}\n name={name}\n src={src}\n width={width}\n height={height}\n frameBorder=\"0\"\n title={title}\n /* eslint-disable react/no-unknown-property /\n referrerpolicy=\"origin\"\n min-width={minWidth}\n min-height={minHeight}\n / eslint-enable react/no-unknown-property */\n />\n );\n }\n}\n\nexport default Iframe;\n"],"names":["Iframe","Component","iframeOnLoad","this","props","callback","iframeEl","contentWindow","componentDidMount","addEventListener","bind","attachEvent","onload","componentWillUnmount","removeEventListener","detachEvent","render","name","src","width","height","minWidth","minHeight","allow","title","classNameModifiers","validClassNameModifiers","filter","m","h","iframe","ref","className","classNames","length","map","frameBorder","referrerpolicy","min-width","min-height","super","args","_define_property","defaultProps"],"mappings":"yPAkBA,MAAMA,UAAeC,EAcjBC,YAAAA,GACQC,KAAKC,MAAMC,UAA2C,mBAAxBF,KAAKC,MAAMC,UACzCF,KAAKC,MAAMC,SAASF,KAAKG,SAASC,cAE1C,CAEAC,iBAAAA,GACQL,KAAKG,SAASG,iBACdN,KAAKG,SAASG,iBAAiB,OAAQN,KAAKD,aAAaQ,KAAKP,OAAO,GAC9DA,KAAKG,SAASK,YAErBR,KAAKG,SAASK,YAAY,SAAUR,KAAKD,aAAaQ,KAAKP,OAE3DA,KAAKG,SAASM,OAAST,KAAKD,aAAaQ,KAAKP,KAEtD,CAEAU,oBAAAA,GACQV,KAAKG,SAASQ,oBACdX,KAAKG,SAASQ,oBAAoB,OAAQX,KAAKD,aAAaQ,KAAKP,OAAO,GACjEA,KAAKG,SAASS,YAErBZ,KAAKG,SAASS,YAAY,SAAUZ,KAAKD,aAAaQ,KAAKP,OAE3DA,KAAKG,SAASM,OAAS,IAE/B,CAEAI,MAAAA,EAAOC,KAAEA,EAAIC,IAAEA,EAAGC,MAAEA,EAAKC,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAKC,MAAEA,EAAKC,mBAAEA,IAClE,MAAMC,EAA0BD,EAAmBE,~~QAAOC~~,KAAOA,~~IAEjE~~,OACIC,EAACC,SAAAA,CACGC,IAAKA,IACD5B,KAAKG,SAAWyB,~~CAAAA~~,~~EAEpBR,~~MAAOA,EACPS,UAAWC,EACP,yBACA,2BAA2BhB,IAC3BS,EAAwBQ,QAAUT,EAAmBU,~~KAAIP~~,GAAK,2BAA2BX,KAAQW,~~OAErGX~~,KAAMA,EACNC,IAAKA,EACLC,MAAOA,EACPC,OAAQA,EACRgB,YAAY,IACZZ,MAAOA,EAEPa,eAAe,SACfC,YAAWjB,EACXkB,aAAYjB,GAIxB,mBArEJkB,~~SAYIC~~,~~GAAAC~~,EAAAvC,KAAQG,gBAAR,IAXAoC,EADE1C,EACY2C,eAAe,CACzBxB,MAAO,IACPC,OAAQ,IACRC,SAAU,IACVC,UAAW,IACXJ,IAAK,KACLK,MAAO,KACPC,MAAO,oBACPC,mBAAoB"}
1	+ {"version":3,"file":"Iframe.js","sources":["../../../../../src/components/internal/IFrame/Iframe.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport classNames from 'classnames';\nimport './Iframe.scss';\n\ninterface IframeProps {\n width?: string;\n height?: string;\n minWidth?: string;\n minHeight?: string;\n border?: string;\n src?: string;\n allow?: string;\n name?: string;\n title?: string;\n classNameModifiers?: string[];\n callback?: (contentWindow) => void;\n}\n\nclass Iframe extends Component<IframeProps> {\n public static defaultProps = {\n width: '0',\n height: '0',\n minWidth: '0',\n minHeight: '0',\n src: null,\n allow: null,\n title: 'components iframe',\n classNameModifiers: []\n };\n\n private iframeEl;\n\n iframeOnLoad() {\n if (this.props.callback && typeof this.props.callback === 'function') {\n this.props.callback(this.iframeEl.contentWindow);\n }\n }\n\n componentDidMount() {\n if (this.iframeEl.addEventListener) {\n this.iframeEl.addEventListener('load', this.iframeOnLoad.bind(this), false);\n } else if (this.iframeEl.attachEvent) {\n // IE fallback\n this.iframeEl.attachEvent('onload', this.iframeOnLoad.bind(this));\n } else {\n this.iframeEl.onload = this.iframeOnLoad.bind(this);\n }\n }\n\n componentWillUnmount() {\n if (this.iframeEl.removeEventListener) {\n this.iframeEl.removeEventListener('load', this.iframeOnLoad.bind(this), false);\n } else if (this.iframeEl.detachEvent) {\n // IE fallback\n this.iframeEl.detachEvent('onload', this.iframeOnLoad.bind(this));\n } else {\n this.iframeEl.onload = null;\n }\n }\n\n render({ name, src, width, height, minWidth, minHeight, allow, title, classNameModifiers }: IframeProps) {\n const validClassNameModifiers = classNameModifiers.filter(m => !!m);\n\n return (\n <iframe\n ref={ref => {\n this.iframeEl = ref;\n }}\n allow={allow}\n className={classNames(\n 'adyen-checkout__iframe',\n `adyen-checkout__iframe--${name}`,\n validClassNameModifiers.length && classNameModifiers.map(m => `adyen-checkout__iframe--${name}-${m}`)\n )}\n name={name}\n src={src}\n width={width}\n height={height}\n frameBorder=\"0\"\n title={title}\n /* eslint-disable react/no-unknown-property /\n referrerpolicy=\"origin\"\n min-width={minWidth}\n min-height={minHeight}\n / eslint-enable react/no-unknown-property */\n />\n );\n }\n}\n\nexport default Iframe;\n"],"names":["Iframe","Component","iframeOnLoad","this","props","callback","iframeEl","contentWindow","componentDidMount","addEventListener","bind","attachEvent","onload","componentWillUnmount","removeEventListener","detachEvent","render","name","src","width","height","minWidth","minHeight","allow","title","classNameModifiers","validClassNameModifiers","filter","m","h","iframe","ref","className","classNames","length","map","frameBorder","referrerpolicy","min-width","min-height","super","args","_define_property","defaultProps"],"mappings":"yPAkBA,MAAMA,UAAeC,EAcjBC,YAAAA,GACQC,KAAKC,MAAMC,UAA2C,mBAAxBF,KAAKC,MAAMC,UACzCF,KAAKC,MAAMC,SAASF,KAAKG,SAASC,cAE1C,CAEAC,iBAAAA,GACQL,KAAKG,SAASG,iBACdN,KAAKG,SAASG,iBAAiB,OAAQN,KAAKD,aAAaQ,KAAKP,OAAO,GAC9DA,KAAKG,SAASK,YAErBR,KAAKG,SAASK,YAAY,SAAUR,KAAKD,aAAaQ,KAAKP,OAE3DA,KAAKG,SAASM,OAAST,KAAKD,aAAaQ,KAAKP,KAEtD,CAEAU,oBAAAA,GACQV,KAAKG,SAASQ,oBACdX,KAAKG,SAASQ,oBAAoB,OAAQX,KAAKD,aAAaQ,KAAKP,OAAO,GACjEA,KAAKG,SAASS,YAErBZ,KAAKG,SAASS,YAAY,SAAUZ,KAAKD,aAAaQ,KAAKP,OAE3DA,KAAKG,SAASM,OAAS,IAE/B,CAEAI,MAAAA,EAAOC,KAAEA,EAAIC,IAAEA,EAAGC,MAAEA,EAAKC,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAKC,MAAEA,EAAKC,mBAAEA,IAClE,MAAMC,EAA0BD,EAAmBE,OAAOC,KAAOA,GAEjE,OACIC,EAACC,SAAAA,CACGC,IAAKA,IACD5B,KAAKG,SAAWyB,GAEpBR,MAAOA,EACPS,UAAWC,EACP,yBACA,2BAA2BhB,IAC3BS,EAAwBQ,QAAUT,EAAmBU,IAAIP,GAAK,2BAA2BX,KAAQW,MAErGX,KAAMA,EACNC,IAAKA,EACLC,MAAOA,EACPC,OAAQA,EACRgB,YAAY,IACZZ,MAAOA,EAEPa,eAAe,SACfC,YAAWjB,EACXkB,aAAYjB,GAIxB,mBArEJkB,SAAAC,GAYIC,EAAAvC,KAAQG,gBAAR,IAXAoC,EADE1C,EACY2C,eAAe,CACzBxB,MAAO,IACPC,OAAQ,IACRC,SAAU,IACVC,UAAW,IACXJ,IAAK,KACLK,MAAO,KACPC,MAAO,oBACPC,mBAAoB"}

package/dist/es/components/internal/IbanInput/IbanInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Component as e,createElement as a}from"../../../external/preact/dist/preact.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import r from"../FormFields/Field/Field.js";import{isValidHolder as s,checkIbanStatus as i}from"./validate.js";import{electronicFormat as n,formatIban as o,getCountryCode as l,getNextCursorPosition as d}from"./utils.js";import h from"../FormFields/Fieldset/Fieldset.js";import u from"../FormFields/InputText.js";function b(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}const m={isValid:!1,errorMessage:"ach.accountHolderNameField.invalid",error:"ach.accountHolderNameField.invalid"},c={isValid:!1,errorMessage:"sepaDirectDebit.ibanField.invalid",error:"sepaDirectDebit.ibanField.invalid"};class p extends e{setStatus(e){this.setState({status:e})}onChange(){const e=!this.props.holderName||s(this.state.data.ownerName),a="valid"===i(this.state.data.ibanNumber).status&&e,t={data:this.state.data,isValid:a,errors:this.state.errors};this.props.onChange(t)}showValidation(){const e=i(this.state.data.ibanNumber).status,a=s(this.state.data.ownerName);this.setError("iban","valid"!==e?c:null);const t=a?null:m;this.setError("holder",t,this.onChange)}render({placeholders:e},{data:s,errors:i,valid:n}){const{i18n:o}=t();return a(h,{classNameModifiers:["iban-input"],label:this.props.label},this.props.holderName&&a(r,{className:"adyen-checkout__field--owner-name",label:o.get("sepa.ownerName"),filled:s.ownerName&&s.ownerName.length,errorMessage:!!i.holder&&o.get(i.holder.error),dir:"ltr",i18n:o,name:"ownerName"},a(u,{name:"ownerName",className:"adyen-checkout__iban-input__owner-name",placeholder:e?.ownerName,value:s.ownerName,"aria-invalid":!!this.state.errors.holder,"aria-label":o.get("sepa.ownerName"),onInput:e=>this.handleHolderInput(e.target.value),onBlur:e=>this.handleHolderInput(e.target.value)})),a(r,{className:"adyen-checkout__field--iban-number",label:o.get("sepa.ibanNumber"),errorMessage:!!i.iban&&o.get(i.iban.error),filled:s.ibanNumber&&s.ibanNumber.length,isValid:n.iban,onBlur:this.handleIbanBlur,dir:"ltr",i18n:o,name:"ibanNumber"},a(u,{setRef:e=>{this.ibanNumber=e},name:"ibanNumber",className:"adyen-checkout__iban-input__iban-number",classNameModifiers:["large"],placeholder:e?.ibanNumber,value:s.ibanNumber,onInput:this.handleIbanInput,"aria-invalid":!!this.state.errors.iban,"aria-label":o.get("sepa.ibanNumber"),autocorrect:"off",spellcheck:!1})),this.props.showPayButton&&this.props.payButton({status:this.state.status}))}constructor(e){if(super(e),b(this,"ibanNumber",void 0),b(this,"setData",((e,a,t)=>{this.setState((t=>({data:{...t.data,[e]:a}})),t)})),b(this,"setError",((e,a,t)=>{this.setState((t=>({errors:{...t.errors,[e]:a}})),t)})),b(this,"setValid",((e,a,t)=>{this.setState((t=>({valid:{...t.valid,[e]:a}})),t)})),b(this,"handleHolderInput",(e=>{this.setState((a=>({data:{...a.data,ownerName:e}})),(()=>{const e=s(this.state.data.ownerName),a=null==e||e?null:m;this.setError("holder",a,this.onChange)}))})),b(this,"handleIbanInput",(e=>{const a=e.target.value,t=n(a),r=o(t),s=i(r).status,h=l(t),u=e.target.selectionStart,b=this.state.data.ibanNumber,m=d(u,r,b);this.setState((e=>({data:{...e.data,ibanNumber:r,countryCode:h},errors:{...e.errors,iban:"invalid"===s?c:null},valid:{...e.valid,iban:"valid"===s}})),(()=>{e.target.setSelectionRange(m,m),this.onChange()}))})),b(this,"handleIbanBlur",(e=>{const a=e.target.value;if(a.length>0){const e=i(a).status;this.setError("iban","valid"!==e?c:null,this.onChange)}else this.setError("iban",null,this.onChange)})),this.state={status:"ready",data:{ownerName:e?.data?.ownerName||"",ibanNumber:e?.data?.ibanNumber||"",countryCode:e?.data?.countryCode||""},isValid:!1,cursor:0,errors:{},valid:{}},this.state.data.ibanNumber){const e=n(this.state.data.ibanNumber);this.state.data.ibanNumber=o(e)}if(this.state.data.ibanNumber||this.state.data.ownerName){const e=this.props.holderName?s(this.state.data.ownerName):"",a=(this.state.data.ibanNumber?"valid"===i(this.state.data.ibanNumber).status:"")&&e,t={data:this.state.data,isValid:a};this.props.onChange(t)}}}b(p,"defaultProps",{onChange:()=>{},countryCode:null,holderName:!0,placeholders:{},label:null});export{p as default};
+import{Component as e,createElement as a}from"../../../external/preact/dist/preact.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import r from"../FormFields/Field/Field.js";import{isValidHolder as s,checkIbanStatus as i}from"./validate.js";import{electronicFormat as n,formatIban as o,getCountryCode as l,getNextCursorPosition as d}from"./utils.js";import h from"../FormFields/Fieldset/Fieldset.js";import u from"../FormFields/InputText.js";function b(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}const m={isValid:!1,errorMessage:"ach.accountHolderNameField.invalid",error:"ach.accountHolderNameField.invalid"},c={isValid:!1,errorMessage:"sepaDirectDebit.ibanField.invalid",error:"sepaDirectDebit.ibanField.invalid"};class p extends e{setStatus(e){this.setState({status:e})}onChange(){const e=!this.props.holderName||s(this.state.data.ownerName),a="valid"===i(this.state.data.ibanNumber).status&&e,t={data:this.state.data,isValid:a,errors:this.state.errors};this.props.onChange(t)}showValidation(){const e=i(this.state.data.ibanNumber).status,a=s(this.state.data.ownerName);this.setError("iban","valid"!==e?c:null);const t=a?null:m;this.setError("holder",t,this.onChange)}render({placeholders:e},{data:s,errors:i,valid:n}){const{i18n:o}=t();return a(h,{classNameModifiers:["iban-input"],label:this.props.label},this.props.holderName&&a(r,{className:"adyen-checkout__field--owner-name",label:o.get("sepa.ownerName"),filled:s.ownerName&&s.ownerName.length,errorMessage:!!i.holder&&o.get(i.holder.error),dir:"ltr",i18n:o,name:"ownerName"},a(u,{name:"ownerName",className:"adyen-checkout__iban-input__owner-name",placeholder:e?.ownerName,value:s.ownerName,"aria-invalid":!!this.state.errors.holder,"aria-label":o.get("sepa.ownerName"),onInput:e=>this.handleHolderInput(e.target.value),onBlur:e=>this.handleHolderInput(e.target.value)})),a(r,{className:"adyen-checkout__field--iban-number",label:o.get("sepa.ibanNumber"),errorMessage:!!i.iban&&o.get(i.iban.error),filled:s.ibanNumber&&s.ibanNumber.length,isValid:n.iban,onBlur:this.handleIbanBlur,dir:"ltr",i18n:o,name:"ibanNumber"},a(u,{setRef:e=>{this.ibanNumber=e},name:"ibanNumber",className:"adyen-checkout__iban-input__iban-number",classNameModifiers:["large"],placeholder:e?.ibanNumber,value:s.ibanNumber,onInput:this.handleIbanInput,"aria-invalid":!!this.state.errors.iban,"aria-label":o.get("sepa.ibanNumber"),autocorrect:"off",spellcheck:!1})),this.props.showPayButton&&this.props.payButton({status:this.state.status}))}constructor(e){if(super(e),b(this,"ibanNumber",void 0),b(this,"setData",(e,a,t)=>{this.setState(t=>({data:{...t.data,[e]:a}}),t)}),b(this,"setError",(e,a,t)=>{this.setState(t=>({errors:{...t.errors,[e]:a}}),t)}),b(this,"setValid",(e,a,t)=>{this.setState(t=>({valid:{...t.valid,[e]:a}}),t)}),b(this,"handleHolderInput",e=>{this.setState(a=>({data:{...a.data,ownerName:e}}),()=>{const e=s(this.state.data.ownerName),a=null==e||e?null:m;this.setError("holder",a,this.onChange)})}),b(this,"handleIbanInput",e=>{const a=e.target.value,t=n(a),r=o(t),s=i(r).status,h=l(t),u=e.target.selectionStart,b=this.state.data.ibanNumber,m=d(u,r,b);this.setState(e=>({data:{...e.data,ibanNumber:r,countryCode:h},errors:{...e.errors,iban:"invalid"===s?c:null},valid:{...e.valid,iban:"valid"===s}}),()=>{e.target.setSelectionRange(m,m),this.onChange()})}),b(this,"handleIbanBlur",e=>{const a=e.target.value;if(a.length>0){const e=i(a).status;this.setError("iban","valid"!==e?c:null,this.onChange)}else this.setError("iban",null,this.onChange)}),this.state={status:"ready",data:{ownerName:e?.data?.ownerName||"",ibanNumber:e?.data?.ibanNumber||"",countryCode:e?.data?.countryCode||""},isValid:!1,cursor:0,errors:{},valid:{}},this.state.data.ibanNumber){const e=n(this.state.data.ibanNumber);this.state.data.ibanNumber=o(e)}if(this.state.data.ibanNumber||this.state.data.ownerName){const e=this.props.holderName?s(this.state.data.ownerName):"",a=(this.state.data.ibanNumber?"valid"===i(this.state.data.ibanNumber).status:"")&&e,t={data:this.state.data,isValid:a};this.props.onChange(t)}}}b(p,"defaultProps",{onChange:()=>{},countryCode:null,holderName:!0,placeholders:{},label:null});export{p as default};
 //# sourceMappingURL=IbanInput.js.map

package/dist/es/components/internal/IbanInput/IbanInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IbanInput.js","sources":["../../../../../src/components/internal/IbanInput/IbanInput.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../FormFields/Field';\nimport { checkIbanStatus, isValidHolder } from './validate';\nimport { electronicFormat, formatIban, getCountryCode, getNextCursorPosition } from './utils';\nimport Fieldset from '../FormFields/Fieldset';\nimport { GenericError } from '../../../core/Errors/types';\nimport InputText from '../FormFields/InputText';\n\ninterface IbanInputProps {\n holderName?: boolean;\n placeholders?: Omit<IbanData, 'countryCode'>;\n countryCode?: string;\n showPayButton?: boolean;\n payButton?: any;\n onChange: (data) => void;\n label: string;\n data: IbanData;\n}\n\ninterface IbanData {\n ownerName?: string;\n ibanNumber?: string;\n countryCode?: string;\n}\n\ninterface IbanInputState {\n data: any;\n errors: any;\n valid: any;\n status: string;\n isValid: boolean;\n cursor: number;\n}\n\nconst ibanHolderNameErrorObj: GenericError = {\n isValid: false,\n errorMessage: 'ach.accountHolderNameField.invalid', // TODO create bespoke translation key\n error: 'ach.accountHolderNameField.invalid'\n};\n\nconst ibanErrorObj: GenericError = {\n isValid: false,\n errorMessage: 'sepaDirectDebit.ibanField.invalid',\n error: 'sepaDirectDebit.ibanField.invalid'\n};\n\nclass IbanInput extends Component<IbanInputProps, IbanInputState> {\n private ibanNumber: HTMLInputElement;\n\n constructor(props) {\n super(props);\n\n this.state = {\n status: 'ready',\n data: {\n ownerName: props?.data?.ownerName \|\| '',\n ibanNumber: props?.data?.ibanNumber \|\| '',\n countryCode: props?.data?.countryCode \|\| ''\n },\n isValid: false,\n cursor: 0,\n errors: {},\n valid: {}\n };\n\n if (this.state.data['ibanNumber']) {\n const electronicFormatIban = electronicFormat(this.state.data['ibanNumber']); // example: NL13TEST0123456789\n this.state.data['ibanNumber'] = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n }\n\n if (this.state.data['ibanNumber'] \|\| this.state.data['ownerName']) {\n const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : '';\n const ibanValid = this.state.data['ibanNumber'] ? checkIbanStatus(this.state.data['ibanNumber']).status === 'valid' : '';\n const isValid = ibanValid && holderNameValid;\n const data = { data: this.state.data, isValid };\n\n this.props.onChange(data);\n }\n }\n\n public static defaultProps = {\n onChange: () => {},\n countryCode: null,\n holderName: true,\n placeholders: {},\n label: null\n };\n\n setStatus(status) {\n this.setState({ status });\n }\n\n onChange() {\n const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : true;\n const ibanValid = checkIbanStatus(this.state.data['ibanNumber']).status === 'valid';\n const isValid = ibanValid && holderNameValid;\n const data = { data: this.state.data, isValid, errors: this.state.errors };\n\n this.props.onChange(data);\n }\n\n public setData = (key, value, cb?) => {\n this.setState(prevState => ({ data: { ...prevState.data, [key]: value } }), cb);\n };\n\n public setError = (key, value, cb?) => {\n this.setState(prevState => ({ errors: { ...prevState.errors, [key]: value } }), cb);\n };\n\n public setValid = (key, value, cb?) => {\n this.setState(prevState => ({ valid: { ...prevState.valid, [key]: value } }), cb);\n };\n\n public handleHolderInput = holder => {\n this.setState(\n prevState => ({ data: { ...prevState.data, ownerName: holder } }),\n () => {\n const holderStatus = isValidHolder(this.state.data['ownerName']);\n const holderErr =\n holderStatus != null && !holderStatus // don't consider null, i.e. a value that has just been deleted, to be in error\n ? ibanHolderNameErrorObj\n : null;\n\n this.setError('holder', holderErr, this.onChange);\n }\n );\n };\n\n public handleIbanInput = e => {\n const inputValue = e.target.value;\n const electronicFormatIban = electronicFormat(inputValue); // example: NL13TEST0123456789\n const iban = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n const validationStatus = checkIbanStatus(iban).status;\n\n const countryCode = getCountryCode(electronicFormatIban);\n\n // calculate cursor's new position\n const cursor = e.target.selectionStart;\n const previousIban = this.state.data['ibanNumber'];\n const newCursorPosition = getNextCursorPosition(cursor, iban, previousIban);\n\n this.setState(\n prevState => ({\n data: { ...prevState.data, ibanNumber: iban, countryCode: countryCode },\n errors: {\n ...prevState.errors,\n iban: validationStatus === 'invalid' ? ibanErrorObj : null\n },\n valid: { ...prevState.valid, iban: validationStatus === 'valid' }\n }),\n () => {\n e.target.setSelectionRange(newCursorPosition, newCursorPosition);\n this.onChange();\n }\n );\n };\n\n public handleIbanBlur = e => {\n const currentIban = e.target.value;\n\n if (currentIban.length > 0) {\n const validationStatus = checkIbanStatus(currentIban).status;\n this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null, this.onChange);\n } else {\n // Empty field is not in error\n this.setError('iban', null, this.onChange);\n }\n };\n\n showValidation() {\n const validationStatus = checkIbanStatus(this.state.data['ibanNumber']).status;\n const holderStatus = isValidHolder(this.state.data['ownerName']);\n this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null);\n\n const holderErr = !holderStatus // do consider null, i.e. an empty field, to be in error\n ? ibanHolderNameErrorObj\n : null;\n\n this.setError('holder', holderErr, this.onChange); // add callback param to force propagation of state to parent comp\n }\n\n render({ placeholders }: IbanInputProps, { data, errors, valid }) {\n const { i18n } = useCoreContext();\n return (\n <Fieldset classNameModifiers={['iban-input']} label={this.props.label}>\n {this.props.holderName && (\n <Field\n className={'adyen-checkout__field--owner-name'}\n label={i18n.get('sepa.ownerName')}\n filled={data['ownerName'] && data['ownerName'].length}\n errorMessage={errors.holder ? i18n.get(errors.holder.error) : false}\n dir={'ltr'}\n i18n={i18n}\n name={'ownerName'}\n >\n <InputText\n name={'ownerName'}\n className={'adyen-checkout__iban-input__owner-name'}\n placeholder={placeholders?.ownerName}\n value={data['ownerName']}\n aria-invalid={!!this.state.errors.holder}\n aria-label={i18n.get('sepa.ownerName')}\n onInput={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n onBlur={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n />\n </Field>\n )}\n\n <Field\n className={'adyen-checkout__field--iban-number'}\n label={i18n.get('sepa.ibanNumber')}\n errorMessage={errors.iban ? i18n.get(errors.iban.error) : false}\n filled={data['ibanNumber'] && data['ibanNumber'].length}\n isValid={valid.iban}\n onBlur={this.handleIbanBlur}\n dir={'ltr'}\n i18n={i18n}\n name={'ibanNumber'}\n >\n <InputText\n setRef={ref => {\n this.ibanNumber = ref;\n }}\n name={'ibanNumber'}\n className={'adyen-checkout__iban-input__iban-number'}\n classNameModifiers={['large']}\n placeholder={placeholders?.ibanNumber}\n value={data['ibanNumber']}\n onInput={this.handleIbanInput}\n aria-invalid={!!this.state.errors.iban}\n aria-label={i18n.get('sepa.ibanNumber')}\n autocorrect={'off'}\n spellcheck={false}\n />\n </Field>\n\n {this.props.showPayButton && this.props.payButton({ status: this.state.status })}\n </Fieldset>\n );\n }\n}\n\nexport default IbanInput;\n"],"names":["ibanHolderNameErrorObj","isValid","errorMessage","error","ibanErrorObj","IbanInput","Component","setStatus","status","this","setState","onChange","holderNameValid","props","holderName","isValidHolder","state","data","checkIbanStatus","errors","showValidation","validationStatus","holderStatus","setError","holderErr","render","placeholders","valid","i18n","useCoreContext","h","Fieldset","classNameModifiers","label","Field","className","get","filled","length","holder","dir","name","InputText","placeholder","ownerName","value","aria-invalid","aria-label","onInput","e","handleHolderInput","target","onBlur","iban","handleIbanBlur","setRef","ref","ibanNumber","handleIbanInput","autocorrect","spellcheck","showPayButton","payButton","constructor","super","_define_property","setData","key","cb","prevState","setValid","inputValue","electronicFormatIban","electronicFormat","formatIban","countryCode","getCountryCode","cursor","selectionStart","previousIban","newCursorPosition","getNextCursorPosition","setSelectionRange","currentIban","defaultProps"],"mappings":"8kBAmCA,MAAMA,EAAuC,CACzCC,SAAS,EACTC,aAAc,qCACdC,MAAO,sCAGLC,EAA6B,CAC/BH,SAAS,EACTC,aAAc,oCACdC,MAAO,qCAGX,MAAME,UAAkBC,EA0CpBC,SAAAA,CAAUC,GACNC,KAAKC,SAAS,CAAEF,UACpB,CAEAG,QAAAA,GACI,MAAMC,GAAkBH,KAAKI,MAAMC,YAAaC,EAAcN,KAAKO,MAAMC,gBAEnEhB,EADsE,UAA1DiB,EAAgBT,KAAKO,MAAMC,KAAK,YAAeT,QACpCI,EACvBK,EAAO,CAAEA,KAAMR,KAAKO,MAAMC,KAAMhB,UAASkB,OAAQV,KAAKO,MAAMG,QAElEV,KAAKI,MAAMF,SAASM,EACxB,CAsEAG,cAAAA,GACI,MAAMC,EAAmBH,EAAgBT,KAAKO,MAAMC,KAAkB,YAAET,OAClEc,EAAeP,EAAcN,KAAKO,MAAMC,KAAiB,WAC/DR,KAAKc,SAAS,OAA6B,UAArBF,EAA+BjB,EAAe,MAEpE,MAAMoB,EAAaF,EAEb,KADAtB,EAGNS,KAAKc,SAAS,SAAUC,EAAWf,KAAKE,SAC5C,CAEAc,MAAAA,EAAOC,aAAEA,IAAgCT,KAAEA,EAAIE,OAAEA,EAAMQ,MAAEA,IACrD,MAAMC,KAAEA,GAASC,IACjB,OACIC,EAACC,EAAAA,CAASC,mBAAoB,CAAC,cAAeC,MAAOxB,KAAKI,MAAMoB,OAC3DxB,KAAKI,MAAMC,YACRgB,EAACI,EAAAA,CACGC,UAAW,oCACXF,MAAOL,EAAKQ,IAAI,kBAChBC,OAAQpB,EAAiB,WAAIA,EAAK,UAAaqB,OAC/CpC,eAAciB,EAAOoB,QAASX,EAAKQ,IAAIjB,EAAOoB,OAAOpC,OACrDqC,IAAK,MACLZ,KAAMA,EACNa,KAAM,aAENX,EAACY,EAAAA,CACGD,KAAM,YACNN,UAAW,yCACXQ,YAAajB,GAAckB,UAC3BC,MAAO5B,EAAiB,UACxB6B,iBAAgBrC,KAAKO,MAAMG,OAAOoB,OAClCQ,aAAYnB,EAAKQ,IAAI,kBACrBY,QAASC,GAAKxC,KAAKyC,kBAAkBD,EAAGE,OAA4BN,OACpEO,OAAQH,GAAKxC,KAAKyC,kBAAkBD,EAAGE,OAA4BN,UAK/Ef,EAACI,EAAAA,CACGC,UAAW,qCACXF,MAAOL,EAAKQ,IAAI,mBAChBlC,eAAciB,EAAOkC,MAAOzB,EAAKQ,IAAIjB,EAAOkC,KAAKlD,OACjDkC,OAAQpB,EAAkB,YAAIA,EAAK,WAAcqB,OACjDrC,QAAS0B,EAAM0B,KACfD,OAAQ3C,KAAK6C,eACbd,IAAK,MACLZ,KAAMA,EACNa,KAAM,cAENX,EAACY,EAAAA,CACGa,OAAQC,IACJ/C,KAAKgD,WAAaD,CAAAA,EAEtBf,KAAM,aACNN,UAAW,0CACXH,mBAAoB,CAAC,SACrBW,YAAajB,GAAc+B,WAC3BZ,MAAO5B,EAAkB,WACzB+B,QAASvC,KAAKiD,gBACdZ,iBAAgBrC,KAAKO,MAAMG,OAAOkC,KAClCN,aAAYnB,EAAKQ,IAAI,mBACrBuB,YAAa,MACbC,YAAY,KAInBnD,KAAKI,MAAMgD,eAAiBpD,KAAKI,MAAMiD,UAAU,CAAEtD,OAAQC,KAAKO,MAAMR,SAGnF,CA9LAuD,WAAAA,CAAYlD,GAgBR,GAfAmD,MAAMnD,GAHVoD,EAAAxD,KAAQgD,kBAAR,GAsDAQ,EAAOC,KAAAA,WAAU,CAACC,EAAKtB,EAAOuB,KAC1B3D,KAAKC,UAAS2D,IAAc,CAAEpD,KAAM,IAAKoD,EAAUpD,KAAMkD,CAACA,GAAMtB,MAAYuB,EAAAA,IAGhFH,EAAO1C,KAAAA,YAAW,CAAC4C,EAAKtB,EAAOuB,KAC3B3D,KAAKC,UAAS2D,IAAc,CAAElD,OAAQ,IAAKkD,EAAUlD,OAAQgD,CAACA,GAAMtB,MAAYuB,EAAAA,IAGpFH,EAAOK,KAAAA,YAAW,CAACH,EAAKtB,EAAOuB,KAC3B3D,KAAKC,UAAS2D,IAAc,CAAE1C,MAAO,IAAK0C,EAAU1C,MAAOwC,CAACA,GAAMtB,MAAYuB,EAAAA,IAGlFH,EAAAxD,KAAOyC,qBAAoBX,IACvB9B,KAAKC,UACD2D,IAAc,CAAEpD,KAAM,IAAKoD,EAAUpD,KAAM2B,UAAWL,OACtD,KACI,MAAMjB,EAAeP,EAAcN,KAAKO,MAAMC,KAAiB,WACzDO,EACc,MAAhBF,GAAyBA,EAEnB,KADAtB,EAGVS,KAAKc,SAAS,SAAUC,EAAWf,KAAKE,SAAQ,GACpD,IAIRsD,EAAAxD,KAAOiD,mBAAkBT,IACrB,MAAMsB,EAAatB,EAAEE,OAAON,MACtB2B,EAAuBC,EAAiBF,GACxClB,EAAOqB,EAAWF,GAClBnD,EAAmBH,EAAgBmC,GAAM7C,OAEzCmE,EAAcC,EAAeJ,GAG7BK,EAAS5B,EAAEE,OAAO2B,eAClBC,EAAetE,KAAKO,MAAMC,KAAkB,WAC5C+D,EAAoBC,EAAsBJ,EAAQxB,EAAM0B,GAE9DtE,KAAKC,UACD2D,IAAc,CACVpD,KAAM,IAAKoD,EAAUpD,KAAMwC,WAAYJ,EAAMsB,YAAaA,GAC1DxD,OAAQ,IACDkD,EAAUlD,OACbkC,KAA2B,YAArBhC,EAAiCjB,EAAe,MAE1DuB,MAAO,IAAK0C,EAAU1C,MAAO0B,KAA2B,UAArBhC,OAEvC,KACI4B,EAAEE,OAAO+B,kBAAkBF,EAAmBA,GAC9CvE,KAAKE,UAAQ,GACjB,IAIRsD,EAAAxD,KAAO6C,kBAAiBL,IACpB,MAAMkC,EAAclC,EAAEE,OAAON,MAE7B,GAAIsC,EAAY7C,OAAS,EAAG,CACxB,MAAMjB,EAAmBH,EAAgBiE,GAAa3E,OACtDC,KAAKc,SAAS,OAA6B,UAArBF,EAA+BjB,EAAe,KAAMK,KAAKE,eAG/EF,KAAKc,SAAS,OAAQ,KAAMd,KAAKE,SACrC,IAlHAF,KAAKO,MAAQ,CACTR,OAAQ,QACRS,KAAM,CACF2B,UAAW/B,GAAOI,MAAM2B,WAAa,GACrCa,WAAY5C,GAAOI,MAAMwC,YAAc,GACvCkB,YAAa9D,GAAOI,MAAM0D,aAAe,IAE7C1E,SAAS,EACT4E,OAAQ,EACR1D,OAAQ,CAAC,EACTQ,MAAO,CAAA,GAGPlB,KAAKO,MAAMC,gBAAoB,CAC/B,MAAMuD,EAAuBC,EAAiBhE,KAAKO,MAAMC,KAAkB,YAC3ER,KAAKO,MAAMC,KAAkB,WAAGyD,EAAWF,EAC/C,CAEA,GAAI/D,KAAKO,MAAMC,KAAK,YAAiBR,KAAKO,MAAMC,eAAmB,CAC/D,MAAML,EAAkBH,KAAKI,MAAMC,WAAaC,EAAcN,KAAKO,MAAMC,gBAAqB,GAExFhB,GADYQ,KAAKO,MAAMC,gBAA+E,UAA1DC,EAAgBT,KAAKO,MAAMC,iBAAoBT,OAAqB,KACzFI,EACvBK,EAAO,CAAEA,KAAMR,KAAKO,MAAMC,KAAMhB,WAEtCQ,KAAKI,MAAMF,SAASM,EACxB,CACJ,EAEAgD,EAlCE5D,EAkCY+E,eAAe,CACzBzE,SAAU,OACVgE,YAAa,KACb7D,YAAY,EACZY,aAAc,CAAC,EACfO,MAAO"}
1	+ {"version":3,"file":"IbanInput.js","sources":["../../../../../src/components/internal/IbanInput/IbanInput.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../FormFields/Field';\nimport { checkIbanStatus, isValidHolder } from './validate';\nimport { electronicFormat, formatIban, getCountryCode, getNextCursorPosition } from './utils';\nimport Fieldset from '../FormFields/Fieldset';\nimport { GenericError } from '../../../core/Errors/types';\nimport InputText from '../FormFields/InputText';\n\ninterface IbanInputProps {\n holderName?: boolean;\n placeholders?: Omit<IbanData, 'countryCode'>;\n countryCode?: string;\n showPayButton?: boolean;\n payButton?: any;\n onChange: (data) => void;\n label: string;\n data: IbanData;\n}\n\ninterface IbanData {\n ownerName?: string;\n ibanNumber?: string;\n countryCode?: string;\n}\n\ninterface IbanInputState {\n data: any;\n errors: any;\n valid: any;\n status: string;\n isValid: boolean;\n cursor: number;\n}\n\nconst ibanHolderNameErrorObj: GenericError = {\n isValid: false,\n errorMessage: 'ach.accountHolderNameField.invalid', // TODO create bespoke translation key\n error: 'ach.accountHolderNameField.invalid'\n};\n\nconst ibanErrorObj: GenericError = {\n isValid: false,\n errorMessage: 'sepaDirectDebit.ibanField.invalid',\n error: 'sepaDirectDebit.ibanField.invalid'\n};\n\nclass IbanInput extends Component<IbanInputProps, IbanInputState> {\n private ibanNumber: HTMLInputElement;\n\n constructor(props) {\n super(props);\n\n this.state = {\n status: 'ready',\n data: {\n ownerName: props?.data?.ownerName \|\| '',\n ibanNumber: props?.data?.ibanNumber \|\| '',\n countryCode: props?.data?.countryCode \|\| ''\n },\n isValid: false,\n cursor: 0,\n errors: {},\n valid: {}\n };\n\n if (this.state.data['ibanNumber']) {\n const electronicFormatIban = electronicFormat(this.state.data['ibanNumber']); // example: NL13TEST0123456789\n this.state.data['ibanNumber'] = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n }\n\n if (this.state.data['ibanNumber'] \|\| this.state.data['ownerName']) {\n const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : '';\n const ibanValid = this.state.data['ibanNumber'] ? checkIbanStatus(this.state.data['ibanNumber']).status === 'valid' : '';\n const isValid = ibanValid && holderNameValid;\n const data = { data: this.state.data, isValid };\n\n this.props.onChange(data);\n }\n }\n\n public static defaultProps = {\n onChange: () => {},\n countryCode: null,\n holderName: true,\n placeholders: {},\n label: null\n };\n\n setStatus(status) {\n this.setState({ status });\n }\n\n onChange() {\n const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : true;\n const ibanValid = checkIbanStatus(this.state.data['ibanNumber']).status === 'valid';\n const isValid = ibanValid && holderNameValid;\n const data = { data: this.state.data, isValid, errors: this.state.errors };\n\n this.props.onChange(data);\n }\n\n public setData = (key, value, cb?) => {\n this.setState(prevState => ({ data: { ...prevState.data, [key]: value } }), cb);\n };\n\n public setError = (key, value, cb?) => {\n this.setState(prevState => ({ errors: { ...prevState.errors, [key]: value } }), cb);\n };\n\n public setValid = (key, value, cb?) => {\n this.setState(prevState => ({ valid: { ...prevState.valid, [key]: value } }), cb);\n };\n\n public handleHolderInput = holder => {\n this.setState(\n prevState => ({ data: { ...prevState.data, ownerName: holder } }),\n () => {\n const holderStatus = isValidHolder(this.state.data['ownerName']);\n const holderErr =\n holderStatus != null && !holderStatus // don't consider null, i.e. a value that has just been deleted, to be in error\n ? ibanHolderNameErrorObj\n : null;\n\n this.setError('holder', holderErr, this.onChange);\n }\n );\n };\n\n public handleIbanInput = e => {\n const inputValue = e.target.value;\n const electronicFormatIban = electronicFormat(inputValue); // example: NL13TEST0123456789\n const iban = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n const validationStatus = checkIbanStatus(iban).status;\n\n const countryCode = getCountryCode(electronicFormatIban);\n\n // calculate cursor's new position\n const cursor = e.target.selectionStart;\n const previousIban = this.state.data['ibanNumber'];\n const newCursorPosition = getNextCursorPosition(cursor, iban, previousIban);\n\n this.setState(\n prevState => ({\n data: { ...prevState.data, ibanNumber: iban, countryCode: countryCode },\n errors: {\n ...prevState.errors,\n iban: validationStatus === 'invalid' ? ibanErrorObj : null\n },\n valid: { ...prevState.valid, iban: validationStatus === 'valid' }\n }),\n () => {\n e.target.setSelectionRange(newCursorPosition, newCursorPosition);\n this.onChange();\n }\n );\n };\n\n public handleIbanBlur = e => {\n const currentIban = e.target.value;\n\n if (currentIban.length > 0) {\n const validationStatus = checkIbanStatus(currentIban).status;\n this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null, this.onChange);\n } else {\n // Empty field is not in error\n this.setError('iban', null, this.onChange);\n }\n };\n\n showValidation() {\n const validationStatus = checkIbanStatus(this.state.data['ibanNumber']).status;\n const holderStatus = isValidHolder(this.state.data['ownerName']);\n this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null);\n\n const holderErr = !holderStatus // do consider null, i.e. an empty field, to be in error\n ? ibanHolderNameErrorObj\n : null;\n\n this.setError('holder', holderErr, this.onChange); // add callback param to force propagation of state to parent comp\n }\n\n render({ placeholders }: IbanInputProps, { data, errors, valid }) {\n const { i18n } = useCoreContext();\n return (\n <Fieldset classNameModifiers={['iban-input']} label={this.props.label}>\n {this.props.holderName && (\n <Field\n className={'adyen-checkout__field--owner-name'}\n label={i18n.get('sepa.ownerName')}\n filled={data['ownerName'] && data['ownerName'].length}\n errorMessage={errors.holder ? i18n.get(errors.holder.error) : false}\n dir={'ltr'}\n i18n={i18n}\n name={'ownerName'}\n >\n <InputText\n name={'ownerName'}\n className={'adyen-checkout__iban-input__owner-name'}\n placeholder={placeholders?.ownerName}\n value={data['ownerName']}\n aria-invalid={!!this.state.errors.holder}\n aria-label={i18n.get('sepa.ownerName')}\n onInput={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n onBlur={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n />\n </Field>\n )}\n\n <Field\n className={'adyen-checkout__field--iban-number'}\n label={i18n.get('sepa.ibanNumber')}\n errorMessage={errors.iban ? i18n.get(errors.iban.error) : false}\n filled={data['ibanNumber'] && data['ibanNumber'].length}\n isValid={valid.iban}\n onBlur={this.handleIbanBlur}\n dir={'ltr'}\n i18n={i18n}\n name={'ibanNumber'}\n >\n <InputText\n setRef={ref => {\n this.ibanNumber = ref;\n }}\n name={'ibanNumber'}\n className={'adyen-checkout__iban-input__iban-number'}\n classNameModifiers={['large']}\n placeholder={placeholders?.ibanNumber}\n value={data['ibanNumber']}\n onInput={this.handleIbanInput}\n aria-invalid={!!this.state.errors.iban}\n aria-label={i18n.get('sepa.ibanNumber')}\n autocorrect={'off'}\n spellcheck={false}\n />\n </Field>\n\n {this.props.showPayButton && this.props.payButton({ status: this.state.status })}\n </Fieldset>\n );\n }\n}\n\nexport default IbanInput;\n"],"names":["ibanHolderNameErrorObj","isValid","errorMessage","error","ibanErrorObj","IbanInput","Component","setStatus","status","this","setState","onChange","holderNameValid","props","holderName","isValidHolder","state","data","checkIbanStatus","errors","showValidation","validationStatus","holderStatus","setError","holderErr","render","placeholders","valid","i18n","useCoreContext","h","Fieldset","classNameModifiers","label","Field","className","get","filled","length","holder","dir","name","InputText","placeholder","ownerName","value","aria-invalid","aria-label","onInput","e","handleHolderInput","target","onBlur","iban","handleIbanBlur","setRef","ref","ibanNumber","handleIbanInput","autocorrect","spellcheck","showPayButton","payButton","constructor","super","_define_property","setData","key","cb","prevState","setValid","inputValue","electronicFormatIban","electronicFormat","formatIban","countryCode","getCountryCode","cursor","selectionStart","previousIban","newCursorPosition","getNextCursorPosition","setSelectionRange","currentIban","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/IbanInput/utils.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"./specifications.js";const r=(r,t)=>{if(null===t||!e[t]||!e[t].structure)return!1;const s=e[t].structure.match(/(.{3})/g).map((e=>{const r=e.slice(0,1),t=parseInt(e.slice(1),10);let s;switch(r){case"A":s="0-9A-Za-z";break;case"B":s="0-9A-Z";break;case"C":s="A-Za-z";break;case"F":s="0-9";break;case"L":s="a-z";break;case"U":s="A-Z";break;case"W":s="0-9a-z"}return`([${s}]{${t}})`}));return new RegExp(`^${s.join("")}$`)},t=e=>e.replace(/\W/gi,"").replace(/(.{4})(?!$)/g,"$1 ").trim(),s=e=>e.replace(/[^a-zA-Z0-9]/g,"").toUpperCase(),a=(e,t)=>r(0,t),c=e=>{let r=e;const t="A".charCodeAt(0),s="Z".charCodeAt(0);return r=r.toUpperCase(),r=r.substr(4)+r.substr(0,4),r.split("").map((e=>{const r=e.charCodeAt(0);if(r>=t&&r<=s){return r-t+10}return e})).join("")},n=e=>{let r,t=e;for(;t.length>2;)r=t.slice(0,9),t=parseInt(r,10)%97+t.slice(r.length);return parseInt(t,10)%97},l=r=>!(!r||!e[r])&&e[r],i=(e,r,t)=>{if(0===e||!r.length)return 0;const s=r.length-t.length,a=s>0,c=(e,r)=>/\s/.test(e.charAt(r)),n=e-s;return a&&(c(r,n+1)||c(r,n))?e+1:!a&&c(r,e-1)?e-1:e},o=e=>e.slice(0,2);export{s as electronicFormat,t as formatIban,o as getCountryCode,l as getIbanCountrySpecification,i as getNextCursorPosition,c as iso13616Prepare,n as iso7064Mod97_10,r as parseStructure,a as regex};
+import e from"./specifications.js";const r=(r,t)=>{if(null===t||!e[t]||!e[t].structure)return!1;const s=e[t].structure.match(/(.{3})/g).map(e=>{const r=e.slice(0,1),t=parseInt(e.slice(1),10);let s;switch(r){case"A":s="0-9A-Za-z";break;case"B":s="0-9A-Z";break;case"C":s="A-Za-z";break;case"F":s="0-9";break;case"L":s="a-z";break;case"U":s="A-Z";break;case"W":s="0-9a-z"}return`([${s}]{${t}})`});return new RegExp(`^${s.join("")}$`)},t=e=>e.replace(/\W/gi,"").replace(/(.{4})(?!$)/g,"$1 ").trim(),s=e=>e.replace(/[^a-zA-Z0-9]/g,"").toUpperCase(),a=(e,t)=>r(0,t),c=e=>{let r=e;const t="A".charCodeAt(0),s="Z".charCodeAt(0);return r=r.toUpperCase(),r=r.substr(4)+r.substr(0,4),r.split("").map(e=>{const r=e.charCodeAt(0);if(r>=t&&r<=s){return r-t+10}return e}).join("")},n=e=>{let r,t=e;for(;t.length>2;)r=t.slice(0,9),t=parseInt(r,10)%97+t.slice(r.length);return parseInt(t,10)%97},l=r=>!(!r||!e[r])&&e[r],i=(e,r,t)=>{if(0===e||!r.length)return 0;const s=r.length-t.length,a=s>0,c=(e,r)=>/\s/.test(e.charAt(r)),n=e-s;return a&&(c(r,n+1)||c(r,n))?e+1:!a&&c(r,e-1)?e-1:e},o=e=>e.slice(0,2);export{s as electronicFormat,t as formatIban,o as getCountryCode,l as getIbanCountrySpecification,i as getNextCursorPosition,c as iso13616Prepare,n as iso7064Mod97_10,r as parseStructure,a as regex};
 //# sourceMappingURL=utils.js.map

package/dist/es/components/internal/IbanInput/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/IbanInput/utils.ts"],"sourcesContent":["import countries from './specifications';\n\n/*\n Parse the BBAN structure used to configure each IBAN __specification and returns a matching regular expression.\n * A structure is composed of blocks of 3 characters (one letter and 2 digits). Each block represents\n * a logical group in the typical representation of the BBAN. For each group, the letter indicates which characters\n * are allowed in this group and the following 2-digits number tells the length of the group.\n \n @param structure - the structure to parse\n * @param countryCode - the countryCode to check format against\n \n @internal\n /\nexport const parseStructure = (structure, countryCode) => {\n if (countryCode === null \|\| !countries[countryCode] \|\| !countries[countryCode].structure) {\n return false;\n }\n\n const passedStructure = countries[countryCode].structure;\n\n // split in blocks of 3 chars\n const regex = passedStructure.match(/(.{3})/g).map(block => {\n // parse each structure block (1-char + 2-digits)\n const pattern = block.slice(0, 1);\n const repeats = parseInt(block.slice(1), 10);\n let format;\n\n switch (pattern) {\n case 'A':\n format = '0-9A-Za-z';\n break;\n case 'B':\n format = '0-9A-Z';\n break;\n case 'C':\n format = 'A-Za-z';\n break;\n case 'F':\n format = '0-9';\n break;\n case 'L':\n format = 'a-z';\n break;\n case 'U':\n format = 'A-Z';\n break;\n case 'W':\n format = '0-9a-z';\n break;\n default:\n break;\n }\n\n return `([${format}]{${repeats}})`;\n });\n\n return new RegExp(`^${regex.join('')}$`);\n};\n\n/\n @internal\n /\nexport const formatIban = iban =>\n iban\n .replace(/\\W/gi, '')\n .replace(/(.{4})(?!$)/g, '$1 ')\n .trim();\n\nexport type ElectronicFormat = string;\n/\n Returns any non alphanumeric characters and uppercases them\n \n @internal\n /\nexport const electronicFormat = (iban: string): ElectronicFormat => {\n const NON_ALPHANUM = /[^a-zA-Z0-9]/g;\n return iban.replace(NON_ALPHANUM, '').toUpperCase();\n};\n\n/\n Lazy-loaded regex (parse the structure and construct the regular expression the first time we need it for validation)\n \n @internal\n /\nexport const regex = (iban, countryCode) => parseStructure(iban, countryCode);\n\n/\n Prepare an IBAN for mod 97 computation by moving the first 4 chars to the end and transforming the letters to\n * numbers (A = 10, B = 11, ..., Z = 35), as specified in ISO13616.\n * @param ibanInput - The IBAN value\n * @returns The prepared IBAN\n \n @internal\n /\nexport const iso13616Prepare = ibanInput => {\n let iban = ibanInput;\n const A = 'A'.charCodeAt(0);\n const Z = 'Z'.charCodeAt(0);\n iban = iban.toUpperCase();\n iban = iban.substr(4) + iban.substr(0, 4);\n\n return iban\n .split('')\n .map(n => {\n const code = n.charCodeAt(0);\n\n if (code >= A && code <= Z) {\n // A = 10, B = 11, ... Z = 35\n const codeA = code - A;\n return codeA + 10;\n }\n\n return n;\n })\n .join('');\n};\n\n/\n Calculates the MOD 97 10 of the passed IBAN as specified in ISO7064.\n \n @param iban -\n \n @internal\n /\nexport const iso7064Mod97_10 = iban => {\n let remainder = iban;\n let block;\n\n while (remainder.length > 2) {\n block = remainder.slice(0, 9);\n remainder = (parseInt(block, 10) % 97) + remainder.slice(block.length);\n }\n\n return parseInt(remainder, 10) % 97;\n};\n\n/\n @param countryCode -\n * @returns Example of IBAN Number\n /\nexport const getIbanPlaceHolder = (countryCode = null) => {\n if (countryCode && countries[countryCode] && countries[countryCode].example) {\n return formatIban(countries[countryCode].example);\n }\n\n return 'AB00 1234 5678 9012 3456 7890';\n};\n\nexport const getIbanCountrySpecification = countryCode => {\n if (countryCode && countries[countryCode]) {\n return countries[countryCode];\n }\n\n return false;\n};\n\n/\n @param cursor -\n * @param iban -\n * @param previousIban -\n * @returns new cursor position\n /\nexport const getNextCursorPosition = (cursor, iban, previousIban) => {\n if (cursor === 0 \|\| !iban.length) return 0;\n\n // This tells us how long the edit is. If user modified input from `(2__)` to `(243__)`,\n // we know the user in this instance pasted two characters\n const editLength = iban.length - previousIban.length;\n const isAddition = editLength > 0;\n const isMaskChar = (ibanValue, position) => /\\s/.test(ibanValue.charAt(position));\n const initialCursor = cursor - editLength;\n\n // is adding text, check calculate if there was a mask element after the initial cursor, then move cursor forward\n // example: NL13 ABNA\| 1234 5678 9 => NL13 ABNA 0\|123 4567 89\n if (isAddition && (isMaskChar(iban, initialCursor + 1) \|\| isMaskChar(iban, initialCursor))) {\n return cursor + 1;\n }\n\n // is removing text, check if the previous is a mask character, then move cursor back\n // example: NL13 ABNA 0\|123 4567 89 => NL13 ABNA\| 1234 5678 9\n if (!isAddition && isMaskChar(iban, cursor - 1)) {\n return cursor - 1;\n }\n\n return cursor;\n};\n\n/\n @param electronicFormatIban -\n * @returns countryCode string\n */\nexport const getCountryCode = (electronicFormatIban: ElectronicFormat) => electronicFormatIban.slice(0, 2);\n"],"names":["parseStructure","structure","countryCode","countries","regex","match","map","block","pattern","slice","repeats","parseInt","format","RegExp","join","formatIban","iban","replace","trim","electronicFormat","toUpperCase","iso13616Prepare","ibanInput","A","charCodeAt","Z","substr","split","n","code","iso7064Mod97_10","remainder","length","getIbanCountrySpecification","getNextCursorPosition","cursor","previousIban","editLength","isAddition","isMaskChar","ibanValue","position","test","charAt","initialCursor","getCountryCode","electronicFormatIban"],"mappings":"mCAaO,MAAMA,EAAiB,CAACC,EAAWC,KACtC,GAAoB,OAAhBA,IAAyBC,EAAUD,KAAiBC,EAAUD,GAAaD,UAC3E,OAAO,EAGX,MAGMG,EAHkBD,EAAUD,GAAaD,UAGjBI,MAAM,WAAWC,~~KAAIC~~,IAE/C,MAAMC,EAAUD,EAAME,MAAM,EAAG,GACzBC,EAAUC,SAASJ,EAAME,MAAM,GAAI,IACzC,IAAIG,EAEJ,OAAQJ,GACJ,IAAK,IACDI,EAAS,YACT,MACJ,IAAK,IACDA,EAAS,SACT,MACJ,IAAK,IACDA,EAAS,SACT,MACJ,IAAK,IACDA,EAAS,MACT,MACJ,IAAK,IACDA,EAAS,MACT,MACJ,IAAK,IACDA,EAAS,MACT,MACJ,IAAK,IACDA,EAAS,SAMjB,MAAO,KAAKA,MAAWF,~~KAAW~~,~~IAGtC,~~OAAO,IAAIG,OAAO,IAAIT,EAAMU,KAAK,~~OAAM~~,~~EAM9BC,~~EAAaC,GACtBA,EACKC,QAAQ,OAAQ,IAChBA,QAAQ,eAAgB,OACxBC,OAQIC,EAAoBH,GAEtBA,EAAKC,QADS,gBACa,IAAIG,cAQ7BhB,EAAQ,CAACY,EAAMd,IAAgBF,EAAegB,EAAMd,GAUpDmB,EAAkBC,IAC3B,IAAIN,EAAOM,EACX,MAAMC,EAAI,IAAIC,WAAW,GACnBC,EAAI,IAAID,WAAW,GAIzB,OAHAR,EAAOA,EAAKI,cACZJ,EAAOA,EAAKU,OAAO,GAAKV,EAAKU,OAAO,EAAG,GAEhCV,EACFW,MAAM,IACNrB,~~KAAIsB~~,IACD,MAAMC,EAAOD,EAAEJ,WAAW,GAE1B,GAAIK,GAAQN,GAAKM,GAAQJ,EAAG,CAGxB,OADcI,EAAON,EACN,EACnB,CAEA,OAAOK,~~CAAAA,~~IAEVd,KAAK,~~GAAA~~,~~EAUDgB,~~EAAkBd,IAC3B,IACIT,EADAwB,EAAYf,EAGhB,KAAOe,EAAUC,OAAS,GACtBzB,EAAQwB,EAAUtB,MAAM,EAAG,GAC3BsB,EAAapB,SAASJ,EAAO,IAAM,GAAMwB,EAAUtB,MAAMF,EAAMyB,QAGnE,OAAOrB,SAASoB,EAAW,IAAM,~~EAAA~~,~~EAexBE,~~EAA8B/B,MACnCA,IAAeC,EAAUD,KAClBC,EAAUD,GAYZgC,EAAwB,CAACC,EAAQnB,EAAMoB,KAChD,GAAe,IAAXD,IAAiBnB,EAAKgB,OAAQ,OAAO,EAIzC,MAAMK,EAAarB,EAAKgB,OAASI,EAAaJ,OACxCM,EAAaD,EAAa,EAC1BE,EAAa,CAACC,EAAWC,IAAa,KAAKC,KAAKF,EAAUG,OAAOF,IACjEG,EAAgBT,EAASE,EAI/B,OAAIC,IAAeC,EAAWvB,EAAM4B,EAAgB,IAAML,EAAWvB,EAAM4B,IAChET,EAAS,GAKfG,GAAcC,EAAWvB,EAAMmB,EAAS,GAClCA,EAAS,EAGbA,~~CAAAA~~,~~EAOEU,~~EAAkBC,GAA2CA,EAAqBrC,MAAM,EAAG"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/IbanInput/utils.ts"],"sourcesContent":["import countries from './specifications';\n\n/*\n Parse the BBAN structure used to configure each IBAN __specification and returns a matching regular expression.\n * A structure is composed of blocks of 3 characters (one letter and 2 digits). Each block represents\n * a logical group in the typical representation of the BBAN. For each group, the letter indicates which characters\n * are allowed in this group and the following 2-digits number tells the length of the group.\n \n @param structure - the structure to parse\n * @param countryCode - the countryCode to check format against\n \n @internal\n /\nexport const parseStructure = (structure, countryCode) => {\n if (countryCode === null \|\| !countries[countryCode] \|\| !countries[countryCode].structure) {\n return false;\n }\n\n const passedStructure = countries[countryCode].structure;\n\n // split in blocks of 3 chars\n const regex = passedStructure.match(/(.{3})/g).map(block => {\n // parse each structure block (1-char + 2-digits)\n const pattern = block.slice(0, 1);\n const repeats = parseInt(block.slice(1), 10);\n let format;\n\n switch (pattern) {\n case 'A':\n format = '0-9A-Za-z';\n break;\n case 'B':\n format = '0-9A-Z';\n break;\n case 'C':\n format = 'A-Za-z';\n break;\n case 'F':\n format = '0-9';\n break;\n case 'L':\n format = 'a-z';\n break;\n case 'U':\n format = 'A-Z';\n break;\n case 'W':\n format = '0-9a-z';\n break;\n default:\n break;\n }\n\n return `([${format}]{${repeats}})`;\n });\n\n return new RegExp(`^${regex.join('')}$`);\n};\n\n/\n @internal\n /\nexport const formatIban = iban =>\n iban\n .replace(/\\W/gi, '')\n .replace(/(.{4})(?!$)/g, '$1 ')\n .trim();\n\nexport type ElectronicFormat = string;\n/\n Returns any non alphanumeric characters and uppercases them\n \n @internal\n /\nexport const electronicFormat = (iban: string): ElectronicFormat => {\n const NON_ALPHANUM = /[^a-zA-Z0-9]/g;\n return iban.replace(NON_ALPHANUM, '').toUpperCase();\n};\n\n/\n Lazy-loaded regex (parse the structure and construct the regular expression the first time we need it for validation)\n \n @internal\n /\nexport const regex = (iban, countryCode) => parseStructure(iban, countryCode);\n\n/\n Prepare an IBAN for mod 97 computation by moving the first 4 chars to the end and transforming the letters to\n * numbers (A = 10, B = 11, ..., Z = 35), as specified in ISO13616.\n * @param ibanInput - The IBAN value\n * @returns The prepared IBAN\n \n @internal\n /\nexport const iso13616Prepare = ibanInput => {\n let iban = ibanInput;\n const A = 'A'.charCodeAt(0);\n const Z = 'Z'.charCodeAt(0);\n iban = iban.toUpperCase();\n iban = iban.substr(4) + iban.substr(0, 4);\n\n return iban\n .split('')\n .map(n => {\n const code = n.charCodeAt(0);\n\n if (code >= A && code <= Z) {\n // A = 10, B = 11, ... Z = 35\n const codeA = code - A;\n return codeA + 10;\n }\n\n return n;\n })\n .join('');\n};\n\n/\n Calculates the MOD 97 10 of the passed IBAN as specified in ISO7064.\n \n @param iban -\n \n @internal\n /\nexport const iso7064Mod97_10 = iban => {\n let remainder = iban;\n let block;\n\n while (remainder.length > 2) {\n block = remainder.slice(0, 9);\n remainder = (parseInt(block, 10) % 97) + remainder.slice(block.length);\n }\n\n return parseInt(remainder, 10) % 97;\n};\n\n/\n @param countryCode -\n * @returns Example of IBAN Number\n /\nexport const getIbanPlaceHolder = (countryCode = null) => {\n if (countryCode && countries[countryCode] && countries[countryCode].example) {\n return formatIban(countries[countryCode].example);\n }\n\n return 'AB00 1234 5678 9012 3456 7890';\n};\n\nexport const getIbanCountrySpecification = countryCode => {\n if (countryCode && countries[countryCode]) {\n return countries[countryCode];\n }\n\n return false;\n};\n\n/\n @param cursor -\n * @param iban -\n * @param previousIban -\n * @returns new cursor position\n /\nexport const getNextCursorPosition = (cursor, iban, previousIban) => {\n if (cursor === 0 \|\| !iban.length) return 0;\n\n // This tells us how long the edit is. If user modified input from `(2__)` to `(243__)`,\n // we know the user in this instance pasted two characters\n const editLength = iban.length - previousIban.length;\n const isAddition = editLength > 0;\n const isMaskChar = (ibanValue, position) => /\\s/.test(ibanValue.charAt(position));\n const initialCursor = cursor - editLength;\n\n // is adding text, check calculate if there was a mask element after the initial cursor, then move cursor forward\n // example: NL13 ABNA\| 1234 5678 9 => NL13 ABNA 0\|123 4567 89\n if (isAddition && (isMaskChar(iban, initialCursor + 1) \|\| isMaskChar(iban, initialCursor))) {\n return cursor + 1;\n }\n\n // is removing text, check if the previous is a mask character, then move cursor back\n // example: NL13 ABNA 0\|123 4567 89 => NL13 ABNA\| 1234 5678 9\n if (!isAddition && isMaskChar(iban, cursor - 1)) {\n return cursor - 1;\n }\n\n return cursor;\n};\n\n/\n @param electronicFormatIban -\n * @returns countryCode string\n */\nexport const getCountryCode = (electronicFormatIban: ElectronicFormat) => electronicFormatIban.slice(0, 2);\n"],"names":["parseStructure","structure","countryCode","countries","regex","match","map","block","pattern","slice","repeats","parseInt","format","RegExp","join","formatIban","iban","replace","trim","electronicFormat","toUpperCase","iso13616Prepare","ibanInput","A","charCodeAt","Z","substr","split","n","code","iso7064Mod97_10","remainder","length","getIbanCountrySpecification","getNextCursorPosition","cursor","previousIban","editLength","isAddition","isMaskChar","ibanValue","position","test","charAt","initialCursor","getCountryCode","electronicFormatIban"],"mappings":"mCAaO,MAAMA,EAAiB,CAACC,EAAWC,KACtC,GAAoB,OAAhBA,IAAyBC,EAAUD,KAAiBC,EAAUD,GAAaD,UAC3E,OAAO,EAGX,MAGMG,EAHkBD,EAAUD,GAAaD,UAGjBI,MAAM,WAAWC,IAAIC,IAE/C,MAAMC,EAAUD,EAAME,MAAM,EAAG,GACzBC,EAAUC,SAASJ,EAAME,MAAM,GAAI,IACzC,IAAIG,EAEJ,OAAQJ,GACJ,IAAK,IACDI,EAAS,YACT,MACJ,IAAK,IACDA,EAAS,SACT,MACJ,IAAK,IACDA,EAAS,SACT,MACJ,IAAK,IACDA,EAAS,MACT,MACJ,IAAK,IACDA,EAAS,MACT,MACJ,IAAK,IACDA,EAAS,MACT,MACJ,IAAK,IACDA,EAAS,SAMjB,MAAO,KAAKA,MAAWF,QAG3B,OAAO,IAAIG,OAAO,IAAIT,EAAMU,KAAK,SAMxBC,EAAaC,GACtBA,EACKC,QAAQ,OAAQ,IAChBA,QAAQ,eAAgB,OACxBC,OAQIC,EAAoBH,GAEtBA,EAAKC,QADS,gBACa,IAAIG,cAQ7BhB,EAAQ,CAACY,EAAMd,IAAgBF,EAAegB,EAAMd,GAUpDmB,EAAkBC,IAC3B,IAAIN,EAAOM,EACX,MAAMC,EAAI,IAAIC,WAAW,GACnBC,EAAI,IAAID,WAAW,GAIzB,OAHAR,EAAOA,EAAKI,cACZJ,EAAOA,EAAKU,OAAO,GAAKV,EAAKU,OAAO,EAAG,GAEhCV,EACFW,MAAM,IACNrB,IAAIsB,IACD,MAAMC,EAAOD,EAAEJ,WAAW,GAE1B,GAAIK,GAAQN,GAAKM,GAAQJ,EAAG,CAGxB,OADcI,EAAON,EACN,EACnB,CAEA,OAAOK,IAEVd,KAAK,KAUDgB,EAAkBd,IAC3B,IACIT,EADAwB,EAAYf,EAGhB,KAAOe,EAAUC,OAAS,GACtBzB,EAAQwB,EAAUtB,MAAM,EAAG,GAC3BsB,EAAapB,SAASJ,EAAO,IAAM,GAAMwB,EAAUtB,MAAMF,EAAMyB,QAGnE,OAAOrB,SAASoB,EAAW,IAAM,IAexBE,EAA8B/B,MACnCA,IAAeC,EAAUD,KAClBC,EAAUD,GAYZgC,EAAwB,CAACC,EAAQnB,EAAMoB,KAChD,GAAe,IAAXD,IAAiBnB,EAAKgB,OAAQ,OAAO,EAIzC,MAAMK,EAAarB,EAAKgB,OAASI,EAAaJ,OACxCM,EAAaD,EAAa,EAC1BE,EAAa,CAACC,EAAWC,IAAa,KAAKC,KAAKF,EAAUG,OAAOF,IACjEG,EAAgBT,EAASE,EAI/B,OAAIC,IAAeC,EAAWvB,EAAM4B,EAAgB,IAAML,EAAWvB,EAAM4B,IAChET,EAAS,GAKfG,GAAcC,EAAWvB,EAAMmB,EAAS,GAClCA,EAAS,EAGbA,GAOEU,EAAkBC,GAA2CA,EAAqBrC,MAAM,EAAG"}

package/dist/es/components/internal/IbanInput/validate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validate.js","sources":["../../../../../src/components/internal/IbanInput/validate.ts"],"sourcesContent":["import { iso13616Prepare, iso7064Mod97_10, electronicFormat, regex, getIbanCountrySpecification, getCountryCode } from './utils';\nimport { isEmpty } from '../../../utils/validator-utils';\n\n/*\n Contains a validation status\n * @internal\n * @param status -\n * @param code -\n /\nfunction ValidationStatus(status, code = null) {\n this.status = status;\n this.code = code;\n}\n\n/\n Validates the format of an iban\n * @internal\n * @param iban -\n /\nconst checkIbanStructure = iban => {\n const countryCode = iban.slice(0, 2);\n const ibanRegex = regex(iban, countryCode);\n\n return ((ibanRegex as RegExp).test && (ibanRegex as RegExp).test(iban.slice(4))) \|\| false;\n};\n\n/\n Checks validity of an IBAN\n * @param iban -\n /\nexport const isValidIBAN = iban => {\n const electronicFormatIban = electronicFormat(iban);\n const preparedIban = iso13616Prepare(electronicFormatIban);\n const isValidISO = iso7064Mod97_10(preparedIban) === 1;\n\n return isValidISO && checkIbanStructure(electronicFormatIban);\n};\n\n/\n Checkss the validity status of an IBAN\n * @param iban -\n /\nexport const checkIbanStatus = iban => {\n const electronicFormatIban = electronicFormat(iban);\n\n if (iban.length < 2) {\n return new ValidationStatus('no-validate', 'TOO_SHORT'); // A\n }\n\n const countryCode = getCountryCode(electronicFormatIban);\n const countrySpecification = getIbanCountrySpecification(countryCode);\n\n if (!countrySpecification) {\n return new ValidationStatus('invalid', 'INVALID_COUNTRY'); // AA13TEST0123456789\n }\n\n if (electronicFormatIban.length > countrySpecification.length) {\n return new ValidationStatus('invalid', 'TOO_LONG'); // NL13TEST01234567891\n }\n\n if (electronicFormatIban.length === countrySpecification.length) {\n if (isValidIBAN(iban)) {\n return new ValidationStatus('valid', 'VALID'); // NL13TEST0123456789\n }\n\n return new ValidationStatus('invalid', 'INVALID_IBAN'); // NL13TEST0123456781\n }\n\n return new ValidationStatus('no-validate', 'UNKNOWN'); // NL13TEST012345678\n};\n\n/\n Checks validity of a holder name\n */\nexport const isValidHolder = value => (isEmpty(value) ? null : true); // true, if there are chars other than spaces\n"],"names":["ValidationStatus","status","code","this","isValidIBAN","iban","electronicFormatIban","electronicFormat","preparedIban","iso13616Prepare","iso7064Mod97_10","countryCode","slice","ibanRegex","regex","test","checkIbanStructure","checkIbanStatus","length","getCountryCode","countrySpecification","getIbanCountrySpecification","isValidHolder","value","isEmpty"],"mappings":"oNASA,SAASA,EAAiBC,EAAQC,EAAO,MACrCC,KAAKF,OAASA,EACdE,KAAKD,KAAOA,CAChB,CAOA,MAWaE,EAAcC,IACvB,MAAMC,EAAuBC,EAAiBF,GACxCG,EAAeC,EAAgBH,GAGrC,OAFqD,IAAlCI,EAAgBF,IAdZH,CAAAA,IACvB,MAAMM,EAAcN,EAAKO,MAAM,EAAG,GAC5BC,EAAYC,EAAMT,EAAMM,GAE9B,OAASE,EAAqBE,MAASF,EAAqBE,KAAKV,EAAKO,MAAM,MAAQ,~~CAAA,EAY~~/DI,CAAmBV,~~EAAAA,EAO~~/BW,EAAkBZ,IAC3B,MAAMC,EAAuBC,EAAiBF,GAE9C,GAAIA,EAAKa,OAAS,EACd,OAAO,IAAIlB,EAAiB,cAAe,aAG/C,MAAMW,EAAcQ,EAAeb,GAC7Bc,EAAuBC,EAA4BV,GAEzD,OAAKS,EAIDd,EAAqBY,OAASE,EAAqBF,OAC5C,IAAIlB,EAAiB,UAAW,YAGvCM,EAAqBY,SAAWE,EAAqBF,OACjDd,EAAYC,GACL,IAAIL,EAAiB,QAAS,SAGlC,IAAIA,EAAiB,UAAW,gBAGpC,IAAIA,EAAiB,cAAe,WAfhC,IAAIA,EAAiB,UAAW,~~kBAeA~~,~~EAMlCsB,~~EAAgBC,IAAUC,EAAQD,IAAS"}
1	+ {"version":3,"file":"validate.js","sources":["../../../../../src/components/internal/IbanInput/validate.ts"],"sourcesContent":["import { iso13616Prepare, iso7064Mod97_10, electronicFormat, regex, getIbanCountrySpecification, getCountryCode } from './utils';\nimport { isEmpty } from '../../../utils/validator-utils';\n\n/*\n Contains a validation status\n * @internal\n * @param status -\n * @param code -\n /\nfunction ValidationStatus(status, code = null) {\n this.status = status;\n this.code = code;\n}\n\n/\n Validates the format of an iban\n * @internal\n * @param iban -\n /\nconst checkIbanStructure = iban => {\n const countryCode = iban.slice(0, 2);\n const ibanRegex = regex(iban, countryCode);\n\n return ((ibanRegex as RegExp).test && (ibanRegex as RegExp).test(iban.slice(4))) \|\| false;\n};\n\n/\n Checks validity of an IBAN\n * @param iban -\n /\nexport const isValidIBAN = iban => {\n const electronicFormatIban = electronicFormat(iban);\n const preparedIban = iso13616Prepare(electronicFormatIban);\n const isValidISO = iso7064Mod97_10(preparedIban) === 1;\n\n return isValidISO && checkIbanStructure(electronicFormatIban);\n};\n\n/\n Checkss the validity status of an IBAN\n * @param iban -\n /\nexport const checkIbanStatus = iban => {\n const electronicFormatIban = electronicFormat(iban);\n\n if (iban.length < 2) {\n return new ValidationStatus('no-validate', 'TOO_SHORT'); // A\n }\n\n const countryCode = getCountryCode(electronicFormatIban);\n const countrySpecification = getIbanCountrySpecification(countryCode);\n\n if (!countrySpecification) {\n return new ValidationStatus('invalid', 'INVALID_COUNTRY'); // AA13TEST0123456789\n }\n\n if (electronicFormatIban.length > countrySpecification.length) {\n return new ValidationStatus('invalid', 'TOO_LONG'); // NL13TEST01234567891\n }\n\n if (electronicFormatIban.length === countrySpecification.length) {\n if (isValidIBAN(iban)) {\n return new ValidationStatus('valid', 'VALID'); // NL13TEST0123456789\n }\n\n return new ValidationStatus('invalid', 'INVALID_IBAN'); // NL13TEST0123456781\n }\n\n return new ValidationStatus('no-validate', 'UNKNOWN'); // NL13TEST012345678\n};\n\n/\n Checks validity of a holder name\n */\nexport const isValidHolder = value => (isEmpty(value) ? null : true); // true, if there are chars other than spaces\n"],"names":["ValidationStatus","status","code","this","isValidIBAN","iban","electronicFormatIban","electronicFormat","preparedIban","iso13616Prepare","iso7064Mod97_10","countryCode","slice","ibanRegex","regex","test","checkIbanStructure","checkIbanStatus","length","getCountryCode","countrySpecification","getIbanCountrySpecification","isValidHolder","value","isEmpty"],"mappings":"oNASA,SAASA,EAAiBC,EAAQC,EAAO,MACrCC,KAAKF,OAASA,EACdE,KAAKD,KAAOA,CAChB,CAOA,MAWaE,EAAcC,IACvB,MAAMC,EAAuBC,EAAiBF,GACxCG,EAAeC,EAAgBH,GAGrC,OAFqD,IAAlCI,EAAgBF,IAdZH,CAAAA,IACvB,MAAMM,EAAcN,EAAKO,MAAM,EAAG,GAC5BC,EAAYC,EAAMT,EAAMM,GAE9B,OAASE,EAAqBE,MAASF,EAAqBE,KAAKV,EAAKO,MAAM,MAAQ,GAY/DI,CAAmBV,IAO/BW,EAAkBZ,IAC3B,MAAMC,EAAuBC,EAAiBF,GAE9C,GAAIA,EAAKa,OAAS,EACd,OAAO,IAAIlB,EAAiB,cAAe,aAG/C,MAAMW,EAAcQ,EAAeb,GAC7Bc,EAAuBC,EAA4BV,GAEzD,OAAKS,EAIDd,EAAqBY,OAASE,EAAqBF,OAC5C,IAAIlB,EAAiB,UAAW,YAGvCM,EAAqBY,SAAWE,EAAqBF,OACjDd,EAAYC,GACL,IAAIL,EAAiB,QAAS,SAGlC,IAAIA,EAAiB,UAAW,gBAGpC,IAAIA,EAAiB,cAAe,WAfhC,IAAIA,EAAiB,UAAW,oBAqBlCsB,EAAgBC,IAAUC,EAAQD,IAAS"}

package/dist/es/components/internal/Img/Img.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useState as e,useRef as a,useEffect as r}from"../../../external/preact/hooks/dist/hooks.js";import t from"../../../_virtual/index.js";import{createElement as s}from"../../../external/preact/dist/preact.js";function o(o){const{backgroundUrl:c="",className:n="",classNameModifiers:l=[],src:m="",alt:d="",showOnError:i=!1}=o,[u,f]=e(!1),p=a(null),g=()=>{f(!0)},k=t([n],"adyen-checkout__image",{"adyen-checkout__image--loaded":u},...l.map((e=>`adyen-checkout__image--${e}`)));return r((()=>{const e=c?new Image:p.current;e.src=c||m,e.onload=g,f(!!e.complete)}),[]),c?s("div",{"data-testid":"background",style:{backgroundUrl:c},...o,className:k}):s("img",{...o,alt:d,ref:p,className:k,onError:()=>{f(i)}})}export{o as default};
+import{useState as e,useRef as a,useEffect as r}from"../../../external/preact/hooks/dist/hooks.js";import t from"../../../_virtual/index.js";import{createElement as s}from"../../../external/preact/dist/preact.js";function o(o){const{backgroundUrl:c="",className:n="",classNameModifiers:l=[],src:m="",alt:d="",showOnError:i=!1}=o,[u,f]=e(!1),p=a(null),g=()=>{f(!0)},k=t([n],"adyen-checkout__image",{"adyen-checkout__image--loaded":u},...l.map(e=>`adyen-checkout__image--${e}`));return r(()=>{const e=c?new Image:p.current;e.src=c||m,e.onload=g,f(!!e.complete)},[]),c?s("div",{"data-testid":"background",style:{backgroundUrl:c},...o,className:k}):s("img",{...o,alt:d,ref:p,className:k,onError:()=>{f(i)}})}export{o as default};
 //# sourceMappingURL=Img.js.map

package/dist/es/components/internal/Img/Img.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Img.js","sources":["../../../../../src/components/internal/Img/Img.tsx"],"sourcesContent":["import { JSX } from 'preact';\nimport { useRef, useState, useEffect } from 'preact/hooks';\nimport cx from 'classnames';\nimport './Img.scss';\nimport { h } from 'preact';\nimport { ImgProps } from './types';\n\nexport default function Img(props: ImgProps) {\n const { backgroundUrl = '', className = '', classNameModifiers = [], src = '', alt = '', showOnError = false } = props;\n const [loaded, setLoaded] = useState(false);\n const imageRef = useRef(null);\n\n const handleLoad = () => {\n setLoaded(true);\n };\n\n const handleError = () => {\n setLoaded(showOnError);\n };\n\n const classNames = cx(\n [className],\n 'adyen-checkout__image',\n { 'adyen-checkout__image--loaded': loaded },\n ...classNameModifiers.map(modifier => `adyen-checkout__image--${modifier}`)\n );\n\n useEffect(() => {\n const image = backgroundUrl ? new Image() : imageRef.current;\n image.src = backgroundUrl \|\| src;\n image.onload = handleLoad;\n setLoaded(!!image.complete);\n }, []);\n\n if (backgroundUrl) {\n return <div data-testid=\"background\" style={{ backgroundUrl } as JSX.CSSProperties} {...props} className={classNames} />;\n }\n\n return <img {...props} alt={alt} ref={imageRef} className={classNames} onError={handleError} />;\n}\n"],"names":["Img","props","backgroundUrl","className","classNameModifiers","src","alt","showOnError","loaded","setLoaded","useState","imageRef","useRef","handleLoad","classNames","cx","map","modifier","useEffect","image","Image","current","onload","complete","h","div","data-testid","style","img","ref","onError"],"mappings":"qNAOe,SAASA,EAAIC,GACxB,MAAMC,cAAEA,EAAgB,GAAEC,UAAEA,EAAY,GAAEC,mBAAEA,EAAqB,GAAEC,IAAEA,EAAM,GAAEC,IAAEA,EAAM,GAAEC,YAAEA,GAAc,GAAUN,GAC1GO,EAAQC,GAAaC,GAAS,GAC/BC,EAAWC,EAAO,MAElBC,EAAa,KACfJ,GAAU,~~EAAA~~,~~EAORK,~~EAAaC,EACf,CAACZ,GACD,wBACA,CAAE,gCAAiCK,MAChCJ,EAAmBY,~~KAAIC~~,GAAY,0BAA0BA,~~OAUpE~~,OAPAC,~~GAAU~~,KACN,MAAMC,EAAQjB,EAAgB,IAAIkB,MAAUT,EAASU,QACrDF,EAAMd,IAAMH,GAAiBG,EAC7Bc,EAAMG,OAAST,EACfJ,IAAYU,EAAMI,~~SAAQ~~,~~GAC3B,~~IAECrB,EACOsB,EAACC,MAAAA,CAAIC,cAAY,aAAaC,MAAO,CAAEzB,oBAA0CD,EAAOE,UAAWW,IAGvGU,EAACI,MAAAA,IAAQ3B,EAAOK,IAAKA,EAAKuB,IAAKlB,EAAUR,UAAWW,EAAYgB,QAtBnD,KAChBrB,EAAUF,~~EAAAA,GAsBlB~~"}
1	+ {"version":3,"file":"Img.js","sources":["../../../../../src/components/internal/Img/Img.tsx"],"sourcesContent":["import { JSX } from 'preact';\nimport { useRef, useState, useEffect } from 'preact/hooks';\nimport cx from 'classnames';\nimport './Img.scss';\nimport { h } from 'preact';\nimport { ImgProps } from './types';\n\nexport default function Img(props: ImgProps) {\n const { backgroundUrl = '', className = '', classNameModifiers = [], src = '', alt = '', showOnError = false } = props;\n const [loaded, setLoaded] = useState(false);\n const imageRef = useRef(null);\n\n const handleLoad = () => {\n setLoaded(true);\n };\n\n const handleError = () => {\n setLoaded(showOnError);\n };\n\n const classNames = cx(\n [className],\n 'adyen-checkout__image',\n { 'adyen-checkout__image--loaded': loaded },\n ...classNameModifiers.map(modifier => `adyen-checkout__image--${modifier}`)\n );\n\n useEffect(() => {\n const image = backgroundUrl ? new Image() : imageRef.current;\n image.src = backgroundUrl \|\| src;\n image.onload = handleLoad;\n setLoaded(!!image.complete);\n }, []);\n\n if (backgroundUrl) {\n return <div data-testid=\"background\" style={{ backgroundUrl } as JSX.CSSProperties} {...props} className={classNames} />;\n }\n\n return <img {...props} alt={alt} ref={imageRef} className={classNames} onError={handleError} />;\n}\n"],"names":["Img","props","backgroundUrl","className","classNameModifiers","src","alt","showOnError","loaded","setLoaded","useState","imageRef","useRef","handleLoad","classNames","cx","map","modifier","useEffect","image","Image","current","onload","complete","h","div","data-testid","style","img","ref","onError"],"mappings":"qNAOe,SAASA,EAAIC,GACxB,MAAMC,cAAEA,EAAgB,GAAEC,UAAEA,EAAY,GAAEC,mBAAEA,EAAqB,GAAEC,IAAEA,EAAM,GAAEC,IAAEA,EAAM,GAAEC,YAAEA,GAAc,GAAUN,GAC1GO,EAAQC,GAAaC,GAAS,GAC/BC,EAAWC,EAAO,MAElBC,EAAa,KACfJ,GAAU,IAORK,EAAaC,EACf,CAACZ,GACD,wBACA,CAAE,gCAAiCK,MAChCJ,EAAmBY,IAAIC,GAAY,0BAA0BA,MAUpE,OAPAC,EAAU,KACN,MAAMC,EAAQjB,EAAgB,IAAIkB,MAAUT,EAASU,QACrDF,EAAMd,IAAMH,GAAiBG,EAC7Bc,EAAMG,OAAST,EACfJ,IAAYU,EAAMI,WACnB,IAECrB,EACOsB,EAACC,MAAAA,CAAIC,cAAY,aAAaC,MAAO,CAAEzB,oBAA0CD,EAAOE,UAAWW,IAGvGU,EAACI,MAAAA,IAAQ3B,EAAOK,IAAKA,EAAKuB,IAAKlB,EAAUR,UAAWW,EAAYgB,QAtBnD,KAChBrB,EAAUF,KAsBlB"}

package/dist/es/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"./IssuerButton.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";const s=({items:s=[],selectedIssuerId:a,onChange:c})=>{const{i18n:i}=o(),l=t((e=>{const t=e.currentTarget.value;Object.defineProperty(e.target,"value",{value:t}),c(e)}),[c]);return e("div",{className:"adyen-checkout__issuer-button-group",role:"group","aria-label":i.get("issuerList.selectField.contextualText")},s.map((t=>e(r,{key:t.id,...t,selected:a===t.id,onClick:l}))))};export{s as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"./IssuerButton.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";const s=({items:s=[],selectedIssuerId:a,onChange:c})=>{const{i18n:i}=o(),l=t(e=>{const t=e.currentTarget.value;Object.defineProperty(e.target,"value",{value:t}),c(e)},[c]);return e("div",{className:"adyen-checkout__issuer-button-group",role:"group","aria-label":i.get("issuerList.selectField.contextualText")},s.map(t=>e(r,{key:t.id,...t,selected:a===t.id,onClick:l})))};export{s as default};
 //# sourceMappingURL=IssuerButtonGroup.js.map

package/dist/es/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IssuerButtonGroup.js","sources":["../../../../../../src/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport IssuerButton from './IssuerButton';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './IssuerButtonGroup.scss';\nimport { IssuerItem } from '../types';\n\ninterface IssuerButtonGroupProps {\n items: IssuerItem[];\n selectedIssuerId: string;\n onChange: (event: UIEvent) => void;\n}\n\nconst IssuerButtonGroup = ({ items = [], selectedIssuerId, onChange }: IssuerButtonGroupProps) => {\n const { i18n } = useCoreContext();\n\n const handleClick = useCallback(\n (event: UIEvent) => {\n const value = (event.currentTarget as HTMLButtonElement).value;\n Object.defineProperty(event.target, 'value', { value });\n onChange(event);\n },\n [onChange]\n );\n\n return (\n <div className=\"adyen-checkout__issuer-button-group\" role=\"group\" aria-label={i18n.get('issuerList.selectField.contextualText')}>\n {items.map(issuer => (\n <IssuerButton key={issuer.id} {...issuer} selected={selectedIssuerId === issuer.id} onClick={handleClick} />\n ))}\n </div>\n );\n};\n\nexport default IssuerButtonGroup;\n"],"names":["IssuerButtonGroup","items","selectedIssuerId","onChange","i18n","useCoreContext","handleClick","useCallback","event","value","currentTarget","Object","defineProperty","target","h","div","className","role","aria-label","get","map","issuer","IssuerButton","key","id","selected","onClick"],"mappings":"~~oQAaMA~~,~~MAAAA~~,EAAoB,EAAGC,QAAQ,GAAIC,mBAAkBC,eACvD,MAAMC,KAAEA,GAASC,IAEXC,EAAcC,~~GACfC~~,IACG,MAAMC,EAASD,EAAME,cAAoCD,MACzDE,OAAOC,eAAeJ,EAAMK,OAAQ,QAAS,CAAEJ,UAC/CN,EAASK,~~EAAAA~~,~~GAEb,~~CAACL,IAGL,OACIW,EAACC,MAAAA,CAAIC,UAAU,sCAAsCC,KAAK,QAAQC,aAAYd,EAAKe,IAAI,0CAClFlB,EAAMmB,~~KAAIC~~,GACPP,EAACQ,EAAAA,CAAaC,IAAKF,EAAOG,MAAQH,EAAQI,SAAUvB,IAAqBmB,EAAOG,GAAIE,QAASpB"}
1	+ {"version":3,"file":"IssuerButtonGroup.js","sources":["../../../../../../src/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport IssuerButton from './IssuerButton';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './IssuerButtonGroup.scss';\nimport { IssuerItem } from '../types';\n\ninterface IssuerButtonGroupProps {\n items: IssuerItem[];\n selectedIssuerId: string;\n onChange: (event: UIEvent) => void;\n}\n\nconst IssuerButtonGroup = ({ items = [], selectedIssuerId, onChange }: IssuerButtonGroupProps) => {\n const { i18n } = useCoreContext();\n\n const handleClick = useCallback(\n (event: UIEvent) => {\n const value = (event.currentTarget as HTMLButtonElement).value;\n Object.defineProperty(event.target, 'value', { value });\n onChange(event);\n },\n [onChange]\n );\n\n return (\n <div className=\"adyen-checkout__issuer-button-group\" role=\"group\" aria-label={i18n.get('issuerList.selectField.contextualText')}>\n {items.map(issuer => (\n <IssuerButton key={issuer.id} {...issuer} selected={selectedIssuerId === issuer.id} onClick={handleClick} />\n ))}\n </div>\n );\n};\n\nexport default IssuerButtonGroup;\n"],"names":["IssuerButtonGroup","items","selectedIssuerId","onChange","i18n","useCoreContext","handleClick","useCallback","event","value","currentTarget","Object","defineProperty","target","h","div","className","role","aria-label","get","map","issuer","IssuerButton","key","id","selected","onClick"],"mappings":"oQAaA,MAAMA,EAAoB,EAAGC,QAAQ,GAAIC,mBAAkBC,eACvD,MAAMC,KAAEA,GAASC,IAEXC,EAAcC,EACfC,IACG,MAAMC,EAASD,EAAME,cAAoCD,MACzDE,OAAOC,eAAeJ,EAAMK,OAAQ,QAAS,CAAEJ,UAC/CN,EAASK,IAEb,CAACL,IAGL,OACIW,EAACC,MAAAA,CAAIC,UAAU,sCAAsCC,KAAK,QAAQC,aAAYd,EAAKe,IAAI,0CAClFlB,EAAMmB,IAAIC,GACPP,EAACQ,EAAAA,CAAaC,IAAKF,EAAOG,MAAQH,EAAQI,SAAUvB,IAAqBmB,EAAOG,GAAIE,QAASpB"}

package/dist/es/components/internal/IssuerList/IssuerList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as s}from"../../../external/preact/dist/preact.js";import{useState as t,useCallback as r,useRef as o,useEffect as i}from"../../../external/preact/hooks/dist/hooks.js";import a from"../../../utils/useForm/useForm.js";import n from"../FormFields/Field/Field.js";import l from"./IssuerButtonGroup/IssuerButtonGroup.js";import u from"../ContentSeparator/ContentSeparator.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import c from"../../../core/Errors/useSRPanelContext.js";import{ERROR_ACTION_FOCUS_FIELD as d}from"../../../core/Errors/constants.js";import{setFocusOnField as g}from"../../../utils/setFocus.js";import h from"../DisclaimerMessage/DisclaimerMessage.js";import p from"../FormFields/Select/Select.js";import{ANALYTICS_LIST as f,ANALYTICS_FEATURED_ISSUER as y,ANALYTICS_SELECTED_STR as C,ANALYTICS_DISPLAYED_STR as j,ANALYTICS_SEARCH_DEBOUNCE_TIME as F,ANALYTICS_LIST_SEARCH as x,ANALYTICS_INPUT_STR as S}from"../../../core/Analytics/constants.js";import{debounce as _}from"../../../utils/debounce.js";import{AnalyticsInfoEvent as b}from"../../../core/Analytics/AnalyticsInfoEvent.js";const v=({issuer:e,items:s},t)=>{const r=s.find((s=>s.id===e))?.name;return e&&r?`${t.get("continueTo")} ${r}`:t.get("continue")},A=["issuer"],I={issuer:{validate:e=>!!e&&e.length>0,errorMessage:"issuerList.selectField.contextualText",modes:["blur"]}};function M({items:M,placeholder:k,issuer:w,highlightedIds:E=[],showContextualElement:V,contextualText:T,...B}){const{i18n:N}=m(),{handleChangeFor:P,triggerValidation:R,data:D,valid:L,errors:G,isValid:$}=a({schema:A,defaultData:{issuer:w},rules:I}),[K,O]=t("ready"),[q,z]=t(1),{setSRMessagesFromObjects:H,shouldMoveFocusSR:J}=c(),Q=H?.({});this.setStatus=e=>{O(e)};const U=r((e=>s=>{const t=1===e?f:y,r=M.find((e=>e.id===s.target.value)),o=new b({type:C,target:t,issuer:r.name});B.onSubmitAnalytics(o),z(e),P("issuer")(s)}),[P]),W=r((e=>{if(e){const e=new b({type:j,target:f});B.onSubmitAnalytics(e)}}),[]),X=o(_(B.onSubmitAnalytics,F)),Y=r((()=>{X.current({type:S,target:x})}),[]);i((()=>{B.onChange({data:D,valid:L,errors:G,isValid:$});const e=Q?.({errors:G,isValidating:!0});e?.action===d&&J&&g(".adyen-checkout__issuer-list","issuer-list")}),[D,L,G,$]),this.showValidation=()=>{R()};const{highlightedItems:Z}=M.reduce(((e,s)=>(E.includes(s.id)&&e.highlightedItems.push({...s}),e)),{highlightedItems:[]});return e("div",{className:"adyen-checkout__issuer-list"},!!Z.length&&e(s,null,e(l,{selectedIssuerId:0===q?D.issuer:null,items:Z,onChange:U(0)}),e(u,null)),e(n,{label:N.get("issuerList.selectField.label"),errorMessage:(ee=G.issuer,ee&&ee.errorMessage?N.get(ee.errorMessage):!!ee),classNameModifiers:["issuer-list"],name:"issuer",showContextualElement:V,contextualText:T},e(p,{items:M,selectedValue:1===q?D.issuer:null,placeholder:k,name:"issuer",className:"adyen-checkout__issuer-list__dropdown",onChange:U(1),onListToggle:W,onInput:Y})),B.termsAndConditions&&e("div",{className:"adyen-checkout__issuer-list__termsAndConditions"},e(h,{message:N.get(B.termsAndConditions.translationKey),urls:B.termsAndConditions.urls})),B.showPayButton&&B.payButton({status:K,label:v({issuer:D.issuer,items:[...M,...Z]},N)}));var ee}M.defaultProps={onChange:()=>{}};export{M as default};
+import{createElement as e,Fragment as s}from"../../../external/preact/dist/preact.js";import{useState as t,useCallback as r,useRef as o,useEffect as i}from"../../../external/preact/hooks/dist/hooks.js";import a from"../../../utils/useForm/useForm.js";import n from"../FormFields/Field/Field.js";import l from"./IssuerButtonGroup/IssuerButtonGroup.js";import u from"../ContentSeparator/ContentSeparator.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import c from"../../../core/Errors/useSRPanelContext.js";import{ERROR_ACTION_FOCUS_FIELD as d}from"../../../core/Errors/constants.js";import{setFocusOnField as g}from"../../../utils/setFocus.js";import h from"../DisclaimerMessage/DisclaimerMessage.js";import p from"../FormFields/Select/Select.js";import{ANALYTICS_LIST as f,ANALYTICS_FEATURED_ISSUER as y,ANALYTICS_SELECTED_STR as C,ANALYTICS_DISPLAYED_STR as j,ANALYTICS_SEARCH_DEBOUNCE_TIME as F,ANALYTICS_LIST_SEARCH as x,ANALYTICS_INPUT_STR as S}from"../../../core/Analytics/constants.js";import{debounce as _}from"../../../utils/debounce.js";import{AnalyticsInfoEvent as b}from"../../../core/Analytics/AnalyticsInfoEvent.js";const v=({issuer:e,items:s},t)=>{const r=s.find(s=>s.id===e)?.name;return e&&r?`${t.get("continueTo")} ${r}`:t.get("continue")},A=["issuer"],I={issuer:{validate:e=>!!e&&e.length>0,errorMessage:"issuerList.selectField.contextualText",modes:["blur"]}};function M({items:M,placeholder:k,issuer:w,highlightedIds:E=[],showContextualElement:V,contextualText:T,...B}){const{i18n:N}=m(),{handleChangeFor:P,triggerValidation:R,data:D,valid:L,errors:G,isValid:$}=a({schema:A,defaultData:{issuer:w},rules:I}),[K,O]=t("ready"),[q,z]=t(1),{setSRMessagesFromObjects:H,shouldMoveFocusSR:J}=c(),Q=H?.({});this.setStatus=e=>{O(e)};const U=r(e=>s=>{const t=1===e?f:y,r=M.find(e=>e.id===s.target.value),o=new b({type:C,target:t,issuer:r.name});B.onSubmitAnalytics(o),z(e),P("issuer")(s)},[P]),W=r(e=>{if(e){const e=new b({type:j,target:f});B.onSubmitAnalytics(e)}},[]),X=o(_(B.onSubmitAnalytics,F)),Y=r(()=>{X.current({type:S,target:x})},[]);i(()=>{B.onChange({data:D,valid:L,errors:G,isValid:$});const e=Q?.({errors:G,isValidating:!0});e?.action===d&&J&&g(".adyen-checkout__issuer-list","issuer-list")},[D,L,G,$]),this.showValidation=()=>{R()};const{highlightedItems:Z}=M.reduce((e,s)=>(E.includes(s.id)&&e.highlightedItems.push({...s}),e),{highlightedItems:[]});return e("div",{className:"adyen-checkout__issuer-list"},!!Z.length&&e(s,null,e(l,{selectedIssuerId:0===q?D.issuer:null,items:Z,onChange:U(0)}),e(u,null)),e(n,{label:N.get("issuerList.selectField.label"),errorMessage:(ee=G.issuer,ee&&ee.errorMessage?N.get(ee.errorMessage):!!ee),classNameModifiers:["issuer-list"],name:"issuer",showContextualElement:V,contextualText:T},e(p,{items:M,selectedValue:1===q?D.issuer:null,placeholder:k,name:"issuer",className:"adyen-checkout__issuer-list__dropdown",onChange:U(1),onListToggle:W,onInput:Y})),B.termsAndConditions&&e("div",{className:"adyen-checkout__issuer-list__termsAndConditions"},e(h,{message:N.get(B.termsAndConditions.translationKey),urls:B.termsAndConditions.urls})),B.showPayButton&&B.payButton({status:K,label:v({issuer:D.issuer,items:[...M,...Z]},N)}));var ee}M.defaultProps={onChange:()=>{}};export{M as default};
 //# sourceMappingURL=IssuerList.js.map