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

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

@@ -1 +1 @@
-{"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport classnames from 'classnames';\nimport checkPaymentStatus from '../../../core/Services/payment-status';\nimport processResponse from '../../../core/ProcessResponse';\n\nimport Spinner from '../../internal/Spinner';\nimport Countdown from '../Countdown';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { AwaitComponentProps, StatusObject } from './types';\nimport './Await.scss';\nimport AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';\nimport ContentSeparator from '../ContentSeparator';\nimport useImage from '../../../core/Context/useImage';\n\nfunction Await(props: AwaitComponentProps) {\n    const { i18n, loadingContext } = useCoreContext();\n    const getImage = useImage();\n    const [completed, setCompleted] = useState(false);\n    const [expired, setExpired] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [hasCalledActionHandled, setHasCalledActionHandled] = useState(false);\n    const [delay, setDelay] = useState(props.delay);\n    const [percentage, setPercentage] = useState(100);\n    const [timePassed, setTimePassed] = useState(0);\n    const [hasAdjustedTime, setHasAdjustedTime] = useState(false);\n    const [storedTimeout, setStoredTimeout] = useState(null);\n\n    const onTimeUp = (): void => {\n        setExpired(true);\n        clearTimeout(storedTimeout);\n        props.onError(new AdyenCheckoutError('ERROR', 'Payment Expired'));\n    };\n\n    const onTick = (time): void => {\n        setPercentage(time.percentage);\n    };\n\n    const onComplete = (status: StatusObject): void => {\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            setCompleted(true);\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send success response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Show error state & call merchant defined error callback if we do not have a payload\n        setExpired(true);\n        props.onError(new AdyenCheckoutError('ERROR', 'successful result, but no payload in response'));\n    };\n\n    const onError = (status: StatusObject): void => {\n        setExpired(true);\n\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send error response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Call merchant defined error callback if we do not have a payload\n        props.onError(new AdyenCheckoutError('ERROR', 'error result with no payload in response'));\n    };\n\n    const checkStatus = (): void => {\n        const { paymentData, clientKey, throttleInterval } = props;\n\n        if (!hasCalledActionHandled) {\n            props.onActionHandled({ componentType: props.type, actionDescription: 'polling-started' });\n            setHasCalledActionHandled(true);\n        }\n\n        void checkPaymentStatus(paymentData, clientKey, loadingContext, throttleInterval)\n            .then(processResponse)\n            .catch(({ message, ...response }) => ({\n                type: 'network-error',\n                props: {\n                    ...(message && { message: i18n.get(message) }),\n                    ...response\n                }\n            }))\n            .then((status: StatusObject) => {\n                switch (status.type) {\n                    case 'success':\n                        onComplete(status);\n                        break;\n\n                    case 'error':\n                        onError(status);\n                        break;\n\n                    default:\n                        setLoading(false);\n                }\n            });\n    };\n\n    const redirectToApp = (url): void => {\n        window.location.assign(url);\n    };\n\n    useEffect(() => {\n        checkStatus();\n        return (): void => {\n            clearTimeout(storedTimeout);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (expired) return clearTimeout(storedTimeout);\n\n        if (completed) return clearTimeout(storedTimeout);\n\n        if (!loading) {\n            // Retry until getting a complete response from the server OR it times out\n            // Changes setTimeout time to new value (throttleInterval) after a certain amount of time (throttleTime) has passed\n            const statusInterval = (): void => {\n                checkStatus();\n\n                const actualTimePassed = timePassed + delay;\n                // timePassed is the value that is the main \"engine\" that drives this useEffect/polling\n                setTimePassed(actualTimePassed);\n\n                if (actualTimePassed >= props.throttleTime && !hasAdjustedTime) {\n                    setDelay(props.throttleInterval);\n                    setHasAdjustedTime(true);\n                }\n            };\n\n            // Create (another) interval to poll for a result\n            setStoredTimeout(setTimeout(statusInterval, delay));\n        }\n    }, [loading, expired, completed, timePassed]);\n\n    const finalState = (image, message) => (\n        <div className=\"adyen-checkout__await adyen-checkout__await--result\">\n            <img\n                className=\"adyen-checkout__await__icon adyen-checkout__await__icon--result\"\n                src={getImage({ imageFolder: 'components/' })(image)}\n                alt={i18n.get(message)}\n            />\n            <div className=\"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result\">{i18n.get(message)}</div>\n        </div>\n    );\n\n    if (expired) {\n        return finalState('error', 'error.subtitle.payment');\n    }\n\n    if (completed) {\n        return finalState('success', 'creditCard.success');\n    }\n\n    if (loading) {\n        return (\n            <div className=\"adyen-checkout__await\">\n                {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n                <Spinner inline={false} size=\"large\" />\n            </div>\n        );\n    }\n\n    const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n    return (\n        <div\n            className={classnames(\n                'adyen-checkout__await',\n                `adyen-checkout__await--${props.type}`,\n                props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n            )}\n        >\n            {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n            <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>\n\n            <div className=\"adyen-checkout__await__indicator-holder\">\n                <div className=\"adyen-checkout__await__indicator-spinner\">\n                    <Spinner inline={false} size=\"medium\" />\n                </div>\n                <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n            </div>\n\n            {props.showCountdownTimer && (\n                <div className=\"adyen-checkout__await__countdown-holder\">\n                    <div className=\"adyen-checkout__await__progress\">\n                        <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n                    </div>\n\n                    <div className=\"adyen-checkout__await__countdown\">\n                        {timeToPayString[0]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{timeToPayString[1]}\n                    </div>\n                </div>\n            )}\n\n            {props.url && (\n                <div className=\"adyen-checkout__await__app-link\">\n                    <ContentSeparator />\n                    <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n                </div>\n            )}\n        </div>\n    );\n}\n\nAwait.defaultProps = {\n    countdownTime: 15,\n    onError: () => {},\n    onComplete: () => {},\n    onActionHandled: () => {},\n    delay: 2000,\n    throttleTime: 60000,\n    throttleInterval: 10000,\n    showCountdownTimer: true,\n    classNameModifiers: [],\n    url: null\n};\n\nexport default Await;\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","getImage","useImage","completed","setCompleted","useState","expired","setExpired","loading","setLoading","hasCalledActionHandled","setHasCalledActionHandled","delay","setDelay","percentage","setPercentage","timePassed","setTimePassed","hasAdjustedTime","setHasAdjustedTime","storedTimeout","setStoredTimeout","onComplete","status","payload","state","data","details","paymentData","this","onError","AdyenCheckoutError","checkStatus","clientKey","throttleInterval","onActionHandled","componentType","type","actionDescription","checkPaymentStatus","then","processResponse","catch","message","response","get","useEffect","clearTimeout","setTimeout","actualTimePassed","throttleTime","finalState","image","h","div","className","img","src","imageFolder","alt","brandLogo","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","messageText","awaitText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onTick","time","onCompleted","url","ContentSeparator","Button","onClick","redirectToApp","window","location","assign","label","defaultProps"],"mappings":"srBAgBA,SAASA,EAAMC,GACX,MAAMC,KAAEA,EAAIC,eAAEA,GAAmBC,IAC3BC,EAAWC,KACVC,EAAWC,GAAgBC,GAAS,IACpCC,EAASC,GAAcF,GAAS,IAChCG,EAASC,GAAcJ,GAAS,IAChCK,EAAwBC,GAA6BN,GAAS,IAC9DO,EAAOC,GAAYR,EAASR,EAAMe,QAClCE,EAAYC,GAAiBV,EAAS,MACtCW,EAAYC,GAAiBZ,EAAS,IACtCa,EAAiBC,GAAsBd,GAAS,IAChDe,EAAeC,GAAoBhB,EAAS,MAY7CiB,EAAcC,IAEhB,GAAIA,EAAO1B,MAAM2B,QAAS,CACtBpB,GAAa,GACb,MAAMqB,EAAQ,CACVC,KAAM,CACFC,QAAS,CAAEH,QAASD,EAAO1B,MAAM2B,SACjCI,YAAa/B,EAAM+B,cAI3B,OAAO/B,EAAMyB,WAAWG,EAAOI,KACnC,CAGAtB,GAAW,GACXV,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,iDAAA,EAG5CD,EAAWP,IAIb,GAHAhB,GAAW,GAGPgB,EAAO1B,MAAM2B,QAAS,CACtB,MAAMC,EAAQ,CACVC,KAAM,CACFC,QAAS,CAAEH,QAASD,EAAO1B,MAAM2B,SACjCI,YAAa/B,EAAM+B,cAI3B,OAAO/B,EAAMyB,WAAWG,EAAOI,KACnC,CAGAhC,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,4CAAA,EAG5CC,EAAc,KAChB,MAAMJ,YAAEA,EAAWK,UAAEA,EAASC,iBAAEA,GAAqBrC,EAEhDa,IACDb,EAAMsC,gBAAgB,CAAEC,cAAevC,EAAMwC,KAAMC,kBAAmB,oBACtE3B,GAA0B,IAGzB4B,EAAmBX,EAAaK,EAAWlC,EAAgBmC,GAC3DM,KAAKC,GACLC,OAAM,EAAGC,aAAYC,MAAgB,CAClCP,KAAM,gBACNxC,MAAO,IACC8C,GAAW,CAAEA,QAAS7C,EAAK+C,IAAIF,OAChCC,OAGVJ,MAAMjB,IACH,OAAQA,EAAOc,MACX,IAAK,UACDf,EAAWC,GACX,MAEJ,IAAK,QACDO,EAAQP,GACR,MAEJ,QACId,GAAW,GACnB,GACJ,EAORqC,GAAU,KACNd,IACO,KACHe,aAAa3B,EAAAA,IAElB,IAEH0B,GAAU,KACN,GAAIxC,EAAS,OAAOyC,aAAa3B,GAEjC,GAAIjB,EAAW,OAAO4C,aAAa3B,GAEnC,IAAKZ,EAAS,CAiBVa,EAAiB2B,YAdM,KACnBhB,IAEA,MAAMiB,EAAmBjC,EAAaJ,EAEtCK,EAAcgC,GAEVA,GAAoBpD,EAAMqD,eAAiBhC,IAC3CL,EAAShB,EAAMqC,kBACff,GAAmB,GACvB,GAIwCP,GAChD,IACD,CAACJ,EAASF,EAASH,EAAWa,IAEjC,MAAMmC,EAAa,CAACC,EAAOT,IACvBU,EAACC,MAAAA,CAAIC,UAAU,uDACXF,EAACG,MAAAA,CACGD,UAAU,kEACVE,IAAKxD,EAAS,CAAEyD,YAAa,eAAxBzD,CAAyCmD,GAC9CO,IAAK7D,EAAK+C,IAAIF,KAElBU,EAACC,MAAAA,CAAIC,UAAU,2EAA2EzD,EAAK+C,IAAIF,KAI3G,GAAIrC,EACA,OAAO6C,EAAW,QAAS,0BAG/B,GAAIhD,EACA,OAAOgD,EAAW,UAAW,sBAGjC,GAAI3C,EACA,OACI6C,EAACC,MAAAA,CAAIC,UAAU,yBACV1D,EAAM+D,WAAaP,EAACG,MAAAA,CAAIC,IAAK5D,EAAM+D,UAAWD,IAAK9D,EAAMwC,KAAMkB,UAAU,sCAC1EF,EAACQ,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,WAKzC,MAAMC,EAAkBlE,EAAK+C,IAAI,uBAAuBoB,MAAM,MAE9D,OACIZ,EAACC,MAAAA,CACGC,UAAWW,EACP,wBACA,0BAA0BrE,EAAMwC,OAChCxC,EAAMsE,mBAAmBC,KAAIC,GAAK,0BAA0BA,QAG/DxE,EAAM+D,WAAaP,EAACG,MAAAA,CAAIC,IAAK5D,EAAM+D,UAAWD,IAAK9D,EAAMwC,KAAMkB,UAAU,sCAE1EF,EAACC,MAAAA,CAAIC,UAAU,mCAAmC1D,EAAMyE,aAExDjB,EAACC,MAAAA,CAAIC,UAAU,2CACXF,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACQ,EAAAA,CAAQC,QAAQ,EAAOC,KAAK,YAEjCV,EAACC,MAAAA,CAAIC,UAAU,yCAAyC1D,EAAM0E,YAGjE1E,EAAM2E,oBACHnB,EAACC,MAAAA,CAAIC,UAAU,2CACXF,EAACC,MAAAA,CAAIC,UAAU,mCACXF,EAACoB,OAAAA,CAAKlB,UAAU,oCAAoCmB,MAAO,CAAEC,MAAO,GAAG7D,SAG3EuC,EAACC,MAAAA,CAAIC,UAAU,oCACVS,EAAgB,GAAG,IACpBX,EAACuB,EAAAA,CAAUC,eAAgBhF,EAAMiF,cAAeC,OAzKpDC,IACZjE,EAAciE,EAAKlE,WAAU,EAwKmDmE,YA/KnE,KACb1E,GAAW,GACXwC,aAAa3B,GACbvB,EAAMiC,QAAQ,IAAIC,EAAmB,QAAS,mBAAA,IA4K2D,IAClFiC,EAAgB,KAKlCnE,EAAMqF,KACH7B,EAACC,MAAAA,CAAIC,UAAU,mCACXF,EAAC8B,QACD9B,EAAC+B,EAAAA,CAAOjB,mBAAoB,CAAC,SAAUkB,QAAS,KAAMC,OAvG/CJ,EAuG6DrF,EAAMqF,SAtGtFK,OAAOC,SAASC,OAAOP,GADL,IAACA,CAuGsE,EAAGQ,MAAO5F,EAAK+C,IAAI,cAKpH,CAEAjD,EAAM+F,aAAe,CACjBb,cAAe,GACfhD,QAAS,OACTR,WAAY,OACZa,gBAAiB,OACjBvB,MAAO,IACPsC,aAAc,IACdhB,iBAAkB,IAClBsC,oBAAoB,EACpBL,mBAAoB,GACpBe,IAAK"}
+{"version":3,"file":"Await.js","sources":["../../../../../src/components/internal/Await/Await.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport classnames from 'classnames';\nimport checkPaymentStatus from '../../../core/Services/payment-status';\nimport processResponse from '../../../core/ProcessResponse';\n\nimport Spinner from '../../internal/Spinner';\nimport Countdown from '../Countdown';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { AwaitComponentProps, StatusObject } from './types';\nimport './Await.scss';\nimport AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';\nimport ContentSeparator from '../ContentSeparator';\nimport useImage from '../../../core/Context/useImage';\n\nfunction Await(props: AwaitComponentProps) {\n    const { i18n, loadingContext } = useCoreContext();\n    const getImage = useImage();\n    const [completed, setCompleted] = useState(false);\n    const [expired, setExpired] = useState(false);\n    const [loading, setLoading] = useState(true);\n    const [hasCalledActionHandled, setHasCalledActionHandled] = useState(false);\n    const [delay, setDelay] = useState(props.delay);\n    const [percentage, setPercentage] = useState(100);\n    const [timePassed, setTimePassed] = useState(0);\n    const [hasAdjustedTime, setHasAdjustedTime] = useState(false);\n    const [storedTimeout, setStoredTimeout] = useState(null);\n\n    const onTimeUp = (): void => {\n        setExpired(true);\n        clearTimeout(storedTimeout);\n        props.onError(new AdyenCheckoutError('ERROR', 'Payment Expired'));\n    };\n\n    const onTick = (time): void => {\n        setPercentage(time.percentage);\n    };\n\n    const onComplete = (status: StatusObject): void => {\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            setCompleted(true);\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send success response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Show error state & call merchant defined error callback if we do not have a payload\n        setExpired(true);\n        props.onError(new AdyenCheckoutError('ERROR', 'successful result, but no payload in response'));\n    };\n\n    const onError = (status: StatusObject): void => {\n        setExpired(true);\n\n        // Only make details call if we have a payload\n        if (status.props.payload) {\n            const state = {\n                data: {\n                    details: { payload: status.props.payload },\n                    paymentData: props.paymentData\n                }\n            };\n            // Send error response to onAdditionalDetails\n            return props.onComplete(state, this);\n        }\n\n        // Call merchant defined error callback if we do not have a payload\n        props.onError(new AdyenCheckoutError('ERROR', 'error result with no payload in response'));\n    };\n\n    const checkStatus = (): void => {\n        const { paymentData, clientKey, throttleInterval } = props;\n\n        if (!hasCalledActionHandled) {\n            props.onActionHandled({ componentType: props.type, actionDescription: 'polling-started' });\n            setHasCalledActionHandled(true);\n        }\n\n        void checkPaymentStatus(paymentData, clientKey, loadingContext, throttleInterval)\n            .then(processResponse)\n            .catch(({ message, ...response }) => ({\n                type: 'network-error',\n                props: {\n                    ...(message && { message: i18n.get(message) }),\n                    ...response\n                }\n            }))\n            .then((status: StatusObject) => {\n                switch (status.type) {\n                    case 'success':\n                        onComplete(status);\n                        break;\n\n                    case 'error':\n                        onError(status);\n                        break;\n\n                    default:\n                        setLoading(false);\n                }\n            });\n    };\n\n    const redirectToApp = (url): void => {\n        window.location.assign(url);\n    };\n\n    useEffect(() => {\n        if (props.shouldRedirectAutomatically && props.url) {\n            redirectToApp(props.url);\n        }\n    }, [props.shouldRedirectAutomatically, props.url]);\n\n    useEffect(() => {\n        checkStatus();\n        return (): void => {\n            clearTimeout(storedTimeout);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (expired) return clearTimeout(storedTimeout);\n\n        if (completed) return clearTimeout(storedTimeout);\n\n        if (!loading) {\n            // Retry until getting a complete response from the server OR it times out\n            // Changes setTimeout time to new value (throttleInterval) after a certain amount of time (throttleTime) has passed\n            const statusInterval = (): void => {\n                checkStatus();\n\n                const actualTimePassed = timePassed + delay;\n                // timePassed is the value that is the main \"engine\" that drives this useEffect/polling\n                setTimePassed(actualTimePassed);\n\n                if (actualTimePassed >= props.throttleTime && !hasAdjustedTime) {\n                    setDelay(props.throttleInterval);\n                    setHasAdjustedTime(true);\n                }\n            };\n\n            // Create (another) interval to poll for a result\n            setStoredTimeout(setTimeout(statusInterval, delay));\n        }\n    }, [loading, expired, completed, timePassed]);\n\n    const finalState = (image, message) => (\n        <div className=\"adyen-checkout__await adyen-checkout__await--result\">\n            <img\n                className=\"adyen-checkout__await__icon adyen-checkout__await__icon--result\"\n                src={getImage({ imageFolder: 'components/' })(image)}\n                alt={i18n.get(message)}\n            />\n            <div className=\"adyen-checkout__await__subtitle adyen-checkout__await__subtitle--result\">{i18n.get(message)}</div>\n        </div>\n    );\n\n    if (expired) {\n        return finalState('error', 'error.subtitle.payment');\n    }\n\n    if (completed) {\n        return finalState('success', 'creditCard.success');\n    }\n\n    if (loading) {\n        return (\n            <div className=\"adyen-checkout__await\">\n                {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n                <Spinner inline={false} size=\"large\" />\n            </div>\n        );\n    }\n\n    const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');\n\n    return (\n        <div\n            className={classnames(\n                'adyen-checkout__await',\n                `adyen-checkout__await--${props.type}`,\n                props.classNameModifiers.map(m => `adyen-checkout__await--${m}`)\n            )}\n        >\n            {props.brandLogo && <img src={props.brandLogo} alt={props.type} className=\"adyen-checkout__await__brand-logo\" />}\n\n            <div className=\"adyen-checkout__await__subtitle\">{props.messageText}</div>\n\n            <div className=\"adyen-checkout__await__indicator-holder\">\n                <div className=\"adyen-checkout__await__indicator-spinner\">\n                    <Spinner inline={false} size=\"medium\" />\n                </div>\n                <div className=\"adyen-checkout__await__indicator-text\">{props.awaitText}</div>\n            </div>\n\n            {props.showCountdownTimer && (\n                <div className=\"adyen-checkout__await__countdown-holder\">\n                    <div className=\"adyen-checkout__await__progress\">\n                        <span className=\"adyen-checkout__await__percentage\" style={{ width: `${percentage}%` }} />\n                    </div>\n\n                    <div className=\"adyen-checkout__await__countdown\">\n                        {timeToPayString[0]}&nbsp;\n                        <Countdown minutesFromNow={props.countdownTime} onTick={onTick} onCompleted={onTimeUp} />\n                        &nbsp;{timeToPayString[1]}\n                    </div>\n                </div>\n            )}\n\n            {props.url && !props.shouldRedirectAutomatically && (\n                <div className=\"adyen-checkout__await__app-link\">\n                    <ContentSeparator />\n                    <Button classNameModifiers={['await']} onClick={() => redirectToApp(props.url)} label={i18n.get('openApp')} />\n                </div>\n            )}\n        </div>\n    );\n}\n\nAwait.defaultProps = {\n    countdownTime: 15,\n    onError: () => {},\n    onComplete: () => {},\n    onActionHandled: () => {},\n    delay: 2000,\n    throttleTime: 60000,\n    throttleInterval: 10000,\n    showCountdownTimer: true,\n    classNameModifiers: [],\n    url: null\n};\n\nexport default Await;\n"],"names":["Await","props","i18n","loadingContext","useCoreContext","getImage","useImage","completed","setCompleted","useState","expired","setExpired","loading","setLoading","hasCalledActionHandled","setHasCalledActionHandled","delay","setDelay","percentage","setPercentage","timePassed","setTimePassed","hasAdjustedTime","setHasAdjustedTime","storedTimeout","setStoredTimeout","onComplete","status","payload","state","data","details","paymentData","this","onError","AdyenCheckoutError","checkStatus","clientKey","throttleInterval","onActionHandled","componentType","type","actionDescription","checkPaymentStatus","then","processResponse","catch","message","response","get","redirectToApp","url","window","location","assign","useEffect","shouldRedirectAutomatically","clearTimeout","setTimeout","actualTimePassed","throttleTime","finalState","image","h","div","className","img","src","imageFolder","alt","brandLogo","Spinner","inline","size","timeToPayString","split","classnames","classNameModifiers","map","m","messageText","awaitText","showCountdownTimer","span","style","width","Countdown","minutesFromNow","countdownTime","onTick","time","onCompleted","ContentSeparator","Button","onClick","label","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/Countdown/index.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{getTimeDifference as t}from"./utils.js";import{useRef as s,useState as n,useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import{useCountdownA11yReporter as a}from"./useCountdownA11yReporter.js";function r({minutesFromNow:r,onTick:c=(()=>{}),onCompleted:m=(()=>{})}){const u=s((e=>{const t=6e4*e,s=(new Date).getTime();return{startTime:new Date(s),endTime:new Date(s+t)}})(r)),{startTime:i,endTime:d}=u.current,[p,l]=n({minutes:"-",seconds:"-"});return a(p),o((()=>{const e=setInterval((()=>{const{minutes:e,seconds:s,percentage:n,completed:o}=t(i,d);if(o)m();else{const t={minutes:e,seconds:s,percentage:n};l(t),c(t)}}),1e3);return()=>{clearInterval(e)}}),[]),e("span",{className:"adyen-checkout__countdown",role:"timer"},e("span",{className:"countdown__minutes"},p.minutes),e("span",{className:"countdown__separator"},":"),e("span",{className:"countdown__seconds"},p.seconds))}export{r as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{getTimeDifference as t}from"./utils.js";import{useRef as s,useState as n,useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import{useCountdownA11yReporter as a}from"./useCountdownA11yReporter.js";function r({minutesFromNow:r,onTick:c=()=>{},onCompleted:m=()=>{}}){const u=s((e=>{const t=6e4*e,s=(new Date).getTime();return{startTime:new Date(s),endTime:new Date(s+t)}})(r)),{startTime:i,endTime:d}=u.current,[p,l]=n({minutes:"-",seconds:"-"});return a(p),o((()=>{const e=setInterval((()=>{const{minutes:e,seconds:s,percentage:n,completed:o}=t(i,d);if(o)m();else{const t={minutes:e,seconds:s,percentage:n};l(t),c(t)}}),1e3);return()=>{clearInterval(e)}}),[]),e("span",{className:"adyen-checkout__countdown",role:"timer"},e("span",{className:"countdown__minutes"},p.minutes),e("span",{className:"countdown__separator"},":"),e("span",{className:"countdown__seconds"},p.seconds))}export{r as default};
 //# sourceMappingURL=index.js.map

package/dist/es/components/internal/Countdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/internal/Countdown/index.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getTimeDifference } from './utils';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { CountdownProps, CountdownTime } from './types';\nimport { useCountdownA11yReporter } from './useCountdownA11yReporter';\n\nconst calculateStartAndEndTime = (minutesFromNow: number) => {\n    const secondsFromNow = minutesFromNow * 60000;\n    const nowTime = new Date().getTime();\n    return { startTime: new Date(nowTime), endTime: new Date(nowTime + secondsFromNow) };\n};\n\nfunction Countdown({ minutesFromNow, onTick = () => {}, onCompleted = () => {} }: CountdownProps) {\n    const startAndEndTime = useRef(calculateStartAndEndTime(minutesFromNow));\n    const { startTime, endTime } = startAndEndTime.current;\n    const [time, setTime] = useState<CountdownTime>({\n        minutes: '-',\n        seconds: '-'\n    });\n    useCountdownA11yReporter(time);\n\n    useEffect(() => {\n        const tick = () => {\n            const { minutes, seconds, percentage, completed } = getTimeDifference(startTime, endTime);\n            if (completed) {\n                onCompleted();\n            } else {\n                const timeLeft = { minutes, seconds, percentage };\n                setTime(timeLeft);\n                onTick(timeLeft);\n            }\n        };\n        const interval = setInterval(tick, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    }, []);\n\n    return (\n        <span className=\"adyen-checkout__countdown\" role=\"timer\">\n            <span className=\"countdown__minutes\">{time.minutes}</span>\n            <span className=\"countdown__separator\">:</span>\n            <span className=\"countdown__seconds\">{time.seconds}</span>\n        </span>\n    );\n}\n\nexport default Countdown;\n"],"names":["Countdown","minutesFromNow","onTick","onCompleted","startAndEndTime","useRef","secondsFromNow","nowTime","Date","getTime","startTime","endTime","calculateStartAndEndTime","current","time","setTime","useState","minutes","seconds","useCountdownA11yReporter","useEffect","interval","setInterval","percentage","completed","getTimeDifference","timeLeft","clearInterval","h","span","className","role"],"mappings":"mSAYA,SAASA,GAAUC,eAAEA,EAAcC,OAAEA,EAAS,SAAQC,YAAEA,EAAc,WAClE,MAAMC,EAAkBC,EAPK,CAACJ,IAC9B,MAAMK,EAAkC,IAAjBL,EACjBM,GAAU,IAAIC,MAAOC,UAC3B,MAAO,CAAEC,UAAW,IAAIF,KAAKD,GAAUI,QAAS,IAAIH,KAAKD,EAAUD,GAAgB,EAIpDM,CAAyBX,KAClDS,UAAEA,EAASC,QAAEA,GAAYP,EAAgBS,SACxCC,EAAMC,GAAWC,EAAwB,CAC5CC,QAAS,IACTC,QAAS,MAsBb,OApBAC,EAAyBL,GAEzBM,GAAU,KACN,MAUMC,EAAWC,aAVJ,KACT,MAAML,QAAEA,EAAOC,QAAEA,EAAOK,WAAEA,EAAUC,UAAEA,GAAcC,EAAkBf,EAAWC,GACjF,GAAIa,EACArB,QACG,CACH,MAAMuB,EAAW,CAAET,UAASC,UAASK,cACrCR,EAAQW,GACRxB,EAAOwB,EACX,IAE+B,KAEnC,MAAO,KACHC,cAAcN,EAAAA,CAClB,GACD,IAGCO,EAACC,OAAAA,CAAKC,UAAU,4BAA4BC,KAAK,SAC7CH,EAACC,OAAAA,CAAKC,UAAU,sBAAsBhB,EAAKG,SAC3CW,EAACC,OAAAA,CAAKC,UAAU,wBAAuB,KACvCF,EAACC,OAAAA,CAAKC,UAAU,sBAAsBhB,EAAKI,SAGvD"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/internal/Countdown/index.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getTimeDifference } from './utils';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { CountdownProps, CountdownTime } from './types';\nimport { useCountdownA11yReporter } from './useCountdownA11yReporter';\n\nconst calculateStartAndEndTime = (minutesFromNow: number) => {\n    const secondsFromNow = minutesFromNow * 60000;\n    const nowTime = new Date().getTime();\n    return { startTime: new Date(nowTime), endTime: new Date(nowTime + secondsFromNow) };\n};\n\nfunction Countdown({ minutesFromNow, onTick = () => {}, onCompleted = () => {} }: CountdownProps) {\n    const startAndEndTime = useRef(calculateStartAndEndTime(minutesFromNow));\n    const { startTime, endTime } = startAndEndTime.current;\n    const [time, setTime] = useState<CountdownTime>({\n        minutes: '-',\n        seconds: '-'\n    });\n    useCountdownA11yReporter(time);\n\n    useEffect(() => {\n        const tick = () => {\n            const { minutes, seconds, percentage, completed } = getTimeDifference(startTime, endTime);\n            if (completed) {\n                onCompleted();\n            } else {\n                const timeLeft = { minutes, seconds, percentage };\n                setTime(timeLeft);\n                onTick(timeLeft);\n            }\n        };\n        const interval = setInterval(tick, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    }, []);\n\n    return (\n        <span className=\"adyen-checkout__countdown\" role=\"timer\">\n            <span className=\"countdown__minutes\">{time.minutes}</span>\n            <span className=\"countdown__separator\">:</span>\n            <span className=\"countdown__seconds\">{time.seconds}</span>\n        </span>\n    );\n}\n\nexport default Countdown;\n"],"names":["Countdown","minutesFromNow","onTick","onCompleted","startAndEndTime","useRef","secondsFromNow","nowTime","Date","getTime","startTime","endTime","calculateStartAndEndTime","current","time","setTime","useState","minutes","seconds","useCountdownA11yReporter","useEffect","interval","setInterval","percentage","completed","getTimeDifference","timeLeft","clearInterval","h","span","className","role"],"mappings":"mSAYA,SAASA,GAAUC,eAAEA,EAAcC,OAAEA,EAAS,OAAQC,YAAEA,EAAc,SAClE,MAAMC,EAAkBC,EAPK,CAACJ,IAC9B,MAAMK,EAAkC,IAAjBL,EACjBM,GAAU,IAAIC,MAAOC,UAC3B,MAAO,CAAEC,UAAW,IAAIF,KAAKD,GAAUI,QAAS,IAAIH,KAAKD,EAAUD,GAAgB,EAIpDM,CAAyBX,KAClDS,UAAEA,EAASC,QAAEA,GAAYP,EAAgBS,SACxCC,EAAMC,GAAWC,EAAwB,CAC5CC,QAAS,IACTC,QAAS,MAsBb,OApBAC,EAAyBL,GAEzBM,GAAU,KACN,MAUMC,EAAWC,aAVJ,KACT,MAAML,QAAEA,EAAOC,QAAEA,EAAOK,WAAEA,EAAUC,UAAEA,GAAcC,EAAkBf,EAAWC,GACjF,GAAIa,EACArB,QACG,CACH,MAAMuB,EAAW,CAAET,UAASC,UAASK,cACrCR,EAAQW,GACRxB,EAAOwB,EACX,IAE+B,KAEnC,MAAO,KACHC,cAAcN,EAAAA,CAClB,GACD,IAGCO,EAACC,OAAAA,CAAKC,UAAU,4BAA4BC,KAAK,SAC7CH,EAACC,OAAAA,CAAKC,UAAU,sBAAsBhB,EAAKG,SAC3CW,EAACC,OAAAA,CAAKC,UAAU,wBAAuB,KACvCF,EAACC,OAAAA,CAAKC,UAAU,sBAAsBhB,EAAKI,SAGvD"}

package/dist/es/components/internal/DisclaimerMessage/DisclaimerMessage.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{isValidHttpUrl as r}from"../../../utils/isValidURL.js";import{interpolateElement as t}from"../../../language/utils.js";function a({message:a,urls:n}){const s="string"==typeof a,l=n.every((e=>"string"==typeof e&&r(e)));return s&&l?function(r,a){return e("span",{className:"adyen-checkout-disclaimer__label"},t(r,a.map((r=>t=>e("a",{className:"adyen-checkout-link",href:r,target:"_blank",rel:"noopener noreferrer"},t)))))}(a,n):null}export{a as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{isValidHttpUrl as r}from"../../../utils/isValidURL.js";import{interpolateElement as t}from"../../../language/utils.js";function a({message:a,urls:n}){try{const s="string"==typeof a,l=n.every((e=>"string"==typeof e&&r(e)));return s&&l?function(r,a){return e("span",{className:"adyen-checkout-disclaimer__label"},t(r,a.map((r=>t=>e("a",{className:"adyen-checkout-link",href:r,target:"_blank",rel:"noopener noreferrer"},t)))))}(a,n):null}catch(e){return console.warn("Errors rendering disclaimer message"),null}}export{a as default};
 //# sourceMappingURL=DisclaimerMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DisclaimerMessage.js","sources":["../../../../../src/components/internal/DisclaimerMessage/DisclaimerMessage.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { isValidHttpUrl } from '../../../utils/isValidURL';\nimport './DisclaimerMessage.scss';\nimport { interpolateElement } from '../../../language/utils';\nexport interface DisclaimerMsgObject {\n    message: string;\n    linkText: string;\n    link: string;\n}\n\ninterface InternalDisclaimerMsgObject {\n    message: string;\n    urls: Array<string>;\n}\n\nfunction render(message: string, urls: Array<string>) {\n    return (\n        <span className=\"adyen-checkout-disclaimer__label\">\n            {interpolateElement(\n                message,\n                // eslint-disable-next-line react/display-name\n                urls.map(url => translation => (\n                    <a className=\"adyen-checkout-link\" href={url} target=\"_blank\" rel=\"noopener noreferrer\">\n                        {translation}\n                    </a>\n                ))\n            )}\n        </span>\n    );\n}\n\n/**\n *  props: {\n *    message: 'By continuing you agree with the %#terms and conditions%#',\n *    urls: ['https://www.adyen.com']\n *  }\n *  String inside the '%#' token pair will be rendered as an anchor element.\n */\n\nexport default function DisclaimerMessage({ message, urls }: InternalDisclaimerMsgObject) {\n    const messageIsStr = typeof message === 'string';\n    const validUrls = urls.every(url => typeof url === 'string' && isValidHttpUrl(url));\n    if (!messageIsStr || !validUrls) return null;\n\n    return render(message, urls);\n}\n"],"names":["DisclaimerMessage","message","urls","messageIsStr","validUrls","every","url","isValidHttpUrl","h","span","className","interpolateElement","map","translation","a","href","target","rel","render"],"mappings":"sMAuCe,SAASA,GAAkBC,QAAEA,EAAOC,KAAEA,IACjD,MAAMC,EAAkC,iBAAZF,EACtBG,EAAYF,EAAKG,OAAMC,GAAsB,iBAARA,GAAoBC,EAAeD,KAC9E,OAAKH,GAAiBC,EA3B1B,SAAgBH,EAAiBC,GAC7B,OACIM,EAACC,OAAAA,CAAKC,UAAU,oCACXC,EACGV,EAEAC,EAAKU,KAAIN,GAAOO,GACZL,EAACM,IAAAA,CAAEJ,UAAU,sBAAsBK,KAAMT,EAAKU,OAAO,SAASC,IAAI,uBAC7DJ,MAMzB,CAeWK,CAAOjB,EAASC,GAFiB,IAG5C"}
+{"version":3,"file":"DisclaimerMessage.js","sources":["../../../../../src/components/internal/DisclaimerMessage/DisclaimerMessage.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { isValidHttpUrl } from '../../../utils/isValidURL';\nimport './DisclaimerMessage.scss';\nimport { interpolateElement } from '../../../language/utils';\nexport interface DisclaimerMsgObject {\n    message: string;\n    linkText: string;\n    link: string;\n}\n\ninterface InternalDisclaimerMsgObject {\n    message: string;\n    urls: Array<string>;\n}\n\nfunction render(message: string, urls: Array<string>) {\n    return (\n        <span className=\"adyen-checkout-disclaimer__label\">\n            {interpolateElement(\n                message,\n                // eslint-disable-next-line react/display-name\n                urls.map(url => translation => (\n                    <a className=\"adyen-checkout-link\" href={url} target=\"_blank\" rel=\"noopener noreferrer\">\n                        {translation}\n                    </a>\n                ))\n            )}\n        </span>\n    );\n}\n\n/**\n *  props: {\n *    message: 'By continuing you agree with the %#terms and conditions%#',\n *    urls: ['https://www.adyen.com']\n *  }\n *  String inside the '%#' token pair will be rendered as an anchor element.\n */\n\nexport default function DisclaimerMessage({ message, urls }: InternalDisclaimerMsgObject) {\n    try {\n        const messageIsStr = typeof message === 'string';\n        const validUrls = urls.every(url => typeof url === 'string' && isValidHttpUrl(url));\n        if (!messageIsStr || !validUrls) return null;\n\n        return render(message, urls);\n    } catch (e) {\n        console.warn('Errors rendering disclaimer message');\n        return null;\n    }\n}\n"],"names":["DisclaimerMessage","message","urls","messageIsStr","validUrls","every","url","isValidHttpUrl","h","span","className","interpolateElement","map","translation","a","href","target","rel","render","e","console","warn"],"mappings":"sMAuCe,SAASA,GAAkBC,QAAEA,EAAOC,KAAEA,IACjD,IACI,MAAMC,EAAkC,iBAAZF,EACtBG,EAAYF,EAAKG,OAAMC,GAAsB,iBAARA,GAAoBC,EAAeD,KAC9E,OAAKH,GAAiBC,EA5B9B,SAAgBH,EAAiBC,GAC7B,OACIM,EAACC,OAAAA,CAAKC,UAAU,oCACXC,EACGV,EAEAC,EAAKU,KAAIN,GAAOO,GACZL,EAACM,IAAAA,CAAEJ,UAAU,sBAAsBK,KAAMT,EAAKU,OAAO,SAASC,IAAI,uBAC7DJ,MAMzB,CAgBeK,CAAOjB,EAASC,GAFiB,IAG5C,CAAE,MAAOiB,GAEL,OADAC,QAAQC,KAAK,uCACN,IACX,CACJ"}

package/dist/es/components/internal/ExpandButton/ExpandButton.js

@@ -0,0 +1,2 @@
+import e from"../../../external/classnames/index.js";import{createElement as t}from"../../../external/preact/dist/preact.js";function a({buttonId:a,showRadioButton:d,isSelected:n,expandContentId:o,children:r,classNameModifiers:c=[]}){return t("button",{className:e("adyen-checkout__payment-method__header__title",...c.map((e=>`adyen-checkout-expand-button--${e}`))),id:a,role:"radio","aria-checked":n,"aria-expanded":n,"aria-controls":o,type:"button"},d&&t("span",{className:e({"adyen-checkout__payment-method__radio":!0,"adyen-checkout__payment-method__radio--selected":n}),"aria-hidden":"true"}),r)}export{a as default};
+//# sourceMappingURL=ExpandButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.js","sources":["../../../../../src/components/internal/ExpandButton/ExpandButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ComponentChildren, h } from 'preact';\nimport './ExpandButton.scss';\n\ninterface ExpandButton {\n    buttonId: string;\n    isSelected: boolean;\n    expandContentId: string;\n    children?: ComponentChildren;\n    showRadioButton?: boolean;\n    classNameModifiers?: string[];\n}\n\nfunction ExpandButton({ buttonId, showRadioButton, isSelected, expandContentId, children, classNameModifiers = [] }: Readonly<ExpandButton>) {\n    return (\n        // See discussion: https://github.com/w3c/aria/issues/1404\n        // eslint-disable-next-line jsx-a11y/role-supports-aria-props\n        <button\n            className={classNames(\n                'adyen-checkout__payment-method__header__title',\n                ...classNameModifiers.map(modifier => `adyen-checkout-expand-button--${modifier}`)\n            )}\n            id={buttonId}\n            role={'radio'}\n            aria-checked={isSelected}\n            aria-expanded={isSelected}\n            aria-controls={expandContentId}\n            type=\"button\"\n        >\n            {showRadioButton && (\n                <span\n                    className={classNames({\n                        'adyen-checkout__payment-method__radio': true,\n                        'adyen-checkout__payment-method__radio--selected': isSelected\n                    })}\n                    aria-hidden=\"true\"\n                />\n            )}\n            {children}\n        </button>\n    );\n}\n\nexport default ExpandButton;\n"],"names":["ExpandButton","buttonId","showRadioButton","isSelected","expandContentId","children","classNameModifiers","h","button","className","classNames","map","modifier","id","role","aria-checked","aria-expanded","aria-controls","type","span","aria-hidden"],"mappings":"6HAaA,SAASA,GAAaC,SAAEA,EAAQC,gBAAEA,EAAeC,WAAEA,EAAUC,gBAAEA,EAAeC,SAAEA,EAAQC,mBAAEA,EAAqB,KAC3G,OAGIC,EAACC,SAAAA,CACGC,UAAWC,EACP,mDACGJ,EAAmBK,KAAIC,GAAY,iCAAiCA,OAE3EC,GAAIZ,EACJa,KAAM,QACNC,eAAcZ,EACda,gBAAeb,EACfc,gBAAeb,EACfc,KAAK,UAEJhB,GACGK,EAACY,OAAAA,CACGV,UAAWC,EAAW,CAClB,yCAAyC,EACzC,kDAAmDP,IAEvDiB,cAAY,SAGnBf,EAGb"}

package/dist/es/components/internal/FormFields/ConsentCheckbox/ConsentCheckbox.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import o from"../Field/Field.js";import a from"../Checkbox/Checkbox.js";function r({errorMessage:r,label:s,onChange:c,i18n:n,...t}){return e(o,{classNameModifiers:["consentCheckbox"],errorMessage:r,i18n:n,name:"consentCheckbox",useLabelElement:!1,label:n.get("creditCard.holderName")},e(a,{name:"consentCheckbox",classNameModifiers:[...t.classNameModifiers??=[],"consentCheckbox"],onInput:c,value:t?.data?.consentCheckbox,label:s,checked:t.checked}))}export{r as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import o from"../Field/Field.js";import s from"../Checkbox/Checkbox.js";function a({errorMessage:a,label:n,onChange:c,i18n:r,...t}){return e(o,{classNameModifiers:["consentCheckbox"],errorMessage:a,i18n:r,name:"consentCheckbox",useLabelElement:!1},e(s,{name:"consentCheckbox",classNameModifiers:[...t.classNameModifiers??=[],"consentCheckbox"],onInput:c,value:t?.data?.consentCheckbox,label:n,checked:t.checked}))}export{a as default};
 //# sourceMappingURL=ConsentCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConsentCheckbox.js","sources":["../../../../../../src/components/internal/FormFields/ConsentCheckbox/ConsentCheckbox.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../Field';\nimport Checkbox from '../Checkbox';\n\nexport default function ConsentCheckbox({ errorMessage, label, onChange, i18n, ...props }) {\n    return (\n        <Field\n            classNameModifiers={['consentCheckbox']}\n            errorMessage={errorMessage}\n            i18n={i18n}\n            name={'consentCheckbox'}\n            useLabelElement={false}\n            label={i18n.get('creditCard.holderName')}\n        >\n            <Checkbox\n                name={'consentCheckbox'}\n                classNameModifiers={[...(props.classNameModifiers ??= []), 'consentCheckbox']}\n                onInput={onChange}\n                value={props?.data?.consentCheckbox}\n                label={label}\n                checked={props.checked}\n            />\n        </Field>\n    );\n}\n"],"names":["ConsentCheckbox","errorMessage","label","onChange","i18n","props","h","Field","classNameModifiers","name","useLabelElement","get","Checkbox","onInput","value","data","consentCheckbox","checked"],"mappings":"mJAIe,SAASA,GAAgBC,aAAEA,EAAYC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,KAASC,IAC9E,OACIC,EAACC,EAAAA,CACGC,mBAAoB,CAAC,mBACrBP,aAAcA,EACdG,KAAMA,EACNK,KAAM,kBACNC,iBAAiB,EACjBR,MAAOE,EAAKO,IAAI,0BAEhBL,EAACM,EAAAA,CACGH,KAAM,kBACND,mBAAoB,IAAKH,EAAMG,qBAAuB,GAAK,mBAC3DK,QAASV,EACTW,MAAOT,GAAOU,MAAMC,gBACpBd,MAAOA,EACPe,QAASZ,EAAMY,UAI/B"}
+{"version":3,"file":"ConsentCheckbox.js","sources":["../../../../../../src/components/internal/FormFields/ConsentCheckbox/ConsentCheckbox.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../Field';\nimport Checkbox from '../Checkbox';\n\nexport default function ConsentCheckbox({ errorMessage, label, onChange, i18n, ...props }) {\n    return (\n        <Field classNameModifiers={['consentCheckbox']} errorMessage={errorMessage} i18n={i18n} name={'consentCheckbox'} useLabelElement={false}>\n            <Checkbox\n                name={'consentCheckbox'}\n                classNameModifiers={[...(props.classNameModifiers ??= []), 'consentCheckbox']}\n                onInput={onChange}\n                value={props?.data?.consentCheckbox}\n                label={label}\n                checked={props.checked}\n            />\n        </Field>\n    );\n}\n"],"names":["ConsentCheckbox","errorMessage","label","onChange","i18n","props","h","Field","classNameModifiers","name","useLabelElement","Checkbox","onInput","value","data","consentCheckbox","checked"],"mappings":"mJAIe,SAASA,GAAgBC,aAAEA,EAAYC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,KAASC,IAC9E,OACIC,EAACC,EAAAA,CAAMC,mBAAoB,CAAC,mBAAoBP,aAAcA,EAAcG,KAAMA,EAAMK,KAAM,kBAAmBC,iBAAiB,GAC9HJ,EAACK,EAAAA,CACGF,KAAM,kBACND,mBAAoB,IAAKH,EAAMG,qBAAuB,GAAK,mBAC3DI,QAAST,EACTU,MAAOR,GAAOS,MAAMC,gBACpBb,MAAOA,EACPc,QAASX,EAAMW,UAI/B"}

package/dist/es/components/internal/FormFields/Field/Field.js

@@ -1,2 +1,2 @@
-import e from"../../../../external/classnames/index.js";import{createElement as a,Fragment as n,toChildArray as t,cloneElement as l}from"../../../../external/preact/dist/preact.js";import o from"../../Spinner/Spinner.js";import i from"../../Icon/Icon.js";import{ARIA_ERROR_SUFFIX as r,ARIA_CONTEXT_SUFFIX as d}from"../../../../core/Errors/constants.js";import{useRef as s,useState as c,useCallback as u}from"../../../../external/preact/hooks/dist/hooks.js";import{getUniqueId as m}from"../../../../utils/idGenerator.js";import{PREFIX as p}from"../../Icon/constants.js";const h=h=>{const{children:_,className:f,classNameModifiers:y,dir:k,disabled:b,readOnly:x,errorMessage:v,helper:E,inputWrapperModifiers:N,isLoading:F,isValid:g,label:L,labelEndAdornment:$,name:j,onBlur:w,onFieldBlur:I,onFocus:A,onFocusField:S,showValidIcon:T,useLabelElement:C,showErrorElement:M,showContextualElement:V,contextualText:q,filled:B,focused:H,i18n:R,contextVisibleToScreenReader:W,renderAlternativeToLabel:z}=h,G=W??!0,O=M&&"string"==typeof v&&v.length>0,P=V&&!O&&q?.length>0,D=s(m(`adyen-checkout-${j}`)),[J,K]=c(!1),[Q,U]=c(!1);null!=H&&K(!!H),null!=B&&U(!!B);const X=u((e=>{K(!0),A?.(e)}),[A]),Y=u((e=>{K(!1),w?.(e),I?.(e)}),[w,I]),Z=u((()=>a(n,null,"string"==typeof L&&a("span",{className:e({"adyen-checkout__label__text":!0,"adyen-checkout__label__text--error":v}),"data-id":j},L),"function"==typeof L&&L(),$&&a("span",{className:"adyen-checkout__label-adornment--end"},$),E&&a("span",{className:"adyen-checkout__helper-text"},E))),[L,v,$,E]),ee=u((()=>{const s=a("span",{className:e({"adyen-checkout-contextual-text--error":!0,"adyen-checkout-contextual-text--hidden":!O}),...G&&{id:`${D.current}${r}`},"aria-hidden":G?null:"true"},v),c=a("span",{className:e({"adyen-checkout-contextual-text":!0,"adyen-checkout-contextual-text--hidden":!P}),...G&&{id:`${D.current}${d}`},"aria-hidden":G?null:"true"},q);return a(n,null,a("div",{className:e(["adyen-checkout__input-wrapper",...N.map((e=>`adyen-checkout__input-wrapper--${e}`))]),dir:k},t(_).map((e=>{const a={isValid:g,onFocusHandler:X,onBlurHandler:Y,isInvalid:!!v,...j&&{uniqueId:D.current},showErrorElement:M};return l(e,a)})),F&&a("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading"},a(o,{size:"small"})),g&&!1!==T&&a("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid"},a(i,{type:`${p}checkmark`,alt:R?.get("field.valid")})),v&&a("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid"},a(i,{type:`${p}field_error`,alt:R?.get("error.title")}))),s,c)}),[_,v,q,F,g,X,Y]),ae=u((({onFocusField:n,focused:t,filled:l,disabled:o,name:i,uniqueId:r,useLabelElement:d,isSecuredField:s,children:c,renderAlternativeToLabel:u})=>{const m={onClick:n,className:e({"adyen-checkout__label":!0,"adyen-checkout__label--focused":t,"adyen-checkout__label--filled":l,"adyen-checkout__label--disabled":o})};return d?a("label",{...m,...!s&&{htmlFor:i&&r}},c):u(m,c,r)}),[]);return a("div",{className:e("adyen-checkout__field",f,y.map((e=>`adyen-checkout__field--${e}`)),{"adyen-checkout__field--error":v,"adyen-checkout__field--valid":g,"adyen-checkout__field--inactive":x||b})},a(ae,{onFocusField:S,name:j,disabled:b,filled:Q,focused:J,useLabelElement:C,uniqueId:D.current,isSecuredField:!G,renderAlternativeToLabel:z},Z()),ee())};h.defaultProps={className:"",classNameModifiers:[],inputWrapperModifiers:[],useLabelElement:!0,showErrorElement:!0,showContextualElement:!0,renderAlternativeToLabel:()=>null};export{h as default};
+import e from"../../../../external/classnames/index.js";import{createElement as a,Fragment as n,toChildArray as t,cloneElement as l}from"../../../../external/preact/dist/preact.js";import o from"../../Spinner/Spinner.js";import i from"../../Icon/Icon.js";import{ARIA_ERROR_SUFFIX as r,ARIA_CONTEXT_SUFFIX as d}from"../../../../core/Errors/constants.js";import{useRef as s,useState as c,useCallback as u}from"../../../../external/preact/hooks/dist/hooks.js";import{getUniqueId as m}from"../../../../utils/idGenerator.js";import{PREFIX as p}from"../../Icon/constants.js";const h=h=>{const{children:_,className:f,classNameModifiers:y,dir:k,disabled:b,readOnly:x,errorMessage:v,helper:E,inputWrapperModifiers:N,isLoading:F,isValid:g,label:L,labelEndAdornment:$,name:j,onBlur:w,onFieldBlur:I,onFocus:A,onFocusField:S,showValidIcon:T,useLabelElement:C,showErrorElement:M,showContextualElement:V,contextualText:q,filled:B,focused:H,i18n:R,contextVisibleToScreenReader:W,renderAlternativeToLabel:z}=h,G=W??!0,O=M&&"string"==typeof v&&v.length>0,P=V&&!O&&q?.length>0,D=s(m(`adyen-checkout-${j}`)),[J,K]=c(!1),[Q,U]=c(!1);null!=H&&K(!!H),null!=B&&U(!!B);const X=u((e=>{K(!0),A?.(e)}),[A]),Y=u((e=>{K(!1),w?.(e),I?.(e)}),[w,I]),Z=u((()=>a(n,null,"string"==typeof L&&a("span",{className:e({"adyen-checkout__label__text":!0,"adyen-checkout__label__text--error":v}),"data-id":j},L),"function"==typeof L&&L(),$&&a("span",{className:"adyen-checkout__label-adornment--end"},$),E&&a("span",{className:"adyen-checkout__helper-text"},E))),[L,v,$,E]),ee=u((()=>{const s=a("span",{className:e({"adyen-checkout-contextual-text--error":!0,"adyen-checkout-contextual-text--hidden":!O}),...G&&{id:`${D.current}${r}`},"aria-hidden":G?null:"true"},v),c=a("span",{className:e({"adyen-checkout-contextual-text":!0,"adyen-checkout-contextual-text--hidden":!P}),...G&&{id:`${D.current}${d}`},"aria-hidden":G?null:"true"},q);return a(n,null,a("div",{className:e(["adyen-checkout__input-wrapper",...N.map((e=>`adyen-checkout__input-wrapper--${e}`))]),dir:k},t(_).map((e=>{const a={isValid:g,onFocusHandler:X,onBlurHandler:Y,isInvalid:!!v,...j&&{uniqueId:D.current},showErrorElement:M};return l(e,a)})),F&&a("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading"},a(o,{size:"small"})),g&&!1!==T&&a("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid"},a(i,{type:`${p}checkmark`,alt:R?.get("field.valid")})),v&&a("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid"},a(i,{type:`${p}field_error`,alt:R?.get("error.title")}))),s,c)}),[_,v,q,F,g,X,Y]),ae=u((({onFocusField:n,focused:t,filled:l,disabled:o,name:i,uniqueId:r,useLabelElement:d,isSecuredField:s,children:c,renderAlternativeToLabel:u})=>{const m={onClick:n,className:e({"adyen-checkout__label":!0,"adyen-checkout__label--focused":t,"adyen-checkout__label--filled":l,"adyen-checkout__label--disabled":o})};return d?a("label",{...m,...!s&&i&&{htmlFor:r}},c):u(m,c,r)}),[]);return a("div",{className:e("adyen-checkout__field",f,y.map((e=>`adyen-checkout__field--${e}`)),{"adyen-checkout__field--error":v,"adyen-checkout__field--valid":g,"adyen-checkout__field--inactive":x||b})},a(ae,{onFocusField:S,name:j,disabled:b,filled:Q,focused:J,useLabelElement:C,uniqueId:D.current,isSecuredField:!G,renderAlternativeToLabel:z},Z()),ee())};h.defaultProps={className:"",classNameModifiers:[],inputWrapperModifiers:[],useLabelElement:!0,showErrorElement:!0,showContextualElement:!0,renderAlternativeToLabel:()=>null};export{h as default};
 //# sourceMappingURL=Field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\n\nconst Field: FunctionalComponent<FieldProps> = props => {\n    //\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText?.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                >\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const childProps = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n                        return cloneElement(child as VNode, childProps);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if contextVisibleToSR is true then we are NOT dealing with the label for a securedField... so give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && { htmlFor: name && uniqueId })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","toChildArray","child","childProps","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","onClick","htmlFor","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\n\nconst Field: FunctionalComponent<FieldProps> = props => {\n    //\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText?.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? null : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                >\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const childProps = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n                        return cloneElement(child as VNode, childProps);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    /**\n     * Use cases:\n     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element\n     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)\n     */\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","toChildArray","child","childProps","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","onClick","htmlFor","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/FormFields/RadioGroup/RadioGroup.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../external/classnames/index.js";import{getUniqueId as r}from"../../../../utils/idGenerator.js";import{useCoreContext as t}from"../../../../core/Context/CoreProvider.js";function o(o){const{items:n,name:i,onChange:s,value:c,isInvalid:d,uniqueId:l}=o,{i18n:_}=t(),u=l?.replace(/[0-9]/g,"").substring(0,l.lastIndexOf("-"));return e("div",{className:"adyen-checkout__radio_group"},n.map((t=>{const n=r(u);return e("div",{key:t.id,className:"adyen-checkout__radio_group__input-wrapper"},e("input",{id:n,type:"radio",checked:c===t.id,className:"adyen-checkout__radio_group__input",name:i,onChange:s,onClick:s,value:t.id}),e("label",{className:a(["adyen-checkout__label__text","adyen-checkout__radio_group__label",o.className,{"adyen-checkout__radio_group__label--invalid":d}]),htmlFor:n},_.get(t.name)))})))}o.defaultProps={onChange:()=>{},items:[]};export{o as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../external/classnames/index.js";import{getUniqueId as r}from"../../../../utils/idGenerator.js";import{useCoreContext as o}from"../../../../core/Context/CoreProvider.js";function t(t){const{items:i,name:n,onChange:l,value:d,isInvalid:s,uniqueId:c,ariaLabel:_}=t,{i18n:u}=o(),m=c?.replace(/[0-9]/g,"").substring(0,c.lastIndexOf("-"));return e("div",{className:"adyen-checkout__radio_group",role:"radiogroup",..._&&{"aria-label":_}},i.map((o=>{const i=r(m);return e("div",{key:o.id,className:"adyen-checkout__radio_group__input-wrapper"},e("input",{id:i,type:"radio",checked:d===o.id,className:"adyen-checkout__radio_group__input",name:n,onChange:l,onClick:l,value:o.id}),e("label",{className:a(["adyen-checkout__label__text","adyen-checkout__radio_group__label",t.className,{"adyen-checkout__radio_group__label--invalid":s}]),htmlFor:i},u.get(o.name)))})))}t.defaultProps={onChange:()=>{},items:[]};export{t as default};
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/internal/FormFields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './RadioGroup.scss';\nimport { RadioGroupProps } from './types';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function RadioGroup(props: RadioGroupProps) {\n    const { items, name, onChange, value, isInvalid, uniqueId } = props;\n\n    const { i18n } = useCoreContext();\n    const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n    return (\n        <div className=\"adyen-checkout__radio_group\">\n            {items.map(item => {\n                const uniqueId = getUniqueId(uniqueIdBase);\n                return (\n                    <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n                        <input\n                            id={uniqueId}\n                            type=\"radio\"\n                            checked={value === item.id}\n                            className=\"adyen-checkout__radio_group__input\"\n                            name={name}\n                            onChange={onChange}\n                            onClick={onChange}\n                            value={item.id}\n                        />\n                        <label\n                            className={cx([\n                                'adyen-checkout__label__text',\n                                'adyen-checkout__radio_group__label',\n                                props.className,\n                                { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n                            ])}\n                            htmlFor={uniqueId}\n                        >\n                            {i18n.get(item.name)}\n                        </label>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\nRadioGroup.defaultProps = {\n    onChange: () => {},\n    items: []\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","map","item","getUniqueId","key","id","input","type","checked","onClick","label","cx","htmlFor","get","defaultProps"],"mappings":"4QAOe,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,GAAaN,GAExDO,KAAEA,GAASC,IACXC,EAAeH,GAAUI,QAAQ,SAAU,IAAIC,UAAU,EAAGL,EAASM,YAAY,MAEvF,OACIC,EAACC,MAAAA,CAAIC,UAAU,+BACVd,EAAMe,KAAIC,IACP,MAAMX,EAAWY,EAAYT,GAC7B,OACII,EAACC,MAAAA,CAAIK,IAAKF,EAAKG,GAAIL,UAAU,8CACzBF,EAACQ,QAAAA,CACGD,GAAId,EACJgB,KAAK,QACLC,QAASnB,IAAUa,EAAKG,GACxBL,UAAU,qCACVb,KAAMA,EACNC,SAAUA,EACVqB,QAASrB,EACTC,MAAOa,EAAKG,KAEhBP,EAACY,QAAAA,CACGV,UAAWW,EAAG,CACV,8BACA,qCACA1B,EAAMe,UACN,CAAE,8CAA+CV,KAErDsB,QAASrB,GAERC,EAAKqB,IAAIX,EAAKf,OAAI,IAO/C,CAEAH,EAAW8B,aAAe,CACtB1B,SAAU,OACVF,MAAO"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/internal/FormFields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './RadioGroup.scss';\nimport { RadioGroupProps } from './types';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function RadioGroup(props: RadioGroupProps) {\n    const { items, name, onChange, value, isInvalid, uniqueId, ariaLabel } = props;\n\n    const { i18n } = useCoreContext();\n    const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n    return (\n        <div className=\"adyen-checkout__radio_group\" role={'radiogroup'} {...(ariaLabel && { ['aria-label']: ariaLabel })}>\n            {items.map(item => {\n                const uniqueId = getUniqueId(uniqueIdBase);\n                return (\n                    <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n                        <input\n                            id={uniqueId}\n                            type=\"radio\"\n                            checked={value === item.id}\n                            className=\"adyen-checkout__radio_group__input\"\n                            name={name}\n                            onChange={onChange}\n                            onClick={onChange}\n                            value={item.id}\n                        />\n                        <label\n                            className={cx([\n                                'adyen-checkout__label__text',\n                                'adyen-checkout__radio_group__label',\n                                props.className,\n                                { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n                            ])}\n                            htmlFor={uniqueId}\n                        >\n                            {i18n.get(item.name)}\n                        </label>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\nRadioGroup.defaultProps = {\n    onChange: () => {},\n    items: []\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","ariaLabel","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","role","map","item","getUniqueId","key","id","input","type","checked","onClick","label","cx","htmlFor","get","defaultProps"],"mappings":"4QAOe,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,EAAQC,UAAEA,GAAcP,GAEnEQ,KAAEA,GAASC,IACXC,EAAeJ,GAAUK,QAAQ,SAAU,IAAIC,UAAU,EAAGN,EAASO,YAAY,MAEvF,OACIC,EAACC,MAAAA,CAAIC,UAAU,8BAA8BC,KAAM,gBAAmBV,GAAa,CAAE,aAAgBA,IAChGN,EAAMiB,KAAIC,IACP,MAAMb,EAAWc,EAAYV,GAC7B,OACII,EAACC,MAAAA,CAAIM,IAAKF,EAAKG,GAAIN,UAAU,8CACzBF,EAACS,QAAAA,CACGD,GAAIhB,EACJkB,KAAK,QACLC,QAASrB,IAAUe,EAAKG,GACxBN,UAAU,qCACVd,KAAMA,EACNC,SAAUA,EACVuB,QAASvB,EACTC,MAAOe,EAAKG,KAEhBR,EAACa,QAAAA,CACGX,UAAWY,EAAG,CACV,8BACA,qCACA5B,EAAMgB,UACN,CAAE,8CAA+CX,KAErDwB,QAASvB,GAERE,EAAKsB,IAAIX,EAAKjB,OAAI,IAO/C,CAEAH,EAAWgC,aAAe,CACtB5B,SAAU,OACVF,MAAO"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as t,useState as n,useMemo as r,useEffect as s}from"../../../../external/preact/hooks/dist/hooks.js";import l from"../../../../external/classnames/index.js";import o from"./components/SelectButton.js";import a from"./components/SelectList.js";import i from"../../../../utils/uuid.js";import{keys as c}from"./constants.js";import{ARIA_ERROR_SUFFIX as u,ARIA_CONTEXT_SUFFIX as d}from"../../../../core/Errors/constants.js";import{simulateFocusScroll as m}from"../utils.js";function f({items:f=[],className:p="",classNameModifiers:g=[],filterable:h=!0,readonly:v=!1,onChange:b=(()=>{}),onInput:y,selectedValue:k,name:w,isInvalid:I,isValid:L,placeholder:D,uniqueId:j,disabled:x,disableTextFilter:E,clearOnSelect:T,blurOnClose:B,onListToggle:C}){const N=t(null),S=t(null),$=t(null),M=t(null),[R,_]=n(null),[P,V]=n(!1),A=r((()=>`select-${i()}`),[]),F=f.find((e=>e.id===k))||{},[H,K]=n(),[O,U]=n(F),q=F,z=E?f:f.filter((e=>!R||e.name.toLowerCase().includes(R.toLowerCase()))),G=j?`${j}${I?u:d}`:null,J=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},Q=()=>{B&&N.current.blur(),V(!1)},W=()=>{V(!0)},X=e=>{const t=e.currentTarget.getAttribute("data-value");return z.find((e=>e.id==t))},Y=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?X(e):O.id&&z.some((e=>e.id===O.id))?O:R?z[0]:{id:k},t&&!t.disabled&&(b({target:{value:t.id,name:w}}),T&&K(null),Q())},Z=e=>{switch(e.key){case c.space:case c.enter:Y(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!z||z.length<1)return;const e=z.findIndex((e=>e===O))+1,t=e<z.length?e:0,n=z[t];J(n),U(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!z||z.length<1)return;const e=z.findIndex((e=>e===O))-1,t=e<0?z.length-1:e,n=z[t];J(n),U(n)})()}};return s((()=>{P?K(null):_(null)}),[P]),s((()=>{P&&h&&N.current&&N.current.focus(),C?.(P)}),[P]),s((()=>{function e(e){(e.composedPath?!e.composedPath().includes(S.current):!S.current.contains(e.target))&&Q()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}}),[S]),e("div",{className:l(["adyen-checkout__dropdown",p,...g.map((e=>`adyen-checkout__dropdown--${e}`))]),ref:S},e(o,{inputText:H,id:j??null,active:O,selected:q,filterInputRef:N,filterable:h,isInvalid:I,isValid:L,onButtonKeyDown:e=>{e.key===c.enter&&h&&P&&R?Y(e):e.key===c.escape?Q():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&P)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&Q():(e.preventDefault(),P?Z(e):W())},onFocus:W,onInput:e=>{const t=e.target.value;K(t),_(t),y&&y(t)},placeholder:D,readonly:v,selectListId:A,showList:P,toggleButtonRef:$,toggleList:e=>{e.preventDefault(),P?(K(q.name),Q()):(K(null),W())},disabled:x,ariaDescribedBy:G}),e(a,{active:O,filteredItems:z,onHover:e=>{e.preventDefault();const t=X(e);U(t)},onSelect:Y,selected:q,selectListId:A,selectListRef:M,showList:P}))}f.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{f as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as t,useState as n,useMemo as r,useEffect as s}from"../../../../external/preact/hooks/dist/hooks.js";import l from"../../../../external/classnames/index.js";import o from"./components/SelectButton.js";import a from"./components/SelectList.js";import i from"../../../../utils/uuid.js";import{keys as c}from"./constants.js";import{ARIA_ERROR_SUFFIX as u,ARIA_CONTEXT_SUFFIX as d}from"../../../../core/Errors/constants.js";import{simulateFocusScroll as m}from"../utils.js";function f({items:f=[],className:p="",classNameModifiers:g=[],filterable:h=!0,readonly:v=!1,onChange:b=()=>{},onInput:w,selectedValue:y,name:k,isInvalid:I,isValid:L,placeholder:D,uniqueId:j,disabled:x,disableTextFilter:B,clearOnSelect:E,blurOnClose:T,onListToggle:C,allowIdOnButton:N=!1}){const S=t(null),$=t(null),M=t(null),O=t(null),[R,_]=n(null),[P,V]=n(!1),A=r((()=>`select-${i()}`),[]),F=f.find((e=>e.id===y))||{},[H,K]=n(),[U,q]=n(F),z=F,G=B?f:f.filter((e=>!R||e.name.toLowerCase().includes(R.toLowerCase()))),J=j?`${j}${I?u:d}`:null,Q=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},W=()=>{T&&S.current.blur(),V(!1)},X=()=>{V(!0)},Y=e=>{const t=e.currentTarget.getAttribute("data-value");return G.find((e=>e.id==t))},Z=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?Y(e):U.id&&G.some((e=>e.id===U.id))?U:R?G[0]:{id:y},t&&!t.disabled&&(b({target:{value:t.id,name:k}}),E&&K(null),W())},ee=e=>{switch(e.key){case c.space:case c.enter:Z(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!G||G.length<1)return;const e=G.findIndex((e=>e===U))+1,t=e<G.length?e:0,n=G[t];Q(n),q(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!G||G.length<1)return;const e=G.findIndex((e=>e===U))-1,t=e<0?G.length-1:e,n=G[t];Q(n),q(n)})()}};return s((()=>{P?K(null):_(null)}),[P]),s((()=>{P&&h&&S.current&&S.current.focus(),C?.(P)}),[P]),s((()=>{function e(e){(e.composedPath?!e.composedPath().includes($.current):!$.current.contains(e.target))&&W()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}}),[$]),e("div",{className:l(["adyen-checkout__dropdown",p,...g.map((e=>`adyen-checkout__dropdown--${e}`))]),ref:$},e(o,{inputText:H,id:j??null,active:U,selected:z,filterInputRef:S,filterable:h,isInvalid:I,isValid:L,onButtonKeyDown:e=>{e.key===c.enter&&h&&P&&R?Z(e):e.key===c.escape?W():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&P)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&W():(e.preventDefault(),P?ee(e):X())},onFocus:X,onInput:e=>{const t=e.target.value;K(t),_(t),w&&w(t)},placeholder:D,readonly:v,selectListId:A,showList:P,toggleButtonRef:M,toggleList:e=>{e.preventDefault(),P?(K(z.name),W()):(K(null),X())},disabled:x,ariaDescribedBy:J,allowIdOnButton:N}),e(a,{active:U,filteredItems:G,onHover:e=>{e.preventDefault();const t=Y(e);q(t)},onSelect:Z,selected:z,selectListId:A,selectListRef:O,showList:P}))}f.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{f as default};
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../../../src/components/internal/FormFields/Select/Select.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport SelectButton from './components/SelectButton';\nimport SelectList from './components/SelectList';\nimport uuid from '../../../../utils/uuid';\nimport { keys } from './constants';\nimport { SelectItem, SelectProps } from './types';\nimport './Select.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { simulateFocusScroll } from '../utils';\n\nfunction Select({\n    items = [],\n    className = '',\n    classNameModifiers = [],\n    filterable = true,\n    readonly = false,\n    onChange = () => {},\n    onInput,\n    selectedValue,\n    name,\n    isInvalid,\n    isValid,\n    placeholder,\n    uniqueId,\n    disabled,\n    disableTextFilter,\n    clearOnSelect,\n    blurOnClose,\n    onListToggle\n}: 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/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 a({filterable:t,toggleButtonRef:n,...o}){return t?e("div",{...o,ref:n}):e("button",{id:o.id,"aria-describedby":o.ariaDescribedBy,type:"button",...o,ref:n})}function d(d){const{active:c,selected:r,inputText:l,readonly:i,showList:s}=d,u=r.selectedOptionName||r.name||d.placeholder||"",_=s?l:u,p=i?null:d.filterable?e=>{e.preventDefault(),document.activeElement===d.filterInputRef.current?d.showList||d.toggleList(e):d.filterInputRef.current&&d.filterInputRef.current.focus()}:d.toggleList,b=i?null:d.onFocus,f=c.id?`listItem-${c.id}`:"";return e(a,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":i,"adyen-checkout__dropdown__button--active":s,"adyen-checkout__dropdown__button--invalid":d.isInvalid,"adyen-checkout__dropdown__button--valid":d.isValid,"adyen-checkout__dropdown__button--disabled":r.disabled}),disabled:d.disabled,filterable:d.filterable,onClick:p,onKeyDown:i?null:d.onButtonKeyDown,toggleButtonRef:d.toggleButtonRef},d.filterable?e(t,null,!s&&r.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:r.icon,alt:r.name}),e("input",{value:_,"aria-autocomplete":"list","aria-controls":d.selectListId,"aria-expanded":s,"aria-owns":d.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:d.onInput,onFocus:b,ref:d.filterInputRef,role:"combobox","aria-activedescendant":f,type:"text",readOnly:d.readonly,id:d.id,"aria-describedby":d.ariaDescribedBy}),!s&&r.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},r.secondaryText)):e(t,null,r.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:r.icon,alt:r.name}),e("span",{className:"adyen-checkout__dropdown__button__text"},u),r.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},r.secondaryText)))}export{d 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 a({filterable:t,toggleButtonRef:n,...o}){if(t){const{id:t,...a}=o;return e("div",{...a,ref:n})}return e("button",{id:o.id,"aria-describedby":o.ariaDescribedBy,type:"button",...o,ref:n})}function d(d){const{active:c,selected:r,inputText:i,readonly:l,showList:s}=d,u=r.selectedOptionName||r.name||d.placeholder||"",_=s?i:u,p=l?null:d.filterable?e=>{e.preventDefault(),document.activeElement===d.filterInputRef.current?d.showList||d.toggleList(e):d.filterInputRef.current&&d.filterInputRef.current.focus()}:d.toggleList,f=l?null:d.onFocus,b=c.id?`listItem-${c.id}`:"";return e(a,{className:n({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":l,"adyen-checkout__dropdown__button--active":s,"adyen-checkout__dropdown__button--invalid":d.isInvalid,"adyen-checkout__dropdown__button--valid":d.isValid,"adyen-checkout__dropdown__button--disabled":r.disabled}),disabled:d.disabled,filterable:d.filterable,onClick:p,onKeyDown:l?null:d.onButtonKeyDown,toggleButtonRef:d.toggleButtonRef,...d.allowIdOnButton&&d.id&&{id:d.id}},d.filterable?e(t,null,!s&&r.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:r.icon,alt:r.name}),e("input",{value:_,"aria-autocomplete":"list","aria-controls":d.selectListId,"aria-expanded":s,"aria-owns":d.selectListId,autoComplete:"off",className:"adyen-checkout__filter-input",onInput:d.onInput,onFocus:f,ref:d.filterInputRef,role:"combobox","aria-activedescendant":b,type:"text",readOnly:d.readonly,id:d.id,"aria-describedby":d.ariaDescribedBy}),!s&&r.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},r.secondaryText)):e(t,null,r.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:r.icon,alt:r.name}),e("span",{className:"adyen-checkout__dropdown__button__text"},u),r.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},r.secondaryText)))}export{d as default};
 //# sourceMappingURL=SelectButton.js.map

package/dist/es/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","filterable","toggleButtonRef","props","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":"0LAKA,SAASA,GAAoBC,WAAEA,EAAUC,gBAAEA,KAAoBC,IAC3D,OAAIF,EAAmBG,EAACC,MAAAA,IAAQF,EAAOG,IAAKJ,IAErCE,EAACG,SAAAA,CAAOC,GAAIL,EAAMK,GAAIC,mBAAkBN,EAAMO,gBAAiBC,KAAM,YAAcR,EAAOG,IAAKJ,GAC1G,CAEA,SAASU,EAAaT,GAClB,MAAMU,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAad,EAGtDe,EAAcJ,EAASK,oBAAsBL,EAASM,MAAQjB,EAAMkB,aAAe,GAInFC,EAAmBL,EAAWF,EAAYG,EAc1CK,EAAiBP,EAAW,KAAOb,EAAMF,WAZ7BuB,IACdA,EAAEC,iBACEC,SAASC,gBAAkBxB,EAAMyB,eAAeC,QAC3C1B,EAAMc,UACPd,EAAM2B,WAAWN,GAEdrB,EAAMyB,eAAeC,SAAS1B,EAAMyB,eAAeC,QAAQE,OAAK,EAMR5B,EAAM2B,WAEvEE,EAAiBhB,EAAW,KAAOb,EAAM8B,QAGzCC,EAAwBrB,EAAOL,GAAK,YAAYK,EAAOL,KAAO,GAEpE,OACIJ,EAACJ,EAAAA,CACGmC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CpB,EAC9C,2CAA4CC,EAC5C,4CAA6Cd,EAAMkC,UACnD,0CAA2ClC,EAAMmC,QACjD,6CAA8CxB,EAASyB,WAE3DA,SAAUpC,EAAMoC,SAChBtC,WAAYE,EAAMF,WAClBuC,QAASjB,EACTkB,UAAYzB,EAAmC,KAAxBb,EAAMuC,gBAC7BxC,gBAAiBC,EAAMD,iBAErBC,EAAMF,WAOJG,EAACuC,EAAAA,MACK1B,GAAYH,EAAS8B,MAAQxC,EAACyC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASM,OACzHhB,EAAC4C,QAAAA,CACGC,MAAO3B,EACP4B,oBAAkB,OAClBC,gBAAehD,EAAMiD,aACrBC,gBAAepC,EACfqC,YAAWnD,EAAMiD,aACjBG,aAAa,MACbpB,UAAU,+BACVqB,QAASrD,EAAMqD,QACfvB,QAASD,EACT1B,IAAKH,EAAMyB,eACX6B,KAAK,WACLC,wBAAuBxB,EACvBvB,KAAK,OACLgD,SAAUxD,EAAMa,SAChBR,GAAIL,EAAMK,GACVC,mBAAkBN,EAAMO,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","filterable","toggleButtonRef","props","id","strippedProps","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":"0LAKA,SAASA,GAAoBC,WAAEA,EAAUC,gBAAEA,KAAoBC,IAC3D,GAAIF,EAAY,CAEZ,MAAMG,GAAEA,KAAOC,GAAkBF,EACjC,OAAOG,EAACC,MAAAA,IAAQF,EAAeG,IAAKN,GACxC,CAEA,OAAOI,EAACG,SAAAA,CAAOL,GAAID,EAAMC,GAAIM,mBAAkBP,EAAMQ,gBAAiBC,KAAM,YAAcT,EAAOK,IAAKN,GAC1G,CAEA,SAASW,EAAaV,GAClB,MAAMW,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,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,EAAOV,GAAK,YAAYU,EAAOV,KAAO,GAEpE,OACIE,EAACN,EAAAA,CACGoC,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,mBAIlBC,EAAMyC,iBAAmBzC,EAAMC,IAAM,CAAEA,GAAID,EAAMC,KAEpDD,EAAMF,WAOJK,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,gBAAelD,EAAMmD,aACrBC,gBAAerC,EACfsC,YAAWrD,EAAMmD,aACjBG,aAAa,MACbrB,UAAU,+BACVsB,QAASvD,EAAMuD,QACfxB,QAASD,EACTzB,IAAKL,EAAM0B,eACX8B,KAAK,WACLC,wBAAuBzB,EACvBvB,KAAK,OACLiD,SAAU1D,EAAMc,SAChBb,GAAID,EAAMC,GACVM,mBAAkBP,EAAMQ,mBAE1BO,GAAYH,EAAS+C,eACnBxD,EAACyD,OAAAA,CAAK3B,UAAU,oDAAoDrB,EAAS+C,gBA3BrFxD,EAACuC,OACI9B,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/components/internal/SecuredFields/SFP/SecuredFieldsProviderHandlers.js

@@ -1,2 +1,2 @@
-import{getCardImageUrl as e}from"../utils.js";import{ENCRYPTED_CARD_NUMBER as t,ENCRYPTED_SECURITY_CODE as s,ENCRYPTED_EXPIRY_DATE as i,ENCRYPTED_EXPIRY_MONTH as n,ENCRYPTED_EXPIRY_YEAR as r,CVC_POLICY_REQUIRED as o,DATE_POLICY_REQUIRED as a,OPTIONAL as l,HIDDEN as d}from"../lib/constants.js";import{existy as h}from"../lib/utilities/commonUtils.js";import u from"../../../../core/Errors/AdyenCheckoutError.js";function p(e,t,s,i){return(t!==l&&t!==d||0!==s[e])&&i[e]}var c={handleFocus:function(e){this.numCharsInField[e.fieldType]=e.numChars,this.props.onFocus(e)},handleOnAllValid:function(e){return!this.state.detectedUnsupportedBrands&&(this.setState({isSfpValid:e.allValid},(()=>{this.props.onChange(this.state,{event:"handleOnAllValid"}),this.props.onAllValid(e)})),!0)},handleOnAutoComplete:function(e){this.setState({autoCompleteName:e.value},(()=>{this.props.onChange(this.state,{event:"handleOnAutoComplete",fieldType:e.fieldType}),this.setState({autoCompleteName:null})})),this.props.onAutoComplete(e)},handleOnFieldValid:function(e){return(!this.state.detectedUnsupportedBrands||e.fieldType!==t)&&(this.setState((t=>({data:{...t.data,[e.encryptedFieldName]:e.blob},valid:{...t.valid,[e.encryptedFieldName]:e.valid},errors:{...t.errors,[e.fieldType]:t.errors[e.fieldType]??!1}})),(()=>{this.props.onChange(this.state,{event:"handleOnFieldValid",fieldType:e.fieldType}),this.props.onFieldValid(e)})),!0)},handleOnLoad:function(e){clearTimeout(this.csfLoadFailTimeout),this.csfLoadFailTimeout=null,this.props.onLoad(e),this.csfConfigFailTimeout=setTimeout((()=>{"ready"!==this.state.status&&(this.setState({status:"csfConfigFailure"}),this.props.onError(new u("ERROR","secured fields have failed to configure")))}),this.csfConfigFailTimeoutMS)},handleOnConfigSuccess:function(e){clearTimeout(this.csfConfigFailTimeout),this.csfConfigFailTimeout=null,this.setState({status:"ready"},(()=>{this.props.onConfigSuccess(e)}))},handleOnBrand:function(t){this.setState((e=>{const l=p(s,t.cvcPolicy,this.numCharsInField,e.errors),d=1===this.numDateFields?p(i,t.expiryDatePolicy,this.numCharsInField,e.errors):null,u=2===this.numDateFields?p(n,t.expiryDatePolicy,this.numCharsInField,e.errors):null,c=2===this.numDateFields?p(r,t.expiryDatePolicy,this.numCharsInField,e.errors):null;return{brand:t.brand,cvcPolicy:t.cvcPolicy??o,showSocialSecurityNumber:t.showSocialSecurityNumber,errors:{...e.errors,...h(l)&&{[s]:l},...h(d)&&{[i]:d},...h(u)&&{[n]:u},...h(c)&&{[r]:c}},expiryDatePolicy:t.expiryDatePolicy??a}}),(()=>{this.props.onChange(this.state,{event:"handleOnBrand"});const s=this.props.brandsConfiguration[t.brand]?.icon??e(t.brand,this.props.resources);this.props.onBrand({...t,brandImageUrl:s})}))},handleOnError:function(e,s=null){const i=e.error;return this.setState((n=>({errors:{...n.errors,[e.fieldType]:i||!1},...s&&{data:{...n.data,[t]:void 0}},...s&&{valid:{...n.valid,[t]:!1}},...s&&{isSfpValid:!1}})),(()=>{this.props.onChange(this.state,{event:"handleOnError",fieldType:e.fieldType})})),!0},handleOnNoDataRequired:function(){this.setState({status:"ready"},(()=>this.props.onChange({isSfpValid:!0})))},handleOnTouchstartIOS:function(e){this.props.disableIOSArrowKeys?.(e)},handleKeyPressed:function(e){if("enterKeyPressed"===e.action){const e=new KeyboardEvent("keypress",{bubbles:!0,cancelable:!0,key:"Enter",code:"Enter"});this.props.handleKeyPress?.(e)}}};export{c as default};
+import{getCardImageUrl as e}from"../utils.js";import{ENCRYPTED_CARD_NUMBER as t,ENCRYPTED_SECURITY_CODE as s,ENCRYPTED_EXPIRY_DATE as i,ENCRYPTED_EXPIRY_MONTH as n,ENCRYPTED_EXPIRY_YEAR as r,CVC_POLICY_REQUIRED as o,DATE_POLICY_REQUIRED as a,OPTIONAL as l,HIDDEN as d}from"../lib/constants.js";import{existy as h}from"../../../../utils/commonUtils.js";import u from"../../../../core/Errors/AdyenCheckoutError.js";function p(e,t,s,i){return(t!==l&&t!==d||0!==s[e])&&i[e]}var c={handleFocus:function(e){this.numCharsInField[e.fieldType]=e.numChars,this.props.onFocus(e)},handleOnAllValid:function(e){return!this.state.detectedUnsupportedBrands&&(this.setState({isSfpValid:e.allValid},(()=>{this.props.onChange(this.state,{event:"handleOnAllValid"}),this.props.onAllValid(e)})),!0)},handleOnAutoComplete:function(e){this.setState({autoCompleteName:e.value},(()=>{this.props.onChange(this.state,{event:"handleOnAutoComplete",fieldType:e.fieldType}),this.setState({autoCompleteName:null})})),this.props.onAutoComplete(e)},handleOnFieldValid:function(e){return(!this.state.detectedUnsupportedBrands||e.fieldType!==t)&&(this.setState((t=>({data:{...t.data,[e.encryptedFieldName]:e.blob},valid:{...t.valid,[e.encryptedFieldName]:e.valid},errors:{...t.errors,[e.fieldType]:t.errors[e.fieldType]??!1}})),(()=>{this.props.onChange(this.state,{event:"handleOnFieldValid",fieldType:e.fieldType}),this.props.onFieldValid(e)})),!0)},handleOnLoad:function(e){clearTimeout(this.csfLoadFailTimeout),this.csfLoadFailTimeout=null,this.props.onLoad(e),this.csfConfigFailTimeout=setTimeout((()=>{"ready"!==this.state.status&&(this.setState({status:"csfConfigFailure"}),this.props.onError(new u("ERROR","secured fields have failed to configure")))}),this.csfConfigFailTimeoutMS)},handleOnConfigSuccess:function(e){clearTimeout(this.csfConfigFailTimeout),this.csfConfigFailTimeout=null,this.setState({status:"ready"},(()=>{this.props.onConfigSuccess(e)}))},handleOnBrand:function(t){this.setState((e=>{const l=p(s,t.cvcPolicy,this.numCharsInField,e.errors),d=1===this.numDateFields?p(i,t.expiryDatePolicy,this.numCharsInField,e.errors):null,u=2===this.numDateFields?p(n,t.expiryDatePolicy,this.numCharsInField,e.errors):null,c=2===this.numDateFields?p(r,t.expiryDatePolicy,this.numCharsInField,e.errors):null;return{brand:t.brand,cvcPolicy:t.cvcPolicy??o,showSocialSecurityNumber:t.showSocialSecurityNumber,errors:{...e.errors,...h(l)&&{[s]:l},...h(d)&&{[i]:d},...h(u)&&{[n]:u},...h(c)&&{[r]:c}},expiryDatePolicy:t.expiryDatePolicy??a}}),(()=>{this.props.onChange(this.state,{event:"handleOnBrand"});const s=this.props.brandsConfiguration[t.brand]?.icon??e(t.brand,this.props.resources);this.props.onBrand({...t,brandImageUrl:s})}))},handleOnError:function(e,s=null){const i=e.error;return this.setState((n=>({errors:{...n.errors,[e.fieldType]:i||!1},...s&&{data:{...n.data,[t]:void 0}},...s&&{valid:{...n.valid,[t]:!1}},...s&&{isSfpValid:!1}})),(()=>{this.props.onChange(this.state,{event:"handleOnError",fieldType:e.fieldType})})),!0},handleOnNoDataRequired:function(){this.setState({status:"ready"},(()=>this.props.onChange({isSfpValid:!0})))},handleOnTouchstartIOS:function(e){this.props.disableIOSArrowKeys?.(e)},handleKeyPressed:function(e){if("enterKeyPressed"===e.action){const e=new KeyboardEvent("keypress",{bubbles:!0,cancelable:!0,key:"Enter",code:"Enter"});this.props.handleKeyPress?.(e)}}};export{c as default};
 //# sourceMappingURL=SecuredFieldsProviderHandlers.js.map