@adyen/adyen-web 6.0.0-beta.1 → 6.0.0

package/dist/es-legacy/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}: 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            />\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","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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"}
+{"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}: 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            />\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","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-legacy/components/internal/FormFields/Select/components/SelectButton.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../external/classnames/index.js";import o from"../../../Img/Img.js";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){r(e,t,n[t])}))}return e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n.push.apply(n,o)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function l(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function i(t){var{filterable:n,toggleButtonRef:o}=t,r=l(t,["filterable","toggleButtonRef"]);return n?e("div",c(a({},r),{ref:o})):e("button",c(a({id:r.id,"aria-describedby":r.ariaDescribedBy,type:"button"},r),{ref:o}))}function u(r){const{active:a,selected:c,inputText:l,readonly:u,showList:d}=r,s=c.selectedOptionName||c.name||r.placeholder||"",p=d?l:s,b=u?null:r.filterable?e=>{e.preventDefault(),document.activeElement===r.filterInputRef.current?r.showList||r.toggleList(e):r.filterInputRef.current&&r.filterInputRef.current.focus()}:r.toggleList,f=u?null:r.onFocus,_=a.id?`listItem-${a.id}`:"";return e(i,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":u,"adyen-checkout__dropdown__button--active":d,"adyen-checkout__dropdown__button--invalid":r.isInvalid,"adyen-checkout__dropdown__button--valid":r.isValid,"adyen-checkout__dropdown__button--disabled":c.disabled}),disabled:r.disabled,filterable:r.filterable,onClick:b,onKeyDown:u?null:r.onButtonKeyDown,toggleButtonRef:r.toggleButtonRef},r.filterable?e(t,null,!d&&c.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:c.icon,alt:c.name}),e("input",{value:p,"aria-autocomplete":"list","aria-controls":r.selectListId,"aria-expanded":d,"aria-owns":r.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:r.onInput,onFocus:f,ref:r.filterInputRef,role:"combobox","aria-activedescendant":_,type:"text",readOnly:r.readonly,id:r.id,"aria-describedby":r.ariaDescribedBy}),!d&&c.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},c.secondaryText)):e(t,null,c.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:c.icon,alt:c.name}),e("span",{className:"adyen-checkout__dropdown__button__text"},s),c.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},c.secondaryText)))}export{u as default};
+import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../external/classnames/index.js";import o from"../../../Img/Img.js";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){r(e,t,n[t])}))}return e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function i(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function l(t){var{filterable:n,toggleButtonRef:o}=t,r=i(t,["filterable","toggleButtonRef"]);if(n){const t=i(r,["id"]);return e("div",c(a({},t),{ref:o}))}return e("button",c(a({id:r.id,"aria-describedby":r.ariaDescribedBy,type:"button"},r),{ref:o}))}function d(r){const{active:c,selected:i,inputText:d,readonly:u,showList:s}=r,p=i.selectedOptionName||i.name||r.placeholder||"",b=s?d:p,f=u?null:r.filterable?e=>{e.preventDefault(),document.activeElement===r.filterInputRef.current?r.showList||r.toggleList(e):r.filterInputRef.current&&r.filterInputRef.current.focus()}:r.toggleList,_=u?null:r.onFocus,y=c.id?`listItem-${c.id}`:"";return e(l,a({className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":u,"adyen-checkout__dropdown__button--active":s,"adyen-checkout__dropdown__button--invalid":r.isInvalid,"adyen-checkout__dropdown__button--valid":r.isValid,"adyen-checkout__dropdown__button--disabled":i.disabled}),disabled:r.disabled,filterable:r.filterable,onClick:f,onKeyDown:u?null:r.onButtonKeyDown,toggleButtonRef:r.toggleButtonRef},r.allowIdOnButton&&r.id&&{id:r.id}),r.filterable?e(t,null,!s&&i.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("input",{value:b,"aria-autocomplete":"list","aria-controls":r.selectListId,"aria-expanded":s,"aria-owns":r.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:r.onInput,onFocus:_,ref:r.filterInputRef,role:"combobox","aria-activedescendant":y,type:"text",readOnly:r.readonly,id:r.id,"aria-describedby":r.ariaDescribedBy}),!s&&i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)):e(t,null,i.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:i.icon,alt:i.name}),e("span",{className:"adyen-checkout__dropdown__button__text"},p),i.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},i.secondaryText)))}export{d as default};
 //# sourceMappingURL=SelectButton.js.map

package/dist/es-legacy/components/internal/FormFields/Select/components/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n    if (filterable) return <div {...props} ref={toggleButtonRef} />;\n\n    return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n    const { active, selected, inputText, readonly, showList } = props;\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    const displayInputText = showList ? inputText : displayText;\n\n    const setFocus = (e: Event) => {\n        e.preventDefault();\n        if (document.activeElement === props.filterInputRef.current) {\n            if (!props.showList) {\n                props.toggleList(e);\n            }\n        } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n    };\n\n    // 1. If readonly we ignore the click action\n    // 2. If filterable we want to show the list and focus on the input\n    // 3. Otherwise we just toggle the list\n    const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n    const onFocusHandler = readonly ? null : props.onFocus;\n\n    // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n    const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span className=\"adyen-checkout__dropdown__button__text\">{displayText}</span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className=\"adyen-checkout__filter-input\"\n                        onInput={props.onInput}\n                        onFocus={onFocusHandler}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={currentSelectedItemId}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","_param","filterable","toggleButtonRef","props","_object_without_properties","h","div","ref","button","id","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","displayText","selectedOptionName","name","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"+1CAKA,SAASA,EAAoBC,GAAA,IAAAC,WAAEA,EAAUC,gBAAEA,GAAdF,EAAkCG,EAAlCC,EAAAJ,EAAA,CAAEC,aAAYC,oBACvC,OAAID,EAAmBI,EAACC,MAAQH,EAAAA,EAAAA,CAAAA,EAAAA,GAAAA,CAAOI,IAAKL,KAErCG,EAACG,SAAAA,EAAAA,EAAAA,CAAOC,GAAIN,EAAMM,GAAIC,mBAAkBP,EAAMQ,gBAAiBC,KAAM,UAAcT,GAAAA,CAAOI,IAAKL,IAC1G,CAEA,SAASW,EAAaV,GAClB,MAAMW,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAaf,EAGtDgB,EAAcJ,EAASK,oBAAsBL,EAASM,MAAQlB,EAAMmB,aAAe,GAInFC,EAAmBL,EAAWF,EAAYG,EAc1CK,EAAiBP,EAAW,KAAOd,EAAMF,WAZ7BwB,IACdA,EAAEC,iBACEC,SAASC,gBAAkBzB,EAAM0B,eAAeC,QAC3C3B,EAAMe,UACPf,EAAM4B,WAAWN,GAEdtB,EAAM0B,eAAeC,SAAS3B,EAAM0B,eAAeC,QAAQE,OAAK,EAMR7B,EAAM4B,WAEvEE,EAAiBhB,EAAW,KAAOd,EAAM+B,QAGzCC,EAAwBrB,EAAOL,GAAK,YAAYK,EAAOL,KAAO,GAEpE,OACIJ,EAACN,EAAAA,CACGqC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CpB,EAC9C,2CAA4CC,EAC5C,4CAA6Cf,EAAMmC,UACnD,0CAA2CnC,EAAMoC,QACjD,6CAA8CxB,EAASyB,WAE3DA,SAAUrC,EAAMqC,SAChBvC,WAAYE,EAAMF,WAClBwC,QAASjB,EACTkB,UAAYzB,EAAmC,KAAxBd,EAAMwC,gBAC7BzC,gBAAiBC,EAAMD,iBAErBC,EAAMF,WAOJI,EAACuC,EAAAA,MACK1B,GAAYH,EAAS8B,MAAQxC,EAACyC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASM,OACzHhB,EAAC4C,QAAAA,CACGC,MAAO3B,EACP4B,oBAAkB,OAClBC,gBAAejD,EAAMkD,aACrBC,gBAAepC,EACfqC,YAAWpD,EAAMkD,aACjBG,aAAa,MACbpB,UAAU,+BACVqB,QAAStD,EAAMsD,QACfvB,QAASD,EACT1B,IAAKJ,EAAM0B,eACX6B,KAAK,WACLC,wBAAuBxB,EACvBvB,KAAK,OACLgD,SAAUzD,EAAMc,SAChBR,GAAIN,EAAMM,GACVC,mBAAkBP,EAAMQ,mBAE1BO,GAAYH,EAAS8C,eACnBxD,EAACyD,OAAAA,CAAK1B,UAAU,oDAAoDrB,EAAS8C,gBA3BrFxD,EAACuC,OACI7B,EAAS8B,MAAQxC,EAACyC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASM,OAC5GhB,EAACyD,OAAAA,CAAK1B,UAAU,0CAA0CjB,GACzDJ,EAAS8C,eAAiBxD,EAACyD,OAAAA,CAAK1B,UAAU,oDAAoDrB,EAAS8C,gBA8B5H"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n    if (filterable) {\n        // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element\n        const { id, ...strippedProps } = props;\n        return <div {...strippedProps} ref={toggleButtonRef} />;\n    }\n\n    return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n    const { active, selected, inputText, readonly, showList } = props;\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    const displayInputText = showList ? inputText : displayText;\n\n    const setFocus = (e: Event) => {\n        e.preventDefault();\n        if (document.activeElement === props.filterInputRef.current) {\n            if (!props.showList) {\n                props.toggleList(e);\n            }\n        } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n    };\n\n    // 1. If readonly we ignore the click action\n    // 2. If filterable we want to show the list and focus on the input\n    // 3. Otherwise we just toggle the list\n    const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n    const onFocusHandler = readonly ? null : props.onFocus;\n\n    // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n    const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n            // Only for some dropdowns e.g. the one found in installments when it is just in the form of a single dropdown, do we want to add an id that links to a label's for attr\n            // If we allow an id to be added to the buttons in CtPCardsList, for example, unit tests start failing because it seems a button with an id no longer has a name property that can be used\n            // as a qualifier in findByRole\n            {...(props.allowIdOnButton && props.id && { id: props.id })}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span className=\"adyen-checkout__dropdown__button__text\">{displayText}</span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className=\"adyen-checkout__filter-input\"\n                        onInput={props.onInput}\n                        onFocus={onFocusHandler}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={currentSelectedItemId}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","_param","filterable","toggleButtonRef","props","_object_without_properties","strippedProps","id","h","div","ref","button","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","displayText","selectedOptionName","name","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","allowIdOnButton","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"61CAKA,SAASA,EAAoBC,GAAA,IAAAC,WAAEA,EAAUC,gBAAEA,GAAdF,EAAkCG,EAAlCC,EAAAJ,EAAA,CAAEC,aAAYC,oBACvC,GAAID,EAAY,CAEZ,MAAeI,EAAkBF,EAAAA,EAAAA,CAAzBG,OACR,OAAOC,EAACC,MAAQH,EAAAA,EAAAA,CAAAA,EAAAA,GAAAA,CAAeI,IAAKP,IACxC,CAEA,OAAOK,EAACG,SAAAA,EAAAA,EAAAA,CAAOJ,GAAIH,EAAMG,GAAIK,mBAAkBR,EAAMS,gBAAiBC,KAAM,UAAcV,GAAAA,CAAOM,IAAKP,IAC1G,CAEA,SAASY,EAAaX,GAClB,MAAMY,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAahB,EAGtDiB,EAAcJ,EAASK,oBAAsBL,EAASM,MAAQnB,EAAMoB,aAAe,GAInFC,EAAmBL,EAAWF,EAAYG,EAc1CK,EAAiBP,EAAW,KAAOf,EAAMF,WAZ7ByB,IACdA,EAAEC,iBACEC,SAASC,gBAAkB1B,EAAM2B,eAAeC,QAC3C5B,EAAMgB,UACPhB,EAAM6B,WAAWN,GAEdvB,EAAM2B,eAAeC,SAAS5B,EAAM2B,eAAeC,QAAQE,OAAK,EAMR9B,EAAM6B,WAEvEE,EAAiBhB,EAAW,KAAOf,EAAMgC,QAGzCC,EAAwBrB,EAAOT,GAAK,YAAYS,EAAOT,KAAO,GAEpE,OACIC,EAACR,EAAAA,EAAAA,CACGsC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CpB,EAC9C,2CAA4CC,EAC5C,4CAA6ChB,EAAMoC,UACnD,0CAA2CpC,EAAMqC,QACjD,6CAA8CxB,EAASyB,WAE3DA,SAAUtC,EAAMsC,SAChBxC,WAAYE,EAAMF,WAClByC,QAASjB,EACTkB,UAAYzB,EAAmC,KAAxBf,EAAMyC,gBAC7B1C,gBAAiBC,EAAMD,iBAIlBC,EAAM0C,iBAAmB1C,EAAMG,IAAM,CAAEA,GAAIH,EAAMG,KAEpDH,EAAMF,WAOJM,EAACuC,EAAAA,MACK3B,GAAYH,EAAS+B,MAAQxC,EAACyC,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKjC,EAAS+B,KAAMG,IAAKlC,EAASM,OACzHf,EAAC4C,QAAAA,CACGC,MAAO5B,EACP6B,oBAAkB,OAClBC,gBAAenD,EAAMoD,aACrBC,gBAAerC,EACfsC,YAAWtD,EAAMoD,aACjBG,aAAa,MACbrB,UAAU,+BACVsB,QAASxD,EAAMwD,QACfxB,QAASD,EACTzB,IAAKN,EAAM2B,eACX8B,KAAK,WACLC,wBAAuBzB,EACvBvB,KAAK,OACLiD,SAAU3D,EAAMe,SAChBZ,GAAIH,EAAMG,GACVK,mBAAkBR,EAAMS,mBAE1BO,GAAYH,EAAS+C,eACnBxD,EAACyD,OAAAA,CAAK3B,UAAU,oDAAoDrB,EAAS+C,gBA3BrFxD,EAACuC,EACI9B,KAAAA,EAAS+B,MAAQxC,EAACyC,EAAAA,CAAIX,UAAU,yCAAyCY,IAAKjC,EAAS+B,KAAMG,IAAKlC,EAASM,OAC5Gf,EAACyD,OAAAA,CAAK3B,UAAU,0CAA0CjB,GACzDJ,EAAS+C,eAAiBxD,EAACyD,OAAAA,CAAK3B,UAAU,oDAAoDrB,EAAS+C,gBA8B5H"}

package/dist/es-legacy/components/internal/IbanInput/IbanInput.js

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

package/dist/es-legacy/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","_object_spread_props","_object_spread","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","_object_spread_props","_object_spread","setValid","inputValue","electronicFormatIban","electronicFormat","formatIban","countryCode","getCountryCode","cursor","selectionStart","previousIban","newCursorPosition","getNextCursorPosition","setSelectionRange","currentIban","defaultProps"],"mappings":"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"}

package/dist/es-legacy/components/internal/Img/Img.js

@@ -1,2 +1,2 @@
-import{useState as e,useRef as t,useEffect as r}from"../../../external/preact/hooks/dist/hooks.js";import n from"../../../external/classnames/index.js";import{createElement as o}from"../../../external/preact/dist/preact.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}function s(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function i(c){const{backgroundUrl:i="",className:l="",classNameModifiers:u=[],src:f="",alt:p="",showOnError:b=!1}=c,[m,O]=e(!1),y=t(null),d=()=>{O(!0)},g=n([l],"adyen-checkout__image",{"adyen-checkout__image--loaded":m},...u.map((e=>`adyen-checkout__image--${e}`)));return r((()=>{const e=i?new Image:y.current;e.src=i||f,e.onload=d,O(!!e.complete)}),[]),i?o("div",s(a({"data-testid":"background",style:{backgroundUrl:i}},c),{className:g})):o("img",s(a({},c),{alt:p,ref:y,className:g,onError:()=>{O(b)}}))}export{i as default};
+import{useState as e,useRef as t,useEffect as r}from"../../../external/preact/hooks/dist/hooks.js";import n from"../../../external/classnames/index.js";import{createElement as o}from"../../../external/preact/dist/preact.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}function s(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function i(c){const{backgroundUrl:i="",className:l="",classNameModifiers:u=[],src:f="",alt:p="",showOnError:b=!1}=c,[m,O]=e(!1),y=t(null),d=()=>{O(!0)},g=n([l],"adyen-checkout__image",{"adyen-checkout__image--loaded":m},...u.map((e=>`adyen-checkout__image--${e}`)));return r((()=>{const e=i?new Image:y.current;e.src=i||f,e.onload=d,O(!!e.complete)}),[]),i?o("div",s(a({"data-testid":"background",style:{backgroundUrl:i}},c),{className:g})):o("img",s(a({},c),{alt:p,ref:y,className:g,onError:()=>{O(b)}}))}export{i as default};
 //# sourceMappingURL=Img.js.map

package/dist/es-legacy/components/internal/Img/Img.js.map

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

package/dist/es-legacy/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"./IssuerButton.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const s=({items:s=[],selectedIssuerId:i,onChange:a})=>{const{i18n:u}=o(),l=t((e=>{const t=e.currentTarget.value;Object.defineProperty(e.target,"value",{value:t}),a(e)}),[a]);return e("div",{className:"adyen-checkout__issuer-button-group",role:"group","aria-label":u.get("issuerList.selectField.contextualText")},s.map((t=>e(r,c(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({key:t.id},t),{selected:i===t.id,onClick:l})))))};export{s as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useCallback as t}from"../../../../external/preact/hooks/dist/hooks.js";import r from"./IssuerButton.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const s=({items:s=[],selectedIssuerId:i,onChange:a})=>{const{i18n:u}=o(),l=t((e=>{const t=e.currentTarget.value;Object.defineProperty(e.target,"value",{value:t}),a(e)}),[a]);return e("div",{className:"adyen-checkout__issuer-button-group",role:"group","aria-label":u.get("issuerList.selectField.contextualText")},s.map((t=>e(r,c(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({key:t.id},t),{selected:i===t.id,onClick:l})))))};export{s as default};
 //# sourceMappingURL=IssuerButtonGroup.js.map

package/dist/es-legacy/components/internal/IssuerList/IssuerButtonGroup/IssuerButtonGroup.js.map

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

package/dist/es-legacy/components/internal/OpenInvoice/OpenInvoice.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as r,useState as s,useEffect as t}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import n from"../CompanyDetails/CompanyDetails.js";import i from"../PersonalDetails/PersonalDetails.js";import a from"../Address/Address.js";import l from"../FormFields/Checkbox/Checkbox.js";import d from"../FormFields/ConsentCheckbox/ConsentCheckbox.js";import{getInitialActiveFieldsets as c,fieldsetsSchema as u,getActiveFieldsData as b}from"./utils.js";import p from"../IbanInput/IbanInput.js";import m from"../FormFields/Field/Field.js";import y from"../FormInstruction/FormInstruction.js";import f from"./useSRPanelForOpenInvoiceErrors.js";function v(e,r,s){return r in e?Object.defineProperty(e,r,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[r]=s,e}function h(e){for(var r=1;r<arguments.length;r++){var s=null!=arguments[r]?arguments[r]:{},t=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(s).filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable})))),t.forEach((function(r){v(e,r,s[r])}))}return e}function C(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e,r){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);s.push.apply(s,t)}return s}(Object(r)).forEach((function(s){Object.defineProperty(e,s,Object.getOwnPropertyDescriptor(r,s))})),e}const g={isValid:!1,errorMessage:"consent.checkbox.invalid",error:"consent.checkbox.invalid"};function A(v){var A,k;const{countryCode:j,visibility:D}=v,{i18n:O}=o(),x=r({});var w;Object.keys(x.current).length||(null===(w=v.setComponentRef)||void 0===w||w.call(v,x.current));const F=r(!1),P=c(D,v.data),[S,R]=s(P),{current:E}=r(u.reduce(((e,r)=>(e[r]=e=>{E[r].current=e},e)),{})),I=!!v.consentCheckboxLabel,q=!I&&Object.keys(S).every((e=>!S[e])),V="editable"===D.deliveryAddress&&"hidden"!==D.billingAddress,[M,N]=s(h({},v.data,I&&{consentCheckbox:!1})),[L,B]=s({}),[_,z]=s({}),[G,H]=s("ready");x.current.showValidation=()=>{F.current=!0,u.forEach((e=>{E[e].current&&E[e].current.showValidation()})),B(h({},I&&{consentCheckbox:M.consentCheckbox?null:g}))},x.current.setStatus=H,f({errors:L,data:M,props:v,isValidating:F}),t((()=>{const e=Object.keys(S).every((e=>!S[e]||!!_[e])),r=!I||!!_.consentCheckbox,s=e&&r,t=b(S,M);v.onChange({data:t,errors:L,valid:_,isValid:s})}),[M,S]);const J=e=>r=>{N((s=>C(h({},s),{[e]:r.data}))),z((s=>C(h({},s),{[e]:r.isValid}))),B((s=>C(h({},s),{[e]:r.errors})))};var K,Q;return e("div",{className:"adyen-checkout__open-invoice"},e(y,null),S.companyDetails&&e(n,{data:v.data.companyDetails,label:"companyDetails",onChange:J("companyDetails"),setComponentRef:E.companyDetails,visibility:D.companyDetails}),S.personalDetails&&e(i,{data:v.data.personalDetails,requiredFields:v.personalDetailsRequiredFields,label:"personalDetails",onChange:J("personalDetails"),setComponentRef:E.personalDetails,visibility:D.personalDetails}),S.bankAccount&&e(p,{holderName:!0,label:"ach.bankAccount",data:M.bankAccount,onChange:J("bankAccount"),ref:E.bankAccount}),S.billingAddress&&e(a,{allowedCountries:null!==(K=null==v||null===(A=v.billingAddressSpecification)||void 0===A?void 0:A.allowedCountries)&&void 0!==K?K:v.allowedCountries,countryCode:j,requiredFields:v.billingAddressRequiredFields,specifications:v.billingAddressSpecification,data:M.billingAddress,label:"billingAddress",onChange:J("billingAddress"),setComponentRef:E.billingAddress,visibility:D.billingAddress}),V&&e(m,{classNameModifiers:["separateDeliveryAddress","consentCheckbox"],name:"separateDeliveryAddress",useLabelElement:!1,showErrorElement:!1},e(l,{label:O.get("separateDeliveryAddress"),checked:S.deliveryAddress,classNameModifiers:["separateDeliveryAddress"],name:"separateDeliveryAddress",onChange:()=>{R((e=>C(h({},e),{deliveryAddress:!S.deliveryAddress})))}})),S.deliveryAddress&&e(a,{allowedCountries:null!==(Q=null==v||null===(k=v.deliveryAddressSpecification)||void 0===k?void 0:k.allowedCountries)&&void 0!==Q?Q:v.allowedCountries,countryCode:j,requiredFields:v.deliveryAddressRequiredFields,specifications:v.deliveryAddressSpecification,data:M.deliveryAddress,label:"deliveryAddress",onChange:J("deliveryAddress"),setComponentRef:E.deliveryAddress,visibility:D.deliveryAddress}),I&&e(d,{data:M,errorMessage:!!L.consentCheckbox,label:v.consentCheckboxLabel,onChange:e=>{const{checked:r}=e.target;N((e=>C(h({},e),{consentCheckbox:r}))),z((e=>C(h({},e),{consentCheckbox:r}))),B((e=>h({},e,{consentCheckbox:r?null:g})))},i18n:O}),v.showPayButton&&v.payButton({status:G,classNameModifiers:[...q?["standalone"]:[]],label:O.get("confirmPurchase")}))}export{A as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as r,useState as s,useEffect as t}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import n from"../CompanyDetails/CompanyDetails.js";import i from"../PersonalDetails/PersonalDetails.js";import a from"../Address/Address.js";import l from"../FormFields/Checkbox/Checkbox.js";import d from"../FormFields/ConsentCheckbox/ConsentCheckbox.js";import{getInitialActiveFieldsets as c,fieldsetsSchema as u,getActiveFieldsData as b}from"./utils.js";import p from"../IbanInput/IbanInput.js";import m from"../FormFields/Field/Field.js";import y from"../FormInstruction/FormInstruction.js";import f from"./useSRPanelForOpenInvoiceErrors.js";function v(e,r,s){return r in e?Object.defineProperty(e,r,{value:s,enumerable:!0,configurable:!0,writable:!0}):e[r]=s,e}function h(e){for(var r=1;r<arguments.length;r++){var s=null!=arguments[r]?arguments[r]:{},t=Object.keys(s);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(s).filter((function(e){return Object.getOwnPropertyDescriptor(s,e).enumerable})))),t.forEach((function(r){v(e,r,s[r])}))}return e}function C(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);r.push.apply(r,s)}return r}(Object(r)).forEach((function(s){Object.defineProperty(e,s,Object.getOwnPropertyDescriptor(r,s))})),e}const g={isValid:!1,errorMessage:"consent.checkbox.invalid",error:"consent.checkbox.invalid"};function A(v){var A,k;const{countryCode:j,visibility:D}=v,{i18n:O}=o(),x=r({});var w;Object.keys(x.current).length||(null===(w=v.setComponentRef)||void 0===w||w.call(v,x.current));const F=r(!1),P=c(D,v.data),[S,R]=s(P),{current:E}=r(u.reduce(((e,r)=>(e[r]=e=>{E[r].current=e},e)),{})),I=!!v.consentCheckboxLabel,q=!I&&Object.keys(S).every((e=>!S[e])),V="editable"===D.deliveryAddress&&"hidden"!==D.billingAddress,[M,N]=s(h({},v.data,I&&{consentCheckbox:!1})),[L,B]=s({}),[_,z]=s({}),[G,H]=s("ready");x.current.showValidation=()=>{F.current=!0,u.forEach((e=>{E[e].current&&E[e].current.showValidation()})),B(h({},I&&{consentCheckbox:M.consentCheckbox?null:g}))},x.current.setStatus=H,f({errors:L,data:M,props:v,isValidating:F}),t((()=>{const e=Object.keys(S).every((e=>!S[e]||!!_[e])),r=!I||!!_.consentCheckbox,s=e&&r,t=b(S,M);v.onChange({data:t,errors:L,valid:_,isValid:s})}),[M,S]);const J=e=>r=>{N((s=>C(h({},s),{[e]:r.data}))),z((s=>C(h({},s),{[e]:r.isValid}))),B((s=>C(h({},s),{[e]:r.errors})))};var K,Q;return e("div",{className:"adyen-checkout__open-invoice"},e(y,null),S.companyDetails&&e(n,{data:v.data.companyDetails,label:"companyDetails",onChange:J("companyDetails"),setComponentRef:E.companyDetails,visibility:D.companyDetails}),S.personalDetails&&e(i,{data:v.data.personalDetails,requiredFields:v.personalDetailsRequiredFields,label:"personalDetails",onChange:J("personalDetails"),setComponentRef:E.personalDetails,visibility:D.personalDetails}),S.bankAccount&&e(p,{holderName:!0,label:"ach.bankAccount",data:M.bankAccount,onChange:J("bankAccount"),ref:E.bankAccount}),S.billingAddress&&e(a,{allowedCountries:null!==(K=null==v||null===(A=v.billingAddressSpecification)||void 0===A?void 0:A.allowedCountries)&&void 0!==K?K:v.allowedCountries,countryCode:j,requiredFields:v.billingAddressRequiredFields,specifications:v.billingAddressSpecification,data:M.billingAddress,label:"billingAddress",onChange:J("billingAddress"),setComponentRef:E.billingAddress,visibility:D.billingAddress}),V&&e(m,{classNameModifiers:["separateDeliveryAddress","consentCheckbox"],name:"separateDeliveryAddress",useLabelElement:!1,showErrorElement:!1},e(l,{label:O.get("separateDeliveryAddress"),checked:S.deliveryAddress,classNameModifiers:["separateDeliveryAddress"],name:"separateDeliveryAddress",onChange:()=>{R((e=>C(h({},e),{deliveryAddress:!S.deliveryAddress})))}})),S.deliveryAddress&&e(a,{allowedCountries:null!==(Q=null==v||null===(k=v.deliveryAddressSpecification)||void 0===k?void 0:k.allowedCountries)&&void 0!==Q?Q:v.allowedCountries,countryCode:j,requiredFields:v.deliveryAddressRequiredFields,specifications:v.deliveryAddressSpecification,data:M.deliveryAddress,label:"deliveryAddress",onChange:J("deliveryAddress"),setComponentRef:E.deliveryAddress,visibility:D.deliveryAddress}),I&&e(d,{data:M,errorMessage:!!L.consentCheckbox,label:v.consentCheckboxLabel,onChange:e=>{const{checked:r}=e.target;N((e=>C(h({},e),{consentCheckbox:r}))),z((e=>C(h({},e),{consentCheckbox:r}))),B((e=>h({},e,{consentCheckbox:r?null:g})))},i18n:O}),v.showPayButton&&v.payButton({status:G,classNameModifiers:[...q?["standalone"]:[]],label:O.get("confirmPurchase")}))}export{A as default};
 //# sourceMappingURL=OpenInvoice.js.map

package/dist/es-legacy/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","_object_spread","consentCheckbox","errors","setErrors","valid","setValid","status","setStatus","showValidation","forEach","useSRPanelForOpenInvoiceErrors","useEffect","fieldsetsAreValid","consentCheckboxValid","newData","getActiveFieldsData","onChange","handleFieldset","state","prevData","_object_spread_props","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","_object_spread","consentCheckbox","errors","setErrors","valid","setValid","status","setStatus","showValidation","forEach","useSRPanelForOpenInvoiceErrors","useEffect","fieldsetsAreValid","consentCheckboxValid","newData","getActiveFieldsData","onChange","handleFieldset","state","prevData","_object_spread_props","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-legacy/components/internal/PayButton/PayButton.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import t from"../Button/Button.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import{payAmountLabel as n,secondaryAmountLabel as o}from"./utils.js";import c from"./components/SecondaryButtonLabel.js";function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function i(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const s=s=>{var{amount:u,secondaryAmount:b,classNameModifiers:f=[],label:p}=s,O=i(s,["amount","secondaryAmount","classNameModifiers","label"]);const{i18n:y}=r(),m=u&&{}.hasOwnProperty.call(u,"value")&&0===u.value,j=m?y.get("confirmPreauthorization"):n(y,u),d=!m&&!p&&u&&b&&Object.keys(b).length?o(y,b):null;return e(t,l(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}({},O),{disabled:O.disabled||"loading"===O.status,classNameModifiers:[...f,"pay"],label:p||j}),d&&e(c,{label:d}))};export{s as default,n as payAmountLabel};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import t from"../Button/Button.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import{payAmountLabel as n,secondaryAmountLabel as o}from"./utils.js";import c from"./components/SecondaryButtonLabel.js";function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function i(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const s=s=>{var{amount:u,secondaryAmount:b,classNameModifiers:f=[],label:p}=s,O=i(s,["amount","secondaryAmount","classNameModifiers","label"]);const{i18n:y}=r(),m=u&&{}.hasOwnProperty.call(u,"value")&&0===u.value,j=m?y.get("confirmPreauthorization"):n(y,u),d=!m&&!p&&u&&b&&Object.keys(b).length?o(y,b):null;return e(t,l(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){a(e,t,r[t])}))}return e}({},O),{disabled:O.disabled||"loading"===O.status,classNameModifiers:[...f,"pay"],label:p||j}),d&&e(c,{label:d}))};export{s as default,n as payAmountLabel};
 //# sourceMappingURL=PayButton.js.map

package/dist/es-legacy/components/internal/PayButton/PayButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayButton.js","sources":["../../../../../src/components/internal/PayButton/PayButton.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ButtonProps } from '../Button/types';\nimport { payAmountLabel, secondaryAmountLabel } from './utils';\nimport { PaymentAmountExtended } from '../../../types/global-types';\nimport SecondaryButtonLabel from './components/SecondaryButtonLabel';\n\nexport interface PayButtonProps extends ButtonProps {\n    /**\n     * Class name modifiers will be used as: `adyen-checkout__image--${modifier}`\n     */\n    classNameModifiers?: string[];\n    label?: string;\n    amount: PaymentAmountExtended;\n    secondaryAmount?: PaymentAmountExtended;\n    status?: string;\n    disabled?: boolean;\n    icon?: string;\n    onClick?(): void;\n}\n\nconst PayButton = ({ amount, secondaryAmount, classNameModifiers = [], label, ...props }: PayButtonProps) => {\n    const { i18n } = useCoreContext();\n    const isZeroAuth = amount && {}.hasOwnProperty.call(amount, 'value') && amount.value === 0;\n    const defaultLabel = isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount);\n\n    /**\n     * Show the secondaryLabel if:\n     *  - it's not zero auth, and\n     *  - we don't have a predefined label (i.e. redirect, qrcode, await based comps...), and\n     *  - we do have an amount object (merchant might not be passing this in order to not show the amount on the button), and\n     *  - we have a secondaryAmount object with some properties\n     */\n    const secondaryLabel =\n        !isZeroAuth && !label && amount && secondaryAmount && Object.keys(secondaryAmount).length\n            ? secondaryAmountLabel(i18n, secondaryAmount)\n            : null;\n\n    return (\n        <Button\n            {...props}\n            disabled={props.disabled || props.status === 'loading'}\n            classNameModifiers={[...classNameModifiers, 'pay']}\n            label={label || defaultLabel}\n        >\n            {secondaryLabel && <SecondaryButtonLabel label={secondaryLabel} />}\n        </Button>\n    );\n};\n\nexport default PayButton;\nexport { payAmountLabel };\n"],"names":["PayButton","_param","amount","secondaryAmount","classNameModifiers","label","props","i18n","useCoreContext","isZeroAuth","hasOwnProperty","call","value","defaultLabel","get","payAmountLabel","secondaryLabel","Object","keys","length","secondaryAmountLabel","h","Button","disabled","status","SecondaryButtonLabel"],"mappings":"yoCAsBA,MAAMA,EAAYC,QAACC,OAAEA,EAAMC,gBAAEA,EAAeC,mBAAEA,EAAqB,GAAEC,MAAEA,GAAUC,EAAAA,EAAAA,EAAAA,EAAAA,CAA5DJ,SAAQC,kBAAiBC,qBAAyBC,UACnE,MAAME,KAAEA,GAASC,IACXC,EAAaP,GAAU,CAAC,EAAEQ,eAAeC,KAAKT,EAAQ,UAA6B,IAAjBA,EAAOU,MACzEC,EAAeJ,EAAaF,EAAKO,IAAI,2BAA6BC,EAAeR,EAAML,GASvFc,GACDP,IAAeJ,GAASH,GAAUC,GAAmBc,OAAOC,KAAKf,GAAiBgB,OAC7EC,EAAqBb,EAAMJ,GAC3B,KAEV,OACIkB,EAACC,EACOhB,wUAAAA,CAAAA,CAAAA,EAAAA,GAAAA,CACJiB,SAAUjB,EAAMiB,UAA6B,YAAjBjB,EAAMkB,OAClCpB,mBAAoB,IAAIA,EAAoB,OAC5CC,MAAOA,GAASQ,IAEfG,GAAkBK,EAACI,EAAAA,CAAqBpB,MAAOW"}
+{"version":3,"file":"PayButton.js","sources":["../../../../../src/components/internal/PayButton/PayButton.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ButtonProps } from '../Button/types';\nimport { payAmountLabel, secondaryAmountLabel } from './utils';\nimport { PaymentAmountExtended } from '../../../types/global-types';\nimport SecondaryButtonLabel from './components/SecondaryButtonLabel';\n\nexport interface PayButtonProps extends ButtonProps {\n    /**\n     * Class name modifiers will be used as: `adyen-checkout__image--${modifier}`\n     */\n    classNameModifiers?: string[];\n    label?: string;\n    amount: PaymentAmountExtended;\n    secondaryAmount?: PaymentAmountExtended;\n    status?: string;\n    disabled?: boolean;\n    icon?: string;\n    onClick?(): void;\n}\n\nconst PayButton = ({ amount, secondaryAmount, classNameModifiers = [], label, ...props }: PayButtonProps) => {\n    const { i18n } = useCoreContext();\n    const isZeroAuth = amount && {}.hasOwnProperty.call(amount, 'value') && amount.value === 0;\n    const defaultLabel = isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount);\n\n    /**\n     * Show the secondaryLabel if:\n     *  - it's not zero auth, and\n     *  - we don't have a predefined label (i.e. redirect, qrcode, await based comps...), and\n     *  - we do have an amount object (merchant might not be passing this in order to not show the amount on the button), and\n     *  - we have a secondaryAmount object with some properties\n     */\n    const secondaryLabel =\n        !isZeroAuth && !label && amount && secondaryAmount && Object.keys(secondaryAmount).length\n            ? secondaryAmountLabel(i18n, secondaryAmount)\n            : null;\n\n    return (\n        <Button\n            {...props}\n            disabled={props.disabled || props.status === 'loading'}\n            classNameModifiers={[...classNameModifiers, 'pay']}\n            label={label || defaultLabel}\n        >\n            {secondaryLabel && <SecondaryButtonLabel label={secondaryLabel} />}\n        </Button>\n    );\n};\n\nexport default PayButton;\nexport { payAmountLabel };\n"],"names":["PayButton","_param","amount","secondaryAmount","classNameModifiers","label","props","i18n","useCoreContext","isZeroAuth","hasOwnProperty","call","value","defaultLabel","get","payAmountLabel","secondaryLabel","Object","keys","length","secondaryAmountLabel","h","Button","disabled","status","SecondaryButtonLabel"],"mappings":"uoCAsBA,MAAMA,EAAYC,QAACC,OAAEA,EAAMC,gBAAEA,EAAeC,mBAAEA,EAAqB,GAAEC,MAAEA,GAAUC,EAAAA,EAAAA,EAAAA,EAAAA,CAA5DJ,SAAQC,kBAAiBC,qBAAyBC,UACnE,MAAME,KAAEA,GAASC,IACXC,EAAaP,GAAU,CAAC,EAAEQ,eAAeC,KAAKT,EAAQ,UAA6B,IAAjBA,EAAOU,MACzEC,EAAeJ,EAAaF,EAAKO,IAAI,2BAA6BC,EAAeR,EAAML,GASvFc,GACDP,IAAeJ,GAASH,GAAUC,GAAmBc,OAAOC,KAAKf,GAAiBgB,OAC7EC,EAAqBb,EAAMJ,GAC3B,KAEV,OACIkB,EAACC,EACOhB,wUAAAA,CAAAA,CAAAA,EAAAA,GAAAA,CACJiB,SAAUjB,EAAMiB,UAA6B,YAAjBjB,EAAMkB,OAClCpB,mBAAoB,IAAIA,EAAoB,OAC5CC,MAAOA,GAASQ,IAEfG,GAAkBK,EAACI,EAAAA,CAAqBpB,MAAOW"}

package/dist/es-legacy/components/internal/PersonalDetails/PersonalDetails.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as r}from"../../../external/preact/dist/preact.js";import{useRef as t,useMemo as a,useEffect as l}from"../../../external/preact/hooks/dist/hooks.js";import s from"../FormFields/Fieldset/Fieldset.js";import i from"../FormFields/Field/Field.js";import o from"./ReadOnlyPersonalDetails.js";import{personalDetailsValidationRules as n}from"./validate.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import{checkDateInputSupport as p}from"../FormFields/InputDate/utils.js";import{getFormattedData as u}from"./utils.js";import d from"../../../utils/useForm/useForm.js";import c from"../FormFields/InputText.js";import f from"../FormFields/RadioGroup/RadioGroup.js";import h from"../FormFields/InputDate/InputDate.js";import b from"../FormFields/InputEmail.js";import g from"../FormFields/InputTelephone.js";import{getErrorMessage as N}from"../../../utils/getErrorMessage.js";function O(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){O(e,r,t[r])}))}return e}function F(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t.push.apply(t,a)}return t}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const y=["firstName","lastName","gender","dateOfBirth","shopperEmail","telephoneNumber"];function M(O){const{label:y="",namePrefix:M,placeholders:v,requiredFields:E,visibility:B}=O,{i18n:P}=m(),I=t({});var w;Object.keys(I.current).length||(null===(w=O.setComponentRef)||void 0===w||w.call(O,I.current));const D=a(p,[]),{handleChangeFor:C,triggerValidation:q,data:k,valid:R,errors:x,isValid:S}=d({schema:E,rules:j({},n,O.validationRules),defaultData:O.data});I.current.showValidation=()=>{q()};const V=e=>r=>{const{name:t}=r.target,a=t.split(`${M}.`).pop();C(a,e)(r)},$=e=>`${M?`${M}.`:""}${e}`;return l((()=>{const e=u(k);O.onChange({data:e,valid:R,errors:x,isValid:S})}),[k,R,x,S]),"hidden"===B?null:"readOnly"===B?e(o,F(j({},O),{data:k})):e(r,null,e(s,{classNameModifiers:["personalDetails"],label:y},E.includes("firstName")&&e(i,{label:P.get("firstName"),classNameModifiers:["col-50","firstName"],errorMessage:N(P,x.firstName,P.get("firstName")),name:"firstName",i18n:P},e(c,{name:$("firstName"),value:k.firstName,classNameModifiers:["firstName"],onInput:V("input"),onBlur:V("blur"),placeholder:v.firstName,spellCheck:!1,required:!0})),E.includes("lastName")&&e(i,{label:P.get("lastName"),classNameModifiers:["col-50","lastName"],errorMessage:N(P,x.lastName,P.get("lastName")),name:"lastName",i18n:P},e(c,{name:$("lastName"),value:k.lastName,classNameModifiers:["lastName"],onInput:V("input"),onBlur:V("blur"),placeholder:v.lastName,spellCheck:!1,required:!0})),E.includes("gender")&&e(i,{errorMessage:N(P,x.gender),classNameModifiers:["gender"],name:"gender",useLabelElement:!1},e(f,{name:$("gender"),value:k.gender,items:[{id:"MALE",name:"male"},{id:"FEMALE",name:"female"}],classNameModifiers:["gender"],onInput:V("input"),onChange:V("blur"),required:!0})),E.includes("dateOfBirth")&&e(i,{label:P.get("dateOfBirth"),classNameModifiers:["col-50","dateOfBirth"],errorMessage:N(P,x.dateOfBirth,P.get("dateOfBirth")),helper:D?null:P.get("dateOfBirth.format"),name:"dateOfBirth",i18n:P},e(h,{name:$("dateOfBirth"),value:k.dateOfBirth,classNameModifiers:["dateOfBirth"],onInput:V("input"),onBlur:V("blur"),placeholder:v.dateOfBirth,required:!0})),E.includes("shopperEmail")&&e(i,{label:P.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:N(P,x.shopperEmail,P.get("shopperEmail")),dir:"ltr",name:"emailAddress",i18n:P},e(b,{name:$("shopperEmail"),value:k.shopperEmail,classNameModifiers:["shopperEmail"],onInput:V("input"),onBlur:V("blur"),placeholder:v.shopperEmail,required:!0})),E.includes("telephoneNumber")&&e(i,{label:P.get("telephoneNumber"),classNameModifiers:["telephoneNumber"],errorMessage:N(P,x.telephoneNumber,P.get("telephoneNumber")),dir:"ltr",name:"telephoneNumber",i18n:P},e(g,{name:$("telephoneNumber"),value:k.telephoneNumber,classNameModifiers:["telephoneNumber"],onInput:V("input"),onBlur:V("blur"),placeholder:v.telephoneNumber,required:!0}))))}M.defaultProps={data:{},onChange:()=>{},placeholders:{},requiredFields:y,validationRules:n,visibility:"editable"};export{y as PERSONAL_DETAILS_SCHEMA,M as default};
+import{createElement as e,Fragment as r}from"../../../external/preact/dist/preact.js";import{useRef as t,useMemo as a,useEffect as l}from"../../../external/preact/hooks/dist/hooks.js";import s from"../FormFields/Fieldset/Fieldset.js";import i from"../FormFields/Field/Field.js";import o from"./ReadOnlyPersonalDetails.js";import{personalDetailsValidationRules as n}from"./validate.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import{checkDateInputSupport as p}from"../FormFields/InputDate/utils.js";import{getFormattedData as u}from"./utils.js";import d from"../../../utils/useForm/useForm.js";import c from"../FormFields/InputText.js";import f from"../FormFields/RadioGroup/RadioGroup.js";import h from"../FormFields/InputDate/InputDate.js";import b from"../FormFields/InputEmail.js";import g from"../FormFields/InputTelephone.js";import{getErrorMessage as N}from"../../../utils/getErrorMessage.js";function O(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){O(e,r,t[r])}))}return e}function F(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const y=["firstName","lastName","gender","dateOfBirth","shopperEmail","telephoneNumber"];function M(O){const{label:y="",namePrefix:M,placeholders:v,requiredFields:E,visibility:B}=O,{i18n:P}=m(),I=t({});var w;Object.keys(I.current).length||(null===(w=O.setComponentRef)||void 0===w||w.call(O,I.current));const D=a(p,[]),{handleChangeFor:C,triggerValidation:q,data:k,valid:R,errors:x,isValid:S}=d({schema:E,rules:j({},n,O.validationRules),defaultData:O.data});I.current.showValidation=()=>{q()};const V=e=>r=>{const{name:t}=r.target,a=t.split(`${M}.`).pop();C(a,e)(r)},$=e=>`${M?`${M}.`:""}${e}`;return l((()=>{const e=u(k);O.onChange({data:e,valid:R,errors:x,isValid:S})}),[k,R,x,S]),"hidden"===B?null:"readOnly"===B?e(o,F(j({},O),{data:k})):e(r,null,e(s,{classNameModifiers:["personalDetails"],label:y},E.includes("firstName")&&e(i,{label:P.get("firstName"),classNameModifiers:["col-50","firstName"],errorMessage:N(P,x.firstName,P.get("firstName")),name:"firstName",i18n:P},e(c,{name:$("firstName"),value:k.firstName,classNameModifiers:["firstName"],onInput:V("input"),onBlur:V("blur"),placeholder:v.firstName,spellCheck:!1,required:!0})),E.includes("lastName")&&e(i,{label:P.get("lastName"),classNameModifiers:["col-50","lastName"],errorMessage:N(P,x.lastName,P.get("lastName")),name:"lastName",i18n:P},e(c,{name:$("lastName"),value:k.lastName,classNameModifiers:["lastName"],onInput:V("input"),onBlur:V("blur"),placeholder:v.lastName,spellCheck:!1,required:!0})),E.includes("gender")&&e(i,{errorMessage:N(P,x.gender),classNameModifiers:["gender"],name:"gender",useLabelElement:!1},e(f,{name:$("gender"),value:k.gender,items:[{id:"MALE",name:"male"},{id:"FEMALE",name:"female"}],classNameModifiers:["gender"],onInput:V("input"),onChange:V("blur"),required:!0})),E.includes("dateOfBirth")&&e(i,{label:P.get("dateOfBirth"),classNameModifiers:["col-50","dateOfBirth"],errorMessage:N(P,x.dateOfBirth,P.get("dateOfBirth")),helper:D?null:P.get("dateOfBirth.format"),name:"dateOfBirth",i18n:P},e(h,{name:$("dateOfBirth"),value:k.dateOfBirth,classNameModifiers:["dateOfBirth"],onInput:V("input"),onBlur:V("blur"),placeholder:v.dateOfBirth,required:!0})),E.includes("shopperEmail")&&e(i,{label:P.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:N(P,x.shopperEmail,P.get("shopperEmail")),dir:"ltr",name:"emailAddress",i18n:P},e(b,{name:$("shopperEmail"),value:k.shopperEmail,classNameModifiers:["shopperEmail"],onInput:V("input"),onBlur:V("blur"),placeholder:v.shopperEmail,required:!0})),E.includes("telephoneNumber")&&e(i,{label:P.get("telephoneNumber"),classNameModifiers:["telephoneNumber"],errorMessage:N(P,x.telephoneNumber,P.get("telephoneNumber")),dir:"ltr",name:"telephoneNumber",i18n:P},e(g,{name:$("telephoneNumber"),value:k.telephoneNumber,classNameModifiers:["telephoneNumber"],onInput:V("input"),onBlur:V("blur"),placeholder:v.telephoneNumber,required:!0}))))}M.defaultProps={data:{},onChange:()=>{},placeholders:{},requiredFields:y,validationRules:n,visibility:"editable"};export{y as PERSONAL_DETAILS_SCHEMA,M as default};
 //# sourceMappingURL=PersonalDetails.js.map