@adyen/adyen-web 6.6.0 → 6.7.0

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

@@ -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":"+iBAYA,SAASA,GAAOC,MACZA,EAAQ,GAAEC,UACVA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,WACvBA,GAAa,EAAIC,SACjBA,GAAW,EAAKC,SAChBA,EAAW,OAAQC,QACnBA,EAAOC,cACPA,EAAaC,KACbA,EAAIC,UACJA,EAASC,QACTA,EAAOC,YACPA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,kBACRA,EAAiBC,cACjBA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,gBACZA,GAAkB,EAAKC,SACvBA,IAEA,MAAMC,EAAiBC,EAAO,MACxBC,EAAqBD,EAAO,MAC5BE,EAAkBF,EAAO,MACzBG,EAAgBH,EAAO,OACtBI,EAAYC,GAAiBC,EAAiB,OAC9CC,EAAUC,GAAeF,GAAkB,GAC5CG,EAAuBC,GAAQ,IAAM,UAAUC,OAAU,IAEzDC,EAAqBjC,EAAMkC,MAAKC,GAAKA,EAAEC,KAAO7B,KAAmB,IAEhE8B,EAAWC,GAAgBX,KAE3BY,EAAcC,GAAmBb,EAAqBM,GAEvDQ,EAAiBR,EAEjBS,EAAgB5B,EAAoBd,EAAQA,EAAM2C,QAAOC,IAASnB,GAAcmB,EAAKpC,KAAKqC,cAAcC,SAASrB,EAAWoB,iBAG5HE,EAAkBnC,EAAW,GAAGA,IADvBH,EAAYuC,EAAoBC,IACa,KAoBtDC,EAAgBN,IAClB,IAAKA,EAAM,OACX,MAAMO,EAAcC,SAASC,eAAe,YAAYT,EAAKR,MAC7DkB,EAAoBH,EAAAA,EAMlBI,EAAY,KAEdvC,GAAeI,EAAeoC,QAAQC,OACtC5B,GAAY,EAAA,EAGV6B,EAAW,KACb7B,GAAY,EAAA,EAGV8B,EAAwBC,IAC1B,MAAMC,EAAQD,EAAGE,cAAmCC,aAAa,cACjE,OAAOrB,EAAcR,MAAK8B,GAAYA,EAAS5B,IAAMyB,GAAAA,EAOnDI,GAAgBL,IAIlB,IAAIM,EAHJN,EAAEO,iBAQED,EAHAN,EAAEE,yBAAyBM,aAAwD,WAAzCR,EAAEE,cAAcC,aAAa,QAGzDJ,EAAqBC,GAC5BrB,EAAaH,IAAMM,EAAc2B,MAAKzB,GAAQA,EAAKR,KAAOG,EAAaH,KAGhEG,EAGVd,EAEciB,EAAc,GAId,CAAEN,GAAI7B,GAIxB2D,IAAgBA,EAAYrD,WAC5BR,EAAS,CAAEiE,OAAQ,CAAET,MAAOK,EAAY9B,GAAI5B,KAAMA,KAE9CO,GAAeuB,EAAa,MAEhCiB,IACJ,EA6CEgB,GAAwBX,IAC1B,OAAQA,EAAEY,KACN,KAAKC,EAAKC,MACV,KAAKD,EAAKE,MACNV,GAAaL,GACb,MACJ,KAAKa,EAAKG,UACNhB,EAAEO,iBAlIQ,MAClB,IAAKzB,GAAiBA,EAAcmC,OAAS,EAAG,OAChD,MAAMC,EAAoBpC,EAAcqC,WAAUf,GAAYA,IAAazB,IAAgB,EACrFyC,EAAYF,EAAoBpC,EAAcmC,OAASC,EAAoB,EAC3EG,EAAWvC,EAAcsC,GAC/B9B,EAAa+B,GACbzC,EAAgByC,EAAAA,EA6HRC,GACA,MACJ,KAAKT,EAAKU,QACNvB,EAAEO,iBA7HY,MACtB,IAAKzB,GAAiBA,EAAcmC,OAAS,EAAG,OAChD,MAAMC,EAAoBpC,EAAcqC,WAAUf,GAAYA,IAAazB,IAAgB,EACrFyC,EAAYF,EAAoB,EAAIpC,EAAcmC,OAAS,EAAIC,EAC/DG,EAAWvC,EAAcsC,GAC/B9B,EAAa+B,GACbzC,EAAgByC,EAAAA,EAwHRG,GAGR,EAwEJ,OAzCAC,GAAU,KACFzD,EACAU,EAAa,MAEbZ,EAAc,KAClB,GACD,CAACE,IAKJyD,GAAU,KACFzD,GAAYzB,GAAciB,EAAeoC,SACzCpC,EAAeoC,QAAQ8B,QAE3BrE,IAAeW,EAAAA,GAChB,CAACA,IAEJyD,GAAU,KAKN,SAASE,EAAmB3B,IAGDA,EAAE4B,cAClB5B,EAAE4B,eAAe1C,SAASxB,EAAmBkC,UAC7ClC,EAAmBkC,QAAQiC,SAAS7B,EAAEU,UAEzCf,GAER,CAIA,OAFAH,SAASsC,iBAAiB,QAASH,GAAoB,GAEhD,KACHnC,SAASuC,oBAAoB,QAASJ,GAAoB,EAAA,CAC9D,GACD,CAACjE,IAGAsE,EAACC,MAAAA,CACG5F,UAAW6F,EAAG,CAAC,2BAA4B7F,KAAcC,EAAmB6F,KAAIC,GAAK,6BAA6BA,QAClHC,IAAK3E,GAELsE,EAACM,EAAAA,CACG7D,UAAWA,EACXD,GAAIxB,GAAY,KAChBqB,OAAQM,EACR4D,SAAU1D,EACVrB,eAAgBA,EAChBjB,WAAYA,EACZM,UAAWA,EACXC,QAASA,EACT0F,gBAhIiBxC,IACrBA,EAAEY,MAAQC,EAAKE,OAASxE,GAAcyB,GAAYH,EAClDwC,GAAaL,GACNA,EAAEY,MAAQC,EAAK4B,OAGtB9C,KACO,CAACkB,EAAKU,QAASV,EAAKG,UAAWH,EAAKE,OAAO7B,SAASc,EAAEY,OAASZ,EAAEY,MAAQC,EAAKC,OAAWvE,GAAeyB,IAOxGgC,EAAE0C,UAAY1C,EAAEY,MAAQC,EAAK8B,KAG7B3C,EAAEY,MAAQC,EAAK8B,MADtBhD,KARAK,EAAEO,iBACGvC,EAGD2C,GAAqBX,GAFrBF,IASR,EA8GQ8C,QAAS9C,EACTpD,QAjFcsD,IACtB,MAAMC,EAAiBD,EAAEU,OAA4BT,MACrDvB,EAAauB,GACbnC,EAAcmC,GACVvD,GACAA,EAAQuD,EACZ,EA4EQlD,YAAaA,EACbP,SAAUA,EACV0B,aAAcA,EACdF,SAAUA,EACVL,gBAAiBA,EACjBkF,WA1EQ7C,IAChBA,EAAEO,iBACGvC,GAIDU,EAAaG,EAAejC,MAC5B+C,MAJAjB,EAAa,MACboB,IAIJ,EAmEQ7C,SAAUA,EACVkC,gBAAiBA,EACjB7B,gBAAiBA,EACjBC,SAAUA,IAEdyE,EAACc,EAAAA,CACGzE,OAAQM,EACRG,cAAeA,EACfiE,QA5JS/C,IACjBA,EAAEO,iBACF,MAAMvB,EAAOe,EAAqBC,GAClCpB,EAAgBI,EAAAA,EA0JRgE,SAAU3C,GACVkC,SAAU1D,EACVX,aAAcA,EACdN,cAAeA,EACfI,SAAUA,IAI1B,CAEA7B,EAAO8G,aAAe,CAClB5G,UAAW,GACXC,mBAAoB,GACpBC,YAAY,EACZH,MAAO,GACPI,UAAU,EACVC,SAAU"}
+{"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/IFrame/Iframe.js.map

@@ -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":"oQAkBA,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,mBAzDAkB,SAAAC,GAAAC,EAAAvC,KAAQG,gBAAR,IAXAoC,EADE1C,EACY2C,eAAe,CACzBxB,MAAO,IACPC,OAAQ,IACRC,SAAU,IACVC,UAAW,IACXJ,IAAK,KACLK,MAAO,KACPC,MAAO,oBACPC,mBAAoB"}
+{"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":"oQAkBA,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"}

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

@@ -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":"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"}
+{"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/IssuerList/IssuerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"IssuerList.js","sources":["../../../../../src/components/internal/IssuerList/IssuerList.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useState, useEffect, useCallback, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport Field from '../FormFields/Field';\nimport IssuerButtonGroup from './IssuerButtonGroup';\nimport ContentSeparator from '../ContentSeparator';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ValidatorRules } from '../../../utils/Validator/types';\nimport { IssuerListProps } from './types';\nimport './IssuerList.scss';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport { ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport DisclaimerMessage from '../DisclaimerMessage';\nimport Select from '../FormFields/Select';\nimport { SelectTargetObject } from '../FormFields/Select/types';\nimport {\n    ANALYTICS_DISPLAYED_STR,\n    ANALYTICS_FEATURED_ISSUER,\n    ANALYTICS_INPUT_STR,\n    ANALYTICS_LIST,\n    ANALYTICS_LIST_SEARCH,\n    ANALYTICS_SEARCH_DEBOUNCE_TIME,\n    ANALYTICS_SELECTED_STR\n} from '../../../core/Analytics/constants';\nimport { debounce } from '../../../utils/debounce';\n\nconst payButtonLabel = ({ issuer, items }, i18n): string => {\n    const issuerName = items.find(i => i.id === issuer)?.name;\n    if (!issuer || !issuerName) return i18n.get('continue');\n    return `${i18n.get('continueTo')} ${issuerName}`;\n};\n\nconst schema = ['issuer'];\nconst validationRules: ValidatorRules = {\n    issuer: {\n        validate: issuer => !!issuer && issuer.length > 0,\n        errorMessage: 'issuerList.selectField.contextualText',\n        modes: ['blur']\n    }\n};\n\nenum IssuerListInputTypes {\n    ButtonGroup,\n    Dropdown\n}\n\nfunction IssuerList({ items, placeholder, issuer, highlightedIds = [], showContextualElement, contextualText, ...props }: IssuerListProps) {\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm({\n        schema,\n        defaultData: { issuer },\n        rules: validationRules\n    });\n    const [status, setStatus] = useState('ready');\n    const [inputType, setInputType] = useState<IssuerListInputTypes>(IssuerListInputTypes.Dropdown);\n\n    const { setSRMessagesFromObjects, shouldMoveFocusSR } = useSRPanelContext();\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n    const getErrorMessage = error => (error && error.errorMessage ? i18n.get(error.errorMessage) : !!error);\n\n    this.setStatus = newStatus => {\n        setStatus(newStatus);\n    };\n\n    const handleInputChange = useCallback(\n        (type: IssuerListInputTypes) => (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            const target = type === IssuerListInputTypes.Dropdown ? ANALYTICS_LIST : ANALYTICS_FEATURED_ISSUER;\n            const issuerObj = items.find(issuer => issuer.id === (event.target as SelectTargetObject).value);\n            props.onSubmitAnalytics({ type: ANALYTICS_SELECTED_STR, target, issuer: issuerObj.name });\n\n            setInputType(type);\n            handleChangeFor('issuer')(event);\n        },\n        [handleChangeFor]\n    );\n\n    const handleListToggle = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            props.onSubmitAnalytics({ type: ANALYTICS_DISPLAYED_STR, target: ANALYTICS_LIST });\n        }\n    }, []);\n\n    const debounceSearchAnalytics = useRef(debounce(props.onSubmitAnalytics, ANALYTICS_SEARCH_DEBOUNCE_TIME));\n\n    const handleSearch = useCallback(() => {\n        debounceSearchAnalytics.current({ type: ANALYTICS_INPUT_STR, target: ANALYTICS_LIST_SEARCH });\n    }, []);\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n\n        const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: true });\n        if (srPanelResp?.action === ERROR_ACTION_FOCUS_FIELD) {\n            // Focus field in error, if required\n            if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__issuer-list', srPanelResp.fieldToFocus);\n        }\n    }, [data, valid, errors, isValid]);\n\n    this.showValidation = () => {\n        triggerValidation();\n    };\n\n    const { highlightedItems } = items.reduce(\n        (memo, item) => {\n            if (highlightedIds.includes(item.id)) memo.highlightedItems.push({ ...item });\n            return memo;\n        },\n        { highlightedItems: [] }\n    );\n\n    return (\n        <div className=\"adyen-checkout__issuer-list\">\n            {!!highlightedItems.length && (\n                <Fragment>\n                    <IssuerButtonGroup\n                        selectedIssuerId={inputType === IssuerListInputTypes.ButtonGroup ? data['issuer'] : null}\n                        items={highlightedItems}\n                        onChange={handleInputChange(IssuerListInputTypes.ButtonGroup)}\n                    />\n                    <ContentSeparator />\n                </Fragment>\n            )}\n\n            <Field\n                label={i18n.get('issuerList.selectField.label')}\n                errorMessage={getErrorMessage(errors.issuer)}\n                classNameModifiers={['issuer-list']}\n                name={'issuer'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    items={items}\n                    selectedValue={inputType === IssuerListInputTypes.Dropdown ? data['issuer'] : null}\n                    placeholder={placeholder}\n                    name={'issuer'}\n                    className={'adyen-checkout__issuer-list__dropdown'}\n                    onChange={handleInputChange(IssuerListInputTypes.Dropdown)}\n                    onListToggle={handleListToggle}\n                    onInput={handleSearch}\n                />\n            </Field>\n\n            {props.termsAndConditions && (\n                <div className=\"adyen-checkout__issuer-list__termsAndConditions\">\n                    <DisclaimerMessage message={i18n.get(props.termsAndConditions.translationKey)} urls={props.termsAndConditions.urls} />\n                </div>\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    label: payButtonLabel({ issuer: data['issuer'], items: [...items, ...highlightedItems] }, i18n)\n                })}\n        </div>\n    );\n}\n\nIssuerList.defaultProps = {\n    onChange: () => {}\n};\n\nexport default IssuerList;\n"],"names":["payButtonLabel","issuer","items","i18n","issuerName","find","i","id","name","get","schema","validationRules","validate","length","errorMessage","modes","IssuerList","placeholder","highlightedIds","showContextualElement","contextualText","props","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","defaultData","rules","status","setStatus","useState","inputType","setInputType","setSRMessagesFromObjects","shouldMoveFocusSR","useSRPanelContext","setSRMessages","this","newStatus","handleInputChange","useCallback","type","event","target","ANALYTICS_LIST","ANALYTICS_FEATURED_ISSUER","issuerObj","value","onSubmitAnalytics","ANALYTICS_SELECTED_STR","handleListToggle","isOpen","ANALYTICS_DISPLAYED_STR","debounceSearchAnalytics","useRef","debounce","ANALYTICS_SEARCH_DEBOUNCE_TIME","handleSearch","current","ANALYTICS_INPUT_STR","ANALYTICS_LIST_SEARCH","useEffect","onChange","srPanelResp","isValidating","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","showValidation","highlightedItems","reduce","memo","item","includes","push","h","div","className","Fragment","IssuerButtonGroup","selectedIssuerId","ContentSeparator","Field","label","error","classNameModifiers","Select","selectedValue","onListToggle","onInput","termsAndConditions","DisclaimerMessage","message","translationKey","urls","showPayButton","payButton","defaultProps"],"mappings":"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"}
+{"version":3,"file":"IssuerList.js","sources":["../../../../../src/components/internal/IssuerList/IssuerList.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useState, useEffect, useCallback, useRef } from 'preact/hooks';\nimport useForm from '../../../utils/useForm';\nimport Field from '../FormFields/Field';\nimport IssuerButtonGroup from './IssuerButtonGroup';\nimport ContentSeparator from '../ContentSeparator';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ValidatorRules } from '../../../utils/Validator/types';\nimport { IssuerListProps } from './types';\nimport './IssuerList.scss';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { SetSRMessagesReturnFn } from '../../../core/Errors/SRPanelProvider';\nimport { SetSRMessagesReturnObject } from '../../../core/Errors/types';\nimport { ERROR_ACTION_FOCUS_FIELD } from '../../../core/Errors/constants';\nimport { setFocusOnField } from '../../../utils/setFocus';\nimport DisclaimerMessage from '../DisclaimerMessage';\nimport Select from '../FormFields/Select';\nimport { SelectTargetObject } from '../FormFields/Select/types';\nimport {\n    ANALYTICS_DISPLAYED_STR,\n    ANALYTICS_FEATURED_ISSUER,\n    ANALYTICS_INPUT_STR,\n    ANALYTICS_LIST,\n    ANALYTICS_LIST_SEARCH,\n    ANALYTICS_SEARCH_DEBOUNCE_TIME,\n    ANALYTICS_SELECTED_STR\n} from '../../../core/Analytics/constants';\nimport { debounce } from '../../../utils/debounce';\n\nconst payButtonLabel = ({ issuer, items }, i18n): string => {\n    const issuerName = items.find(i => i.id === issuer)?.name;\n    if (!issuer || !issuerName) return i18n.get('continue');\n    return `${i18n.get('continueTo')} ${issuerName}`;\n};\n\nconst schema = ['issuer'];\nconst validationRules: ValidatorRules = {\n    issuer: {\n        validate: issuer => !!issuer && issuer.length > 0,\n        errorMessage: 'issuerList.selectField.contextualText',\n        modes: ['blur']\n    }\n};\n\nenum IssuerListInputTypes {\n    ButtonGroup,\n    Dropdown\n}\n\nfunction IssuerList({ items, placeholder, issuer, highlightedIds = [], showContextualElement, contextualText, ...props }: IssuerListProps) {\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm({\n        schema,\n        defaultData: { issuer },\n        rules: validationRules\n    });\n    const [status, setStatus] = useState('ready');\n    const [inputType, setInputType] = useState<IssuerListInputTypes>(IssuerListInputTypes.Dropdown);\n\n    const { setSRMessagesFromObjects, shouldMoveFocusSR } = useSRPanelContext();\n    const setSRMessages: SetSRMessagesReturnFn = setSRMessagesFromObjects?.({});\n\n    const getErrorMessage = error => (error && error.errorMessage ? i18n.get(error.errorMessage) : !!error);\n\n    this.setStatus = newStatus => {\n        setStatus(newStatus);\n    };\n\n    const handleInputChange = useCallback(\n        (type: IssuerListInputTypes) => (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            const target = type === IssuerListInputTypes.Dropdown ? ANALYTICS_LIST : ANALYTICS_FEATURED_ISSUER;\n            const issuerObj = items.find(issuer => issuer.id === (event.target as SelectTargetObject).value);\n            props.onSubmitAnalytics({ type: ANALYTICS_SELECTED_STR, target, issuer: issuerObj.name });\n\n            setInputType(type);\n            handleChangeFor('issuer')(event);\n        },\n        [handleChangeFor]\n    );\n\n    const handleListToggle = useCallback((isOpen: boolean) => {\n        if (isOpen) {\n            props.onSubmitAnalytics({ type: ANALYTICS_DISPLAYED_STR, target: ANALYTICS_LIST });\n        }\n    }, []);\n\n    const debounceSearchAnalytics = useRef(debounce(props.onSubmitAnalytics, ANALYTICS_SEARCH_DEBOUNCE_TIME));\n\n    const handleSearch = useCallback(() => {\n        debounceSearchAnalytics.current({ type: ANALYTICS_INPUT_STR, target: ANALYTICS_LIST_SEARCH });\n    }, []);\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n\n        const srPanelResp: SetSRMessagesReturnObject = setSRMessages?.({ errors, isValidating: true });\n        if (srPanelResp?.action === ERROR_ACTION_FOCUS_FIELD) {\n            // Focus field in error, if required\n            if (shouldMoveFocusSR) setFocusOnField('.adyen-checkout__issuer-list', srPanelResp.fieldToFocus);\n        }\n    }, [data, valid, errors, isValid]);\n\n    this.showValidation = () => {\n        triggerValidation();\n    };\n\n    const { highlightedItems } = items.reduce(\n        (memo, item) => {\n            if (highlightedIds.includes(item.id)) memo.highlightedItems.push({ ...item });\n            return memo;\n        },\n        { highlightedItems: [] }\n    );\n\n    return (\n        <div className=\"adyen-checkout__issuer-list\">\n            {!!highlightedItems.length && (\n                <Fragment>\n                    <IssuerButtonGroup\n                        selectedIssuerId={inputType === IssuerListInputTypes.ButtonGroup ? data['issuer'] : null}\n                        items={highlightedItems}\n                        onChange={handleInputChange(IssuerListInputTypes.ButtonGroup)}\n                    />\n                    <ContentSeparator />\n                </Fragment>\n            )}\n\n            <Field\n                label={i18n.get('issuerList.selectField.label')}\n                errorMessage={getErrorMessage(errors.issuer)}\n                classNameModifiers={['issuer-list']}\n                name={'issuer'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    items={items}\n                    selectedValue={inputType === IssuerListInputTypes.Dropdown ? data['issuer'] : null}\n                    placeholder={placeholder}\n                    name={'issuer'}\n                    className={'adyen-checkout__issuer-list__dropdown'}\n                    onChange={handleInputChange(IssuerListInputTypes.Dropdown)}\n                    onListToggle={handleListToggle}\n                    onInput={handleSearch}\n                />\n            </Field>\n\n            {props.termsAndConditions && (\n                <div className=\"adyen-checkout__issuer-list__termsAndConditions\">\n                    <DisclaimerMessage message={i18n.get(props.termsAndConditions.translationKey)} urls={props.termsAndConditions.urls} />\n                </div>\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    label: payButtonLabel({ issuer: data['issuer'], items: [...items, ...highlightedItems] }, i18n)\n                })}\n        </div>\n    );\n}\n\nIssuerList.defaultProps = {\n    onChange: () => {}\n};\n\nexport default IssuerList;\n"],"names":["payButtonLabel","issuer","items","i18n","issuerName","find","i","id","name","get","schema","validationRules","validate","length","errorMessage","modes","IssuerList","placeholder","highlightedIds","showContextualElement","contextualText","props","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","defaultData","rules","status","setStatus","useState","inputType","setInputType","setSRMessagesFromObjects","shouldMoveFocusSR","useSRPanelContext","setSRMessages","this","newStatus","handleInputChange","useCallback","type","event","target","ANALYTICS_LIST","ANALYTICS_FEATURED_ISSUER","issuerObj","value","onSubmitAnalytics","ANALYTICS_SELECTED_STR","handleListToggle","isOpen","ANALYTICS_DISPLAYED_STR","debounceSearchAnalytics","useRef","debounce","ANALYTICS_SEARCH_DEBOUNCE_TIME","handleSearch","current","ANALYTICS_INPUT_STR","ANALYTICS_LIST_SEARCH","useEffect","onChange","srPanelResp","isValidating","action","ERROR_ACTION_FOCUS_FIELD","setFocusOnField","fieldToFocus","showValidation","highlightedItems","reduce","memo","item","includes","push","h","div","className","Fragment","IssuerButtonGroup","selectedIssuerId","ContentSeparator","Field","label","error","classNameModifiers","Select","selectedValue","onListToggle","onInput","termsAndConditions","DisclaimerMessage","message","translationKey","urls","showPayButton","payButton","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/OpenInvoice/OpenInvoice.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenInvoice.js","sources":["../../../../../src/components/internal/OpenInvoice/OpenInvoice.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport CompanyDetails from '../CompanyDetails';\nimport PersonalDetails from '../PersonalDetails';\nimport Address from '../Address';\nimport Checkbox from '../FormFields/Checkbox';\nimport ConsentCheckbox from '../FormFields/ConsentCheckbox';\nimport { getActiveFieldsData, getInitialActiveFieldsets, fieldsetsSchema } from './utils';\nimport {\n    OpenInvoiceActiveFieldsets,\n    OpenInvoiceFieldsetsRefs,\n    OpenInvoiceProps,\n    OpenInvoiceStateData,\n    OpenInvoiceStateError,\n    OpenInvoiceStateValid\n} from './types';\nimport './OpenInvoice.scss';\nimport IbanInput from '../IbanInput';\nimport { GenericError } from '../../../core/Errors/types';\nimport Field from '../FormFields/Field';\nimport FormInstruction from '../FormInstruction';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport useSRPanelForOpenInvoiceErrors from './useSRPanelForOpenInvoiceErrors';\n\nconst consentCBErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'consent.checkbox.invalid',\n    error: 'consent.checkbox.invalid'\n};\n\nexport default function OpenInvoice(props: OpenInvoiceProps) {\n    const { countryCode, visibility } = props;\n    const { i18n } = useCoreContext();\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const openInvoiceRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(openInvoiceRef.current).length) {\n        props.setComponentRef?.(openInvoiceRef.current);\n    }\n\n    const isValidating = useRef(false);\n\n    const initialActiveFieldsets: OpenInvoiceActiveFieldsets = getInitialActiveFieldsets(visibility, props.data);\n    const [activeFieldsets, setActiveFieldsets] = useState<OpenInvoiceActiveFieldsets>(initialActiveFieldsets);\n\n    const { current: fieldsetsRefs } = useRef<OpenInvoiceFieldsetsRefs>(\n        fieldsetsSchema.reduce((acc, fieldset) => {\n            acc[fieldset] = ref => {\n                fieldsetsRefs[fieldset].current = ref;\n            };\n            return acc;\n        }, {})\n    );\n\n    const checkFieldsets = () => Object.keys(activeFieldsets).every(fieldset => !activeFieldsets[fieldset] || !!valid[fieldset]);\n    const hasConsentCheckbox = !!props.consentCheckboxLabel;\n    const isStandAloneButton = !hasConsentCheckbox && Object.keys(activeFieldsets).every(key => !activeFieldsets[key]);\n    const showSeparateDeliveryAddressCheckbox = visibility.deliveryAddress === 'editable' && visibility.billingAddress !== 'hidden';\n\n    const [data, setData] = useState<OpenInvoiceStateData>({\n        ...props.data,\n        ...(hasConsentCheckbox && { consentCheckbox: false })\n    });\n    const [errors, setErrors] = useState<OpenInvoiceStateError>({});\n    const [valid, setValid] = useState<OpenInvoiceStateValid>({});\n    const [status, setStatus] = useState('ready');\n\n    // Expose methods expected by parent\n    openInvoiceRef.current.showValidation = () => {\n        isValidating.current = true;\n        fieldsetsSchema.forEach(fieldset => {\n            if (fieldsetsRefs[fieldset].current) fieldsetsRefs[fieldset].current.showValidation();\n        });\n\n        setErrors({\n            ...(hasConsentCheckbox && { consentCheckbox: data.consentCheckbox ? null : consentCBErrorObj })\n        });\n    };\n\n    openInvoiceRef.current.setStatus = setStatus;\n\n    useSRPanelForOpenInvoiceErrors({ errors, data, props, isValidating });\n\n    useEffect(() => {\n        const fieldsetsAreValid: boolean = checkFieldsets();\n        const consentCheckboxValid: boolean = !hasConsentCheckbox || !!valid.consentCheckbox;\n        const isValid: boolean = fieldsetsAreValid && consentCheckboxValid;\n        const newData: OpenInvoiceStateData = getActiveFieldsData(activeFieldsets, data);\n        props.onChange({ data: newData, errors, valid, isValid });\n    }, [data, activeFieldsets]);\n\n    const handleFieldset = key => state => {\n        setData(prevData => ({ ...prevData, [key]: state.data }));\n        setValid(prevValid => ({ ...prevValid, [key]: state.isValid }));\n        setErrors(prevErrors => ({ ...prevErrors, [key]: state.errors }));\n    };\n\n    const handleSeparateDeliveryAddress = () => {\n        setActiveFieldsets(prevActiveFields => ({\n            ...prevActiveFields,\n            deliveryAddress: !activeFieldsets.deliveryAddress\n        }));\n    };\n\n    const handleConsentCheckbox = e => {\n        const { checked } = e.target;\n        setData(prevData => ({ ...prevData, consentCheckbox: checked }));\n        setValid(prevValid => ({ ...prevValid, consentCheckbox: checked }));\n        setErrors(prevErrors => ({ ...prevErrors, ...{ consentCheckbox: !checked ? consentCBErrorObj : null } }));\n    };\n    return (\n        <div className=\"adyen-checkout__open-invoice\">\n            <FormInstruction />\n\n            {activeFieldsets.companyDetails && (\n                <CompanyDetails\n                    data={props.data.companyDetails}\n                    label=\"companyDetails\"\n                    onChange={handleFieldset('companyDetails')}\n                    setComponentRef={fieldsetsRefs.companyDetails}\n                    visibility={visibility.companyDetails}\n                />\n            )}\n\n            {activeFieldsets.personalDetails && (\n                <PersonalDetails\n                    data={props.data.personalDetails}\n                    requiredFields={props.personalDetailsRequiredFields}\n                    label=\"personalDetails\"\n                    onChange={handleFieldset('personalDetails')}\n                    setComponentRef={fieldsetsRefs.personalDetails}\n                    visibility={visibility.personalDetails}\n                />\n            )}\n\n            {activeFieldsets.bankAccount && (\n                <IbanInput\n                    holderName={true}\n                    label=\"ach.bankAccount\"\n                    data={data.bankAccount}\n                    onChange={handleFieldset('bankAccount')}\n                    ref={fieldsetsRefs.bankAccount}\n                />\n            )}\n\n            {activeFieldsets.billingAddress && (\n                <Address\n                    allowedCountries={props?.billingAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.billingAddressRequiredFields}\n                    specifications={props.billingAddressSpecification}\n                    data={data.billingAddress}\n                    label=\"billingAddress\"\n                    onChange={handleFieldset('billingAddress')}\n                    setComponentRef={fieldsetsRefs.billingAddress}\n                    visibility={visibility.billingAddress}\n                />\n            )}\n\n            {showSeparateDeliveryAddressCheckbox && (\n                <Field\n                    classNameModifiers={['separateDeliveryAddress', 'consentCheckbox']}\n                    name={'separateDeliveryAddress'}\n                    useLabelElement={false}\n                    showErrorElement={false}\n                >\n                    <Checkbox\n                        label={i18n.get('separateDeliveryAddress')}\n                        checked={activeFieldsets.deliveryAddress}\n                        classNameModifiers={['separateDeliveryAddress']}\n                        name={'separateDeliveryAddress'}\n                        onChange={handleSeparateDeliveryAddress}\n                    />\n                </Field>\n            )}\n\n            {activeFieldsets.deliveryAddress && (\n                <Address\n                    allowedCountries={props?.deliveryAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.deliveryAddressRequiredFields}\n                    specifications={props.deliveryAddressSpecification}\n                    data={data.deliveryAddress}\n                    label=\"deliveryAddress\"\n                    onChange={handleFieldset('deliveryAddress')}\n                    setComponentRef={fieldsetsRefs.deliveryAddress}\n                    visibility={visibility.deliveryAddress}\n                />\n            )}\n\n            {hasConsentCheckbox && (\n                <ConsentCheckbox\n                    data={data}\n                    errorMessage={!!errors.consentCheckbox}\n                    label={props.consentCheckboxLabel}\n                    onChange={handleConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    classNameModifiers: [...(isStandAloneButton ? ['standalone'] : [])],\n                    label: i18n.get('confirmPurchase')\n                })}\n        </div>\n    );\n}\n"],"names":["consentCBErrorObj","isValid","errorMessage","error","OpenInvoice","props","countryCode","visibility","i18n","useCoreContext","openInvoiceRef","useRef","Object","keys","current","length","setComponentRef","isValidating","initialActiveFieldsets","getInitialActiveFieldsets","data","activeFieldsets","setActiveFieldsets","useState","fieldsetsRefs","fieldsetsSchema","reduce","acc","fieldset","ref","hasConsentCheckbox","consentCheckboxLabel","isStandAloneButton","every","key","showSeparateDeliveryAddressCheckbox","deliveryAddress","billingAddress","setData","consentCheckbox","errors","setErrors","valid","setValid","status","setStatus","showValidation","forEach","useSRPanelForOpenInvoiceErrors","useEffect","fieldsetsAreValid","consentCheckboxValid","newData","getActiveFieldsData","onChange","handleFieldset","state","prevData","prevValid","prevErrors","h","div","className","FormInstruction","companyDetails","CompanyDetails","label","personalDetails","PersonalDetails","requiredFields","personalDetailsRequiredFields","bankAccount","IbanInput","holderName","Address","allowedCountries","billingAddressSpecification","billingAddressRequiredFields","specifications","Field","classNameModifiers","name","useLabelElement","showErrorElement","Checkbox","get","checked","prevActiveFields","deliveryAddressSpecification","deliveryAddressRequiredFields","ConsentCheckbox","e","target","showPayButton","payButton"],"mappings":"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"}
+{"version":3,"file":"OpenInvoice.js","sources":["../../../../../src/components/internal/OpenInvoice/OpenInvoice.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport CompanyDetails from '../CompanyDetails';\nimport PersonalDetails from '../PersonalDetails';\nimport Address from '../Address';\nimport Checkbox from '../FormFields/Checkbox';\nimport ConsentCheckbox from '../FormFields/ConsentCheckbox';\nimport { getActiveFieldsData, getInitialActiveFieldsets, fieldsetsSchema } from './utils';\nimport {\n    OpenInvoiceActiveFieldsets,\n    OpenInvoiceFieldsetsRefs,\n    OpenInvoiceProps,\n    OpenInvoiceStateData,\n    OpenInvoiceStateError,\n    OpenInvoiceStateValid\n} from './types';\nimport './OpenInvoice.scss';\nimport IbanInput from '../IbanInput';\nimport { GenericError } from '../../../core/Errors/types';\nimport Field from '../FormFields/Field';\nimport FormInstruction from '../FormInstruction';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport useSRPanelForOpenInvoiceErrors from './useSRPanelForOpenInvoiceErrors';\n\nconst consentCBErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'consent.checkbox.invalid',\n    error: 'consent.checkbox.invalid'\n};\n\nexport default function OpenInvoice(props: OpenInvoiceProps) {\n    const { countryCode, visibility } = props;\n    const { i18n } = useCoreContext();\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const openInvoiceRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(openInvoiceRef.current).length) {\n        props.setComponentRef?.(openInvoiceRef.current);\n    }\n\n    const isValidating = useRef(false);\n\n    const initialActiveFieldsets: OpenInvoiceActiveFieldsets = getInitialActiveFieldsets(visibility, props.data);\n    const [activeFieldsets, setActiveFieldsets] = useState<OpenInvoiceActiveFieldsets>(initialActiveFieldsets);\n\n    const { current: fieldsetsRefs } = useRef<OpenInvoiceFieldsetsRefs>(\n        fieldsetsSchema.reduce((acc, fieldset) => {\n            acc[fieldset] = ref => {\n                fieldsetsRefs[fieldset].current = ref;\n            };\n            return acc;\n        }, {})\n    );\n\n    const checkFieldsets = () => Object.keys(activeFieldsets).every(fieldset => !activeFieldsets[fieldset] || !!valid[fieldset]);\n    const hasConsentCheckbox = !!props.consentCheckboxLabel;\n    const isStandAloneButton = !hasConsentCheckbox && Object.keys(activeFieldsets).every(key => !activeFieldsets[key]);\n    const showSeparateDeliveryAddressCheckbox = visibility.deliveryAddress === 'editable' && visibility.billingAddress !== 'hidden';\n\n    const [data, setData] = useState<OpenInvoiceStateData>({\n        ...props.data,\n        ...(hasConsentCheckbox && { consentCheckbox: false })\n    });\n    const [errors, setErrors] = useState<OpenInvoiceStateError>({});\n    const [valid, setValid] = useState<OpenInvoiceStateValid>({});\n    const [status, setStatus] = useState('ready');\n\n    // Expose methods expected by parent\n    openInvoiceRef.current.showValidation = () => {\n        isValidating.current = true;\n        fieldsetsSchema.forEach(fieldset => {\n            if (fieldsetsRefs[fieldset].current) fieldsetsRefs[fieldset].current.showValidation();\n        });\n\n        setErrors({\n            ...(hasConsentCheckbox && { consentCheckbox: data.consentCheckbox ? null : consentCBErrorObj })\n        });\n    };\n\n    openInvoiceRef.current.setStatus = setStatus;\n\n    useSRPanelForOpenInvoiceErrors({ errors, data, props, isValidating });\n\n    useEffect(() => {\n        const fieldsetsAreValid: boolean = checkFieldsets();\n        const consentCheckboxValid: boolean = !hasConsentCheckbox || !!valid.consentCheckbox;\n        const isValid: boolean = fieldsetsAreValid && consentCheckboxValid;\n        const newData: OpenInvoiceStateData = getActiveFieldsData(activeFieldsets, data);\n        props.onChange({ data: newData, errors, valid, isValid });\n    }, [data, activeFieldsets]);\n\n    const handleFieldset = key => state => {\n        setData(prevData => ({ ...prevData, [key]: state.data }));\n        setValid(prevValid => ({ ...prevValid, [key]: state.isValid }));\n        setErrors(prevErrors => ({ ...prevErrors, [key]: state.errors }));\n    };\n\n    const handleSeparateDeliveryAddress = () => {\n        setActiveFieldsets(prevActiveFields => ({\n            ...prevActiveFields,\n            deliveryAddress: !activeFieldsets.deliveryAddress\n        }));\n    };\n\n    const handleConsentCheckbox = e => {\n        const { checked } = e.target;\n        setData(prevData => ({ ...prevData, consentCheckbox: checked }));\n        setValid(prevValid => ({ ...prevValid, consentCheckbox: checked }));\n        setErrors(prevErrors => ({ ...prevErrors, ...{ consentCheckbox: !checked ? consentCBErrorObj : null } }));\n    };\n    return (\n        <div className=\"adyen-checkout__open-invoice\">\n            <FormInstruction />\n\n            {activeFieldsets.companyDetails && (\n                <CompanyDetails\n                    data={props.data.companyDetails}\n                    label=\"companyDetails\"\n                    onChange={handleFieldset('companyDetails')}\n                    setComponentRef={fieldsetsRefs.companyDetails}\n                    visibility={visibility.companyDetails}\n                />\n            )}\n\n            {activeFieldsets.personalDetails && (\n                <PersonalDetails\n                    data={props.data.personalDetails}\n                    requiredFields={props.personalDetailsRequiredFields}\n                    label=\"personalDetails\"\n                    onChange={handleFieldset('personalDetails')}\n                    setComponentRef={fieldsetsRefs.personalDetails}\n                    visibility={visibility.personalDetails}\n                />\n            )}\n\n            {activeFieldsets.bankAccount && (\n                <IbanInput\n                    holderName={true}\n                    label=\"ach.bankAccount\"\n                    data={data.bankAccount}\n                    onChange={handleFieldset('bankAccount')}\n                    ref={fieldsetsRefs.bankAccount}\n                />\n            )}\n\n            {activeFieldsets.billingAddress && (\n                <Address\n                    allowedCountries={props?.billingAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.billingAddressRequiredFields}\n                    specifications={props.billingAddressSpecification}\n                    data={data.billingAddress}\n                    label=\"billingAddress\"\n                    onChange={handleFieldset('billingAddress')}\n                    setComponentRef={fieldsetsRefs.billingAddress}\n                    visibility={visibility.billingAddress}\n                />\n            )}\n\n            {showSeparateDeliveryAddressCheckbox && (\n                <Field\n                    classNameModifiers={['separateDeliveryAddress', 'consentCheckbox']}\n                    name={'separateDeliveryAddress'}\n                    useLabelElement={false}\n                    showErrorElement={false}\n                >\n                    <Checkbox\n                        label={i18n.get('separateDeliveryAddress')}\n                        checked={activeFieldsets.deliveryAddress}\n                        classNameModifiers={['separateDeliveryAddress']}\n                        name={'separateDeliveryAddress'}\n                        onChange={handleSeparateDeliveryAddress}\n                    />\n                </Field>\n            )}\n\n            {activeFieldsets.deliveryAddress && (\n                <Address\n                    allowedCountries={props?.deliveryAddressSpecification?.allowedCountries ?? props.allowedCountries}\n                    countryCode={countryCode}\n                    requiredFields={props.deliveryAddressRequiredFields}\n                    specifications={props.deliveryAddressSpecification}\n                    data={data.deliveryAddress}\n                    label=\"deliveryAddress\"\n                    onChange={handleFieldset('deliveryAddress')}\n                    setComponentRef={fieldsetsRefs.deliveryAddress}\n                    visibility={visibility.deliveryAddress}\n                />\n            )}\n\n            {hasConsentCheckbox && (\n                <ConsentCheckbox\n                    data={data}\n                    errorMessage={!!errors.consentCheckbox}\n                    label={props.consentCheckboxLabel}\n                    onChange={handleConsentCheckbox}\n                    i18n={i18n}\n                />\n            )}\n\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    classNameModifiers: [...(isStandAloneButton ? ['standalone'] : [])],\n                    label: i18n.get('confirmPurchase')\n                })}\n        </div>\n    );\n}\n"],"names":["consentCBErrorObj","isValid","errorMessage","error","OpenInvoice","props","countryCode","visibility","i18n","useCoreContext","openInvoiceRef","useRef","Object","keys","current","length","setComponentRef","isValidating","initialActiveFieldsets","getInitialActiveFieldsets","data","activeFieldsets","setActiveFieldsets","useState","fieldsetsRefs","fieldsetsSchema","reduce","acc","fieldset","ref","hasConsentCheckbox","consentCheckboxLabel","isStandAloneButton","every","key","showSeparateDeliveryAddressCheckbox","deliveryAddress","billingAddress","setData","consentCheckbox","errors","setErrors","valid","setValid","status","setStatus","showValidation","forEach","useSRPanelForOpenInvoiceErrors","useEffect","fieldsetsAreValid","consentCheckboxValid","newData","getActiveFieldsData","onChange","handleFieldset","state","prevData","prevValid","prevErrors","h","div","className","FormInstruction","companyDetails","CompanyDetails","label","personalDetails","PersonalDetails","requiredFields","personalDetailsRequiredFields","bankAccount","IbanInput","holderName","Address","allowedCountries","billingAddressSpecification","billingAddressRequiredFields","specifications","Field","classNameModifiers","name","useLabelElement","showErrorElement","Checkbox","get","checked","prevActiveFields","deliveryAddressSpecification","deliveryAddressRequiredFields","ConsentCheckbox","e","target","showPayButton","payButton"],"mappings":"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"}

package/dist/es/components/internal/OpenInvoice/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/OpenInvoice/utils.ts"],"sourcesContent":["import { OpenInvoiceActiveFieldsets, OpenInvoiceStateData, OpenInvoiceVisibility } from './types';\nimport Language from '../../../language';\nimport { mapFieldKey as mapFieldKeyAddress } from '../Address/utils';\nimport { StringObject } from '../Address/types';\n\nexport const fieldsetsSchema: Array<keyof OpenInvoiceStateData> = [\n    'companyDetails',\n    'personalDetails',\n    'billingAddress',\n    'deliveryAddress',\n    'bankAccount'\n];\n\nconst isPrefilled = (fieldsetData: object = {}): boolean => Object.keys(fieldsetData).length > 1;\n\nexport const getActiveFieldsData = (activeFieldsets: OpenInvoiceActiveFieldsets, data: OpenInvoiceStateData): OpenInvoiceStateData =>\n    Object.keys(data)\n        .filter(fieldset => activeFieldsets[fieldset])\n        .reduce((acc, cur) => {\n            acc[cur] = data[cur];\n            return acc;\n        }, {});\n\nexport const getInitialActiveFieldsets = (visibility: OpenInvoiceVisibility, data: OpenInvoiceStateData = {}): OpenInvoiceActiveFieldsets =>\n    fieldsetsSchema.reduce((acc, fieldset) => {\n        const isVisible = visibility[fieldset] !== 'hidden';\n        const isDeliveryAddress = fieldset === 'deliveryAddress';\n        const billingAddressIsHidden = visibility?.billingAddress === 'hidden';\n\n        // The delivery address will be active not only when set as visible\n        // but also when the billing address is hidden or when it has prefilled data\n        acc[fieldset] = isVisible && (!isDeliveryAddress || billingAddressIsHidden || isPrefilled(data[fieldset]));\n        return acc;\n    }, {} as OpenInvoiceActiveFieldsets);\n\n/**\n * Used by the SRPanel sorting function to tell it whether we need to add the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.\n * (Whether we need to add the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this\n * and this mapping fn will become redundant)\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n    let refKey = key;\n    let label;\n\n    // Differentiate between address types (billing and delivery)\n    const splitKey = refKey.split(':');\n    const hasSplitKey = splitKey.length > 1;\n    if (hasSplitKey) {\n        label = splitKey[0];\n        refKey = splitKey[1];\n    }\n\n    const addressKey = mapFieldKeyAddress(refKey, i18n, countrySpecificLabels);\n    // Also use the presence of a label to know that we are dealing with address related fields. (This matters now that addresses can contain first & last name fields.)\n    if (addressKey && label) return hasSplitKey ? `${i18n.get(label)} ${addressKey}` : addressKey;\n\n    switch (refKey) {\n        case 'dateOfBirth':\n        case 'shopperEmail':\n        case 'telephoneNumber':\n            return i18n.get(refKey);\n        default:\n            break;\n    }\n\n    // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them\n    return null;\n};\n"],"names":["fieldsetsSchema","getActiveFieldsData","activeFieldsets","data","Object","keys","filter","fieldset","reduce","acc","cur","getInitialActiveFieldsets","visibility","isVisible","isDeliveryAddress","billingAddressIsHidden","billingAddress","fieldsetData","length","isPrefilled","mapFieldKey","key","i18n","countrySpecificLabels","label","refKey","splitKey","split","hasSplitKey","addressKey","mapFieldKeyAddress","get"],"mappings":"wDAKaA,EAAqD,CAC9D,iBACA,kBACA,iBACA,kBACA,eAKSC,EAAsB,CAACC,EAA6CC,IAC7EC,OAAOC,KAAKF,GACPG,QAAOC,GAAYL,EAAgBK,KACnCC,QAAO,CAACC,EAAKC,KACVD,EAAIC,GAAOP,EAAKO,GACTD,IACR,IAEEE,EAA4B,CAACC,EAAmCT,EAA6B,CAAA,IACtGH,EAAgBQ,QAAO,CAACC,EAAKF,KACzB,MAAMM,EAAqC,WAAzBD,EAAWL,GACvBO,EAAiC,oBAAbP,EACpBQ,EAAwD,WAA/BH,GAAYI,eAK3C,OADAP,EAAIF,GAAYM,KAAeC,GAAqBC,GAlBxC,EAACE,EAAuB,KAAgBb,OAAOC,KAAKY,GAAcC,OAAS,EAkBTC,CAAYhB,EAAKI,KACxFE,CAAAA,GACR,IAOMW,EAAc,CAACC,EAAaC,EAAgBC,KACrD,IACIC,EADAC,EAASJ,EAIb,MAAMK,EAAWD,EAAOE,MAAM,KACxBC,EAAcF,EAASR,OAAS,EAClCU,IACAJ,EAAQE,EAAS,GACjBD,EAASC,EAAS,IAGtB,MAAMG,EAAaC,EAAmBL,EAAQH,EAAMC,GAEpD,GAAIM,GAAcL,EAAO,OAAOI,EAAc,GAAGN,EAAKS,IAAIP,MAAUK,IAAeA,EAEnF,OAAQJ,GACJ,IAAK,cACL,IAAK,eACL,IAAK,kBACD,OAAOH,EAAKS,IAAIN,GAMxB,OAAO,IAAA"}
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/OpenInvoice/utils.ts"],"sourcesContent":["import { OpenInvoiceActiveFieldsets, OpenInvoiceStateData, OpenInvoiceVisibility } from './types';\nimport Language from '../../../language';\nimport { mapFieldKey as mapFieldKeyAddress } from '../Address/utils';\nimport { StringObject } from '../Address/types';\n\nexport const fieldsetsSchema: Array<keyof OpenInvoiceStateData> = [\n    'companyDetails',\n    'personalDetails',\n    'billingAddress',\n    'deliveryAddress',\n    'bankAccount'\n];\n\nconst isPrefilled = (fieldsetData: object = {}): boolean => Object.keys(fieldsetData).length > 1;\n\nexport const getActiveFieldsData = (activeFieldsets: OpenInvoiceActiveFieldsets, data: OpenInvoiceStateData): OpenInvoiceStateData =>\n    Object.keys(data)\n        .filter(fieldset => activeFieldsets[fieldset])\n        .reduce((acc, cur) => {\n            acc[cur] = data[cur];\n            return acc;\n        }, {});\n\nexport const getInitialActiveFieldsets = (visibility: OpenInvoiceVisibility, data: OpenInvoiceStateData = {}): OpenInvoiceActiveFieldsets =>\n    fieldsetsSchema.reduce((acc, fieldset) => {\n        const isVisible = visibility[fieldset] !== 'hidden';\n        const isDeliveryAddress = fieldset === 'deliveryAddress';\n        const billingAddressIsHidden = visibility?.billingAddress === 'hidden';\n\n        // The delivery address will be active not only when set as visible\n        // but also when the billing address is hidden or when it has prefilled data\n        acc[fieldset] = isVisible && (!isDeliveryAddress || billingAddressIsHidden || isPrefilled(data[fieldset]));\n        return acc;\n    }, {} as OpenInvoiceActiveFieldsets);\n\n/**\n * Used by the SRPanel sorting function to tell it whether we need to add the field type to the SR panel message, and, if so, we retrieve the correct translation for the field type.\n * (Whether we need to add the field type depends on whether we know that the error message correctly reflects the label of the field. Ultimately all error messages should do this\n * and this mapping fn will become redundant)\n */\nexport const mapFieldKey = (key: string, i18n: Language, countrySpecificLabels: StringObject): string => {\n    let refKey = key;\n    let label;\n\n    // Differentiate between address types (billing and delivery)\n    const splitKey = refKey.split(':');\n    const hasSplitKey = splitKey.length > 1;\n    if (hasSplitKey) {\n        label = splitKey[0];\n        refKey = splitKey[1];\n    }\n\n    const addressKey = mapFieldKeyAddress(refKey, i18n, countrySpecificLabels);\n    // Also use the presence of a label to know that we are dealing with address related fields. (This matters now that addresses can contain first & last name fields.)\n    if (addressKey && label) return hasSplitKey ? `${i18n.get(label)} ${addressKey}` : addressKey;\n\n    switch (refKey) {\n        case 'dateOfBirth':\n        case 'shopperEmail':\n        case 'telephoneNumber':\n            return i18n.get(refKey);\n        default:\n            break;\n    }\n\n    // We know that the translated error messages do contain a reference to the field they refer to, so we won't need to map them\n    return null;\n};\n"],"names":["fieldsetsSchema","getActiveFieldsData","activeFieldsets","data","Object","keys","filter","fieldset","reduce","acc","cur","getInitialActiveFieldsets","visibility","isVisible","isDeliveryAddress","billingAddressIsHidden","billingAddress","fieldsetData","length","isPrefilled","mapFieldKey","key","i18n","countrySpecificLabels","label","refKey","splitKey","split","hasSplitKey","addressKey","mapFieldKeyAddress","get"],"mappings":"wDAKaA,EAAqD,CAC9D,iBACA,kBACA,iBACA,kBACA,eAKSC,EAAsB,CAACC,EAA6CC,IAC7EC,OAAOC,KAAKF,GACPG,QAAOC,GAAYL,EAAgBK,KACnCC,QAAO,CAACC,EAAKC,KACVD,EAAIC,GAAOP,EAAKO,GACTD,IACR,CAAI,GAEFE,EAA4B,CAACC,EAAmCT,EAA6B,CAAA,IACtGH,EAAgBQ,QAAO,CAACC,EAAKF,KACzB,MAAMM,EAAqC,WAAzBD,EAAWL,GACvBO,EAAiC,oBAAbP,EACpBQ,EAAwD,WAA/BH,GAAYI,eAK3C,OADAP,EAAIF,GAAYM,KAAeC,GAAqBC,GAlBxC,EAACE,EAAuB,KAAgBb,OAAOC,KAAKY,GAAcC,OAAS,EAkBTC,CAAYhB,EAAKI,KACxFE,CAAAA,GACR,CAAkC,GAO5BW,EAAc,CAACC,EAAaC,EAAgBC,KACrD,IACIC,EADAC,EAASJ,EAIb,MAAMK,EAAWD,EAAOE,MAAM,KACxBC,EAAcF,EAASR,OAAS,EAClCU,IACAJ,EAAQE,EAAS,GACjBD,EAASC,EAAS,IAGtB,MAAMG,EAAaC,EAAmBL,EAAQH,EAAMC,GAEpD,GAAIM,GAAcL,EAAO,OAAOI,EAAc,GAAGN,EAAKS,IAAIP,MAAUK,IAAeA,EAEnF,OAAQJ,GACJ,IAAK,cACL,IAAK,eACL,IAAK,kBACD,OAAOH,EAAKS,IAAIN,GAMxB,OAAO,IAAA"}

package/dist/es/components/internal/PersonalDetails/PersonalDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"PersonalDetails.js","sources":["../../../../../src/components/internal/PersonalDetails/PersonalDetails.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useEffect, useMemo, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyPersonalDetails from './ReadOnlyPersonalDetails';\nimport { personalDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { PersonalDetailsProps } from './types';\nimport { checkDateInputSupport } from '../FormFields/InputDate/utils';\nimport { PersonalDetailsSchema } from '../../../types';\nimport { getFormattedData } from './utils';\nimport useForm from '../../../utils/useForm';\nimport './PersonalDetails.scss';\nimport InputText from '../FormFields/InputText';\nimport RadioGroup from '../FormFields/RadioGroup';\nimport InputDate from '../FormFields/InputDate';\nimport InputEmail from '../FormFields/InputEmail';\nimport InputTelephone from '../FormFields/InputTelephone';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../UIElement/types';\n\nexport const PERSONAL_DETAILS_SCHEMA = ['firstName', 'lastName', 'gender', 'dateOfBirth', 'shopperEmail', 'telephoneNumber'];\n\nexport default function PersonalDetails(props: PersonalDetailsProps) {\n    const { label = '', namePrefix, placeholders, requiredFields, visibility } = props;\n\n    const { i18n } = useCoreContext();\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const personalDetailsRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(personalDetailsRef.current).length) {\n        props.setComponentRef?.(personalDetailsRef.current);\n    }\n\n    const isDateInputSupported = useMemo(checkDateInputSupport, []);\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<PersonalDetailsSchema>({\n        schema: requiredFields,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...personalDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    // Expose method expected by (parent) PersonalDetails.tsx\n    personalDetailsRef.current.showValidation = () => {\n        triggerValidation();\n    };\n\n    const eventHandler =\n        (mode: string): h.JSX.GenericEventHandler<EventTarget> =>\n        (e: Event): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyPersonalDetails {...props} data={data} />;\n\n    return (\n        <Fragment>\n            <Fieldset classNameModifiers={['personalDetails']} label={label}>\n                {requiredFields.includes('firstName') && (\n                    <Field\n                        label={i18n.get('firstName')}\n                        classNameModifiers={['col-50', 'firstName']}\n                        errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n                        name={'firstName'}\n                        i18n={i18n}\n                    >\n                        <InputText\n                            name={generateFieldName('firstName')}\n                            value={data.firstName}\n                            classNameModifiers={['firstName']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.firstName}\n                            spellCheck={false}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('lastName') && (\n                    <Field\n                        label={i18n.get('lastName')}\n                        classNameModifiers={['col-50', 'lastName']}\n                        errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n                        name={'lastName'}\n                        i18n={i18n}\n                    >\n                        <InputText\n                            name={generateFieldName('lastName')}\n                            value={data.lastName}\n                            classNameModifiers={['lastName']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.lastName}\n                            spellCheck={false}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('gender') && (\n                    <Field\n                        errorMessage={getErrorMessage(i18n, errors.gender)}\n                        classNameModifiers={['gender']}\n                        name={'gender'}\n                        useLabelElement={false}\n                    >\n                        <RadioGroup\n                            name={generateFieldName('gender')}\n                            value={data.gender}\n                            items={[\n                                { id: 'MALE', name: 'male' },\n                                { id: 'FEMALE', name: 'female' }\n                            ]}\n                            classNameModifiers={['gender']}\n                            onInput={eventHandler('input')}\n                            onChange={eventHandler('blur')}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('dateOfBirth') && (\n                    <Field\n                        label={i18n.get('dateOfBirth')}\n                        classNameModifiers={['col-50', 'dateOfBirth']}\n                        errorMessage={getErrorMessage(i18n, errors.dateOfBirth, i18n.get('dateOfBirth'))}\n                        helper={isDateInputSupported ? null : i18n.get('dateOfBirth.format')}\n                        name={'dateOfBirth'}\n                        i18n={i18n}\n                    >\n                        <InputDate\n                            name={generateFieldName('dateOfBirth')}\n                            value={data.dateOfBirth}\n                            classNameModifiers={['dateOfBirth']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.dateOfBirth}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('shopperEmail') && (\n                    <Field\n                        label={i18n.get('shopperEmail')}\n                        classNameModifiers={['shopperEmail']}\n                        errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                        dir={'ltr'}\n                        name={'emailAddress'}\n                        i18n={i18n}\n                    >\n                        <InputEmail\n                            name={generateFieldName('shopperEmail')}\n                            value={data.shopperEmail}\n                            classNameModifiers={['shopperEmail']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.shopperEmail}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('telephoneNumber') && (\n                    <Field\n                        label={i18n.get('telephoneNumber')}\n                        classNameModifiers={['telephoneNumber']}\n                        errorMessage={getErrorMessage(i18n, errors.telephoneNumber, i18n.get('telephoneNumber'))}\n                        dir={'ltr'}\n                        name={'telephoneNumber'}\n                        i18n={i18n}\n                    >\n                        <InputTelephone\n                            name={generateFieldName('telephoneNumber')}\n                            value={data.telephoneNumber}\n                            classNameModifiers={['telephoneNumber']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.telephoneNumber}\n                            required={true}\n                        />\n                    </Field>\n                )}\n            </Fieldset>\n        </Fragment>\n    );\n}\n\nPersonalDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    placeholders: {},\n    requiredFields: PERSONAL_DETAILS_SCHEMA,\n    validationRules: personalDetailsValidationRules,\n    visibility: 'editable'\n};\n"],"names":["PERSONAL_DETAILS_SCHEMA","PersonalDetails","props","label","namePrefix","placeholders","requiredFields","visibility","i18n","useCoreContext","personalDetailsRef","useRef","Object","keys","current","length","setComponentRef","isDateInputSupported","useMemo","checkDateInputSupport","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","personalDetailsValidationRules","validationRules","defaultData","showValidation","eventHandler","mode","e","name","target","key","split","pop","generateFieldName","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyPersonalDetails","Fragment","Fieldset","classNameModifiers","includes","Field","get","errorMessage","getErrorMessage","firstName","InputText","value","onInput","onBlur","placeholder","spellCheck","required","lastName","gender","useLabelElement","RadioGroup","items","id","dateOfBirth","helper","InputDate","shopperEmail","dir","InputEmail","telephoneNumber","InputTelephone","defaultProps"],"mappings":"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"}
+{"version":3,"file":"PersonalDetails.js","sources":["../../../../../src/components/internal/PersonalDetails/PersonalDetails.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useEffect, useMemo, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyPersonalDetails from './ReadOnlyPersonalDetails';\nimport { personalDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { PersonalDetailsProps } from './types';\nimport { checkDateInputSupport } from '../FormFields/InputDate/utils';\nimport { PersonalDetailsSchema } from '../../../types';\nimport { getFormattedData } from './utils';\nimport useForm from '../../../utils/useForm';\nimport './PersonalDetails.scss';\nimport InputText from '../FormFields/InputText';\nimport RadioGroup from '../FormFields/RadioGroup';\nimport InputDate from '../FormFields/InputDate';\nimport InputEmail from '../FormFields/InputEmail';\nimport InputTelephone from '../FormFields/InputTelephone';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../UIElement/types';\n\nexport const PERSONAL_DETAILS_SCHEMA = ['firstName', 'lastName', 'gender', 'dateOfBirth', 'shopperEmail', 'telephoneNumber'];\n\nexport default function PersonalDetails(props: PersonalDetailsProps) {\n    const { label = '', namePrefix, placeholders, requiredFields, visibility } = props;\n\n    const { i18n } = useCoreContext();\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const personalDetailsRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(personalDetailsRef.current).length) {\n        props.setComponentRef?.(personalDetailsRef.current);\n    }\n\n    const isDateInputSupported = useMemo(checkDateInputSupport, []);\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<PersonalDetailsSchema>({\n        schema: requiredFields,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...personalDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    // Expose method expected by (parent) PersonalDetails.tsx\n    personalDetailsRef.current.showValidation = () => {\n        triggerValidation();\n    };\n\n    const eventHandler =\n        (mode: string): h.JSX.GenericEventHandler<EventTarget> =>\n        (e: Event): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyPersonalDetails {...props} data={data} />;\n\n    return (\n        <Fragment>\n            <Fieldset classNameModifiers={['personalDetails']} label={label}>\n                {requiredFields.includes('firstName') && (\n                    <Field\n                        label={i18n.get('firstName')}\n                        classNameModifiers={['col-50', 'firstName']}\n                        errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n                        name={'firstName'}\n                        i18n={i18n}\n                    >\n                        <InputText\n                            name={generateFieldName('firstName')}\n                            value={data.firstName}\n                            classNameModifiers={['firstName']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.firstName}\n                            spellCheck={false}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('lastName') && (\n                    <Field\n                        label={i18n.get('lastName')}\n                        classNameModifiers={['col-50', 'lastName']}\n                        errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n                        name={'lastName'}\n                        i18n={i18n}\n                    >\n                        <InputText\n                            name={generateFieldName('lastName')}\n                            value={data.lastName}\n                            classNameModifiers={['lastName']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.lastName}\n                            spellCheck={false}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('gender') && (\n                    <Field\n                        errorMessage={getErrorMessage(i18n, errors.gender)}\n                        classNameModifiers={['gender']}\n                        name={'gender'}\n                        useLabelElement={false}\n                    >\n                        <RadioGroup\n                            name={generateFieldName('gender')}\n                            value={data.gender}\n                            items={[\n                                { id: 'MALE', name: 'male' },\n                                { id: 'FEMALE', name: 'female' }\n                            ]}\n                            classNameModifiers={['gender']}\n                            onInput={eventHandler('input')}\n                            onChange={eventHandler('blur')}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('dateOfBirth') && (\n                    <Field\n                        label={i18n.get('dateOfBirth')}\n                        classNameModifiers={['col-50', 'dateOfBirth']}\n                        errorMessage={getErrorMessage(i18n, errors.dateOfBirth, i18n.get('dateOfBirth'))}\n                        helper={isDateInputSupported ? null : i18n.get('dateOfBirth.format')}\n                        name={'dateOfBirth'}\n                        i18n={i18n}\n                    >\n                        <InputDate\n                            name={generateFieldName('dateOfBirth')}\n                            value={data.dateOfBirth}\n                            classNameModifiers={['dateOfBirth']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.dateOfBirth}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('shopperEmail') && (\n                    <Field\n                        label={i18n.get('shopperEmail')}\n                        classNameModifiers={['shopperEmail']}\n                        errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                        dir={'ltr'}\n                        name={'emailAddress'}\n                        i18n={i18n}\n                    >\n                        <InputEmail\n                            name={generateFieldName('shopperEmail')}\n                            value={data.shopperEmail}\n                            classNameModifiers={['shopperEmail']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.shopperEmail}\n                            required={true}\n                        />\n                    </Field>\n                )}\n\n                {requiredFields.includes('telephoneNumber') && (\n                    <Field\n                        label={i18n.get('telephoneNumber')}\n                        classNameModifiers={['telephoneNumber']}\n                        errorMessage={getErrorMessage(i18n, errors.telephoneNumber, i18n.get('telephoneNumber'))}\n                        dir={'ltr'}\n                        name={'telephoneNumber'}\n                        i18n={i18n}\n                    >\n                        <InputTelephone\n                            name={generateFieldName('telephoneNumber')}\n                            value={data.telephoneNumber}\n                            classNameModifiers={['telephoneNumber']}\n                            onInput={eventHandler('input')}\n                            onBlur={eventHandler('blur')}\n                            placeholder={placeholders.telephoneNumber}\n                            required={true}\n                        />\n                    </Field>\n                )}\n            </Fieldset>\n        </Fragment>\n    );\n}\n\nPersonalDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    placeholders: {},\n    requiredFields: PERSONAL_DETAILS_SCHEMA,\n    validationRules: personalDetailsValidationRules,\n    visibility: 'editable'\n};\n"],"names":["PERSONAL_DETAILS_SCHEMA","PersonalDetails","props","label","namePrefix","placeholders","requiredFields","visibility","i18n","useCoreContext","personalDetailsRef","useRef","Object","keys","current","length","setComponentRef","isDateInputSupported","useMemo","checkDateInputSupport","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","personalDetailsValidationRules","validationRules","defaultData","showValidation","eventHandler","mode","e","name","target","key","split","pop","generateFieldName","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyPersonalDetails","Fragment","Fieldset","classNameModifiers","includes","Field","get","errorMessage","getErrorMessage","firstName","InputText","value","onInput","onBlur","placeholder","spellCheck","required","lastName","gender","useLabelElement","RadioGroup","items","id","dateOfBirth","helper","InputDate","shopperEmail","dir","InputEmail","telephoneNumber","InputTelephone","defaultProps"],"mappings":"w6BAqBaA,EAA0B,CAAC,YAAa,WAAY,SAAU,cAAe,eAAgB,mBAE3F,SAASC,EAAgBC,GACpC,MAAMC,MAAEA,EAAQ,GAAEC,WAAEA,EAAUC,aAAEA,EAAYC,eAAEA,EAAcC,WAAEA,GAAeL,GAEvEM,KAAEA,GAASC,IAGXC,EAAqBC,EAA4B,IAElDC,OAAOC,KAAKH,EAAmBI,SAASC,QACzCb,EAAMc,kBAAkBN,EAAmBI,SAG/C,MAAMG,EAAuBC,EAAQC,EAAuB,KACtDC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA+B,CACxGC,OAAQrB,EAERsB,MAAO,IAAKC,KAAmC3B,EAAM4B,iBACrDC,YAAa7B,EAAMoB,OAIvBZ,EAAmBI,QAAQkB,eAAiB,KACxCX,GAAAA,EAGJ,MAAMY,EACDC,GACAC,IACG,MAAMC,KAAEA,GAASD,EAAEE,OACbC,EAAMF,EAAKG,MAAM,GAAGnC,MAAeoC,MAEzCpB,EAAgBkB,EAAKJ,EAArBd,CAA2Be,EAAAA,EAG7BM,EAAqBL,GAAyB,GAAGhC,EAAa,GAAGA,KAAgB,KAAKgC,IAO5F,OALAM,GAAU,KACN,MAAMC,EAAgBC,EAAiBtB,GACvCpB,EAAM2C,SAAS,CAAEvB,KAAMqB,EAAepB,QAAOC,SAAQC,WAAQ,GAC9D,CAACH,EAAMC,EAAOC,EAAQC,IAEN,WAAflB,EAAgC,KACjB,aAAfA,EAAkCuC,EAACC,EAAAA,IAA4B7C,EAAOoB,KAAMA,IAG5EwB,EAACE,OACGF,EAACG,EAAAA,CAASC,mBAAoB,CAAC,mBAAoB/C,MAAOA,GACrDG,EAAe6C,SAAS,cACrBL,EAACM,EAAAA,CACGjD,MAAOK,EAAK6C,IAAI,aAChBH,mBAAoB,CAAC,SAAU,aAC/BI,aAAcC,EAAgB/C,EAAMgB,EAAOgC,UAAWhD,EAAK6C,IAAI,cAC/DjB,KAAM,YACN5B,KAAMA,GAENsC,EAACW,EAAAA,CACGrB,KAAMK,EAAkB,aACxBiB,MAAOpC,EAAKkC,UACZN,mBAAoB,CAAC,aACrBS,QAAS1B,EAAa,SACtB2B,OAAQ3B,EAAa,QACrB4B,YAAaxD,EAAamD,UAC1BM,YAAY,EACZC,UAAU,KAKrBzD,EAAe6C,SAAS,aACrBL,EAACM,EAAAA,CACGjD,MAAOK,EAAK6C,IAAI,YAChBH,mBAAoB,CAAC,SAAU,YAC/BI,aAAcC,EAAgB/C,EAAMgB,EAAOwC,SAAUxD,EAAK6C,IAAI,aAC9DjB,KAAM,WACN5B,KAAMA,GAENsC,EAACW,EAAAA,CACGrB,KAAMK,EAAkB,YACxBiB,MAAOpC,EAAK0C,SACZd,mBAAoB,CAAC,YACrBS,QAAS1B,EAAa,SACtB2B,OAAQ3B,EAAa,QACrB4B,YAAaxD,EAAa2D,SAC1BF,YAAY,EACZC,UAAU,KAKrBzD,EAAe6C,SAAS,WACrBL,EAACM,EAAAA,CACGE,aAAcC,EAAgB/C,EAAMgB,EAAOyC,QAC3Cf,mBAAoB,CAAC,UACrBd,KAAM,SACN8B,iBAAiB,GAEjBpB,EAACqB,EAAAA,CACG/B,KAAMK,EAAkB,UACxBiB,MAAOpC,EAAK2C,OACZG,MAAO,CACH,CAAEC,GAAI,OAAQjC,KAAM,QACpB,CAAEiC,GAAI,SAAUjC,KAAM,WAE1Bc,mBAAoB,CAAC,UACrBS,QAAS1B,EAAa,SACtBY,SAAUZ,EAAa,QACvB8B,UAAU,KAKrBzD,EAAe6C,SAAS,gBACrBL,EAACM,EAAAA,CACGjD,MAAOK,EAAK6C,IAAI,eAChBH,mBAAoB,CAAC,SAAU,eAC/BI,aAAcC,EAAgB/C,EAAMgB,EAAO8C,YAAa9D,EAAK6C,IAAI,gBACjEkB,OAAQtD,EAAuB,KAAOT,EAAK6C,IAAI,sBAC/CjB,KAAM,cACN5B,KAAMA,GAENsC,EAAC0B,EAAAA,CACGpC,KAAMK,EAAkB,eACxBiB,MAAOpC,EAAKgD,YACZpB,mBAAoB,CAAC,eACrBS,QAAS1B,EAAa,SACtB2B,OAAQ3B,EAAa,QACrB4B,YAAaxD,EAAaiE,YAC1BP,UAAU,KAKrBzD,EAAe6C,SAAS,iBACrBL,EAACM,EAAAA,CACGjD,MAAOK,EAAK6C,IAAI,gBAChBH,mBAAoB,CAAC,gBACrBI,aAAcC,EAAgB/C,EAAMgB,EAAOiD,aAAcjE,EAAK6C,IAAI,iBAClEqB,IAAK,MACLtC,KAAM,eACN5B,KAAMA,GAENsC,EAAC6B,EAAAA,CACGvC,KAAMK,EAAkB,gBACxBiB,MAAOpC,EAAKmD,aACZvB,mBAAoB,CAAC,gBACrBS,QAAS1B,EAAa,SACtB2B,OAAQ3B,EAAa,QACrB4B,YAAaxD,EAAaoE,aAC1BV,UAAU,KAKrBzD,EAAe6C,SAAS,oBACrBL,EAACM,EAAAA,CACGjD,MAAOK,EAAK6C,IAAI,mBAChBH,mBAAoB,CAAC,mBACrBI,aAAcC,EAAgB/C,EAAMgB,EAAOoD,gBAAiBpE,EAAK6C,IAAI,oBACrEqB,IAAK,MACLtC,KAAM,kBACN5B,KAAMA,GAENsC,EAAC+B,EAAAA,CACGzC,KAAMK,EAAkB,mBACxBiB,MAAOpC,EAAKsD,gBACZ1B,mBAAoB,CAAC,mBACrBS,QAAS1B,EAAa,SACtB2B,OAAQ3B,EAAa,QACrB4B,YAAaxD,EAAauE,gBAC1Bb,UAAU,MAOtC,CAEA9D,EAAgB6E,aAAe,CAC3BxD,KAAM,CAAC,EACPuB,SAAU,OACVxC,aAAc,CAAC,EACfC,eAAgBN,EAChB8B,gBAAiBD,EACjBtB,WAAY"}

package/dist/es/components/internal/SecuredFields/SFP/SecuredFieldsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecuredFieldsProvider.js","sources":["../../../../../../src/components/internal/SecuredFields/SFP/SecuredFieldsProvider.ts"],"sourcesContent":["import { Component } from 'preact';\nimport { getErrorObject, getFields, getErrorReducer, validFieldsReducer } from './SFPUtils';\nimport initCSF from '../lib/CSF';\nimport handlers from './SecuredFieldsProviderHandlers';\nimport defaultProps from './defaultProps';\nimport { SFPProps, SFPState, SingleBrandResetObject } from './types';\nimport {\n    StylesObject,\n    CbObjOnError,\n    CbObjOnFocus,\n    CbObjOnBrand,\n    CbObjOnAllValid,\n    CbObjOnFieldValid,\n    CbObjOnAutoComplete,\n    CbObjOnConfigSuccess,\n    CbObjOnLoad,\n    SFKeyPressObj\n} from '../lib/types';\nimport { CSFReturnObject, CSFSetupObject } from '../lib/CSF/types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, DEDICATED_CARD_COMPONENTS, ENCRYPTED_CARD_NUMBER, ENCRYPTED_PWD_FIELD } from '../lib/constants';\nimport { BinLookupResponse } from '../../../Card/types';\nimport AdyenCheckoutError from '../../../../core/Errors/AdyenCheckoutError';\nimport { SFStateErrorObj } from '../../../Card/components/CardInput/types';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\n\n/**\n * SecuredFieldsProvider:\n * Initialises & handles the client-side part of SecuredFields\n */\nclass SecuredFieldsProvider extends Component<SFPProps, SFPState> {\n    private csfLoadFailTimeout: number;\n    private csfLoadFailTimeoutMS: number;\n    private csfConfigFailTimeout: number;\n    private csfConfigFailTimeoutMS: number;\n    private numCharsInField: object;\n    private rootNode;\n    private numDateFields: number;\n    private csf: CSFReturnObject;\n    private handleOnLoad: (obj: CbObjOnLoad) => void;\n    private handleOnConfigSuccess: (obj: CbObjOnConfigSuccess) => void;\n    private handleOnFieldValid: (obj: CbObjOnFieldValid) => void;\n    private handleOnAllValid: (obj: CbObjOnAllValid) => void;\n    private handleOnBrand: (obj: CbObjOnBrand) => void;\n    private handleFocus: (obj: CbObjOnFocus) => void;\n    private handleOnError: (obj: CbObjOnError, hasUnsupportedCard?: boolean) => void;\n    private handleOnAutoComplete: (obj: CbObjOnAutoComplete) => void;\n    private handleOnNoDataRequired: () => void;\n    private handleOnTouchstartIOS: (obj) => void;\n    private handleKeyPressed: (obj: SFKeyPressObj) => void;\n    public state: SFPState;\n    public props;\n    private issuingCountryCode;\n\n    constructor(props: SFPProps) {\n        super(props);\n\n        const stateObj: SFPState = {\n            status: 'loading',\n            brand: props.type,\n            errors: {},\n            valid: {},\n            data: {},\n            cvcPolicy: CVC_POLICY_REQUIRED,\n            expiryDatePolicy: DATE_POLICY_REQUIRED,\n            isSfpValid: false,\n            hasKoreanFields: props.hasKoreanFields\n        };\n        this.state = stateObj;\n\n        this.csfLoadFailTimeout = null;\n        this.csfLoadFailTimeoutMS = 30000;\n\n        this.csfConfigFailTimeout = null;\n        this.csfConfigFailTimeoutMS = 15000;\n\n        this.numCharsInField = {};\n\n        // Handlers\n        this.handleOnLoad = handlers.handleOnLoad.bind(this);\n        this.handleOnConfigSuccess = handlers.handleOnConfigSuccess.bind(this);\n        this.handleOnFieldValid = handlers.handleOnFieldValid.bind(this);\n        this.handleOnAllValid = handlers.handleOnAllValid.bind(this);\n        this.handleOnBrand = handlers.handleOnBrand.bind(this);\n        this.handleFocus = handlers.handleFocus.bind(this);\n        this.handleOnError = handlers.handleOnError.bind(this);\n        this.handleOnNoDataRequired = handlers.handleOnNoDataRequired.bind(this);\n        this.handleOnAutoComplete = handlers.handleOnAutoComplete.bind(this);\n        this.handleOnTouchstartIOS = handlers.handleOnTouchstartIOS.bind(this); // Only called when iOS detected\n        this.handleKeyPressed = handlers.handleKeyPressed.bind(this);\n\n        this.processBinLookupResponse = this.processBinLookupResponse.bind(this);\n\n        // Bindings for functions exposed to users of this component: SecuredFields & CardInput\n        this.setFocusOn = this.setFocusOn.bind(this);\n        this.updateStyles = this.updateStyles.bind(this);\n        this.handleUnsupportedCard = this.handleUnsupportedCard.bind(this);\n        this.showValidation = this.showValidation.bind(this);\n        this.destroy = this.destroy.bind(this);\n    }\n\n    public static defaultProps = defaultProps;\n\n    public componentDidMount(): void {\n        // When SFP instantiated through SecuredFieldsInput c.f. CardInput\n        if (this.props.rootNode) {\n            this.setRootNode(this.props.rootNode);\n        }\n\n        // Find encryptedFields and map them to the values we use to store valid states\n        const fields = getFields(this.rootNode);\n        const valid = fields.reduce(validFieldsReducer, {});\n\n        this.setState({ valid });\n\n        // Populate numCharsInField object\n        fields.forEach(field => {\n            this.numCharsInField[field] = 0;\n        });\n\n        // Store how many dateFields we are dealing with visually\n        this.numDateFields = fields.filter(f => f.match(/Expiry/)).length;\n\n        if (fields.length) {\n            this.destroy(); // TODO test if this solves the React double render problem.\n            this.initializeCSF(this.rootNode);\n        } else {\n            this.handleOnNoDataRequired();\n        }\n    }\n\n    public componentDidUpdate() {\n        this.checkForKCPFields();\n    }\n\n    public componentWillUnmount(): void {\n        this.csf = null;\n        clearTimeout(this.csfLoadFailTimeout);\n        clearTimeout(this.csfConfigFailTimeout);\n    }\n\n    private initializeCSF(root: HTMLElement): void {\n        let loadingContext = this.props.loadingContext;\n\n        // For loading securedFields from local server during development\n        if (process.env.NODE_ENV === 'development' && process.env.__SF_ENV__ !== 'build') {\n            loadingContext = process.env.__SF_ENV__;\n        }\n\n        // TODO\n        // if(!this.props.keypadFix){\n        // send analytics action because to know if anyone *ever* sets this config prop\n        // }\n\n        const csfSetupObj: CSFSetupObject = {\n            rootNode: root,\n            type: this.props.type,\n            clientKey: this.props.clientKey,\n            cardGroupTypes: this.props.brands,\n            autoFocus: this.props.autoFocus,\n            trimTrailingSeparator: this.props.trimTrailingSeparator,\n            loadingContext,\n            keypadFix: this.props.keypadFix,\n            showWarnings: this.props.showWarnings,\n            iframeUIConfig: {\n                sfStyles: this.props.styles\n            },\n            i18n: this.props.i18n,\n            callbacks: {\n                onLoad: this.handleOnLoad,\n                onConfigSuccess: this.handleOnConfigSuccess,\n                onFieldValid: this.handleOnFieldValid,\n                onAllValid: this.handleOnAllValid,\n                onBrand: this.handleOnBrand,\n                onError: this.handleOnError,\n                onFocus: this.handleFocus,\n                onBinValue: this.props.onBinValue,\n                onAutoComplete: this.handleOnAutoComplete,\n                onAdditionalSFConfig: this.props.onAdditionalSFConfig,\n                onAdditionalSFRemoved: this.props.onAdditionalSFRemoved,\n                onTouchstartIOS: this.handleOnTouchstartIOS,\n                onKeyPressed: this.handleKeyPressed\n            },\n            isKCP: this.state.hasKoreanFields,\n            legacyInputMode: this.props.legacyInputMode,\n            minimumExpiryDate: this.props.minimumExpiryDate,\n            implementationType: this.props.implementationType || 'components', // to distinguish between 'regular' and 'custom' card component\n            forceCompat: this.props.forceCompat,\n            maskSecurityCode: this.props.maskSecurityCode,\n            exposeExpiryDate: this.props.exposeExpiryDate,\n            shouldDisableIOSArrowKeys: !!this.props.disableIOSArrowKeys, // convert whether function has been defined into a boolean\n            placeholders: this.props.placeholders ?? {},\n            showContextualElement: this.props.showContextualElement\n        };\n\n        this.csf = initCSF(csfSetupObj);\n\n        /**\n         * Expect to at least have had the handleOnLoad callback called within this time\n         * - if this hasn't happened then something has happened to interrupt the loading of the securedFields\n         * So we need to clear the loading spinner to see if the securedFields are reporting anything\n         */\n        // @ts-ignore - timout 'type' is a number\n        this.csfLoadFailTimeout = setTimeout(() => {\n            if (this.state.status !== 'ready') {\n                // Hide the spinner\n                this.setState({ status: 'csfLoadFailure' });\n                // Report the error\n                this.props.onError(new AdyenCheckoutError('ERROR', 'secured field iframes have failed to load'));\n            }\n        }, this.csfLoadFailTimeoutMS);\n    }\n\n    private checkForKCPFields() {\n        let needsKoreanFields = false;\n        if (this.props.koreanAuthenticationRequired) {\n            needsKoreanFields = this.issuingCountryCode ? this.issuingCountryCode === 'kr' : this.props.countryCode === 'kr';\n        }\n\n        // Was korean, now isn't - hide password field\n        if (this.state.hasKoreanFields && !needsKoreanFields) {\n            // Clear any stored data\n            const setRemovedFieldState = prevState => ({\n                data: { ...prevState.data, [ENCRYPTED_PWD_FIELD]: undefined },\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                errors: { ...prevState.errors, [ENCRYPTED_PWD_FIELD]: false },\n                hasKoreanFields: false\n            });\n\n            this.setState(setRemovedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.removeSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(false);\n        }\n\n        // Wasn't korean, now is - show password field\n        if (!this.state.hasKoreanFields && needsKoreanFields) {\n            const setAddedFieldState = prevState => ({\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                hasKoreanFields: true,\n                isSfpValid: false\n            });\n\n            this.setState(setAddedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.addSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(true);\n        }\n    }\n\n    public getChildContext(): object {\n        return { i18n: this.props.i18n };\n    }\n\n    public handleUnsupportedCard(errObj: CbObjOnError): boolean {\n        const hasUnsupportedCard = !!errObj.error;\n\n        // Store the brand(s) we detected and which we don't support\n        if (hasUnsupportedCard) {\n            this.setState({ detectedUnsupportedBrands: errObj.detectedBrands });\n        }\n\n        errObj.rootNode = this.rootNode; // Needed for CustomCard\n        this.handleOnError(errObj, hasUnsupportedCard);\n        // Inform CSF that the number field has an unsupportedCard error (or that it has been cleared)\n        if (this.csf) {\n            this.csf.hasUnsupportedCard(ENCRYPTED_CARD_NUMBER, errObj.error);\n        }\n        return hasUnsupportedCard;\n    }\n\n    public setFocusOn(frame: string): void {\n        if (this.csf) this.csf.setFocusOnFrame(frame);\n    }\n\n    public updateStyles(stylesObj: StylesObject): void {\n        if (this.csf) this.csf.updateStyles(stylesObj);\n    }\n\n    public sfIsOptionalOrHidden(fieldType: string): boolean {\n        return this.csf.sfIsOptionalOrHidden(fieldType);\n    }\n\n    public destroy(): void {\n        if (this.csf) this.csf.destroy();\n    }\n\n    public showValidation(): void {\n        const { numDateFields, state }: SecuredFieldsProvider = this;\n\n        Object.keys(state.valid)\n            .reduce(getErrorReducer(numDateFields, state), [])\n            .forEach(field => {\n                // For each detected error pass an error object to the handler (calls error callback & sets state)\n                const errorObj: CbObjOnError = getErrorObject(field, this.rootNode, state);\n                this.handleOnError(errorObj, !!state.detectedUnsupportedBrands);\n                // Inform the secured-fields instance of which fields have been found to have errors\n                if (this.csf && this.csf.isValidated) {\n                    this.csf.isValidated(field, errorObj.error);\n                }\n            });\n    }\n\n    /**\n     * Map SF errors to ValidationRuleResult-like objects, for CardInput component\n     */\n    public mapErrorsToValidationRuleResult(): SFStateErrorObj {\n        const fieldNames: string[] = Object.keys(this.state.errors);\n\n        const sfStateErrorsObj = fieldNames.reduce((acc, fieldName) => {\n            const errorCode = this.state.errors[fieldName];\n            if (errorCode) {\n                acc[fieldName] = {\n                    isValid: false,\n                    errorMessage: getErrorMessageFromCode(errorCode, SF_ErrorCodes), // this is the human-readable, untranslated, explanation of the error that will exist on the error object in card.state.errors\n                    // For v5 the object found in state.errors should also contain the additional properties that used to be sent to the onError callback\n                    // namely: translation, errorCode, a ref to rootNode &, in the case of failed binLookup, an array of the detectedBrands\n                    errorI18n: this.props.i18n.get(errorCode),\n                    error: errorCode,\n                    rootNode: this.rootNode,\n                    ...(this.state.detectedUnsupportedBrands && { detectedBrands: this.state.detectedUnsupportedBrands })\n                };\n            } else {\n                acc[fieldName] = null;\n            }\n            return acc;\n        }, {});\n        return sfStateErrorsObj;\n    }\n\n    public processBinLookupResponse(binLookupResponse: BinLookupResponse, resetObject: SingleBrandResetObject): void {\n        // If we were dealing with an unsupported card & now we have a valid /binLookup response (or a response triggering a reset of the UI),\n        // - reset state to clear the error & the stored unsupportedBrands and, in the case of a valid /binLookup response, inform CSF (via handleUnsupportedCard)\n        // (Scenario: from an unsupportedCard state the shopper has pasted another number long enough to trigger a /binLookup)\n        if (this.state.detectedUnsupportedBrands) {\n            this.setState(prevState => ({\n                errors: { ...prevState.errors, [ENCRYPTED_CARD_NUMBER]: false },\n                detectedUnsupportedBrands: null\n            }));\n\n            // If we have some sort of binLookupResponse object then this isn't the reset caused by digits dropping below a threshold\n            // - so call handleUnsupportedCard to clear the error\n            if (this.csf && binLookupResponse) {\n                const errObj: CbObjOnError = {\n                    type: 'card',\n                    fieldType: 'encryptedCardNumber',\n                    error: ''\n                };\n                this.handleUnsupportedCard(errObj);\n            }\n        }\n\n        this.issuingCountryCode = binLookupResponse?.issuingCountryCode?.toLowerCase();\n\n        const hasBrandedResetObj = resetObject?.brand;\n\n        /**\n         * Are we dealing with a \"dedicated\" card scenario i.e a card component created as: checkout.create('bcmc') but which can accept multiple brands\n         * - in which case we will need to reset brand and pass on the resetObj to CSF\n         */\n        const mustResetDedicatedBrand = hasBrandedResetObj && DEDICATED_CARD_COMPONENTS.includes(resetObject.brand);\n\n        if (mustResetDedicatedBrand) {\n            // resetObject.brand will be the value of the brand whose logo we want to reshow in the UI\n            this.setState(resetObject, () => {\n                this.props.onChange(this.state);\n            });\n        }\n\n        /**\n         * Scenarios:\n         *\n         * - RESET (binLookupResponse === null): The number of digits in number field has dropped below threshold for BIN lookup\n         * - RESULT (binLookupResponse.supportedBrands.length === 1): binLookup has found a result so inform CSF\n         *\n         * In the RESET scenario, for \"dedicated\" card components we also need to pass on the resetObject since this contains information about\n         * the brand that CSF needs to reset to, internally.\n         */\n        if (this.csf) this.csf.brandsFromBinLookup(binLookupResponse, mustResetDedicatedBrand ? resetObject : null);\n    }\n\n    private setRootNode = (input: HTMLElement): void => {\n        this.rootNode = input;\n    };\n\n    public render(props, state) {\n        return props.render({ setRootNode: this.setRootNode, setFocusOn: this.setFocusOn }, state);\n    }\n}\n\nexport default SecuredFieldsProvider;\n"],"names":["SecuredFieldsProvider","Component","componentDidMount","this","props","rootNode","setRootNode","fields","getFields","valid","reduce","validFieldsReducer","setState","forEach","field","numCharsInField","numDateFields","filter","f","match","length","destroy","initializeCSF","handleOnNoDataRequired","componentDidUpdate","checkForKCPFields","componentWillUnmount","csf","clearTimeout","csfLoadFailTimeout","csfConfigFailTimeout","root","loadingContext","csfSetupObj","type","clientKey","cardGroupTypes","brands","autoFocus","trimTrailingSeparator","keypadFix","showWarnings","iframeUIConfig","sfStyles","styles","i18n","callbacks","onLoad","handleOnLoad","onConfigSuccess","handleOnConfigSuccess","onFieldValid","handleOnFieldValid","onAllValid","handleOnAllValid","onBrand","handleOnBrand","onError","handleOnError","onFocus","handleFocus","onBinValue","onAutoComplete","handleOnAutoComplete","onAdditionalSFConfig","onAdditionalSFRemoved","onTouchstartIOS","handleOnTouchstartIOS","onKeyPressed","handleKeyPressed","isKCP","state","hasKoreanFields","legacyInputMode","minimumExpiryDate","implementationType","forceCompat","maskSecurityCode","exposeExpiryDate","shouldDisableIOSArrowKeys","disableIOSArrowKeys","placeholders","showContextualElement","initCSF","setTimeout","status","AdyenCheckoutError","csfLoadFailTimeoutMS","needsKoreanFields","koreanAuthenticationRequired","issuingCountryCode","countryCode","setRemovedFieldState","prevState","data","ENCRYPTED_PWD_FIELD","undefined","errors","onChange","removeSecuredField","setKCPStatus","setAddedFieldState","isSfpValid","addSecuredField","getChildContext","handleUnsupportedCard","errObj","hasUnsupportedCard","error","detectedUnsupportedBrands","detectedBrands","ENCRYPTED_CARD_NUMBER","setFocusOn","frame","setFocusOnFrame","updateStyles","stylesObj","sfIsOptionalOrHidden","fieldType","showValidation","Object","keys","getErrorReducer","errorObj","getErrorObject","isValidated","mapErrorsToValidationRuleResult","acc","fieldName","errorCode","isValid","errorMessage","getErrorMessageFromCode","SF_ErrorCodes","errorI18n","get","processBinLookupResponse","binLookupResponse","resetObject","toLowerCase","hasBrandedResetObj","brand","mustResetDedicatedBrand","DEDICATED_CARD_COMPONENTS","includes","brandsFromBinLookup","render","constructor","super","_define_property","csfConfigFailTimeoutMS","input","stateObj","cvcPolicy","CVC_POLICY_REQUIRED","expiryDatePolicy","DATE_POLICY_REQUIRED","handlers","bind","defaultProps"],"mappings":"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"}
+{"version":3,"file":"SecuredFieldsProvider.js","sources":["../../../../../../src/components/internal/SecuredFields/SFP/SecuredFieldsProvider.ts"],"sourcesContent":["import { Component } from 'preact';\nimport { getErrorObject, getFields, getErrorReducer, validFieldsReducer } from './SFPUtils';\nimport initCSF from '../lib/CSF';\nimport handlers from './SecuredFieldsProviderHandlers';\nimport defaultProps from './defaultProps';\nimport { SFPProps, SFPState, SingleBrandResetObject } from './types';\nimport {\n    StylesObject,\n    CardErrorData,\n    CardFocusData,\n    CardBrandData,\n    CardAllValidData,\n    CardFieldValidData,\n    CardAutoCompleteData,\n    CardConfigSuccessData,\n    CardLoadData,\n    SFKeyPressObj\n} from '../lib/types';\nimport { CSFReturnObject, CSFSetupObject } from '../lib/CSF/types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, DEDICATED_CARD_COMPONENTS, ENCRYPTED_CARD_NUMBER, ENCRYPTED_PWD_FIELD } from '../lib/constants';\nimport { BinLookupResponse } from '../../../Card/types';\nimport AdyenCheckoutError from '../../../../core/Errors/AdyenCheckoutError';\nimport { SFStateErrorObj } from '../../../Card/components/CardInput/types';\nimport { getErrorMessageFromCode } from '../../../../core/Errors/utils';\nimport { SF_ErrorCodes } from '../../../../core/Errors/constants';\n\n/**\n * SecuredFieldsProvider:\n * Initialises & handles the client-side part of SecuredFields\n */\nclass SecuredFieldsProvider extends Component<SFPProps, SFPState> {\n    private csfLoadFailTimeout: number;\n    private csfLoadFailTimeoutMS: number;\n    private csfConfigFailTimeout: number;\n    private csfConfigFailTimeoutMS: number;\n    private numCharsInField: object;\n    private rootNode;\n    private numDateFields: number;\n    private csf: CSFReturnObject;\n    private handleOnLoad: (obj: CardLoadData) => void;\n    private handleOnConfigSuccess: (obj: CardConfigSuccessData) => void;\n    private handleOnFieldValid: (obj: CardFieldValidData) => void;\n    private handleOnAllValid: (obj: CardAllValidData) => void;\n    private handleOnBrand: (obj: CardBrandData) => void;\n    private handleFocus: (obj: CardFocusData) => void;\n    private handleOnError: (obj: CardErrorData, hasUnsupportedCard?: boolean) => void;\n    private handleOnAutoComplete: (obj: CardAutoCompleteData) => void;\n    private handleOnNoDataRequired: () => void;\n    private handleOnTouchstartIOS: (obj) => void;\n    private handleKeyPressed: (obj: SFKeyPressObj) => void;\n    public state: SFPState;\n    public props;\n    private issuingCountryCode;\n\n    constructor(props: SFPProps) {\n        super(props);\n\n        const stateObj: SFPState = {\n            status: 'loading',\n            brand: props.type,\n            errors: {},\n            valid: {},\n            data: {},\n            cvcPolicy: CVC_POLICY_REQUIRED,\n            expiryDatePolicy: DATE_POLICY_REQUIRED,\n            isSfpValid: false,\n            hasKoreanFields: props.hasKoreanFields\n        };\n        this.state = stateObj;\n\n        this.csfLoadFailTimeout = null;\n        this.csfLoadFailTimeoutMS = 30000;\n\n        this.csfConfigFailTimeout = null;\n        this.csfConfigFailTimeoutMS = 15000;\n\n        this.numCharsInField = {};\n\n        // Handlers\n        this.handleOnLoad = handlers.handleOnLoad.bind(this);\n        this.handleOnConfigSuccess = handlers.handleOnConfigSuccess.bind(this);\n        this.handleOnFieldValid = handlers.handleOnFieldValid.bind(this);\n        this.handleOnAllValid = handlers.handleOnAllValid.bind(this);\n        this.handleOnBrand = handlers.handleOnBrand.bind(this);\n        this.handleFocus = handlers.handleFocus.bind(this);\n        this.handleOnError = handlers.handleOnError.bind(this);\n        this.handleOnNoDataRequired = handlers.handleOnNoDataRequired.bind(this);\n        this.handleOnAutoComplete = handlers.handleOnAutoComplete.bind(this);\n        this.handleOnTouchstartIOS = handlers.handleOnTouchstartIOS.bind(this); // Only called when iOS detected\n        this.handleKeyPressed = handlers.handleKeyPressed.bind(this);\n\n        this.processBinLookupResponse = this.processBinLookupResponse.bind(this);\n\n        // Bindings for functions exposed to users of this component: SecuredFields & CardInput\n        this.setFocusOn = this.setFocusOn.bind(this);\n        this.updateStyles = this.updateStyles.bind(this);\n        this.handleUnsupportedCard = this.handleUnsupportedCard.bind(this);\n        this.showValidation = this.showValidation.bind(this);\n        this.destroy = this.destroy.bind(this);\n    }\n\n    public static defaultProps = defaultProps;\n\n    public componentDidMount(): void {\n        // When SFP instantiated through SecuredFieldsInput c.f. CardInput\n        if (this.props.rootNode) {\n            this.setRootNode(this.props.rootNode);\n        }\n\n        // Find encryptedFields and map them to the values we use to store valid states\n        const fields = getFields(this.rootNode);\n        const valid = fields.reduce(validFieldsReducer, {});\n\n        this.setState({ valid });\n\n        // Populate numCharsInField object\n        fields.forEach(field => {\n            this.numCharsInField[field] = 0;\n        });\n\n        // Store how many dateFields we are dealing with visually\n        this.numDateFields = fields.filter(f => f.match(/Expiry/)).length;\n\n        if (fields.length) {\n            this.destroy(); // TODO test if this solves the React double render problem.\n            this.initializeCSF(this.rootNode);\n        } else {\n            this.handleOnNoDataRequired();\n        }\n    }\n\n    public componentDidUpdate() {\n        this.checkForKCPFields();\n    }\n\n    public componentWillUnmount(): void {\n        this.csf = null;\n        clearTimeout(this.csfLoadFailTimeout);\n        clearTimeout(this.csfConfigFailTimeout);\n    }\n\n    private initializeCSF(root: HTMLElement): void {\n        let loadingContext = this.props.loadingContext;\n\n        // For loading securedFields from local server during development\n        if (process.env.NODE_ENV === 'development' && process.env.__SF_ENV__ !== 'build') {\n            loadingContext = process.env.__SF_ENV__;\n        }\n\n        // TODO\n        // if(!this.props.keypadFix){\n        // send analytics action because to know if anyone *ever* sets this config prop\n        // }\n\n        const csfSetupObj: CSFSetupObject = {\n            rootNode: root,\n            type: this.props.type,\n            clientKey: this.props.clientKey,\n            cardGroupTypes: this.props.brands,\n            autoFocus: this.props.autoFocus,\n            trimTrailingSeparator: this.props.trimTrailingSeparator,\n            loadingContext,\n            keypadFix: this.props.keypadFix,\n            showWarnings: this.props.showWarnings,\n            iframeUIConfig: {\n                sfStyles: this.props.styles\n            },\n            i18n: this.props.i18n,\n            callbacks: {\n                onLoad: this.handleOnLoad,\n                onConfigSuccess: this.handleOnConfigSuccess,\n                onFieldValid: this.handleOnFieldValid,\n                onAllValid: this.handleOnAllValid,\n                onBrand: this.handleOnBrand,\n                onError: this.handleOnError,\n                onFocus: this.handleFocus,\n                onBinValue: this.props.onBinValue,\n                onAutoComplete: this.handleOnAutoComplete,\n                onAdditionalSFConfig: this.props.onAdditionalSFConfig,\n                onAdditionalSFRemoved: this.props.onAdditionalSFRemoved,\n                onTouchstartIOS: this.handleOnTouchstartIOS,\n                onKeyPressed: this.handleKeyPressed\n            },\n            isKCP: this.state.hasKoreanFields,\n            legacyInputMode: this.props.legacyInputMode,\n            minimumExpiryDate: this.props.minimumExpiryDate,\n            implementationType: this.props.implementationType || 'components', // to distinguish between 'regular' and 'custom' card component\n            forceCompat: this.props.forceCompat,\n            maskSecurityCode: this.props.maskSecurityCode,\n            exposeExpiryDate: this.props.exposeExpiryDate,\n            shouldDisableIOSArrowKeys: !!this.props.disableIOSArrowKeys, // convert whether function has been defined into a boolean\n            placeholders: this.props.placeholders ?? {},\n            showContextualElement: this.props.showContextualElement\n        };\n\n        this.csf = initCSF(csfSetupObj);\n\n        /**\n         * Expect to at least have had the handleOnLoad callback called within this time\n         * - if this hasn't happened then something has happened to interrupt the loading of the securedFields\n         * So we need to clear the loading spinner to see if the securedFields are reporting anything\n         */\n        // @ts-ignore - timout 'type' is a number\n        this.csfLoadFailTimeout = setTimeout(() => {\n            if (this.state.status !== 'ready') {\n                // Hide the spinner\n                this.setState({ status: 'csfLoadFailure' });\n                // Report the error\n                this.props.onError(new AdyenCheckoutError('ERROR', 'secured field iframes have failed to load'));\n            }\n        }, this.csfLoadFailTimeoutMS);\n    }\n\n    private checkForKCPFields() {\n        let needsKoreanFields = false;\n        if (this.props.koreanAuthenticationRequired) {\n            needsKoreanFields = this.issuingCountryCode ? this.issuingCountryCode === 'kr' : this.props.countryCode === 'kr';\n        }\n\n        // Was korean, now isn't - hide password field\n        if (this.state.hasKoreanFields && !needsKoreanFields) {\n            // Clear any stored data\n            const setRemovedFieldState = prevState => ({\n                data: { ...prevState.data, [ENCRYPTED_PWD_FIELD]: undefined },\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                errors: { ...prevState.errors, [ENCRYPTED_PWD_FIELD]: false },\n                hasKoreanFields: false\n            });\n\n            this.setState(setRemovedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.removeSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(false);\n        }\n\n        // Wasn't korean, now is - show password field\n        if (!this.state.hasKoreanFields && needsKoreanFields) {\n            const setAddedFieldState = prevState => ({\n                valid: { ...prevState.valid, [ENCRYPTED_PWD_FIELD]: false },\n                hasKoreanFields: true,\n                isSfpValid: false\n            });\n\n            this.setState(setAddedFieldState, () => {\n                this.props.onChange(this.state);\n            });\n\n            this.csf.addSecuredField(ENCRYPTED_PWD_FIELD);\n            this.csf.setKCPStatus(true);\n        }\n    }\n\n    public getChildContext(): object {\n        return { i18n: this.props.i18n };\n    }\n\n    public handleUnsupportedCard(errObj: CardErrorData): boolean {\n        const hasUnsupportedCard = !!errObj.error;\n\n        // Store the brand(s) we detected and which we don't support\n        if (hasUnsupportedCard) {\n            this.setState({ detectedUnsupportedBrands: errObj.detectedBrands });\n        }\n\n        errObj.rootNode = this.rootNode; // Needed for CustomCard\n        this.handleOnError(errObj, hasUnsupportedCard);\n        // Inform CSF that the number field has an unsupportedCard error (or that it has been cleared)\n        if (this.csf) {\n            this.csf.hasUnsupportedCard(ENCRYPTED_CARD_NUMBER, errObj.error);\n        }\n        return hasUnsupportedCard;\n    }\n\n    public setFocusOn(frame: string): void {\n        if (this.csf) this.csf.setFocusOnFrame(frame);\n    }\n\n    public updateStyles(stylesObj: StylesObject): void {\n        if (this.csf) this.csf.updateStyles(stylesObj);\n    }\n\n    public sfIsOptionalOrHidden(fieldType: string): boolean {\n        return this.csf.sfIsOptionalOrHidden(fieldType);\n    }\n\n    public destroy(): void {\n        if (this.csf) this.csf.destroy();\n    }\n\n    public showValidation(): void {\n        const { numDateFields, state }: SecuredFieldsProvider = this;\n\n        Object.keys(state.valid)\n            .reduce(getErrorReducer(numDateFields, state), [])\n            .forEach(field => {\n                // For each detected error pass an error object to the handler (calls error callback & sets state)\n                const errorObj: CardErrorData = getErrorObject(field, this.rootNode, state);\n                this.handleOnError(errorObj, !!state.detectedUnsupportedBrands);\n                // Inform the secured-fields instance of which fields have been found to have errors\n                if (this.csf && this.csf.isValidated) {\n                    this.csf.isValidated(field, errorObj.error);\n                }\n            });\n    }\n\n    /**\n     * Map SF errors to ValidationRuleResult-like objects, for CardInput component\n     */\n    public mapErrorsToValidationRuleResult(): SFStateErrorObj {\n        const fieldNames: string[] = Object.keys(this.state.errors);\n\n        const sfStateErrorsObj = fieldNames.reduce((acc, fieldName) => {\n            const errorCode = this.state.errors[fieldName];\n            if (errorCode) {\n                acc[fieldName] = {\n                    isValid: false,\n                    errorMessage: getErrorMessageFromCode(errorCode, SF_ErrorCodes), // this is the human-readable, untranslated, explanation of the error that will exist on the error object in card.state.errors\n                    // For v5 the object found in state.errors should also contain the additional properties that used to be sent to the onError callback\n                    // namely: translation, errorCode, a ref to rootNode &, in the case of failed binLookup, an array of the detectedBrands\n                    errorI18n: this.props.i18n.get(errorCode),\n                    error: errorCode,\n                    rootNode: this.rootNode,\n                    ...(this.state.detectedUnsupportedBrands && { detectedBrands: this.state.detectedUnsupportedBrands })\n                };\n            } else {\n                acc[fieldName] = null;\n            }\n            return acc;\n        }, {});\n        return sfStateErrorsObj;\n    }\n\n    public processBinLookupResponse(binLookupResponse: BinLookupResponse, resetObject: SingleBrandResetObject): void {\n        // If we were dealing with an unsupported card & now we have a valid /binLookup response (or a response triggering a reset of the UI),\n        // - reset state to clear the error & the stored unsupportedBrands and, in the case of a valid /binLookup response, inform CSF (via handleUnsupportedCard)\n        // (Scenario: from an unsupportedCard state the shopper has pasted another number long enough to trigger a /binLookup)\n        if (this.state.detectedUnsupportedBrands) {\n            this.setState(prevState => ({\n                errors: { ...prevState.errors, [ENCRYPTED_CARD_NUMBER]: false },\n                detectedUnsupportedBrands: null\n            }));\n\n            // If we have some sort of binLookupResponse object then this isn't the reset caused by digits dropping below a threshold\n            // - so call handleUnsupportedCard to clear the error\n            if (this.csf && binLookupResponse) {\n                const errObj: CardErrorData = {\n                    type: 'card',\n                    fieldType: 'encryptedCardNumber',\n                    error: ''\n                };\n                this.handleUnsupportedCard(errObj);\n            }\n        }\n\n        this.issuingCountryCode = binLookupResponse?.issuingCountryCode?.toLowerCase();\n\n        const hasBrandedResetObj = resetObject?.brand;\n\n        /**\n         * Are we dealing with a \"dedicated\" card scenario i.e a card component created as: checkout.create('bcmc') but which can accept multiple brands\n         * - in which case we will need to reset brand and pass on the resetObj to CSF\n         */\n        const mustResetDedicatedBrand = hasBrandedResetObj && DEDICATED_CARD_COMPONENTS.includes(resetObject.brand);\n\n        if (mustResetDedicatedBrand) {\n            // resetObject.brand will be the value of the brand whose logo we want to reshow in the UI\n            this.setState(resetObject, () => {\n                this.props.onChange(this.state);\n            });\n        }\n\n        /**\n         * Scenarios:\n         *\n         * - RESET (binLookupResponse === null): The number of digits in number field has dropped below threshold for BIN lookup\n         * - RESULT (binLookupResponse.supportedBrands.length === 1): binLookup has found a result so inform CSF\n         *\n         * In the RESET scenario, for \"dedicated\" card components we also need to pass on the resetObject since this contains information about\n         * the brand that CSF needs to reset to, internally.\n         */\n        if (this.csf) this.csf.brandsFromBinLookup(binLookupResponse, mustResetDedicatedBrand ? resetObject : null);\n    }\n\n    private setRootNode = (input: HTMLElement): void => {\n        this.rootNode = input;\n    };\n\n    public render(props, state) {\n        return props.render({ setRootNode: this.setRootNode, setFocusOn: this.setFocusOn }, state);\n    }\n}\n\nexport default SecuredFieldsProvider;\n"],"names":["SecuredFieldsProvider","Component","componentDidMount","this","props","rootNode","setRootNode","fields","getFields","valid","reduce","validFieldsReducer","setState","forEach","field","numCharsInField","numDateFields","filter","f","match","length","destroy","initializeCSF","handleOnNoDataRequired","componentDidUpdate","checkForKCPFields","componentWillUnmount","csf","clearTimeout","csfLoadFailTimeout","csfConfigFailTimeout","root","loadingContext","csfSetupObj","type","clientKey","cardGroupTypes","brands","autoFocus","trimTrailingSeparator","keypadFix","showWarnings","iframeUIConfig","sfStyles","styles","i18n","callbacks","onLoad","handleOnLoad","onConfigSuccess","handleOnConfigSuccess","onFieldValid","handleOnFieldValid","onAllValid","handleOnAllValid","onBrand","handleOnBrand","onError","handleOnError","onFocus","handleFocus","onBinValue","onAutoComplete","handleOnAutoComplete","onAdditionalSFConfig","onAdditionalSFRemoved","onTouchstartIOS","handleOnTouchstartIOS","onKeyPressed","handleKeyPressed","isKCP","state","hasKoreanFields","legacyInputMode","minimumExpiryDate","implementationType","forceCompat","maskSecurityCode","exposeExpiryDate","shouldDisableIOSArrowKeys","disableIOSArrowKeys","placeholders","showContextualElement","initCSF","setTimeout","status","AdyenCheckoutError","csfLoadFailTimeoutMS","needsKoreanFields","koreanAuthenticationRequired","issuingCountryCode","countryCode","setRemovedFieldState","prevState","data","ENCRYPTED_PWD_FIELD","undefined","errors","onChange","removeSecuredField","setKCPStatus","setAddedFieldState","isSfpValid","addSecuredField","getChildContext","handleUnsupportedCard","errObj","hasUnsupportedCard","error","detectedUnsupportedBrands","detectedBrands","ENCRYPTED_CARD_NUMBER","setFocusOn","frame","setFocusOnFrame","updateStyles","stylesObj","sfIsOptionalOrHidden","fieldType","showValidation","Object","keys","getErrorReducer","errorObj","getErrorObject","isValidated","mapErrorsToValidationRuleResult","acc","fieldName","errorCode","isValid","errorMessage","getErrorMessageFromCode","SF_ErrorCodes","errorI18n","get","processBinLookupResponse","binLookupResponse","resetObject","toLowerCase","hasBrandedResetObj","brand","mustResetDedicatedBrand","DEDICATED_CARD_COMPONENTS","includes","brandsFromBinLookup","render","constructor","super","_define_property","csfConfigFailTimeoutMS","input","stateObj","cvcPolicy","CVC_POLICY_REQUIRED","expiryDatePolicy","DATE_POLICY_REQUIRED","handlers","bind","defaultProps"],"mappings":"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"}