@adyen/adyen-web 6.40.1 → 6.41.0

package/dist/es/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useRef as r,useState as o,useCallback as s,useEffect as t}from"../../../../../external/preact/hooks/dist/hooks.js";import{loginValidationRules as n}from"./validate.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import i from"../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as l}from"../../../../../utils/setFocus.js";import p from"../../../FormFields/Field/Field.js";import u from"../../../FormFields/InputEmail.js";const m=m=>{const{i18n:d}=a(),c=r(null),{handleChangeFor:g,data:h,triggerValidation:f,valid:L,errors:F,isValid:v}=i({schema:["shopperLogin"],rules:n,formHolder:c}),j=r({validateInput:null,focusInput:null}),[I,b]=o(!1),E=s(()=>{b(!0),f()},[f]);t(()=>{c.current&&m.errorMessage&&l(c.current,"shopperLogin")},[m.errorMessage]),t(()=>{h.shopperLogin&&b(!0)},[h.shopperLogin]),t(()=>{j.current.validateInput=E,m.onSetInputHandlers(j.current)},[E,m.onSetInputHandlers]);const M=s(e=>{"Enter"===e.key&&m.onPressEnter()},[m.onPressEnter]);return t(()=>{m.onChange({data:h,valid:L,errors:F,isValid:v})},[h,L,F]),e("div",{ref:c},e(p,{name:"shopperLogin",label:d.get("ctp.login.inputLabel"),errorMessage:I?m.errorMessage||F.shopperLogin&&d.get(F.shopperLogin.errorMessage):null,classNameModifiers:["shopperLogin"],errorLive:!0},e(u,{name:"shopperLogin",autocorrect:"off",spellcheck:!1,value:h.shopperLogin,disabled:m.disabled,onInput:g("shopperLogin","input"),onBlur:g("shopperLogin","blur"),onKeyPress:M,autocomplete:"email"})))};export{m as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useRef as r,useState as o,useCallback as s,useEffect as t}from"../../../../../external/preact/hooks/dist/hooks.js";import{loginValidationRules as n}from"./validate.js";import{useCoreContext as a}from"../../../../../core/Context/CoreProvider.js";import i from"../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as l}from"../../../../../utils/setFocus.js";import p from"../../../FormFields/Field/Field.js";import u from"../../../FormFields/InputEmail.js";const m=m=>{const{i18n:d}=a(),c=r(null),{handleChangeFor:g,data:h,triggerValidation:f,valid:L,errors:F,isValid:v}=i({schema:["shopperLogin"],rules:n,formHolder:c}),j=r({validateInput:null,focusInput:null}),[I,b]=o(!1),E=s(()=>{b(!0),f()},[f]);t(()=>{c.current&&m.errorMessage&&l(c.current,"shopperLogin")},[m.errorMessage]),t(()=>{h.shopperLogin&&b(!0)},[h.shopperLogin]),t(()=>{j.current.validateInput=E,m.onSetInputHandlers(j.current)},[E,m.onSetInputHandlers]);const M=s(e=>{"Enter"===e.key&&m.onPressEnter()},[m.onPressEnter]);return t(()=>{m.onChange({data:h,valid:L,errors:F,isValid:v})},[h,L,F]),e("div",{ref:c},e(p,{name:"shopperLogin",label:d.get("ctp.login.inputLabel"),errorMessage:I?m.errorMessage||F.shopperLogin&&d.get(F.shopperLogin.errorMessage):null,classNameModifiers:["shopperLogin"],errorLive:!0},e(u,{name:"shopperLogin",autocorrect:"off",spellcheck:!1,value:h.shopperLogin,disabled:m.disabled,onInput:g("shopperLogin","input"),onBlur:g("shopperLogin","blur"),onKeyDown:M,autocomplete:"email"})))};export{m as default};
 //# sourceMappingURL=CtPLoginInput.js.map

package/dist/es/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPLoginInput.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { loginValidationRules } from './validate';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../utils/useForm';\nimport Field from '../../../FormFields/Field';\nimport InputEmail from '../../../FormFields/InputEmail';\nimport { setFocusOnField } from '../../../../../utils/setFocus';\n\ntype OnChangeProps = { data: CtPLoginInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPLoginInputProps {\n    disabled: boolean;\n    errorMessage?: string;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onSetInputHandlers(handlers: CtPLoginInputHandlers): void;\n}\n\ninterface CtPLoginInputDataState {\n    shopperLogin?: string;\n}\n\nexport type CtPLoginInputHandlers = {\n    validateInput(): void;\n    focusInput(): void;\n};\n\nconst CtPLoginInput = (props: Readonly<CtPLoginInputProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const formSchema = ['shopperLogin'];\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid } = useFormWithA11y<CtPLoginInputDataState>({\n        schema: formSchema,\n        rules: loginValidationRules,\n        formHolder: containerRef\n    });\n    const loginInputHandlersRef = useRef<CtPLoginInputHandlers>({ validateInput: null, focusInput: null });\n    const [isLoginInputDirty, setIsLoginInputDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsLoginInputDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    useEffect(() => {\n        if (containerRef.current && props.errorMessage) {\n            setFocusOnField(containerRef.current, 'shopperLogin');\n        }\n    }, [props.errorMessage]);\n\n    useEffect(() => {\n        if (data.shopperLogin) setIsLoginInputDirty(true);\n    }, [data.shopperLogin]);\n\n    useEffect(() => {\n        loginInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(loginInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    return (\n        <div ref={containerRef}>\n            <Field\n                name=\"shopperLogin\"\n                label={i18n.get('ctp.login.inputLabel')}\n                errorMessage={isLoginInputDirty ? props.errorMessage || (errors.shopperLogin && i18n.get(errors.shopperLogin.errorMessage)) : null}\n                classNameModifiers={['shopperLogin']}\n                errorLive={true}\n            >\n                <InputEmail\n                    name={'shopperLogin'}\n                    autocorrect={'off'}\n                    spellcheck={false}\n                    value={data.shopperLogin}\n                    disabled={props.disabled}\n                    onInput={handleChangeFor('shopperLogin', 'input')}\n                    onBlur={handleChangeFor('shopperLogin', 'blur')}\n                    onKeyPress={handleOnKeyPress}\n                    autocomplete={'email'}\n                />\n            </Field>\n        </div>\n    );\n};\n\nexport default CtPLoginInput;\n"],"names":["CtPLoginInput","props","i18n","useCoreContext","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","useFormWithA11y","schema","rules","loginValidationRules","formHolder","loginInputHandlersRef","validateInput","focusInput","isLoginInputDirty","setIsLoginInputDirty","useState","useCallback","useEffect","current","errorMessage","setFocusOnField","shopperLogin","onSetInputHandlers","handleOnKeyPress","event","key","onPressEnter","onChange","h","div","ref","Field","name","label","get","classNameModifiers","errorLive","InputEmail","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","autocomplete"],"mappings":"+iBA4BA,MAAMA,EAAiBC,IACnB,MAAMC,KAAEA,GAASC,IAEXC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAAwC,CACjHC,OAHe,CAAC,gBAIhBC,MAAOC,EACPC,WAAYZ,IAEVa,EAAwBZ,EAA8B,CAAEa,cAAe,KAAMC,WAAY,QACxFC,EAAmBC,GAAwBC,GAAkB,GAE9DJ,EAAgBK,EAAY,KAC9BF,GAAqB,GACrBb,KACD,CAACA,IAEJgB,EAAU,KACFpB,EAAaqB,SAAWxB,EAAMyB,cAC9BC,EAAgBvB,EAAaqB,QAAS,iBAE3C,CAACxB,EAAMyB,eAEVF,EAAU,KACFjB,EAAKqB,cAAcP,GAAqB,IAC7C,CAACd,EAAKqB,eAETJ,EAAU,KACNP,EAAsBQ,QAAQP,cAAgBA,EAC9CjB,EAAM4B,mBAAmBZ,EAAsBQ,UAChD,CAACP,EAAejB,EAAM4B,qBAEzB,MAAMC,EAAmBP,EACpBQ,IACqB,UAAdA,EAAMC,KACD/B,EAAMgC,gBAGnB,CAAChC,EAAMgC,eAOX,OAJAT,EAAU,KACNvB,EAAMiC,SAAS,CAAE3B,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAGbyB,EAACC,MAAAA,CAAIC,IAAKjC,GACN+B,EAACG,EAAAA,CACGC,KAAK,eACLC,MAAOtC,EAAKuC,IAAI,wBAChBf,aAAcN,EAAoBnB,EAAMyB,cAAiBhB,EAAOkB,cAAgB1B,EAAKuC,IAAI/B,EAAOkB,aAAaF,cAAiB,KAC9HgB,mBAAoB,CAAC,gBACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGL,KAAM,eACNM,YAAa,MACbC,YAAY,EACZC,MAAOxC,EAAKqB,aACZoB,SAAU/C,EAAM+C,SAChBC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,QACxC6C,WAAYrB,EACZsB,aAAc"}
+{"version":3,"file":"CtPLoginInput.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPLogin/CtPLoginInput.tsx"],"sourcesContent":["import { h, TargetedKeyboardEvent } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { loginValidationRules } from './validate';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../utils/useForm';\nimport Field from '../../../FormFields/Field';\nimport InputEmail from '../../../FormFields/InputEmail';\nimport { setFocusOnField } from '../../../../../utils/setFocus';\n\ntype OnChangeProps = { data: CtPLoginInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPLoginInputProps {\n    disabled: boolean;\n    errorMessage?: string;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onSetInputHandlers(handlers: CtPLoginInputHandlers): void;\n}\n\ninterface CtPLoginInputDataState {\n    shopperLogin?: string;\n}\n\nexport type CtPLoginInputHandlers = {\n    validateInput(): void;\n    focusInput(): void;\n};\n\nconst CtPLoginInput = (props: Readonly<CtPLoginInputProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const formSchema = ['shopperLogin'];\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid } = useFormWithA11y<CtPLoginInputDataState>({\n        schema: formSchema,\n        rules: loginValidationRules,\n        formHolder: containerRef\n    });\n    const loginInputHandlersRef = useRef<CtPLoginInputHandlers>({ validateInput: null, focusInput: null });\n    const [isLoginInputDirty, setIsLoginInputDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsLoginInputDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    useEffect(() => {\n        if (containerRef.current && props.errorMessage) {\n            setFocusOnField(containerRef.current, 'shopperLogin');\n        }\n    }, [props.errorMessage]);\n\n    useEffect(() => {\n        if (data.shopperLogin) setIsLoginInputDirty(true);\n    }, [data.shopperLogin]);\n\n    useEffect(() => {\n        loginInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(loginInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnKeyDown = useCallback(\n        (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    return (\n        <div ref={containerRef}>\n            <Field\n                name=\"shopperLogin\"\n                label={i18n.get('ctp.login.inputLabel')}\n                errorMessage={isLoginInputDirty ? props.errorMessage || (errors.shopperLogin && i18n.get(errors.shopperLogin.errorMessage)) : null}\n                classNameModifiers={['shopperLogin']}\n                errorLive={true}\n            >\n                <InputEmail\n                    name={'shopperLogin'}\n                    autocorrect={'off'}\n                    spellcheck={false}\n                    value={data.shopperLogin}\n                    disabled={props.disabled}\n                    onInput={handleChangeFor('shopperLogin', 'input')}\n                    onBlur={handleChangeFor('shopperLogin', 'blur')}\n                    onKeyDown={handleOnKeyDown}\n                    autocomplete={'email'}\n                />\n            </Field>\n        </div>\n    );\n};\n\nexport default CtPLoginInput;\n"],"names":["CtPLoginInput","props","i18n","useCoreContext","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","useFormWithA11y","schema","rules","loginValidationRules","formHolder","loginInputHandlersRef","validateInput","focusInput","isLoginInputDirty","setIsLoginInputDirty","useState","useCallback","useEffect","current","errorMessage","setFocusOnField","shopperLogin","onSetInputHandlers","handleOnKeyDown","event","key","onPressEnter","onChange","h","div","ref","Field","name","label","get","classNameModifiers","errorLive","InputEmail","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyDown","autocomplete"],"mappings":"+iBA4BA,MAAMA,EAAiBC,IACnB,MAAMC,KAAEA,GAASC,IAEXC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAAwC,CACjHC,OAHe,CAAC,gBAIhBC,MAAOC,EACPC,WAAYZ,IAEVa,EAAwBZ,EAA8B,CAAEa,cAAe,KAAMC,WAAY,QACxFC,EAAmBC,GAAwBC,GAAkB,GAE9DJ,EAAgBK,EAAY,KAC9BF,GAAqB,GACrBb,KACD,CAACA,IAEJgB,EAAU,KACFpB,EAAaqB,SAAWxB,EAAMyB,cAC9BC,EAAgBvB,EAAaqB,QAAS,iBAE3C,CAACxB,EAAMyB,eAEVF,EAAU,KACFjB,EAAKqB,cAAcP,GAAqB,IAC7C,CAACd,EAAKqB,eAETJ,EAAU,KACNP,EAAsBQ,QAAQP,cAAgBA,EAC9CjB,EAAM4B,mBAAmBZ,EAAsBQ,UAChD,CAACP,EAAejB,EAAM4B,qBAEzB,MAAMC,EAAkBP,EACnBQ,IACqB,UAAdA,EAAMC,KACD/B,EAAMgC,gBAGnB,CAAChC,EAAMgC,eAOX,OAJAT,EAAU,KACNvB,EAAMiC,SAAS,CAAE3B,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAGbyB,EAACC,MAAAA,CAAIC,IAAKjC,GACN+B,EAACG,EAAAA,CACGC,KAAK,eACLC,MAAOtC,EAAKuC,IAAI,wBAChBf,aAAcN,EAAoBnB,EAAMyB,cAAiBhB,EAAOkB,cAAgB1B,EAAKuC,IAAI/B,EAAOkB,aAAaF,cAAiB,KAC9HgB,mBAAoB,CAAC,gBACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGL,KAAM,eACNM,YAAa,MACbC,YAAY,EACZC,MAAOxC,EAAKqB,aACZoB,SAAU/C,EAAM+C,SAChBC,QAAS3C,EAAgB,eAAgB,SACzC4C,OAAQ5C,EAAgB,eAAgB,QACxC6C,UAAWrB,EACXsB,aAAc"}

package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as r,useRef as t,useCallback as o,useEffect as s}from"../../../../../../external/preact/hooks/dist/hooks.js";import{otpValidationRules as a}from"./validate.js";import n from"./CtPResendOtpLink.js";import l from"../../../context/useClickToPayContext.js";import{useCoreContext as i}from"../../../../../../core/Context/CoreProvider.js";import p from"../../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as u}from"../../../../../../utils/setFocus.js";import c from"../../../../FormFields/Field/Field.js";import d from"../../../../FormFields/InputText.js";import{getErrorMessage as m}from"../../../../../../utils/getErrorMessage.js";const f=f=>{const{i18n:g}=i(),{configuration:{disableOtpAutoFocus:j}}=l(),[C,F]=r(null),h=t(null),{handleChangeFor:v,data:b,triggerValidation:k,valid:x,errors:E,isValid:M,setData:P}=p({schema:["otp"],rules:a,formHolder:h}),y=t({validateInput:null}),I=t(null),[R,L]=r(!1),V=o(()=>{L(!0),k()},[k]);s(()=>{b.otp&&L(!0)},[b.otp]),s(()=>{!j&&I.current&&I.current.focus()},[I.current,j]),s(()=>{h.current&&f.errorMessage&&u(h.current,"otp")},[f.errorMessage]),s(()=>{y.current.validateInput=V,f.onSetInputHandlers(y.current)},[V,f.onSetInputHandlers]);const _=o(()=>{P("otp",""),F(null),j||I.current.focus(),f.onResendCode()},[f.onResendCode,I.current,j]),w=o(e=>{const r=g.get(`ctp.errors.${e}`);r&&F(r)},[g]),H=o(e=>{"Enter"===e.key&&f.onPressEnter()},[f.onPressEnter]);s(()=>{f.onChange({data:b,valid:x,errors:E,isValid:M})},[b,x,E]);const N=o(()=>R?C||f.errorMessage||m(g,E.otp,g.get("ctp.otp.fieldLabel")):null,[R,C,f.errorMessage,E.otp,g]);return e("div",{ref:h,className:"adyen-checkout-ctp__otp-field-wrapper"},e(c,{name:"oneTimePassword",label:g.get("ctp.otp.fieldLabel"),errorMessage:N(),classNameModifiers:["otp"],errorLive:!0},e(d,{name:"otp",autocorrect:"off",spellcheck:!1,value:b.otp,disabled:f.disabled,onInput:v("otp","input"),onBlur:v("otp","blur"),onKeyPress:H,setRef:e=>{I.current=e},autocomplete:"off"})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:f.isValidatingOtp,onError:w,onResendCode:_})))};export{f as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as r,useRef as t,useCallback as o,useEffect as s}from"../../../../../../external/preact/hooks/dist/hooks.js";import{otpValidationRules as a}from"./validate.js";import n from"./CtPResendOtpLink.js";import l from"../../../context/useClickToPayContext.js";import{useCoreContext as i}from"../../../../../../core/Context/CoreProvider.js";import p from"../../../../../../utils/useForm/useFormWithA11y.js";import{setFocusOnField as u}from"../../../../../../utils/setFocus.js";import c from"../../../../FormFields/Field/Field.js";import d from"../../../../FormFields/InputText.js";import{getErrorMessage as m}from"../../../../../../utils/getErrorMessage.js";const f=f=>{const{i18n:g}=i(),{configuration:{disableOtpAutoFocus:j}}=l(),[C,F]=r(null),h=t(null),{handleChangeFor:v,data:b,triggerValidation:k,valid:x,errors:E,isValid:M,setData:y}=p({schema:["otp"],rules:a,formHolder:h}),I=t({validateInput:null}),P=t(null),[R,w]=r(!1),L=o(()=>{w(!0),k()},[k]);s(()=>{b.otp&&w(!0)},[b.otp]),s(()=>{!j&&P.current&&P.current.focus()},[P.current,j]),s(()=>{h.current&&f.errorMessage&&u(h.current,"otp")},[f.errorMessage]),s(()=>{I.current.validateInput=L,f.onSetInputHandlers(I.current)},[L,f.onSetInputHandlers]);const V=o(()=>{y("otp",""),F(null),j||P.current.focus(),f.onResendCode()},[f.onResendCode,P.current,j]),_=o(e=>{const r=g.get(`ctp.errors.${e}`);r&&F(r)},[g]),H=o(e=>{"Enter"===e.key&&f.onPressEnter()},[f.onPressEnter]);s(()=>{f.onChange({data:b,valid:x,errors:E,isValid:M})},[b,x,E]);const N=o(()=>R?C||f.errorMessage||m(g,E.otp,g.get("ctp.otp.fieldLabel")):null,[R,C,f.errorMessage,E.otp,g]);return e("div",{ref:h,className:"adyen-checkout-ctp__otp-field-wrapper"},e(c,{name:"oneTimePassword",label:g.get("ctp.otp.fieldLabel"),errorMessage:N(),classNameModifiers:["otp"],errorLive:!0},e(d,{name:"otp",autocorrect:"off",spellcheck:!1,value:b.otp,disabled:f.disabled,onInput:v("otp","input"),onBlur:v("otp","blur"),onKeyDown:H,setRef:e=>{P.current=e},autocomplete:"off"})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:f.isValidatingOtp,onError:_,onResendCode:V})))};export{f as default};
 //# sourceMappingURL=CtPOneTimePasswordInput.js.map

package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../../utils/useForm';\nimport { setFocusOnField } from '../../../../../../utils/setFocus';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\nimport { getErrorMessage } from '../../../../../../utils/getErrorMessage';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n    hideResendOtpButton: boolean;\n    disabled: boolean;\n    isValidatingOtp: boolean;\n    errorMessage?: string;\n    onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n    otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n    validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: Readonly<CtPOneTimePasswordInputProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const {\n        configuration: { disableOtpAutoFocus }\n    } = useClickToPayContext();\n\n    const formSchema = ['otp'];\n    const [resendOtpError, setResendOtpError] = useState<string>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useFormWithA11y<CtPOneTimePasswordInputDataState>({\n        schema: formSchema,\n        rules: otpValidationRules,\n        formHolder: containerRef\n    });\n    const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsOtpFieldDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    /**\n     * If shopper changes the value of the OTP fields, input becomes dirty\n     */\n    useEffect(() => {\n        if (data.otp) setIsOtpFieldDirty(true);\n    }, [data.otp]);\n\n    useEffect(() => {\n        if (!disableOtpAutoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current, disableOtpAutoFocus]);\n\n    useEffect(() => {\n        if (containerRef.current && props.errorMessage) {\n            setFocusOnField(containerRef.current, 'otp');\n        }\n    }, [props.errorMessage]);\n\n    useEffect(() => {\n        otpInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(otpInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnResendOtp = useCallback(() => {\n        setData('otp', '');\n        setResendOtpError(null);\n        if (!disableOtpAutoFocus) {\n            inputRef.current.focus();\n        }\n        props.onResendCode();\n    }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n    const handleOnResendOtpError = useCallback(\n        (errorCode: string) => {\n            const message = i18n.get(`ctp.errors.${errorCode}`);\n            if (message) setResendOtpError(message);\n        },\n        [i18n]\n    );\n\n    const handleOnKeyPress = useCallback(\n        (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    const getOtpErrorMessage = useCallback(() => {\n        if (!isOtpFielDirty) return null;\n\n        return resendOtpError || props.errorMessage || getErrorMessage(i18n, errors.otp, i18n.get('ctp.otp.fieldLabel'));\n    }, [isOtpFielDirty, resendOtpError, props.errorMessage, errors.otp, i18n]);\n\n    return (\n        <div ref={containerRef} className={'adyen-checkout-ctp__otp-field-wrapper'}>\n            <Field\n                name=\"oneTimePassword\"\n                label={i18n.get('ctp.otp.fieldLabel')}\n                errorMessage={getOtpErrorMessage()}\n                classNameModifiers={['otp']}\n                errorLive={true}\n            >\n                <InputText\n                    name={'otp'}\n                    autocorrect={'off'}\n                    spellcheck={false}\n                    value={data.otp}\n                    disabled={props.disabled}\n                    onInput={handleChangeFor('otp', 'input')}\n                    onBlur={handleChangeFor('otp', 'blur')}\n                    onKeyPress={handleOnKeyPress}\n                    setRef={(ref: HTMLInputElement) => {\n                        inputRef.current = ref;\n                    }}\n                    autocomplete={'off'}\n                />\n            </Field>\n            <div className={'adyen-checkout-ctp__otp-resend-code-wrapper'}>\n                <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n            </div>\n        </div>\n    );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useFormWithA11y","schema","rules","otpValidationRules","formHolder","otpInputHandlersRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","errorMessage","setFocusOnField","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyPress","event","key","onPressEnter","onChange","getOtpErrorMessage","getErrorMessage","h","div","ref","className","Field","name","label","classNameModifiers","errorLive","InputText","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","setRef","autocomplete","CtPResendOtpLink","isValidatingOtp","onError"],"mappings":"2uBAkCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,MACvDC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAAkD,CACpIC,OAJe,CAAC,OAKhBC,MAAOC,EACPC,WAAYb,IAEVc,EAAsBb,EAAwC,CAAEc,cAAe,OAC/EC,EAAWf,EAAyB,OACnCgB,EAAgBC,GAAsBnB,GAAkB,GAEzDgB,EAAgBI,EAAY,KAC9BD,GAAmB,GACnBd,KACD,CAACA,IAKJgB,EAAU,KACFjB,EAAKkB,KAAKH,GAAmB,IAClC,CAACf,EAAKkB,MAETD,EAAU,MACDzB,GAAuBqB,EAASM,SACjCN,EAASM,QAAQC,SAEtB,CAACP,EAASM,QAAS3B,IAEtByB,EAAU,KACFpB,EAAasB,SAAW/B,EAAMiC,cAC9BC,EAAgBzB,EAAasB,QAAS,QAE3C,CAAC/B,EAAMiC,eAEVJ,EAAU,KACNN,EAAoBQ,QAAQP,cAAgBA,EAC5CxB,EAAMmC,mBAAmBZ,EAAoBQ,UAC9C,CAACP,EAAexB,EAAMmC,qBAEzB,MAAMC,EAAoBR,EAAY,KAClCX,EAAQ,MAAO,IACfV,EAAkB,MACbH,GACDqB,EAASM,QAAQC,QAErBhC,EAAMqC,gBACP,CAACrC,EAAMqC,aAAcZ,EAASM,QAAS3B,IAEpCkC,EAAyBV,EAC1BW,IACG,MAAMC,EAAUvC,EAAKwC,IAAI,cAAcF,KACnCC,GAASjC,EAAkBiC,IAEnC,CAACvC,IAGCyC,EAAmBd,EACpBe,IACqB,UAAdA,EAAMC,KACD5C,EAAM6C,gBAGnB,CAAC7C,EAAM6C,eAGXhB,EAAU,KACN7B,EAAM8C,SAAS,CAAElC,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAEjB,MAAMgC,EAAqBnB,EAAY,IAC9BF,EAEEpB,GAAkBN,EAAMiC,cAAgBe,EAAgB/C,EAAMc,EAAOe,IAAK7B,EAAKwC,IAAI,uBAF9D,KAG7B,CAACf,EAAgBpB,EAAgBN,EAAMiC,aAAclB,EAAOe,IAAK7B,IAEpE,OACIgD,EAACC,MAAAA,CAAIC,IAAK1C,EAAc2C,UAAW,yCAC/BH,EAACI,EAAAA,CACGC,KAAK,kBACLC,MAAOtD,EAAKwC,IAAI,sBAChBR,aAAcc,IACdS,mBAAoB,CAAC,OACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGJ,KAAM,MACNK,YAAa,MACbC,YAAY,EACZC,MAAOjD,EAAKkB,IACZgC,SAAU9D,EAAM8D,SAChBC,QAASpD,EAAgB,MAAO,SAChCqD,OAAQrD,EAAgB,MAAO,QAC/BsD,WAAYvB,EACZwB,OAASf,IACL1B,EAASM,QAAUoB,GAEvBgB,aAAc,SAGtBlB,EAACC,MAAAA,CAAIE,UAAW,+CACZH,EAACmB,EAAAA,CAAiBN,SAAU9D,EAAMqE,gBAAiBC,QAAShC,EAAwBD,aAAcD"}
+{"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h, TargetedKeyboardEvent } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { useFormWithA11y } from '../../../../../../utils/useForm';\nimport { setFocusOnField } from '../../../../../../utils/setFocus';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\nimport { getErrorMessage } from '../../../../../../utils/getErrorMessage';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n    hideResendOtpButton: boolean;\n    disabled: boolean;\n    isValidatingOtp: boolean;\n    errorMessage?: string;\n    onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n    onPressEnter(): Promise<void>;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n    otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n    validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: Readonly<CtPOneTimePasswordInputProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n    const {\n        configuration: { disableOtpAutoFocus }\n    } = useClickToPayContext();\n\n    const formSchema = ['otp'];\n    const [resendOtpError, setResendOtpError] = useState<string>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useFormWithA11y<CtPOneTimePasswordInputDataState>({\n        schema: formSchema,\n        rules: otpValidationRules,\n        formHolder: containerRef\n    });\n    const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n    const validateInput = useCallback(() => {\n        setIsOtpFieldDirty(true);\n        triggerValidation();\n    }, [triggerValidation]);\n\n    /**\n     * If shopper changes the value of the OTP fields, input becomes dirty\n     */\n    useEffect(() => {\n        if (data.otp) setIsOtpFieldDirty(true);\n    }, [data.otp]);\n\n    useEffect(() => {\n        if (!disableOtpAutoFocus && inputRef.current) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current, disableOtpAutoFocus]);\n\n    useEffect(() => {\n        if (containerRef.current && props.errorMessage) {\n            setFocusOnField(containerRef.current, 'otp');\n        }\n    }, [props.errorMessage]);\n\n    useEffect(() => {\n        otpInputHandlersRef.current.validateInput = validateInput;\n        props.onSetInputHandlers(otpInputHandlersRef.current);\n    }, [validateInput, props.onSetInputHandlers]);\n\n    const handleOnResendOtp = useCallback(() => {\n        setData('otp', '');\n        setResendOtpError(null);\n        if (!disableOtpAutoFocus) {\n            inputRef.current.focus();\n        }\n        props.onResendCode();\n    }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n    const handleOnResendOtpError = useCallback(\n        (errorCode: string) => {\n            const message = i18n.get(`ctp.errors.${errorCode}`);\n            if (message) setResendOtpError(message);\n        },\n        [i18n]\n    );\n\n    const handleOnKeyDown = useCallback(\n        (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (event.key === 'Enter') {\n                void props.onPressEnter();\n            }\n        },\n        [props.onPressEnter]\n    );\n\n    useEffect(() => {\n        props.onChange({ data, valid, errors, isValid });\n    }, [data, valid, errors]);\n\n    const getOtpErrorMessage = useCallback(() => {\n        if (!isOtpFielDirty) return null;\n\n        return resendOtpError || props.errorMessage || getErrorMessage(i18n, errors.otp, i18n.get('ctp.otp.fieldLabel'));\n    }, [isOtpFielDirty, resendOtpError, props.errorMessage, errors.otp, i18n]);\n\n    return (\n        <div ref={containerRef} className={'adyen-checkout-ctp__otp-field-wrapper'}>\n            <Field\n                name=\"oneTimePassword\"\n                label={i18n.get('ctp.otp.fieldLabel')}\n                errorMessage={getOtpErrorMessage()}\n                classNameModifiers={['otp']}\n                errorLive={true}\n            >\n                <InputText\n                    name={'otp'}\n                    autocorrect={'off'}\n                    spellcheck={false}\n                    value={data.otp}\n                    disabled={props.disabled}\n                    onInput={handleChangeFor('otp', 'input')}\n                    onBlur={handleChangeFor('otp', 'blur')}\n                    onKeyDown={handleOnKeyDown}\n                    setRef={(ref: HTMLInputElement) => {\n                        inputRef.current = ref;\n                    }}\n                    autocomplete={'off'}\n                />\n            </Field>\n            <div className={'adyen-checkout-ctp__otp-resend-code-wrapper'}>\n                <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n            </div>\n        </div>\n    );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","containerRef","useRef","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useFormWithA11y","schema","rules","otpValidationRules","formHolder","otpInputHandlersRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","errorMessage","setFocusOnField","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyDown","event","key","onPressEnter","onChange","getOtpErrorMessage","getErrorMessage","h","div","ref","className","Field","name","label","classNameModifiers","errorLive","InputText","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyDown","setRef","autocomplete","CtPResendOtpLink","isValidatingOtp","onError"],"mappings":"2uBAkCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,MACvDC,EAAeC,EAAuB,OACtCC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAAkD,CACpIC,OAJe,CAAC,OAKhBC,MAAOC,EACPC,WAAYb,IAEVc,EAAsBb,EAAwC,CAAEc,cAAe,OAC/EC,EAAWf,EAAyB,OACnCgB,EAAgBC,GAAsBnB,GAAkB,GAEzDgB,EAAgBI,EAAY,KAC9BD,GAAmB,GACnBd,KACD,CAACA,IAKJgB,EAAU,KACFjB,EAAKkB,KAAKH,GAAmB,IAClC,CAACf,EAAKkB,MAETD,EAAU,MACDzB,GAAuBqB,EAASM,SACjCN,EAASM,QAAQC,SAEtB,CAACP,EAASM,QAAS3B,IAEtByB,EAAU,KACFpB,EAAasB,SAAW/B,EAAMiC,cAC9BC,EAAgBzB,EAAasB,QAAS,QAE3C,CAAC/B,EAAMiC,eAEVJ,EAAU,KACNN,EAAoBQ,QAAQP,cAAgBA,EAC5CxB,EAAMmC,mBAAmBZ,EAAoBQ,UAC9C,CAACP,EAAexB,EAAMmC,qBAEzB,MAAMC,EAAoBR,EAAY,KAClCX,EAAQ,MAAO,IACfV,EAAkB,MACbH,GACDqB,EAASM,QAAQC,QAErBhC,EAAMqC,gBACP,CAACrC,EAAMqC,aAAcZ,EAASM,QAAS3B,IAEpCkC,EAAyBV,EAC1BW,IACG,MAAMC,EAAUvC,EAAKwC,IAAI,cAAcF,KACnCC,GAASjC,EAAkBiC,IAEnC,CAACvC,IAGCyC,EAAkBd,EACnBe,IACqB,UAAdA,EAAMC,KACD5C,EAAM6C,gBAGnB,CAAC7C,EAAM6C,eAGXhB,EAAU,KACN7B,EAAM8C,SAAS,CAAElC,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAEjB,MAAMgC,EAAqBnB,EAAY,IAC9BF,EAEEpB,GAAkBN,EAAMiC,cAAgBe,EAAgB/C,EAAMc,EAAOe,IAAK7B,EAAKwC,IAAI,uBAF9D,KAG7B,CAACf,EAAgBpB,EAAgBN,EAAMiC,aAAclB,EAAOe,IAAK7B,IAEpE,OACIgD,EAACC,MAAAA,CAAIC,IAAK1C,EAAc2C,UAAW,yCAC/BH,EAACI,EAAAA,CACGC,KAAK,kBACLC,MAAOtD,EAAKwC,IAAI,sBAChBR,aAAcc,IACdS,mBAAoB,CAAC,OACrBC,WAAW,GAEXR,EAACS,EAAAA,CACGJ,KAAM,MACNK,YAAa,MACbC,YAAY,EACZC,MAAOjD,EAAKkB,IACZgC,SAAU9D,EAAM8D,SAChBC,QAASpD,EAAgB,MAAO,SAChCqD,OAAQrD,EAAgB,MAAO,QAC/BsD,UAAWvB,EACXwB,OAASf,IACL1B,EAASM,QAAUoB,GAEvBgB,aAAc,SAGtBlB,EAACC,MAAAA,CAAIE,UAAW,+CACZH,EAACmB,EAAAA,CAAiBN,SAAU9D,EAAMqE,gBAAiBC,QAAShC,EAAwBD,aAAcD"}

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPSection.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import n from"./CtPLogoutLink.js";import{CtPBrand as c}from"../CtPBrand/CtPBrand.js";import a from"../../context/useClickToPayContext.js";const o=({children:o,onEnterKeyPress:s})=>{const{isStandaloneComponent:r}=a();return e("div",{className:t("adyen-checkout-ctp__section",{"adyen-checkout-ctp__section--standalone":r}),onKeyPress:s},e("div",{className:"adyen-checkout-ctp__section-brand"},e(c,null),e(n,null)),o)};o.Title=({endAdornment:t,children:n})=>e("div",{className:"adyen-checkout-ctp__section-header"},e("h1",{className:"adyen-checkout-ctp__section-header-title"},n),t&&e("span",{className:"adyen-checkout-ctp__section-header-adornment"},t)),o.Text=({children:t})=>e("p",{className:"adyen-checkout-ctp__section-text"},t);export{o as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../_virtual/index.js";import n from"./CtPLogoutLink.js";import{CtPBrand as c}from"../CtPBrand/CtPBrand.js";import o from"../../context/useClickToPayContext.js";const a=({children:a,onEnterKeyPress:s})=>{const{isStandaloneComponent:r}=o();return e("div",{className:t("adyen-checkout-ctp__section",{"adyen-checkout-ctp__section--standalone":r}),onKeyDown:s},e("div",{className:"adyen-checkout-ctp__section-brand"},e(c,null),e(n,null)),a)};a.Title=({endAdornment:t,children:n})=>e("div",{className:"adyen-checkout-ctp__section-header"},e("h1",{className:"adyen-checkout-ctp__section-header-title"},n),t&&e("span",{className:"adyen-checkout-ctp__section-header-adornment"},t)),a.Text=({children:t})=>e("p",{className:"adyen-checkout-ctp__section-text"},t);export{a as default};
 //# sourceMappingURL=CtPSection.js.map

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPSection.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPSection.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport CtPLogoutLink from './CtPLogoutLink';\nimport { CtPBrand } from '../CtPBrand';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport './CtPSection.scss';\n\ninterface CtPSectionProps {\n    onEnterKeyPress: (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => void;\n    children?: h.JSX.Element[];\n}\n\nconst CtPSection = ({ children, onEnterKeyPress }: Readonly<CtPSectionProps>): h.JSX.Element => {\n    const { isStandaloneComponent } = useClickToPayContext();\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n            className={classnames('adyen-checkout-ctp__section', { 'adyen-checkout-ctp__section--standalone': isStandaloneComponent })}\n            onKeyPress={onEnterKeyPress}\n        >\n            <div className=\"adyen-checkout-ctp__section-brand\">\n                <CtPBrand />\n                <CtPLogoutLink />\n            </div>\n\n            {children}\n        </div>\n    );\n};\n\nconst Title = ({ endAdornment, children }: Readonly<{ endAdornment?; children }>) => (\n    <div className=\"adyen-checkout-ctp__section-header\">\n        <h1 className=\"adyen-checkout-ctp__section-header-title\">{children}</h1>\n        {endAdornment && <span className=\"adyen-checkout-ctp__section-header-adornment\">{endAdornment}</span>}\n    </div>\n);\nconst Text = ({ children }: Readonly<{ children }>) => <p className=\"adyen-checkout-ctp__section-text\">{children}</p>;\n\nCtPSection.Title = Title;\nCtPSection.Text = Text;\n\nexport default CtPSection;\n"],"names":["CtPSection","children","onEnterKeyPress","isStandaloneComponent","useClickToPayContext","h","div","className","classnames","onKeyPress","CtPBrand","CtPLogoutLink","Title","endAdornment","h1","span","Text","p"],"mappings":"wQAYA,MAAMA,EAAa,EAAGC,WAAUC,sBAC5B,MAAMC,sBAAEA,GAA0BC,IAElC,OAEIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,8BAA+B,CAAE,0CAA2CL,IAClGM,WAAYP,GAEZG,EAACC,MAAAA,CAAIC,UAAU,qCACXF,EAACK,EAAAA,MACDL,EAACM,EAAAA,OAGJV,IAabD,EAAWY,MARG,EAAGC,eAAcZ,cAC3BI,EAACC,MAAAA,CAAIC,UAAU,sCACXF,EAACS,KAAAA,CAAGP,UAAU,4CAA4CN,GACzDY,GAAgBR,EAACU,OAAAA,CAAKR,UAAU,gDAAgDM,IAMzFb,EAAWgB,KAHE,EAAGf,cAAuCI,EAACY,IAAAA,CAAEV,UAAU,oCAAoCN"}
+{"version":3,"file":"CtPSection.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPSection.tsx"],"sourcesContent":["import { h, TargetedKeyboardEvent } from 'preact';\nimport classnames from 'classnames';\nimport CtPLogoutLink from './CtPLogoutLink';\nimport { CtPBrand } from '../CtPBrand';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport './CtPSection.scss';\n\ninterface CtPSectionProps {\n    onEnterKeyPress: (event: TargetedKeyboardEvent<HTMLInputElement>) => void;\n    children?: h.JSX.Element[];\n}\n\nconst CtPSection = ({ children, onEnterKeyPress }: Readonly<CtPSectionProps>): h.JSX.Element => {\n    const { isStandaloneComponent } = useClickToPayContext();\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n            className={classnames('adyen-checkout-ctp__section', { 'adyen-checkout-ctp__section--standalone': isStandaloneComponent })}\n            onKeyDown={onEnterKeyPress}\n        >\n            <div className=\"adyen-checkout-ctp__section-brand\">\n                <CtPBrand />\n                <CtPLogoutLink />\n            </div>\n\n            {children}\n        </div>\n    );\n};\n\nconst Title = ({ endAdornment, children }: Readonly<{ endAdornment?; children }>) => (\n    <div className=\"adyen-checkout-ctp__section-header\">\n        <h1 className=\"adyen-checkout-ctp__section-header-title\">{children}</h1>\n        {endAdornment && <span className=\"adyen-checkout-ctp__section-header-adornment\">{endAdornment}</span>}\n    </div>\n);\nconst Text = ({ children }: Readonly<{ children }>) => <p className=\"adyen-checkout-ctp__section-text\">{children}</p>;\n\nCtPSection.Title = Title;\nCtPSection.Text = Text;\n\nexport default CtPSection;\n"],"names":["CtPSection","children","onEnterKeyPress","isStandaloneComponent","useClickToPayContext","h","div","className","classnames","onKeyDown","CtPBrand","CtPLogoutLink","Title","endAdornment","h1","span","Text","p"],"mappings":"wQAYA,MAAMA,EAAa,EAAGC,WAAUC,sBAC5B,MAAMC,sBAAEA,GAA0BC,IAElC,OAEIC,EAACC,MAAAA,CACGC,UAAWC,EAAW,8BAA+B,CAAE,0CAA2CL,IAClGM,UAAWP,GAEXG,EAACC,MAAAA,CAAIC,UAAU,qCACXF,EAACK,EAAAA,MACDL,EAACM,EAAAA,OAGJV,IAabD,EAAWY,MARG,EAAGC,eAAcZ,cAC3BI,EAACC,MAAAA,CAAIC,UAAU,sCACXF,EAACS,KAAAA,CAAGP,UAAU,4CAA4CN,GACzDY,GAAgBR,EAACU,OAAAA,CAAKR,UAAU,gDAAgDM,IAMzFb,EAAWgB,KAHE,EAAGf,cAAuCI,EAACY,IAAAA,CAAEV,UAAU,oCAAoCN"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import{getUniqueId as i}from"../../../../utils/idGenerator.js";import{useMemo as a}from"../../../../external/preact/hooks/dist/hooks.js";function d({children:d,classNameModifiers:o=[],classNamesFields:r=[],label:l,readonly:c=!1,description:n,id:_,renderLabelAsSectionHeading:m=!1}){const{i18n:f}=s(),p=a(()=>i("fieldset-description"),[]);return e("fieldset",{id:_,className:t(["adyen-checkout__fieldset",...o.map(e=>`adyen-checkout__fieldset--${e}`),{"adyen-checkout__fieldset--readonly":c}]),"aria-describedby":n?p:null},l&&e("legend",{className:"adyen-checkout__fieldset__title"},m?e("h2",{className:"adyen-checkout__fieldset__title-heading"},f.get(l)):f.get(l)),n&&e("p",{id:p,className:"adyen-checkout__fieldset__description"},f.get(n)),e("div",{className:t("adyen-checkout__fieldset__fields",r)},d))}export{d as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import{useCoreContext as s}from"../../../../core/Context/CoreProvider.js";import{getUniqueId as i}from"../../../../utils/idGenerator.js";import{useMemo as d}from"../../../../external/preact/hooks/dist/hooks.js";function a({children:a,classNameModifiers:o=[],classNamesFields:r=[],label:c,readonly:l=!1,description:n,id:_,renderLabelAsSectionHeading:m=!1,descriptionId:f}){const{i18n:p}=s(),u=d(()=>i("fieldset-description"),[]),h=f??u;return e("fieldset",{id:_,className:t(["adyen-checkout__fieldset",...o.map(e=>`adyen-checkout__fieldset--${e}`),{"adyen-checkout__fieldset--readonly":l}])},c&&e("legend",{className:"adyen-checkout__fieldset__title"},m?e("h2",{className:"adyen-checkout__fieldset__title-heading"},p.get(c)):p.get(c)),n&&e("p",{id:h,className:"adyen-checkout__fieldset__description"},p.get(n)),e("div",{className:t("adyen-checkout__fieldset__fields",r)},a))}export{a as default};
 //# sourceMappingURL=Fieldset.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useMemo } from 'preact/hooks';\n\ninterface FieldsetProps {\n    children: ComponentChildren;\n    classNameModifiers?: string[];\n    classNamesFields?: string[];\n    label?: string;\n    description?: string;\n    readonly?: boolean;\n    id?: string;\n    renderLabelAsSectionHeading?: boolean;\n}\n\nexport default function Fieldset({\n    children,\n    classNameModifiers: classNameFieldsetModifiers = [],\n    classNamesFields = [],\n    label,\n    readonly = false,\n    description,\n    id,\n    renderLabelAsSectionHeading = false\n}: Readonly<FieldsetProps>) {\n    const { i18n } = useCoreContext();\n\n    const describedById = useMemo(() => getUniqueId('fieldset-description'), []);\n\n    return (\n        <fieldset\n            id={id}\n            className={cx([\n                'adyen-checkout__fieldset',\n                ...classNameFieldsetModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n                { 'adyen-checkout__fieldset--readonly': readonly }\n            ])}\n            aria-describedby={description ? describedById : null}\n        >\n            {label && (\n                <legend className=\"adyen-checkout__fieldset__title\">\n                    {renderLabelAsSectionHeading ? <h2 className=\"adyen-checkout__fieldset__title-heading\">{i18n.get(label)}</h2> : i18n.get(label)}\n                </legend>\n            )}\n            {description && (\n                <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n                    {i18n.get(description)}\n                </p>\n            )}\n            <div className={cx('adyen-checkout__fieldset__fields', classNamesFields)}>{children}</div>\n        </fieldset>\n    );\n}\n"],"names":["Fieldset","children","classNameModifiers","classNameFieldsetModifiers","classNamesFields","label","readonly","description","id","renderLabelAsSectionHeading","i18n","useCoreContext","describedById","useMemo","getUniqueId","h","fieldset","className","cx","map","m","aria-describedby","legend","h2","get","p","div"],"mappings":"2UAkBe,SAASA,GAASC,SAC7BA,EACAC,mBAAoBC,EAA6B,GAAEC,iBACnDA,EAAmB,GAAEC,MACrBA,EAAKC,SACLA,GAAW,EAAKC,YAChBA,EAAWC,GACXA,EAAEC,4BACFA,GAA8B,IAE9B,MAAMC,KAAEA,GAASC,IAEXC,EAAgBC,EAAQ,IAAMC,EAAY,wBAAyB,IAEzE,OACIC,EAACC,WAAAA,CACGR,GAAIA,EACJS,UAAWC,EAAG,CACV,8BACGf,EAA2BgB,IAAIC,GAAK,6BAA6BA,KACpE,CAAE,qCAAsCd,KAE5Ce,mBAAkBd,EAAcK,EAAgB,MAE/CP,GACGU,EAACO,SAAAA,CAAOL,UAAU,mCACbR,EAA8BM,EAACQ,KAAAA,CAAGN,UAAU,2CAA2CP,EAAKc,IAAInB,IAAeK,EAAKc,IAAInB,IAGhIE,GACGQ,EAACU,IAAAA,CAAEjB,GAAII,EAAeK,UAAU,yCAC3BP,EAAKc,IAAIjB,IAGlBQ,EAACW,MAAAA,CAAIT,UAAWC,EAAG,mCAAoCd,IAAoBH,GAGvF"}
+{"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useMemo } from 'preact/hooks';\n\ninterface FieldsetProps {\n    children: ComponentChildren;\n    classNameModifiers?: string[];\n    classNamesFields?: string[];\n    label?: string;\n    description?: string;\n    readonly?: boolean;\n    id?: string;\n    renderLabelAsSectionHeading?: boolean;\n    descriptionId?: string;\n}\n\nexport default function Fieldset({\n    children,\n    classNameModifiers: classNameFieldsetModifiers = [],\n    classNamesFields = [],\n    label,\n    readonly = false,\n    description,\n    id,\n    renderLabelAsSectionHeading = false,\n    descriptionId: externalDescriptionId\n}: Readonly<FieldsetProps>) {\n    const { i18n } = useCoreContext();\n\n    const generatedDescriptionId = useMemo(() => getUniqueId('fieldset-description'), []);\n    const describedById = externalDescriptionId ?? generatedDescriptionId;\n\n    return (\n        <fieldset\n            id={id}\n            className={cx([\n                'adyen-checkout__fieldset',\n                ...classNameFieldsetModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n                { 'adyen-checkout__fieldset--readonly': readonly }\n            ])}\n        >\n            {label && (\n                <legend className=\"adyen-checkout__fieldset__title\">\n                    {renderLabelAsSectionHeading ? <h2 className=\"adyen-checkout__fieldset__title-heading\">{i18n.get(label)}</h2> : i18n.get(label)}\n                </legend>\n            )}\n            {description && (\n                <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n                    {i18n.get(description)}\n                </p>\n            )}\n            <div className={cx('adyen-checkout__fieldset__fields', classNamesFields)}>{children}</div>\n        </fieldset>\n    );\n}\n"],"names":["Fieldset","children","classNameModifiers","classNameFieldsetModifiers","classNamesFields","label","readonly","description","id","renderLabelAsSectionHeading","descriptionId","externalDescriptionId","i18n","useCoreContext","generatedDescriptionId","useMemo","getUniqueId","describedById","h","fieldset","className","cx","map","m","legend","h2","get","p","div"],"mappings":"2UAmBe,SAASA,GAASC,SAC7BA,EACAC,mBAAoBC,EAA6B,GAAEC,iBACnDA,EAAmB,GAAEC,MACrBA,EAAKC,SACLA,GAAW,EAAKC,YAChBA,EAAWC,GACXA,EAAEC,4BACFA,GAA8B,EAC9BC,cAAeC,IAEf,MAAMC,KAAEA,GAASC,IAEXC,EAAyBC,EAAQ,IAAMC,EAAY,wBAAyB,IAC5EC,EAAgBN,GAAyBG,EAE/C,OACII,EAACC,WAAAA,CACGX,GAAIA,EACJY,UAAWC,EAAG,CACV,8BACGlB,EAA2BmB,IAAIC,GAAK,6BAA6BA,KACpE,CAAE,qCAAsCjB,MAG3CD,GACGa,EAACM,SAAAA,CAAOJ,UAAU,mCACbX,EAA8BS,EAACO,KAAAA,CAAGL,UAAU,2CAA2CR,EAAKc,IAAIrB,IAAeO,EAAKc,IAAIrB,IAGhIE,GACGW,EAACS,IAAAA,CAAEnB,GAAIS,EAAeG,UAAU,yCAC3BR,EAAKc,IAAInB,IAGlBW,EAACU,MAAAA,CAAIR,UAAWC,EAAG,mCAAoCjB,IAAoBH,GAGvF"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCallback as o}from"../../../external/preact/hooks/dist/hooks.js";import r from"../../../_virtual/index.js";import{ARIA_ERROR_SUFFIX as a,ARIA_CONTEXT_SUFFIX as n}from"../../../core/Errors/constants.js";function t({setRef:t,...s}){const{autoCorrect:l,classNameModifiers:i,isInvalid:u,isValid:c,readonly:d=null,spellcheck:p,type:y,uniqueId:m,disabled:h}=s,f=s.className;Object.prototype.hasOwnProperty.call(s,"onChange")&&console.error("Error: Form fields that rely on InputBase may not have an onChange property");const _=o(e=>{s.onInput(e)},[s.onInput]),k=o(e=>{s?.onKeyPress&&s.onKeyPress(e)},[s?.onKeyPress]),v=o(e=>{s?.onKeyUp&&s.onKeyUp(e)},[s?.onKeyUp]),I=o(e=>{s?.onBlurHandler?.(e),s.trimOnBlur&&(e.target.value=e.target.value.trim()),s?.onBlur?.(e)},[s.onBlur,s.onBlurHandler]),K=o(e=>{s?.onFocusHandler?.(e)},[s.onFocusHandler]),B=r("adyen-checkout__input",[`adyen-checkout__input--${y}`],f,{"adyen-checkout__input--invalid":u,"adyen-checkout__input--valid":c},i.map(e=>`adyen-checkout__input--${e}`)),{classNameModifiers:b,uniqueId:x,isInvalid:C,isValid:P,addContextualElement:j,autocomplete:N,...g}=s;return e("input",{id:m,...g,autocomplete:N,"aria-required":g.required,type:y,className:B,readOnly:d,spellcheck:p,autoCorrect:l,"aria-describedby":`${m}${u?a:n}`,"aria-invalid":u,onInput:_,onBlur:I,onFocus:K,onKeyUp:v,onKeyPress:k,disabled:h,ref:t})}t.defaultProps={type:"text",classNameModifiers:[]};export{t as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCallback as o}from"../../../external/preact/hooks/dist/hooks.js";import n from"../../../_virtual/index.js";import{ARIA_ERROR_SUFFIX as a,ARIA_CONTEXT_SUFFIX as r}from"../../../core/Errors/constants.js";function t({setRef:t,...l}){const{autoCorrect:i,classNameModifiers:s,isInvalid:u,isValid:d,readonly:c=null,spellcheck:p,type:m,uniqueId:y,disabled:f}=l,h=l.className;Object.prototype.hasOwnProperty.call(l,"onChange")&&console.error("Error: Form fields that rely on InputBase may not have an onChange property");const _=o(e=>{l.onInput(e)},[l.onInput]),k=o(e=>{l?.onKeyDown&&l.onKeyDown(e)},[l?.onKeyDown]),v=o(e=>{l?.onBlurHandler?.(e),l.trimOnBlur&&(e.target.value=e.target.value.trim()),l?.onBlur?.(e)},[l.onBlur,l.onBlurHandler]),b=o(e=>{l?.onFocusHandler?.(e)},[l.onFocusHandler]),B=n("adyen-checkout__input",[`adyen-checkout__input--${m}`],h,{"adyen-checkout__input--invalid":u,"adyen-checkout__input--valid":d},s.map(e=>`adyen-checkout__input--${e}`)),{classNameModifiers:I,uniqueId:j,isInvalid:x,isValid:C,addContextualElement:g,"aria-describedby":w,autocomplete:N,...q}=l,D=["string"==typeof w&&w?w:null,y?`${y}${u?a:r}`:null].filter(Boolean).join(" ")||null;return e("input",{id:y,...q,autocomplete:N,"aria-required":q.required,type:m,className:B,readOnly:c,spellcheck:p,autoCorrect:i,"aria-describedby":D,"aria-invalid":u,onInput:_,onBlur:v,onFocus:b,onKeyDown:k,disabled:f,ref:t})}t.defaultProps={type:"text",classNameModifiers:[]};export{t as default};
 //# sourceMappingURL=InputBase.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import {\n    h,\n    RefCallback,\n    InputHTMLAttributes,\n    GenericEventHandler,\n    TargetedInputEvent,\n    TargetedKeyboardEvent,\n    TargetedFocusEvent,\n    TargetedEvent\n} from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport Language from '../../../language';\nimport { AutocompleteValue } from './types';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends InputHTMLAttributes {\n    classNameModifiers?: string[];\n    isInvalid?: boolean;\n    isValid?: boolean;\n    readonly?: boolean;\n    uniqueId?: string;\n    disabled?: boolean;\n    className?: string;\n    placeholder?: string;\n    value?: string;\n    name?: string;\n    checked?: boolean;\n    setRef?: RefCallback<HTMLInputElement>;\n    trimOnBlur?: boolean;\n    i18n?: Language;\n    label?: string;\n    onBlurHandler?: GenericEventHandler<HTMLInputElement>;\n    onFocusHandler?: GenericEventHandler<HTMLInputElement>;\n    maxlength?: number | null;\n    addContextualElement?: boolean;\n    type?: string;\n    /**\n     * WCAG 2.2 autocomplete token for browser autofill.\n     * Pass undefined to omit the attribute entirely.\n     * @see https://www.w3.org/TR/WCAG22/#input-purposes\n     */\n    autocomplete: AutocompleteValue;\n}\n\nexport default function InputBase({ setRef, ...props }: Readonly<InputBaseProps>) {\n    const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellcheck, type, uniqueId, disabled } = props;\n    const className = props.className;\n\n    /**\n     * To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n     * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n     */\n    if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n        console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n    }\n\n    const handleInput = useCallback(\n        (event: TargetedInputEvent<HTMLInputElement>) => {\n            props.onInput(event);\n        },\n        [props.onInput]\n    );\n\n    /**\n     *  Event is fired when a key that produces a character value is pressed down.\n     *  ENTER keypress also triggers this event.\n     *\n     *  TODO: 'keypress' event is deprecated\n     *  https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event\n     */\n    const handleKeyPress = useCallback(\n        (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (props?.onKeyPress) props.onKeyPress(event);\n        },\n        [props?.onKeyPress]\n    );\n\n    /**\n     * Event is fired when certain keys are pressed (keys that do not output characters):\n     * Backspace, Arrow keys, Shift, Ctrl, Command, Option, Esc\n     *\n     * Exception: ENTER keypress triggers 'onKeyPress' AND 'onKeyUp'\n     */\n    const handleKeyUp = useCallback(\n        (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (props?.onKeyUp) props.onKeyUp(event);\n        },\n        [props?.onKeyUp]\n    );\n\n    const handleBlur = useCallback(\n        (event: TargetedFocusEvent<HTMLInputElement>) => {\n            props?.onBlurHandler?.(event); // From Field component\n\n            if (props.trimOnBlur) {\n                (event.target as HTMLInputElement).value = (event.target as HTMLInputElement).value.trim(); // needed to trim trailing spaces in field (leading spaces can be done via formatting)\n            }\n\n            props?.onBlur?.(event);\n        },\n        [props.onBlur, props.onBlurHandler]\n    );\n\n    const handleFocus = useCallback(\n        (event: TargetedEvent<HTMLInputElement>) => {\n            props?.onFocusHandler?.(event); // From Field component\n        },\n        [props.onFocusHandler]\n    );\n\n    const inputClassNames = classNames(\n        'adyen-checkout__input',\n        [`adyen-checkout__input--${type}`],\n        className,\n        {\n            'adyen-checkout__input--invalid': isInvalid,\n            'adyen-checkout__input--valid': isValid\n        },\n        classNameModifiers.map(m => `adyen-checkout__input--${m}`)\n    );\n\n    // Don't spread classNameModifiers etc to input element (it ends up as an attribute on the element itself)\n    const { classNameModifiers: cnm, uniqueId: uid, isInvalid: iiv, isValid: iv, addContextualElement: ace, autocomplete, ...restProps } = props;\n\n    return (\n        <input\n            id={uniqueId}\n            {...restProps}\n            // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'autocomplete'\n            autocomplete={autocomplete}\n            aria-required={restProps.required}\n            type={type}\n            className={inputClassNames}\n            readOnly={readonly}\n            // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'spellcheck'\n            spellcheck={spellcheck}\n            autoCorrect={autoCorrect}\n            aria-describedby={`${uniqueId}${isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX}`}\n            aria-invalid={isInvalid}\n            onInput={handleInput}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n            onKeyUp={handleKeyUp}\n            onKeyPress={handleKeyPress}\n            disabled={disabled}\n            ref={setRef}\n        />\n    );\n}\n\nInputBase.defaultProps = {\n    type: 'text',\n    classNameModifiers: []\n};\n"],"names":["InputBase","setRef","props","autoCorrect","classNameModifiers","isInvalid","isValid","readonly","spellcheck","type","uniqueId","disabled","className","Object","prototype","hasOwnProperty","call","console","error","handleInput","useCallback","event","onInput","handleKeyPress","onKeyPress","handleKeyUp","onKeyUp","handleBlur","onBlurHandler","trimOnBlur","target","value","trim","onBlur","handleFocus","onFocusHandler","inputClassNames","classNames","map","m","cnm","uid","iiv","iv","addContextualElement","ace","autocomplete","restProps","h","input","id","aria-required","required","readOnly","aria-describedby","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","aria-invalid","onFocus","ref","defaultProps"],"mappings":"4RA8Ce,SAASA,GAAUC,OAAEA,KAAWC,IAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,EACfC,IACGnB,EAAMoB,QAAQD,IAElB,CAACnB,EAAMoB,UAULC,EAAiBH,EAClBC,IACOnB,GAAOsB,YAAYtB,EAAMsB,WAAWH,IAE5C,CAACnB,GAAOsB,aASNC,EAAcL,EACfC,IACOnB,GAAOwB,SAASxB,EAAMwB,QAAQL,IAEtC,CAACnB,GAAOwB,UAGNC,EAAaP,EACdC,IACGnB,GAAO0B,gBAAgBP,GAEnBnB,EAAM2B,aACLR,EAAMS,OAA4BC,MAAQV,EAAOS,OAA4BC,MAAMC,QAGxF9B,GAAO+B,SAASZ,IAEpB,CAACnB,EAAM+B,OAAQ/B,EAAM0B,gBAGnBM,EAAcd,EACfC,IACGnB,GAAOiC,iBAAiBd,IAE5B,CAACnB,EAAMiC,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,0BAA0B5B,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,GAEpCF,EAAmBkC,IAAIC,GAAK,0BAA0BA,OAIlDnC,mBAAoBoC,EAAK9B,SAAU+B,EAAKpC,UAAWqC,EAAKpC,QAASqC,EAAIC,qBAAsBC,EAAGC,aAAEA,KAAiBC,GAAc7C,EAEvI,OACI8C,EAACC,QAAAA,CACGC,GAAIxC,KACAqC,EAEJD,aAAcA,EACdK,gBAAeJ,EAAUK,SACzB3C,KAAMA,EACNG,UAAWwB,EACXiB,SAAU9C,EAEVC,WAAYA,EACZL,YAAaA,EACbmD,mBAAkB,GAAG5C,IAAWL,EAAYkD,EAAoBC,IAChEC,eAAcpD,EACdiB,QAASH,EACTc,OAAQN,EACR+B,QAASxB,EACTR,QAASD,EACTD,WAAYD,EACZZ,SAAUA,EACVgD,IAAK1D,GAGjB,CAEAD,EAAU4D,aAAe,CACrBnD,KAAM,OACNL,mBAAoB"}
+{"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import {\n    h,\n    RefCallback,\n    InputHTMLAttributes,\n    GenericEventHandler,\n    TargetedInputEvent,\n    TargetedKeyboardEvent,\n    TargetedFocusEvent,\n    TargetedEvent\n} from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport Language from '../../../language';\nimport { AutocompleteValue } from './types';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends InputHTMLAttributes {\n    classNameModifiers?: string[];\n    isInvalid?: boolean;\n    isValid?: boolean;\n    readonly?: boolean;\n    uniqueId?: string;\n    disabled?: boolean;\n    className?: string;\n    placeholder?: string;\n    value?: string;\n    name?: string;\n    checked?: boolean;\n    setRef?: RefCallback<HTMLInputElement>;\n    trimOnBlur?: boolean;\n    i18n?: Language;\n    label?: string;\n    onBlurHandler?: GenericEventHandler<HTMLInputElement>;\n    onFocusHandler?: GenericEventHandler<HTMLInputElement>;\n    maxlength?: number | null;\n    addContextualElement?: boolean;\n    type?: string;\n    /**\n     * WCAG 2.2 autocomplete token for browser autofill.\n     * Pass undefined to omit the attribute entirely.\n     * @see https://www.w3.org/TR/WCAG22/#input-purposes\n     */\n    autocomplete: AutocompleteValue;\n}\n\nexport default function InputBase({ setRef, ...props }: Readonly<InputBaseProps>) {\n    const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellcheck, type, uniqueId, disabled } = props;\n    const className = props.className;\n\n    /**\n     * To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n     * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n     */\n    if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n        console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n    }\n\n    const handleInput = useCallback(\n        (event: TargetedInputEvent<HTMLInputElement>) => {\n            props.onInput(event);\n        },\n        [props.onInput]\n    );\n\n    const handleKeyDown = useCallback(\n        (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n            if (props?.onKeyDown) props.onKeyDown(event);\n        },\n        [props?.onKeyDown]\n    );\n\n    const handleBlur = useCallback(\n        (event: TargetedFocusEvent<HTMLInputElement>) => {\n            props?.onBlurHandler?.(event); // From Field component\n\n            if (props.trimOnBlur) {\n                (event.target as HTMLInputElement).value = (event.target as HTMLInputElement).value.trim(); // needed to trim trailing spaces in field (leading spaces can be done via formatting)\n            }\n\n            props?.onBlur?.(event);\n        },\n        [props.onBlur, props.onBlurHandler]\n    );\n\n    const handleFocus = useCallback(\n        (event: TargetedEvent<HTMLInputElement>) => {\n            props?.onFocusHandler?.(event); // From Field component\n        },\n        [props.onFocusHandler]\n    );\n\n    const inputClassNames = classNames(\n        'adyen-checkout__input',\n        [`adyen-checkout__input--${type}`],\n        className,\n        {\n            'adyen-checkout__input--invalid': isInvalid,\n            'adyen-checkout__input--valid': isValid\n        },\n        classNameModifiers.map(m => `adyen-checkout__input--${m}`)\n    );\n\n    // Don't spread classNameModifiers etc to input element (it ends up as an attribute on the element itself)\n    const {\n        classNameModifiers: cnm,\n        uniqueId: uid,\n        isInvalid: iiv,\n        isValid: iv,\n        addContextualElement: ace,\n        'aria-describedby': ariaDescribedByProp,\n        autocomplete,\n        ...restProps\n    } = props;\n\n    const internalDescribedBy = uniqueId ? `${uniqueId}${isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX}` : null;\n    const extraDescribedBy = typeof ariaDescribedByProp === 'string' && ariaDescribedByProp ? ariaDescribedByProp : null;\n    const mergedAriaDescribedBy = [extraDescribedBy, internalDescribedBy].filter(Boolean).join(' ') || null;\n\n    return (\n        <input\n            id={uniqueId}\n            {...restProps}\n            // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'autocomplete'\n            autocomplete={autocomplete}\n            aria-required={restProps.required}\n            type={type}\n            className={inputClassNames}\n            readOnly={readonly}\n            // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'spellcheck'\n            spellcheck={spellcheck}\n            autoCorrect={autoCorrect}\n            aria-describedby={mergedAriaDescribedBy}\n            aria-invalid={isInvalid}\n            onInput={handleInput}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            disabled={disabled}\n            ref={setRef}\n        />\n    );\n}\n\nInputBase.defaultProps = {\n    type: 'text',\n    classNameModifiers: []\n};\n"],"names":["InputBase","setRef","props","autoCorrect","classNameModifiers","isInvalid","isValid","readonly","spellcheck","type","uniqueId","disabled","className","Object","prototype","hasOwnProperty","call","console","error","handleInput","useCallback","event","onInput","handleKeyDown","onKeyDown","handleBlur","onBlurHandler","trimOnBlur","target","value","trim","onBlur","handleFocus","onFocusHandler","inputClassNames","classNames","map","m","cnm","uid","iiv","iv","addContextualElement","ace","ariaDescribedByProp","autocomplete","restProps","mergedAriaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","filter","Boolean","join","h","input","id","aria-required","required","readOnly","aria-describedby","aria-invalid","onFocus","ref","defaultProps"],"mappings":"4RA8Ce,SAASA,GAAUC,OAAEA,KAAWC,IAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,EACfC,IACGnB,EAAMoB,QAAQD,IAElB,CAACnB,EAAMoB,UAGLC,EAAgBH,EACjBC,IACOnB,GAAOsB,WAAWtB,EAAMsB,UAAUH,IAE1C,CAACnB,GAAOsB,YAGNC,EAAaL,EACdC,IACGnB,GAAOwB,gBAAgBL,GAEnBnB,EAAMyB,aACLN,EAAMO,OAA4BC,MAAQR,EAAOO,OAA4BC,MAAMC,QAGxF5B,GAAO6B,SAASV,IAEpB,CAACnB,EAAM6B,OAAQ7B,EAAMwB,gBAGnBM,EAAcZ,EACfC,IACGnB,GAAO+B,iBAAiBZ,IAE5B,CAACnB,EAAM+B,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,0BAA0B1B,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,GAEpCF,EAAmBgC,IAAIC,GAAK,0BAA0BA,OAKtDjC,mBAAoBkC,EACpB5B,SAAU6B,EACVlC,UAAWmC,EACXlC,QAASmC,EACTC,qBAAsBC,EACtB,mBAAoBC,EAAmBC,aACvCA,KACGC,GACH5C,EAIE6C,EAAwB,CAD0B,iBAAxBH,GAAoCA,EAAsBA,EAAsB,KADpFlC,EAAW,GAAGA,IAAWL,EAAY2C,EAAoBC,IAAwB,MAEvCC,OAAOC,SAASC,KAAK,MAAQ,KAEnG,OACIC,EAACC,QAAAA,CACGC,GAAI7C,KACAoC,EAEJD,aAAcA,EACdW,gBAAeV,EAAUW,SACzBhD,KAAMA,EACNG,UAAWsB,EACXwB,SAAUnD,EAEVC,WAAYA,EACZL,YAAaA,EACbwD,mBAAkBZ,EAClBa,eAAcvD,EACdiB,QAASH,EACTY,OAAQN,EACRoC,QAAS7B,EACTR,UAAWD,EACXZ,SAAUA,EACVmD,IAAK7D,GAGjB,CAEAD,EAAU+D,aAAe,CACrBtD,KAAM,OACNL,mBAAoB"}

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"../../../../_virtual/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";import{useCoreContext as f}from"../../../../core/Context/CoreProvider.js";function p({items:p=[],className:g="",classNameModifiers:v=[],filterable:h=!0,readonly:y=!1,onChange:k=()=>{},onInput:b,selectedValue:w,name:I,isInvalid:L,isValid:j,placeholder:x,uniqueId:D,disabled:T,disableTextFilter:C,clearOnSelect:E,blurOnClose:N,onListToggle:B,required:S}){const{i18n:$}=f(),_=t(null),M=t(null),P=t(null),R=t(null),[q,O]=n(null),[V,A]=n(!1),[F,H]=n(null),K=r(()=>`select-${i()}`,[]),U=p.find(e=>e.id===w)||{},[z,G]=n(),[J,Q]=n(U),W=U,X=C?p:p.filter(e=>!q||e.name.toLowerCase().includes(q.toLowerCase())),Y=D?`${D}${L?u:d}`:null,Z=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},ee=()=>{N&&_.current.blur(),A(!1)},te=()=>{A(!0)},ne=e=>{const t=e.currentTarget.getAttribute("data-value");return X.find(e=>e.id==t)},re=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?ne(e):J.id&&X.some(e=>e.id===J.id)?J:q?X[0]:{id:w},t&&!t.disabled&&(k({target:{value:t.id,name:I}}),E&&G(null),ee())},se=e=>{switch(e.key){case c.space:case c.enter:re(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!X||X.length<1)return;const e=X.findIndex(e=>e.id===J.id)+1,t=e<X.length?e:0,n=X[t];Z(n),Q(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!X||X.length<1)return;const e=X.findIndex(e=>e.id===J.id)-1,t=e<0?X.length-1:e,n=X[t];Z(n),Q(n)})()}};return s(()=>{V?G(null):O(null)},[V]),s(()=>{V&&h&&_.current&&_.current.focus(),B?.(V)},[V]),s(()=>{function e(e){(e.composedPath?!e.composedPath().includes(M.current):!M.current.contains(e.target))&&ee()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}},[M]),s(()=>{const e=setTimeout(()=>{0===X.length?H($.get("select.noOptionsFound")):H($.get("select.results",{values:{count:X.length}}))},500);return()=>clearTimeout(e)},[V,X.length,$]),e("div",{className:l(["adyen-checkout__dropdown",g,...v.map(e=>`adyen-checkout__dropdown--${e}`)]),ref:M},e(o,{inputText:z,id:D??null,active:J,selected:W,filterInputRef:_,filterable:h,isInvalid:L,isValid:j,onButtonKeyDown:e=>{e.key===c.enter&&h&&V&&q?re(e):e.key===c.escape?ee():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&V)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&ee():(e.preventDefault(),V?se(e):te())},onInput:e=>{const t=e.target.value;G(t),O(t),V||te(),b&&b(t)},placeholder:x,readonly:y,selectListId:K,showList:V,toggleButtonRef:P,toggleList:e=>{e.preventDefault(),V?(G(W.name),ee()):(G(null),te())},disabled:T,ariaDescribedBy:Y,required:S}),e(a,{active:J,filteredItems:X,onHover:e=>{e.preventDefault();const t=ne(e);Q(t)},onSelect:re,selected:W,selectListId:K,selectListRef:R,showList:V}),e("div",{key:z,role:"status","aria-live":"polite","aria-relevant":"additions text",className:"adyen-checkout-sr-panel--sr-only"},F))}p.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{p as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import{useRef as t,useState as n,useMemo as r,useEffect as l}from"../../../../external/preact/hooks/dist/hooks.js";import s from"../../../../_virtual/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";import{useCoreContext as f}from"../../../../core/Context/CoreProvider.js";function p({items:p=[],className:g="",classNameModifiers:v=[],filterable:h=!0,readonly:y=!1,onChange:b=()=>{},onInput:k,selectedValue:w,name:I,isInvalid:L,isValid:j,placeholder:D,uniqueId:x,disabled:T,disableTextFilter:B,clearOnSelect:C,blurOnClose:E,onListToggle:N,required:S,additionalDescribedBy:$}){const{i18n:_}=f(),M=t(null),P=t(null),R=t(null),q=t(null),[O,V]=n(null),[A,F]=n(!1),[H,K]=n(null),U=r(()=>`select-${i()}`,[]),z=p.find(e=>e.id===w)||{},[G,J]=n(),[Q,W]=n(z),X=z,Y=B?p:p.filter(e=>!O||e.name.toLowerCase().includes(O.toLowerCase())),Z=[x?`${x}${L?u:d}`:null,$].filter(Boolean).join(" ")||null,ee=e=>{if(!e)return;const t=document.getElementById(`listItem-${e.id}`);m(t)},te=()=>{E&&M.current.blur(),F(!1)},ne=()=>{F(!0)},re=e=>{const t=e.currentTarget.getAttribute("data-value");return Y.find(e=>e.id==t)},le=e=>{let t;e.preventDefault(),t=e.currentTarget instanceof HTMLElement&&"option"===e.currentTarget.getAttribute("role")?re(e):Q.id&&Y.some(e=>e.id===Q.id)?Q:O?Y[0]:{id:w},t&&!t.disabled&&(b({target:{value:t.id,name:I}}),C&&J(null),te())},se=e=>{switch(e.key){case c.space:case c.enter:le(e);break;case c.arrowDown:e.preventDefault(),(()=>{if(!Y||Y.length<1)return;const e=Y.findIndex(e=>e.id===Q.id)+1,t=e<Y.length?e:0,n=Y[t];ee(n),W(n)})();break;case c.arrowUp:e.preventDefault(),(()=>{if(!Y||Y.length<1)return;const e=Y.findIndex(e=>e.id===Q.id)-1,t=e<0?Y.length-1:e,n=Y[t];ee(n),W(n)})()}};return l(()=>{A?J(null):V(null)},[A]),l(()=>{A&&h&&M.current&&M.current.focus(),N?.(A)},[A]),l(()=>{function e(e){(e.composedPath?!e.composedPath().includes(P.current):!P.current.contains(e.target))&&te()}return document.addEventListener("click",e,!1),()=>{document.removeEventListener("click",e,!1)}},[P]),l(()=>{const e=setTimeout(()=>{0===Y.length?K(_.get("select.noOptionsFound")):K(_.get("select.results",{values:{count:Y.length}}))},500);return()=>clearTimeout(e)},[A,Y.length,_]),e("div",{className:s(["adyen-checkout__dropdown",g,...v.map(e=>`adyen-checkout__dropdown--${e}`)]),ref:P},e(o,{inputText:G,id:x??null,active:Q,selected:X,filterInputRef:M,filterable:h,isInvalid:L,isValid:j,onButtonKeyDown:e=>{e.key===c.enter&&h&&A&&O?le(e):e.key===c.escape?te():![c.arrowUp,c.arrowDown,c.enter].includes(e.key)&&(e.key!==c.space||h&&A)?(e.shiftKey&&e.key===c.tab||e.key===c.tab)&&te():(e.preventDefault(),A?se(e):ne())},onInput:e=>{const t=e.target.value;J(t),V(t),A||ne(),k&&k(t)},placeholder:D,readonly:y,selectListId:U,showList:A,toggleButtonRef:R,toggleList:e=>{e.preventDefault(),A?(J(X.name),te()):(J(null),ne())},disabled:T,ariaDescribedBy:Z,required:S}),e(a,{active:Q,filteredItems:Y,onHover:e=>{e.preventDefault();const t=re(e);W(t)},onSelect:le,selected:X,selectListId:U,selectListRef:q,showList:A}),e("div",{key:G,role:"status","aria-live":"polite","aria-relevant":"additions text",className:"adyen-checkout-sr-panel--sr-only"},H))}p.defaultProps={className:"",classNameModifiers:[],filterable:!0,items:[],readonly:!1,onChange:()=>{}};export{p 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';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nfunction Select({\n    items = [],\n    className = '',\n    classNameModifiers = [],\n    filterable = true,\n    readonly = false,\n    onChange = () => {},\n    onInput,\n    selectedValue,\n    name,\n    isInvalid,\n    isValid,\n    placeholder,\n    uniqueId,\n    disabled,\n    disableTextFilter,\n    clearOnSelect,\n    blurOnClose,\n    onListToggle,\n    required\n}: Readonly<SelectProps>) {\n    const { i18n } = useCoreContext();\n    const filterInputRef = useRef(null);\n    const selectContainerRef = useRef(null);\n    const toggleButtonRef = useRef(null);\n    const selectListRef = useRef(null);\n    const [textFilter, setTextFilter] = useState<string>(null);\n    const [showList, setShowList] = useState<boolean>(false);\n    const [statusMessage, setStatusMessage] = useState<string | null>(null);\n    const selectListId: string = useMemo(() => `select-${uuid()}`, []);\n\n    const active: SelectItem = items.find(i => i.id === selectedValue) || ({} as SelectItem);\n\n    const [inputText, setInputText] = useState<string>();\n\n    const [activeOption, setActiveOption] = useState<SelectItem>(active);\n\n    const selectedOption = active;\n\n    const filteredItems = disableTextFilter ? items : items.filter(item => !textFilter || item.name.toLowerCase().includes(textFilter.toLowerCase()));\n\n    const suffix = isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX;\n    const ariaDescribedBy = uniqueId ? `${uniqueId}${suffix}` : null;\n\n    const setNextActive = () => {\n        if (!filteredItems || filteredItems.length < 1) return;\n        const possibleNextIndex = filteredItems.findIndex(listItem => listItem.id === activeOption.id) + 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.id === activeOption.id) - 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        if (blurOnClose) {\n            filterInputRef.current.blur();\n        }\n        setShowList(false);\n    };\n\n    const openList = () => {\n        setShowList(true);\n    };\n\n    const extractItemFromEvent = (e: Event): SelectItem => {\n        const value = (e.currentTarget as HTMLInputElement).getAttribute('data-value');\n        return filteredItems.find(listItem => listItem.id == value);\n    };\n\n    /**\n     * Closes the select list and fires an onChange\n     * @param e - Event\n     */\n    const handleSelect = (e: Event) => {\n        e.preventDefault();\n\n        // We use a local variable here since writing and if statement is cleaner then a long ternary\n        let valueToEmit;\n\n        if (e.currentTarget instanceof HTMLElement && e.currentTarget.getAttribute('role') === 'option') {\n            // This is the main scenario when clicking and item in the list\n            // Item comes from the event\n            valueToEmit = extractItemFromEvent(e);\n        } else if (activeOption.id && filteredItems.some(item => item.id === activeOption.id)) {\n            // This is the scenario where a user is using the keyboard to navigate\n            // In the case item comes from the visually select item\n            valueToEmit = activeOption;\n        } else {\n            // This is the scenario the user didn't select anything\n            if (textFilter) {\n                // if we filtering for something then select the first option\n                valueToEmit = filteredItems[0];\n            } else {\n                // This will happen when we want to keep an already chosen option\n                // If no active option we should just emit again with the value that was already selected\n                valueToEmit = { id: selectedValue };\n            }\n        }\n\n        if (valueToEmit && !valueToEmit.disabled) {\n            onChange({ target: { value: valueToEmit.id, name: name } });\n\n            if (clearOnSelect) setInputText(null);\n\n            closeList();\n        }\n    };\n\n    /**\n     * Handles hovering and directions\n     * @param e - Event\n     */\n    const handleHover = (e: Event) => {\n        e.preventDefault();\n        const item = extractItemFromEvent(e);\n        setActiveOption(item);\n    };\n\n    /**\n     * Handle keyDown events on the selectList button\n     * Responsible for opening and closing the list\n     * @param e - KeyboardEvent\n     */\n    const handleButtonKeyDown = (e: KeyboardEvent) => {\n        if (e.key === keys.enter && filterable && showList && textFilter) {\n            handleSelect(e);\n        } else if (e.key === keys.escape) {\n            // When user has focused Select button but not yet moved into Select list - close list and keep focus on the Select Button re. a11y guidelines\n            // https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html\n            closeList();\n        } else if ([keys.arrowUp, keys.arrowDown, keys.enter].includes(e.key) || (e.key === keys.space && (!filterable || !showList))) {\n            e.preventDefault();\n            if (!showList) {\n                openList();\n            } else {\n                handleNavigationKeys(e);\n            }\n        } else if (e.shiftKey && e.key === keys.tab) {\n            // Shift-Tab out of Select - close list re. a11y guidelines (above)\n            closeList();\n        } else if (e.key === keys.tab) {\n            closeList();\n        }\n    };\n\n    /**\n     * Handles movement with navigation keys and enter\n     * Navigates through the list, or select an element, or focus the filter input, or close the menu.\n     * @param e - KeyDownEvent\n     */\n    const handleNavigationKeys = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case keys.space:\n            case keys.enter:\n                handleSelect(e);\n                break;\n            case keys.arrowDown:\n                e.preventDefault();\n                setNextActive();\n                break;\n            case keys.arrowUp:\n                e.preventDefault();\n                setPreviousActive();\n                break;\n            default:\n        }\n    };\n\n    /**\n     * Updates the state with the current text filter value and opens the dropdown\n     * @param e - KeyboardEvent\n     */\n    const handleTextFilter = (e: KeyboardEvent) => {\n        const value: string = (e.target as HTMLInputElement).value;\n        setInputText(value);\n        setTextFilter(value);\n\n        // Open the dropdown when user starts typing\n        if (!showList) {\n            openList();\n        }\n\n        if (onInput) {\n            onInput(value);\n        }\n    };\n\n    /**\n     * Toggles the selectList and focuses in either the filter input or in the selectList button\n     * @param e - Event\n     */\n    const toggleList = (e: Event) => {\n        e.preventDefault();\n        if (!showList) {\n            setInputText(null);\n            openList();\n        } else {\n            setInputText(selectedOption.name);\n            closeList();\n        }\n    };\n\n    useEffect(() => {\n        if (showList) {\n            setInputText(null);\n        } else {\n            setTextFilter(null);\n        }\n    }, [showList]);\n\n    /**\n     * Focus on the input if filterable\n     */\n    useEffect(() => {\n        if (showList && filterable && filterInputRef.current) {\n            filterInputRef.current.focus();\n        }\n        onListToggle?.(showList);\n    }, [showList]);\n\n    useEffect(() => {\n        /**\n         * Close the select list when clicking outside the list\n         * @param e - MouseEvent\n         */\n        function handleClickOutside(e: MouseEvent) {\n            // use composedPath so it can also check when inside a web component\n            // if composedPath is not available fallback to e.target\n            const clickIsOutside = e.composedPath\n                ? !e.composedPath().includes(selectContainerRef.current)\n                : !selectContainerRef.current.contains(e.target);\n            if (clickIsOutside) {\n                closeList();\n            }\n        }\n\n        document.addEventListener('click', handleClickOutside, false);\n\n        return () => {\n            document.removeEventListener('click', handleClickOutside, false);\n        };\n    }, [selectContainerRef]);\n\n    /**\n     * Update status message for screen readers when no options are found\n     */\n    useEffect(() => {\n        // Debounce to avoid announcing on every keystroke\n        const SR_ANNOUNCEMENT_DELAY_MS = 500;\n        const timer = setTimeout(() => {\n            if (filteredItems.length === 0) {\n                setStatusMessage(i18n.get('select.noOptionsFound'));\n            } else {\n                setStatusMessage(i18n.get('select.results', { values: { count: filteredItems.length } }));\n            }\n        }, SR_ANNOUNCEMENT_DELAY_MS);\n\n        return () => clearTimeout(timer);\n    }, [showList, filteredItems.length, i18n]);\n\n    return (\n        <div\n            className={cx(['adyen-checkout__dropdown', className, ...classNameModifiers.map(m => `adyen-checkout__dropdown--${m}`)])}\n            ref={selectContainerRef}\n        >\n            <SelectButton\n                inputText={inputText}\n                id={uniqueId ?? null}\n                active={activeOption}\n                selected={selectedOption}\n                filterInputRef={filterInputRef}\n                filterable={filterable}\n                isInvalid={isInvalid}\n                isValid={isValid}\n                onButtonKeyDown={handleButtonKeyDown}\n                onInput={handleTextFilter}\n                placeholder={placeholder}\n                readonly={readonly}\n                selectListId={selectListId}\n                showList={showList}\n                toggleButtonRef={toggleButtonRef}\n                toggleList={toggleList}\n                disabled={disabled}\n                ariaDescribedBy={ariaDescribedBy}\n                required={required}\n            />\n            <SelectList\n                active={activeOption}\n                filteredItems={filteredItems}\n                onHover={handleHover}\n                onSelect={handleSelect}\n                selected={selectedOption}\n                selectListId={selectListId}\n                selectListRef={selectListRef}\n                showList={showList}\n            />\n            <div\n                key={inputText}\n                role=\"status\"\n                aria-live=\"polite\"\n                // aria-relevant seems to be needed here make make sure a second time we get\n                // \"No options found\" we still announce the status message.\n                // What happens otherwise is that just the first status message is announced\n                // tested on VoiceOver on Chrome\n                aria-relevant=\"additions text\"\n                className=\"adyen-checkout-sr-panel--sr-only\"\n            >\n                {statusMessage}\n            </div>\n        </div>\n    );\n}\n\nSelect.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    filterable: true,\n    items: [],\n    readonly: false,\n    onChange: () => {}\n};\n\nexport default Select;\n"],"names":["Select","items","className","classNameModifiers","filterable","readonly","onChange","onInput","selectedValue","name","isInvalid","isValid","placeholder","uniqueId","disabled","disableTextFilter","clearOnSelect","blurOnClose","onListToggle","required","i18n","useCoreContext","filterInputRef","useRef","selectContainerRef","toggleButtonRef","selectListRef","textFilter","setTextFilter","useState","showList","setShowList","statusMessage","setStatusMessage","selectListId","useMemo","uuid","active","find","i","id","inputText","setInputText","activeOption","setActiveOption","selectedOption","filteredItems","filter","item","toLowerCase","includes","ariaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","scrollToItem","nextElement","document","getElementById","simulateFocusScroll","closeList","current","blur","openList","extractItemFromEvent","e","value","currentTarget","getAttribute","listItem","handleSelect","valueToEmit","preventDefault","HTMLElement","some","target","handleNavigationKeys","key","keys","space","enter","arrowDown","length","possibleNextIndex","findIndex","nextIndex","nextItem","setNextActive","arrowUp","setPreviousActive","useEffect","focus","handleClickOutside","composedPath","contains","addEventListener","removeEventListener","timer","setTimeout","get","values","count","clearTimeout","h","div","cx","map","m","ref","SelectButton","selected","onButtonKeyDown","escape","shiftKey","tab","toggleList","SelectList","onHover","onSelect","role","aria-live","aria-relevant","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../../../src/components/internal/FormFields/Select/Select.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport SelectButton from './components/SelectButton';\nimport SelectList from './components/SelectList';\nimport uuid from '../../../../utils/uuid';\nimport { keys } from './constants';\nimport { SelectItem, SelectProps } from './types';\nimport './Select.scss';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { simulateFocusScroll } from '../utils';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nfunction Select({\n    items = [],\n    className = '',\n    classNameModifiers = [],\n    filterable = true,\n    readonly = false,\n    onChange = () => {},\n    onInput,\n    selectedValue,\n    name,\n    isInvalid,\n    isValid,\n    placeholder,\n    uniqueId,\n    disabled,\n    disableTextFilter,\n    clearOnSelect,\n    blurOnClose,\n    onListToggle,\n    required,\n    additionalDescribedBy\n}: Readonly<SelectProps>) {\n    const { i18n } = useCoreContext();\n    const filterInputRef = useRef(null);\n    const selectContainerRef = useRef(null);\n    const toggleButtonRef = useRef(null);\n    const selectListRef = useRef(null);\n    const [textFilter, setTextFilter] = useState<string>(null);\n    const [showList, setShowList] = useState<boolean>(false);\n    const [statusMessage, setStatusMessage] = useState<string | null>(null);\n    const selectListId: string = useMemo(() => `select-${uuid()}`, []);\n\n    const active: SelectItem = items.find(i => i.id === selectedValue) || ({} as SelectItem);\n\n    const [inputText, setInputText] = useState<string>();\n\n    const [activeOption, setActiveOption] = useState<SelectItem>(active);\n\n    const selectedOption = active;\n\n    const filteredItems = disableTextFilter ? items : items.filter(item => !textFilter || item.name.toLowerCase().includes(textFilter.toLowerCase()));\n\n    const suffix = isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX;\n    const baseDescribedBy = uniqueId ? `${uniqueId}${suffix}` : null;\n    const ariaDescribedBy = [baseDescribedBy, additionalDescribedBy].filter(Boolean).join(' ') || null;\n\n    const setNextActive = () => {\n        if (!filteredItems || filteredItems.length < 1) return;\n        const possibleNextIndex = filteredItems.findIndex(listItem => listItem.id === activeOption.id) + 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.id === activeOption.id) - 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        if (blurOnClose) {\n            filterInputRef.current.blur();\n        }\n        setShowList(false);\n    };\n\n    const openList = () => {\n        setShowList(true);\n    };\n\n    const extractItemFromEvent = (e: Event): SelectItem => {\n        const value = (e.currentTarget as HTMLInputElement).getAttribute('data-value');\n        return filteredItems.find(listItem => listItem.id == value);\n    };\n\n    /**\n     * Closes the select list and fires an onChange\n     * @param e - Event\n     */\n    const handleSelect = (e: Event) => {\n        e.preventDefault();\n\n        // We use a local variable here since writing and if statement is cleaner then a long ternary\n        let valueToEmit;\n\n        if (e.currentTarget instanceof HTMLElement && e.currentTarget.getAttribute('role') === 'option') {\n            // This is the main scenario when clicking and item in the list\n            // Item comes from the event\n            valueToEmit = extractItemFromEvent(e);\n        } else if (activeOption.id && filteredItems.some(item => item.id === activeOption.id)) {\n            // This is the scenario where a user is using the keyboard to navigate\n            // In the case item comes from the visually select item\n            valueToEmit = activeOption;\n        } else {\n            // This is the scenario the user didn't select anything\n            if (textFilter) {\n                // if we filtering for something then select the first option\n                valueToEmit = filteredItems[0];\n            } else {\n                // This will happen when we want to keep an already chosen option\n                // If no active option we should just emit again with the value that was already selected\n                valueToEmit = { id: selectedValue };\n            }\n        }\n\n        if (valueToEmit && !valueToEmit.disabled) {\n            onChange({ target: { value: valueToEmit.id, name: name } });\n\n            if (clearOnSelect) setInputText(null);\n\n            closeList();\n        }\n    };\n\n    /**\n     * Handles hovering and directions\n     * @param e - Event\n     */\n    const handleHover = (e: Event) => {\n        e.preventDefault();\n        const item = extractItemFromEvent(e);\n        setActiveOption(item);\n    };\n\n    /**\n     * Handle keyDown events on the selectList button\n     * Responsible for opening and closing the list\n     * @param e - KeyboardEvent\n     */\n    const handleButtonKeyDown = (e: KeyboardEvent) => {\n        if (e.key === keys.enter && filterable && showList && textFilter) {\n            handleSelect(e);\n        } else if (e.key === keys.escape) {\n            // When user has focused Select button but not yet moved into Select list - close list and keep focus on the Select Button re. a11y guidelines\n            // https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html\n            closeList();\n        } else if ([keys.arrowUp, keys.arrowDown, keys.enter].includes(e.key) || (e.key === keys.space && (!filterable || !showList))) {\n            e.preventDefault();\n            if (!showList) {\n                openList();\n            } else {\n                handleNavigationKeys(e);\n            }\n        } else if (e.shiftKey && e.key === keys.tab) {\n            // Shift-Tab out of Select - close list re. a11y guidelines (above)\n            closeList();\n        } else if (e.key === keys.tab) {\n            closeList();\n        }\n    };\n\n    /**\n     * Handles movement with navigation keys and enter\n     * Navigates through the list, or select an element, or focus the filter input, or close the menu.\n     * @param e - KeyDownEvent\n     */\n    const handleNavigationKeys = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case keys.space:\n            case keys.enter:\n                handleSelect(e);\n                break;\n            case keys.arrowDown:\n                e.preventDefault();\n                setNextActive();\n                break;\n            case keys.arrowUp:\n                e.preventDefault();\n                setPreviousActive();\n                break;\n            default:\n        }\n    };\n\n    /**\n     * Updates the state with the current text filter value and opens the dropdown\n     * @param e - KeyboardEvent\n     */\n    const handleTextFilter = (e: KeyboardEvent) => {\n        const value: string = (e.target as HTMLInputElement).value;\n        setInputText(value);\n        setTextFilter(value);\n\n        // Open the dropdown when user starts typing\n        if (!showList) {\n            openList();\n        }\n\n        if (onInput) {\n            onInput(value);\n        }\n    };\n\n    /**\n     * Toggles the selectList and focuses in either the filter input or in the selectList button\n     * @param e - Event\n     */\n    const toggleList = (e: Event) => {\n        e.preventDefault();\n        if (!showList) {\n            setInputText(null);\n            openList();\n        } else {\n            setInputText(selectedOption.name);\n            closeList();\n        }\n    };\n\n    useEffect(() => {\n        if (showList) {\n            setInputText(null);\n        } else {\n            setTextFilter(null);\n        }\n    }, [showList]);\n\n    /**\n     * Focus on the input if filterable\n     */\n    useEffect(() => {\n        if (showList && filterable && filterInputRef.current) {\n            filterInputRef.current.focus();\n        }\n        onListToggle?.(showList);\n    }, [showList]);\n\n    useEffect(() => {\n        /**\n         * Close the select list when clicking outside the list\n         * @param e - MouseEvent\n         */\n        function handleClickOutside(e: MouseEvent) {\n            // use composedPath so it can also check when inside a web component\n            // if composedPath is not available fallback to e.target\n            const clickIsOutside = e.composedPath\n                ? !e.composedPath().includes(selectContainerRef.current)\n                : !selectContainerRef.current.contains(e.target);\n            if (clickIsOutside) {\n                closeList();\n            }\n        }\n\n        document.addEventListener('click', handleClickOutside, false);\n\n        return () => {\n            document.removeEventListener('click', handleClickOutside, false);\n        };\n    }, [selectContainerRef]);\n\n    /**\n     * Update status message for screen readers when no options are found\n     */\n    useEffect(() => {\n        // Debounce to avoid announcing on every keystroke\n        const SR_ANNOUNCEMENT_DELAY_MS = 500;\n        const timer = setTimeout(() => {\n            if (filteredItems.length === 0) {\n                setStatusMessage(i18n.get('select.noOptionsFound'));\n            } else {\n                setStatusMessage(i18n.get('select.results', { values: { count: filteredItems.length } }));\n            }\n        }, SR_ANNOUNCEMENT_DELAY_MS);\n\n        return () => clearTimeout(timer);\n    }, [showList, filteredItems.length, i18n]);\n\n    return (\n        <div\n            className={cx(['adyen-checkout__dropdown', className, ...classNameModifiers.map(m => `adyen-checkout__dropdown--${m}`)])}\n            ref={selectContainerRef}\n        >\n            <SelectButton\n                inputText={inputText}\n                id={uniqueId ?? null}\n                active={activeOption}\n                selected={selectedOption}\n                filterInputRef={filterInputRef}\n                filterable={filterable}\n                isInvalid={isInvalid}\n                isValid={isValid}\n                onButtonKeyDown={handleButtonKeyDown}\n                onInput={handleTextFilter}\n                placeholder={placeholder}\n                readonly={readonly}\n                selectListId={selectListId}\n                showList={showList}\n                toggleButtonRef={toggleButtonRef}\n                toggleList={toggleList}\n                disabled={disabled}\n                ariaDescribedBy={ariaDescribedBy}\n                required={required}\n            />\n            <SelectList\n                active={activeOption}\n                filteredItems={filteredItems}\n                onHover={handleHover}\n                onSelect={handleSelect}\n                selected={selectedOption}\n                selectListId={selectListId}\n                selectListRef={selectListRef}\n                showList={showList}\n            />\n            <div\n                key={inputText}\n                role=\"status\"\n                aria-live=\"polite\"\n                // aria-relevant seems to be needed here make make sure a second time we get\n                // \"No options found\" we still announce the status message.\n                // What happens otherwise is that just the first status message is announced\n                // tested on VoiceOver on Chrome\n                aria-relevant=\"additions text\"\n                className=\"adyen-checkout-sr-panel--sr-only\"\n            >\n                {statusMessage}\n            </div>\n        </div>\n    );\n}\n\nSelect.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    filterable: true,\n    items: [],\n    readonly: false,\n    onChange: () => {}\n};\n\nexport default Select;\n"],"names":["Select","items","className","classNameModifiers","filterable","readonly","onChange","onInput","selectedValue","name","isInvalid","isValid","placeholder","uniqueId","disabled","disableTextFilter","clearOnSelect","blurOnClose","onListToggle","required","additionalDescribedBy","i18n","useCoreContext","filterInputRef","useRef","selectContainerRef","toggleButtonRef","selectListRef","textFilter","setTextFilter","useState","showList","setShowList","statusMessage","setStatusMessage","selectListId","useMemo","uuid","active","find","i","id","inputText","setInputText","activeOption","setActiveOption","selectedOption","filteredItems","filter","item","toLowerCase","includes","ariaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","Boolean","join","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","timer","setTimeout","get","values","count","clearTimeout","h","div","cx","map","m","ref","SelectButton","selected","onButtonKeyDown","escape","shiftKey","tab","toggleList","SelectList","onHover","onSelect","role","aria-live","aria-relevant","defaultProps"],"mappings":"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"}

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 a from"../../../../../_virtual/index.js";import o from"../../../Img/Img.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";function d({filterable:t,toggleButtonRef:a,showList:o,selectListId:n,...d}){if(t){const{id:t,...o}=d;return e("div",{...o,ref:a})}return e("button",{role:"combobox",type:"button",id:d.id,className:d.className,"aria-haspopup":"listbox","aria-expanded":o,"aria-controls":n,"aria-activedescendant":d["aria-activedescendant"]||void 0,disabled:d.disabled,"aria-disabled":d.readonly,"aria-describedby":d.ariaDescribedBy,"aria-labelledby":d.id?`${d.id}-label ${d.id}-value`:void 0,onClick:d.onClick,onKeyDown:d.onKeyDown,ref:a},d.children)}function i(i){const{active:r,selected:l,inputText:c,readonly:s,showList:u,required:_}=i,p=n(()=>{const e=l.selectedOptionName||l.name;return!0!==("string"==typeof e&&""!==e.trim())},[l,i.placeholder]),b=l.selectedOptionName||l.name||i.placeholder||"",y=u?c??"":b,m=s?null:i.filterable?e=>{e.preventDefault(),document.activeElement===i.filterInputRef.current?i.showList||i.toggleList(e):i.filterInputRef.current&&i.filterInputRef.current.focus()}:i.toggleList,f=r.id?`listItem-${r.id}`:"";return e(d,{className:a({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":u,"adyen-checkout__dropdown__button--invalid":i.isInvalid,"adyen-checkout__dropdown__button--valid":i.isValid,"adyen-checkout__dropdown__button--disabled":l.disabled}),disabled:i.disabled,filterable:i.filterable,onClick:m,onKeyDown:s?null:i.onButtonKeyDown,toggleButtonRef:i.toggleButtonRef,id:i.id,showList:u,selectListId:i.selectListId,"aria-activedescendant":!i.filterable&&u&&f||void 0},i.filterable?e(t,null,!u&&l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("input",{value:y,"aria-autocomplete":"list","aria-controls":i.selectListId,"aria-expanded":u,"aria-owns":i.selectListId,autoComplete:"off",className:a("adyen-checkout__filter-input",{"adyen-checkout__filter-input--placeholder":!u&&p}),onInput:i.onInput,ref:i.filterInputRef,role:"combobox","aria-activedescendant":f,type:"text",readOnly:i.readonly,"aria-disabled":i.readonly,id:i.id,"aria-describedby":i.ariaDescribedBy,required:_}),!u&&l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)):e(t,null,l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("span",{id:i.id?`${i.id}-value`:void 0,className:a("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":p})},b),l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)))}export{i as default};
+import{createElement as e,Fragment as t}from"../../../../../external/preact/dist/preact.js";import a from"../../../../../_virtual/index.js";import o from"../../../Img/Img.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";function d({filterable:t,toggleButtonRef:a,showList:o,selectListId:n,...d}){if(t){const{id:t,...o}=d;return e("div",{...o,ref:a})}return e("button",{role:"combobox",type:"button",id:d.id,className:d.className,"aria-haspopup":"listbox","aria-expanded":o,"aria-controls":n,"aria-activedescendant":d["aria-activedescendant"]||void 0,disabled:d.disabled,"aria-disabled":d.readonly,"aria-describedby":d["aria-describedby"],"aria-labelledby":d.id?`${d.id}-label ${d.id}-value`:void 0,onClick:d.onClick,onKeyDown:d.onKeyDown,ref:a},d.children)}function i(i){const{active:r,selected:l,inputText:c,readonly:s,showList:u,required:_}=i,p=n(()=>{const e=l.selectedOptionName||l.name;return!0!==("string"==typeof e&&""!==e.trim())},[l,i.placeholder]),b=l.selectedOptionName||l.name||i.placeholder||"",y=u?c??"":b,m=s?null:i.filterable?e=>{e.preventDefault(),document.activeElement===i.filterInputRef.current?i.showList||i.toggleList(e):i.filterInputRef.current&&i.filterInputRef.current.focus()}:i.toggleList,f=r.id?`listItem-${r.id}`:"";return e(d,{className:a({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":u,"adyen-checkout__dropdown__button--invalid":i.isInvalid,"adyen-checkout__dropdown__button--valid":i.isValid,"adyen-checkout__dropdown__button--disabled":l.disabled}),disabled:i.disabled,filterable:i.filterable,onClick:m,onKeyDown:s?null:i.onButtonKeyDown,toggleButtonRef:i.toggleButtonRef,id:i.id,showList:u,selectListId:i.selectListId,"aria-activedescendant":!i.filterable&&u&&f||void 0,"aria-describedby":i.ariaDescribedBy},i.filterable?e(t,null,!u&&l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("input",{value:y,"aria-autocomplete":"list","aria-controls":i.selectListId,"aria-expanded":u,"aria-owns":i.selectListId,autoComplete:"off",className:a("adyen-checkout__filter-input",{"adyen-checkout__filter-input--placeholder":!u&&p}),onInput:i.onInput,ref:i.filterInputRef,role:"combobox","aria-activedescendant":f,type:"text",readOnly:i.readonly,"aria-disabled":i.readonly,id:i.id,"aria-describedby":i.ariaDescribedBy,required:_}),!u&&l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)):e(t,null,l.icon&&e(o,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("span",{id:i.id?`${i.id}-value`:void 0,className:a("adyen-checkout__dropdown__button__text",{"adyen-checkout__dropdown__button__text-placeholder":p})},b),l.secondaryText&&e("span",{className:"adyen-checkout__dropdown__button__secondary-text"},l.secondaryText)))}export{i 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';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, showList, selectListId, ...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 (\n        <button\n            role=\"combobox\"\n            type=\"button\"\n            id={props.id}\n            className={props.className}\n            aria-haspopup=\"listbox\"\n            aria-expanded={showList}\n            aria-controls={selectListId}\n            aria-activedescendant={props['aria-activedescendant'] || undefined}\n            disabled={props.disabled}\n            aria-disabled={props.readonly}\n            aria-describedby={props.ariaDescribedBy}\n            aria-labelledby={props.id ? `${props.id}-label ${props.id}-value` : undefined}\n            onClick={props.onClick}\n            onKeyDown={props.onKeyDown}\n            ref={toggleButtonRef}\n        >\n            {props.children}\n        </button>\n    );\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n    const { active, selected, inputText, readonly, showList, required } = props;\n\n    const isShowingPlaceholder = useMemo(() => {\n        const displayText = selected.selectedOptionName || selected.name;\n        const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n        return isValidValue !== true;\n    }, [selected, props.placeholder]);\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    // When list is open, show user's typed input (or empty); otherwise show selected value\n    const textWhenListOpen = inputText ?? '';\n    const displayInputText = showList ? textWhenListOpen : 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    // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n    const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n            id={props.id}\n            showList={showList}\n            selectListId={props.selectListId}\n            aria-activedescendant={!props.filterable && showList ? currentSelectedItemId || undefined : undefined}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span\n                        id={props.id ? `${props.id}-value` : undefined}\n                        className={classnames('adyen-checkout__dropdown__button__text', {\n                            'adyen-checkout__dropdown__button__text-placeholder': isShowingPlaceholder\n                        })}\n                    >\n                        {displayText}\n                    </span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className={classnames('adyen-checkout__filter-input', {\n                            'adyen-checkout__filter-input--placeholder': !showList && isShowingPlaceholder\n                        })}\n                        onInput={props.onInput}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={currentSelectedItemId}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        aria-disabled={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                        required={required}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","filterable","toggleButtonRef","showList","selectListId","props","id","strippedProps","h","div","ref","button","role","type","className","aria-haspopup","aria-expanded","aria-controls","aria-activedescendant","undefined","disabled","aria-disabled","readonly","aria-describedby","ariaDescribedBy","aria-labelledby","onClick","onKeyDown","children","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","cx","isInvalid","isValid","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-owns","autoComplete","classnames","onInput","readOnly","secondaryText","span"],"mappings":"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"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment, Ref } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonElementProps, SelectButtonProps } from '../types';\nimport Img from '../../../Img';\nimport { useMemo } from 'preact/hooks';\nimport classnames from 'classnames';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, showList, selectListId, ...props }: Readonly<SelectButtonElementProps>) {\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 as Ref<HTMLDivElement>} />;\n    }\n\n    return (\n        <button\n            role=\"combobox\"\n            type=\"button\"\n            id={props.id}\n            className={props.className}\n            aria-haspopup=\"listbox\"\n            aria-expanded={showList}\n            aria-controls={selectListId}\n            aria-activedescendant={props['aria-activedescendant'] || undefined}\n            disabled={props.disabled}\n            aria-disabled={props.readonly}\n            aria-describedby={props['aria-describedby']}\n            aria-labelledby={props.id ? `${props.id as string}-label ${props.id as string}-value` : undefined}\n            onClick={props.onClick}\n            onKeyDown={props.onKeyDown}\n            ref={toggleButtonRef as Ref<HTMLButtonElement>}\n        >\n            {props.children}\n        </button>\n    );\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n    const { active, selected, inputText, readonly, showList, required } = props;\n\n    const isShowingPlaceholder = useMemo(() => {\n        const displayText = selected.selectedOptionName || selected.name;\n        const isValidValue = typeof displayText === 'string' && displayText.trim() !== '';\n        return isValidValue !== true;\n    }, [selected, props.placeholder]);\n\n    // display fallback order\n    const displayText = selected.selectedOptionName || selected.name || props.placeholder || '';\n    // displayInputText only used for the text input for the filter\n    // display the \"typed\" filter text when showing the dropdown,\n    // hide it and show the \"selected\" value when collapsed\n    // When list is open, show user's typed input (or empty); otherwise show selected value\n    const textWhenListOpen = inputText ?? '';\n    const displayInputText = showList ? textWhenListOpen : 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    // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n    const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n    return (\n        <SelectButtonElement\n            className={cx({\n                'adyen-checkout__dropdown__button': true,\n                'adyen-checkout__dropdown__button--readonly': readonly,\n                'adyen-checkout__dropdown__button--active': showList,\n                'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n                'adyen-checkout__dropdown__button--valid': props.isValid,\n                'adyen-checkout__dropdown__button--disabled': selected.disabled\n            })}\n            disabled={props.disabled}\n            filterable={props.filterable}\n            onClick={onClickHandler}\n            onKeyDown={!readonly ? props.onButtonKeyDown : null}\n            toggleButtonRef={props.toggleButtonRef}\n            id={props.id}\n            showList={showList}\n            selectListId={props.selectListId}\n            aria-activedescendant={!props.filterable && showList ? currentSelectedItemId || undefined : undefined}\n            aria-describedby={props.ariaDescribedBy}\n        >\n            {!props.filterable ? (\n                <Fragment>\n                    {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <span\n                        id={props.id ? `${props.id}-value` : undefined}\n                        className={classnames('adyen-checkout__dropdown__button__text', {\n                            'adyen-checkout__dropdown__button__text-placeholder': isShowingPlaceholder\n                        })}\n                    >\n                        {displayText}\n                    </span>\n                    {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n                </Fragment>\n            ) : (\n                <Fragment>\n                    {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n                    <input\n                        value={displayInputText}\n                        aria-autocomplete=\"list\"\n                        aria-controls={props.selectListId}\n                        aria-expanded={showList}\n                        aria-owns={props.selectListId}\n                        autoComplete=\"off\"\n                        className={classnames('adyen-checkout__filter-input', {\n                            'adyen-checkout__filter-input--placeholder': !showList && isShowingPlaceholder\n                        })}\n                        onInput={props.onInput}\n                        ref={props.filterInputRef}\n                        role=\"combobox\"\n                        aria-activedescendant={currentSelectedItemId}\n                        type=\"text\"\n                        readOnly={props.readonly}\n                        aria-disabled={props.readonly}\n                        id={props.id}\n                        aria-describedby={props.ariaDescribedBy}\n                        required={required}\n                    />\n                    {!showList && selected.secondaryText && (\n                        <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n                    )}\n                </Fragment>\n            )}\n        </SelectButtonElement>\n    );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","filterable","toggleButtonRef","showList","selectListId","props","id","strippedProps","h","div","ref","button","role","type","className","aria-haspopup","aria-expanded","aria-controls","aria-activedescendant","undefined","disabled","aria-disabled","readonly","aria-describedby","aria-labelledby","onClick","onKeyDown","children","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","cx","isInvalid","isValid","onButtonKeyDown","ariaDescribedBy","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-owns","autoComplete","classnames","onInput","readOnly","secondaryText","span"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as r,useEffect as s}from"../../../external/preact/hooks/dist/hooks.js";import o from"../../../_virtual/index.js";import{useModal as a}from"./useModal.js";const t=({children:t,classNameModifiers:i=[],isOpen:l,onClose:n,isDismissible:c=!0,labelledBy:d,describedBy:m,focusFirst:p,focusAfterClose:u,...f})=>{const k=r(),{closeModal:y,handleClickOutside:h}=a({modalElement:k.current,isOpen:l,isDismissible:c,focusFirst:p,focusAfterClose:u,onClose:n});return s(()=>{if(!k.current)return;const e=e=>{"Enter"!==e.key&&"Enter"!==e.code||e.stopPropagation()};return k.current.addEventListener("keypress",e,{capture:!0}),()=>{k.current.removeEventListener("keypress",e)}},[k.current]),e("div",{className:o("adyen-checkout__modal-wrapper",i.map(e=>`adyen-checkout__modal-wrapper--${e}`),{"adyen-checkout__modal-wrapper--open":l}),role:"dialog","aria-labelledby":d,"aria-describedby":m,"aria-modal":"true","aria-hidden":!l,onClick:h,...f},e("div",{className:"adyen-checkout__modal",ref:k},t({onCloseModal:y})))};export{t as Modal};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as r,useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import s from"../../../_virtual/index.js";import{useModal as a}from"./useModal.js";const t=({children:t,classNameModifiers:i=[],isOpen:n,onClose:l,isDismissible:c=!0,labelledBy:d,describedBy:m,focusFirst:u,focusAfterClose:p,...f})=>{const k=r(),{closeModal:y,handleClickOutside:h}=a({modalElement:k.current,isOpen:n,isDismissible:c,focusFirst:u,focusAfterClose:p,onClose:l});return o(()=>{if(!k.current)return;const e=e=>{"Enter"!==e.key&&"Enter"!==e.code||e.stopPropagation()};return k.current.addEventListener("keydown",e,{capture:!0}),()=>{k.current.removeEventListener("keydown",e)}},[k.current]),e("div",{className:s("adyen-checkout__modal-wrapper",i.map(e=>`adyen-checkout__modal-wrapper--${e}`),{"adyen-checkout__modal-wrapper--open":n}),role:"dialog","aria-labelledby":d,"aria-describedby":m,"aria-modal":"true","aria-hidden":!n,onClick:h,...f},e("div",{className:"adyen-checkout__modal",ref:k},t({onCloseModal:y})))};export{t as Modal};
 //# sourceMappingURL=Modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../../src/components/internal/Modal/Modal.tsx"],"sourcesContent":["import { ComponentChildren, h } from 'preact';\nimport { useEffect, useRef } from 'preact/hooks';\nimport cx from 'classnames';\nimport './Modal.scss';\nimport { useModal } from './useModal';\n\ntype ModalRenderFnProps = {\n    /**\n     * Function used to properly trigger the Modal close mechanism. It takes into account the element that the Modal needs\n     * to set focus when it is dismissed.\n     */\n    onCloseModal(): void;\n};\n\ntype ModalProps = {\n    children: ({ onCloseModal }: ModalRenderFnProps) => ComponentChildren;\n    classNameModifiers?: string[];\n    onClose(): void;\n    isOpen: boolean;\n    isDismissible?: boolean;\n    labelledBy: string;\n    describedBy: string;\n    /**\n     * Reference to the element that should be focused when the modal is opened\n     */\n    focusFirst: HTMLElement;\n    /**\n     * Reference to the element that should be focused when the modal is closed\n     */\n    focusAfterClose: HTMLElement;\n};\n\nconst Modal = ({\n    children,\n    classNameModifiers = [],\n    isOpen,\n    onClose,\n    isDismissible = true,\n    labelledBy,\n    describedBy,\n    focusFirst,\n    focusAfterClose,\n    ...props\n}: Readonly<ModalProps>) => {\n    const modalContainerRef = useRef<HTMLDivElement>();\n    const { closeModal, handleClickOutside } = useModal({\n        modalElement: modalContainerRef.current,\n        isOpen,\n        isDismissible,\n        focusFirst,\n        focusAfterClose,\n        onClose\n    });\n\n    /**\n     * It shouldn't propagate ENTER key event to the parent component. This effect suppress the event propagation\n     * (e.g. ENTER key press might trigger the payment flow for Card)\n     */\n    useEffect(() => {\n        if (!modalContainerRef.current) return;\n\n        const suppressKeyPress = (event: KeyboardEvent) => {\n            if (event.key === 'Enter' || event.code === 'Enter') event.stopPropagation();\n        };\n\n        modalContainerRef.current.addEventListener('keypress', suppressKeyPress, { capture: true });\n        return () => {\n            modalContainerRef.current.removeEventListener('keypress', suppressKeyPress);\n        };\n    }, [modalContainerRef.current]);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n        <div\n            className={cx(\n                'adyen-checkout__modal-wrapper',\n                classNameModifiers.map(m => `adyen-checkout__modal-wrapper--${m}`),\n                { 'adyen-checkout__modal-wrapper--open': isOpen }\n            )}\n            role=\"dialog\"\n            aria-labelledby={labelledBy}\n            aria-describedby={describedBy}\n            aria-modal=\"true\"\n            aria-hidden={!isOpen}\n            onClick={handleClickOutside}\n            {...props}\n        >\n            <div className=\"adyen-checkout__modal\" ref={modalContainerRef}>\n                {children({ onCloseModal: closeModal })}\n            </div>\n        </div>\n    );\n};\n\nexport { Modal };\n"],"names":["Modal","children","classNameModifiers","isOpen","onClose","isDismissible","labelledBy","describedBy","focusFirst","focusAfterClose","props","modalContainerRef","useRef","closeModal","handleClickOutside","useModal","modalElement","current","useEffect","suppressKeyPress","event","key","code","stopPropagation","addEventListener","capture","removeEventListener","h","div","className","cx","map","m","role","aria-labelledby","aria-describedby","aria-modal","aria-hidden","onClick","ref","onCloseModal"],"mappings":"gPAgCA,MAAMA,EAAQ,EACVC,WACAC,qBAAqB,GACrBC,SACAC,UACAC,iBAAgB,EAChBC,aACAC,cACAC,aACAC,qBACGC,MAEH,MAAMC,EAAoBC,KACpBC,WAAEA,EAAUC,mBAAEA,GAAuBC,EAAS,CAChDC,aAAcL,EAAkBM,QAChCd,SACAE,gBACAG,aACAC,kBACAL,YAoBJ,OAbAc,EAAU,KACN,IAAKP,EAAkBM,QAAS,OAEhC,MAAME,EAAoBC,IACJ,UAAdA,EAAMC,KAAkC,UAAfD,EAAME,MAAkBF,EAAMG,mBAI/D,OADAZ,EAAkBM,QAAQO,iBAAiB,WAAYL,EAAkB,CAAEM,SAAS,IAC7E,KACHd,EAAkBM,QAAQS,oBAAoB,WAAYP,KAE/D,CAACR,EAAkBM,UAIlBU,EAACC,MAAAA,CACGC,UAAWC,EACP,gCACA5B,EAAmB6B,IAAIC,GAAK,kCAAkCA,KAC9D,CAAE,sCAAuC7B,IAE7C8B,KAAK,SACLC,kBAAiB5B,EACjB6B,mBAAkB5B,EAClB6B,aAAW,OACXC,eAAclC,EACdmC,QAASxB,KACLJ,GAEJiB,EAACC,MAAAA,CAAIC,UAAU,wBAAwBU,IAAK5B,GACvCV,EAAS,CAAEuC,aAAc3B"}
+{"version":3,"file":"Modal.js","sources":["../../../../../src/components/internal/Modal/Modal.tsx"],"sourcesContent":["import { ComponentChildren, h } from 'preact';\nimport { useEffect, useRef } from 'preact/hooks';\nimport cx from 'classnames';\nimport './Modal.scss';\nimport { useModal } from './useModal';\n\ntype ModalRenderFnProps = {\n    /**\n     * Function used to properly trigger the Modal close mechanism. It takes into account the element that the Modal needs\n     * to set focus when it is dismissed.\n     */\n    onCloseModal(): void;\n};\n\ntype ModalProps = {\n    children: ({ onCloseModal }: ModalRenderFnProps) => ComponentChildren;\n    classNameModifiers?: string[];\n    onClose(): void;\n    isOpen: boolean;\n    isDismissible?: boolean;\n    labelledBy: string;\n    describedBy: string;\n    /**\n     * Reference to the element that should be focused when the modal is opened\n     */\n    focusFirst: HTMLElement;\n    /**\n     * Reference to the element that should be focused when the modal is closed\n     */\n    focusAfterClose: HTMLElement;\n};\n\nconst Modal = ({\n    children,\n    classNameModifiers = [],\n    isOpen,\n    onClose,\n    isDismissible = true,\n    labelledBy,\n    describedBy,\n    focusFirst,\n    focusAfterClose,\n    ...props\n}: Readonly<ModalProps>) => {\n    const modalContainerRef = useRef<HTMLDivElement>();\n    const { closeModal, handleClickOutside } = useModal({\n        modalElement: modalContainerRef.current,\n        isOpen,\n        isDismissible,\n        focusFirst,\n        focusAfterClose,\n        onClose\n    });\n\n    /**\n     * It shouldn't propagate ENTER key event to the parent component. This effect suppress the event propagation\n     * (e.g. ENTER key press might trigger the payment flow for Card)\n     */\n    useEffect(() => {\n        if (!modalContainerRef.current) return;\n\n        const suppressKeyDown = (event: KeyboardEvent) => {\n            if (event.key === 'Enter' || event.code === 'Enter') event.stopPropagation();\n        };\n\n        modalContainerRef.current.addEventListener('keydown', suppressKeyDown, { capture: true });\n        return () => {\n            modalContainerRef.current.removeEventListener('keydown', suppressKeyDown);\n        };\n    }, [modalContainerRef.current]);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n        <div\n            className={cx(\n                'adyen-checkout__modal-wrapper',\n                classNameModifiers.map(m => `adyen-checkout__modal-wrapper--${m}`),\n                { 'adyen-checkout__modal-wrapper--open': isOpen }\n            )}\n            role=\"dialog\"\n            aria-labelledby={labelledBy}\n            aria-describedby={describedBy}\n            aria-modal=\"true\"\n            aria-hidden={!isOpen}\n            onClick={handleClickOutside}\n            {...props}\n        >\n            <div className=\"adyen-checkout__modal\" ref={modalContainerRef}>\n                {children({ onCloseModal: closeModal })}\n            </div>\n        </div>\n    );\n};\n\nexport { Modal };\n"],"names":["Modal","children","classNameModifiers","isOpen","onClose","isDismissible","labelledBy","describedBy","focusFirst","focusAfterClose","props","modalContainerRef","useRef","closeModal","handleClickOutside","useModal","modalElement","current","useEffect","suppressKeyDown","event","key","code","stopPropagation","addEventListener","capture","removeEventListener","h","div","className","cx","map","m","role","aria-labelledby","aria-describedby","aria-modal","aria-hidden","onClick","ref","onCloseModal"],"mappings":"gPAgCA,MAAMA,EAAQ,EACVC,WACAC,qBAAqB,GACrBC,SACAC,UACAC,iBAAgB,EAChBC,aACAC,cACAC,aACAC,qBACGC,MAEH,MAAMC,EAAoBC,KACpBC,WAAEA,EAAUC,mBAAEA,GAAuBC,EAAS,CAChDC,aAAcL,EAAkBM,QAChCd,SACAE,gBACAG,aACAC,kBACAL,YAoBJ,OAbAc,EAAU,KACN,IAAKP,EAAkBM,QAAS,OAEhC,MAAME,EAAmBC,IACH,UAAdA,EAAMC,KAAkC,UAAfD,EAAME,MAAkBF,EAAMG,mBAI/D,OADAZ,EAAkBM,QAAQO,iBAAiB,UAAWL,EAAiB,CAAEM,SAAS,IAC3E,KACHd,EAAkBM,QAAQS,oBAAoB,UAAWP,KAE9D,CAACR,EAAkBM,UAIlBU,EAACC,MAAAA,CACGC,UAAWC,EACP,gCACA5B,EAAmB6B,IAAIC,GAAK,kCAAkCA,KAC9D,CAAE,sCAAuC7B,IAE7C8B,KAAK,SACLC,kBAAiB5B,EACjB6B,mBAAkB5B,EAClB6B,aAAW,OACXC,eAAclC,EACdmC,QAASxB,KACLJ,GAEJiB,EAACC,MAAAA,CAAIC,UAAU,wBAAwBU,IAAK5B,GACvCV,EAAS,CAAEuC,aAAc3B"}

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

@@ -1,2 +1,2 @@
-import{Component as t}from"../../../../external/preact/dist/preact.js";import{getFields as s,validFieldsReducer as e,getErrorReducer as i,getErrorObject as o}from"./SFPUtils.js";import n from"../lib/CSF/initCSF.js";import r from"./SecuredFieldsProviderHandlers.js";import d from"./defaultProps.js";import{ENCRYPTED_PWD_FIELD as a,ENCRYPTED_CARD_NUMBER as h,DEDICATED_CARD_COMPONENTS as l,DATE_POLICY_REQUIRED as p,CVC_POLICY_REQUIRED as c}from"../lib/constants.js";import u from"../../../../core/Errors/AdyenCheckoutError.js";import{getErrorMessageFromCode as m}from"../../../../core/Errors/utils.js";import{SF_ErrorCodes as f}from"../../../../core/Errors/constants.js";import{TxVariants as C}from"../../../tx-variants.js";function y(t,s,e){return s in t?Object.defineProperty(t,s,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[s]=e,t}class F extends t{componentDidMount(){this.props.rootNode&&this.setRootNode(this.props.rootNode);const t=s(this.rootNode),i=t.reduce(e,{});this.setState({valid:i}),t.forEach(t=>{this.numCharsInField[t]=0}),this.numDateFields=t.filter(t=>t.match(/Expiry/)).length,t.length?(this.destroy(),this.initializeCSF(this.rootNode)):(this.props.componentType===C.customCard&&console.debug('You are trying to create a CustomCard component but the element into which you are trying to mount the CustomCard component does not contain any elements with a "data-cse" attribute e.g. <div data-cse="encryptedCardNumber"></div>'),this.handleOnNoDataRequired())}componentDidUpdate(){this.checkForKCPFields(),this.props.onStateUpdate?.(this.state)}componentWillUnmount(){this.csf=null,clearTimeout(this.csfLoadFailTimeout),clearTimeout(this.csfConfigFailTimeout)}initializeCSF(t){let s=this.props.loadingContext;const e={rootNode:t,type:this.props.type,componentType:this.props.componentType,clientKey:this.props.clientKey,cardGroupTypes:this.props.brands,autoFocus:this.props.autoFocus,trimTrailingSeparator:this.props.trimTrailingSeparator,loadingContext:s,keypadFix:this.props.keypadFix,showWarnings:this.props.showWarnings,iframeUIConfig:{sfStyles:this.props.styles},i18n:this.props.i18n,onSubmitAnalytics:this.props.onSubmitAnalytics,callbacks:{onLoad:this.handleOnLoad,onConfigSuccess:this.handleOnConfigSuccess,onFieldValid:this.handleOnFieldValid,onAllValid:this.handleOnAllValid,onBrand:this.handleOnBrand,onError:this.handleOnError,onFocus:this.handleFocus,onBinValue:this.props.onBinValue,onAutoComplete:this.handleOnAutoComplete,onAdditionalSFConfig:this.props.onAdditionalSFConfig,onAdditionalSFRemoved:this.props.onAdditionalSFRemoved,onTouchstartIOS:this.handleOnTouchstartIOS,onKeyPressed:this.handleKeyPressed},isKCP:this.state.hasKoreanFields,legacyInputMode:this.props.legacyInputMode,minimumExpiryDate:this.props.minimumExpiryDate,implementationType:this.props.implementationType||"components",forceCompat:this.props.forceCompat,maskSecurityCode:this.props.maskSecurityCode,exposeExpiryDate:this.props.exposeExpiryDate,shouldDisableIOSArrowKeys:!!this.props.disableIOSArrowKeys,placeholders:this.props.placeholders??{},showContextualElement:this.props.showContextualElement};this.csf=n(e),this.csfLoadFailTimeout=setTimeout(()=>{"ready"!==this.state.status&&(this.setState({status:"csfLoadFailure"}),this.props.onError(new u("ERROR","secured field iframes have failed to load")))},this.csfLoadFailTimeoutMS)}checkForKCPFields(){let t=!1;if(this.props.koreanAuthenticationRequired&&(t=this.issuingCountryCode?"kr"===this.issuingCountryCode:"kr"===this.props.countryCode),this.state.hasKoreanFields&&!t){const t=t=>({data:{...t.data,[a]:void 0},valid:{...t.valid,[a]:!1},errors:{...t.errors,[a]:null},hasKoreanFields:!1});this.setState(t,()=>{this.props.onChange(this.state)}),this.csf.removeSecuredField(a),this.csf.setKCPStatus(!1)}if(!this.state.hasKoreanFields&&t){const t=t=>({valid:{...t.valid,[a]:!1},hasKoreanFields:!0,isSfpValid:!1});this.setState(t,()=>{this.props.onChange(this.state)}),this.csf.addSecuredField(a),this.csf.setKCPStatus(!0)}}getChildContext(){return{i18n:this.props.i18n}}handleUnsupportedCard(t){const s=!!t.error;return s&&this.setState({detectedUnsupportedBrands:t.detectedBrands}),t.rootNode=this.rootNode,this.handleOnError(t,s),this.csf&&this.csf.hasUnsupportedCard(h,t.error),s}setFocusOn(t){this.csf&&this.csf.setFocusOnFrame(t)}updateStyles(t){this.csf&&this.csf.updateStyles(t)}sfIsOptionalOrHidden(t){return this.csf.sfIsOptionalOrHidden(t)}destroy(){this.csf&&this.csf.destroy()}getRootNode(){return this.rootNode}showValidation(){const{numDateFields:t,state:s}=this;Object.keys(s.valid).reduce(i(t,s),[]).forEach(t=>{const e=o(t,this.rootNode,s);this.handleOnError(e,!!s.detectedUnsupportedBrands),this.csf&&this.csf.isValidated&&this.csf.isValidated(t,e.error)})}mapErrorsToValidationRuleResult(){return Object.keys(this.state.errors).reduce((t,s)=>{const e=this.state.errors[s];return t[s]=e?{isValid:!1,errorMessage:m(e,f),errorI18n:this.props.i18n.get(e),error:e,rootNode:this.rootNode,...this.state.detectedUnsupportedBrands&&{detectedBrands:this.state.detectedUnsupportedBrands}}:null,t},{})}processBinLookupResponse(t,s){if(this.state.detectedUnsupportedBrands&&(this.setState(t=>({errors:{...t.errors,[h]:null},detectedUnsupportedBrands:null})),this.csf&&t)){const t={type:"card",fieldType:"encryptedCardNumber",error:""};this.handleUnsupportedCard(t)}this.issuingCountryCode=t?.issuingCountryCode?.toLowerCase();const e=s?.brand,i=e&&l.includes(s.brand);i&&this.setState(s,()=>{this.props.onChange(this.state)}),this.csf&&this.csf.brandsFromBinLookup(t,i?s:null)}render(t,s){return t.render({setRootNode:this.setRootNode,setFocusOn:this.setFocusOn},s)}constructor(t){super(t),y(this,"csfLoadFailTimeout",void 0),y(this,"csfLoadFailTimeoutMS",void 0),y(this,"csfConfigFailTimeout",void 0),y(this,"csfConfigFailTimeoutMS",void 0),y(this,"numCharsInField",void 0),y(this,"rootNode",void 0),y(this,"numDateFields",void 0),y(this,"csf",void 0),y(this,"handleOnLoad",void 0),y(this,"handleOnConfigSuccess",void 0),y(this,"handleOnFieldValid",void 0),y(this,"handleOnAllValid",void 0),y(this,"handleOnBrand",void 0),y(this,"handleFocus",void 0),y(this,"handleOnError",void 0),y(this,"handleOnAutoComplete",void 0),y(this,"handleOnNoDataRequired",void 0),y(this,"handleOnTouchstartIOS",void 0),y(this,"handleKeyPressed",void 0),y(this,"state",void 0),y(this,"props",void 0),y(this,"issuingCountryCode",void 0),y(this,"setRootNode",t=>{this.rootNode=t});const s={status:"loading",brand:t.type,errors:{},valid:{},data:{},cvcPolicy:c,expiryDatePolicy:p,isSfpValid:!1,hasKoreanFields:t.hasKoreanFields};this.state=s,this.csfLoadFailTimeout=null,this.csfLoadFailTimeoutMS=3e4,this.csfConfigFailTimeout=null,this.csfConfigFailTimeoutMS=15e3,this.numCharsInField={},this.handleOnLoad=r.handleOnLoad.bind(this),this.handleOnConfigSuccess=r.handleOnConfigSuccess.bind(this),this.handleOnFieldValid=r.handleOnFieldValid.bind(this),this.handleOnAllValid=r.handleOnAllValid.bind(this),this.handleOnBrand=r.handleOnBrand.bind(this),this.handleFocus=r.handleFocus.bind(this),this.handleOnError=r.handleOnError.bind(this),this.handleOnNoDataRequired=r.handleOnNoDataRequired.bind(this),this.handleOnAutoComplete=r.handleOnAutoComplete.bind(this),this.handleOnTouchstartIOS=r.handleOnTouchstartIOS.bind(this),this.handleKeyPressed=r.handleKeyPressed.bind(this),this.processBinLookupResponse=this.processBinLookupResponse.bind(this),this.setFocusOn=this.setFocusOn.bind(this),this.updateStyles=this.updateStyles.bind(this),this.handleUnsupportedCard=this.handleUnsupportedCard.bind(this),this.showValidation=this.showValidation.bind(this),this.destroy=this.destroy.bind(this)}}y(F,"defaultProps",d);export{F as default};
+import{Component as t}from"../../../../external/preact/dist/preact.js";import{getFields as s,validFieldsReducer as e,getErrorReducer as i,getErrorObject as o}from"./SFPUtils.js";import n from"../lib/CSF/initCSF.js";import r from"./SecuredFieldsProviderHandlers.js";import d from"./defaultProps.js";import{ENCRYPTED_PWD_FIELD as a,ENCRYPTED_CARD_NUMBER as h,DEDICATED_CARD_COMPONENTS as l,DATE_POLICY_REQUIRED as p,CVC_POLICY_REQUIRED as c}from"../lib/constants.js";import u from"../../../../core/Errors/AdyenCheckoutError.js";import{getErrorMessageFromCode as m}from"../../../../core/Errors/utils.js";import{SF_ErrorCodes as f}from"../../../../core/Errors/constants.js";import{TxVariants as C}from"../../../tx-variants.js";function y(t,s,e){return s in t?Object.defineProperty(t,s,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[s]=e,t}class F extends t{componentDidMount(){this.props.rootNode&&this.setRootNode(this.props.rootNode);const t=s(this.rootNode),i=t.reduce(e,{});this.setState({valid:i}),t.forEach(t=>{this.numCharsInField[t]=0}),this.numDateFields=t.filter(t=>t.match(/Expiry/)).length,t.length?(this.destroy(),this.initializeCSF(this.rootNode)):(this.props.componentType===C.customCard&&console.debug('You are trying to create a CustomCard component but the element into which you are trying to mount the CustomCard component does not contain any elements with a "data-cse" attribute e.g. <div data-cse="encryptedCardNumber"></div>'),this.handleOnNoDataRequired())}componentDidUpdate(){this.checkForKCPFields(),this.props.onStateUpdate?.(this.state)}componentWillUnmount(){this.csf=null,clearTimeout(this.csfLoadFailTimeout),clearTimeout(this.csfConfigFailTimeout)}initializeCSF(t){let s=this.props.loadingContext;const e={rootNode:t,type:this.props.type,componentType:this.props.componentType,clientKey:this.props.clientKey,cardGroupTypes:this.props.brands,autoFocus:this.props.autoFocus,trimTrailingSeparator:this.props.trimTrailingSeparator,loadingContext:s,keypadFix:this.props.keypadFix,showWarnings:this.props.showWarnings,iframeUIConfig:{sfStyles:this.props.styles},i18n:this.props.i18n,onSubmitAnalytics:this.props.onSubmitAnalytics,callbacks:{onLoad:this.handleOnLoad,onConfigSuccess:this.handleOnConfigSuccess,onFieldValid:this.handleOnFieldValid,onAllValid:this.handleOnAllValid,onBrand:this.handleOnBrand,onError:this.handleOnError,onFocus:this.handleFocus,onBinValue:this.props.onBinValue,onAutoComplete:this.handleOnAutoComplete,onAdditionalSFConfig:this.props.onAdditionalSFConfig,onAdditionalSFRemoved:this.props.onAdditionalSFRemoved,onTouchstartIOS:this.handleOnTouchstartIOS,onKeyDown:this.handleKeyDown},isKCP:this.state.hasKoreanFields,legacyInputMode:this.props.legacyInputMode,minimumExpiryDate:this.props.minimumExpiryDate,implementationType:this.props.implementationType||"components",forceCompat:this.props.forceCompat,maskSecurityCode:this.props.maskSecurityCode,exposeExpiryDate:this.props.exposeExpiryDate,shouldDisableIOSArrowKeys:!!this.props.disableIOSArrowKeys,placeholders:this.props.placeholders??{},showContextualElement:this.props.showContextualElement};this.csf=n(e),this.csfLoadFailTimeout=setTimeout(()=>{"ready"!==this.state.status&&(this.setState({status:"csfLoadFailure"}),this.props.onError(new u("ERROR","secured field iframes have failed to load")))},this.csfLoadFailTimeoutMS)}checkForKCPFields(){let t=!1;if(this.props.koreanAuthenticationRequired&&(t=this.issuingCountryCode?"kr"===this.issuingCountryCode:"kr"===this.props.countryCode),this.state.hasKoreanFields&&!t){const t=t=>({data:{...t.data,[a]:void 0},valid:{...t.valid,[a]:!1},errors:{...t.errors,[a]:null},hasKoreanFields:!1});this.setState(t,()=>{this.props.onChange(this.state)}),this.csf.removeSecuredField(a),this.csf.setKCPStatus(!1)}if(!this.state.hasKoreanFields&&t){const t=t=>({valid:{...t.valid,[a]:!1},hasKoreanFields:!0,isSfpValid:!1});this.setState(t,()=>{this.props.onChange(this.state)}),this.csf.addSecuredField(a),this.csf.setKCPStatus(!0)}}getChildContext(){return{i18n:this.props.i18n}}handleUnsupportedCard(t){const s=!!t.error;return s&&this.setState({detectedUnsupportedBrands:t.detectedBrands}),t.rootNode=this.rootNode,this.handleOnError(t,s),this.csf&&this.csf.hasUnsupportedCard(h,t.error),s}setFocusOn(t){this.csf&&this.csf.setFocusOnFrame(t)}updateStyles(t){this.csf&&this.csf.updateStyles(t)}sfIsOptionalOrHidden(t){return this.csf.sfIsOptionalOrHidden(t)}destroy(){this.csf&&this.csf.destroy()}getRootNode(){return this.rootNode}showValidation(){const{numDateFields:t,state:s}=this;Object.keys(s.valid).reduce(i(t,s),[]).forEach(t=>{const e=o(t,this.rootNode,s);this.handleOnError(e,!!s.detectedUnsupportedBrands),this.csf&&this.csf.isValidated&&this.csf.isValidated(t,e.error)})}mapErrorsToValidationRuleResult(){return Object.keys(this.state.errors).reduce((t,s)=>{const e=this.state.errors[s];return t[s]=e?{isValid:!1,errorMessage:m(e,f),errorI18n:this.props.i18n.get(e),error:e,rootNode:this.rootNode,...this.state.detectedUnsupportedBrands&&{detectedBrands:this.state.detectedUnsupportedBrands}}:null,t},{})}processBinLookupResponse(t,s){if(this.state.detectedUnsupportedBrands&&(this.setState(t=>({errors:{...t.errors,[h]:null},detectedUnsupportedBrands:null})),this.csf&&t)){const t={type:"card",fieldType:"encryptedCardNumber",error:""};this.handleUnsupportedCard(t)}this.issuingCountryCode=t?.issuingCountryCode?.toLowerCase();const e=s?.brand,i=e&&l.includes(s.brand);i&&this.setState(s,()=>{this.props.onChange(this.state)}),this.csf&&this.csf.brandsFromBinLookup(t,i?s:null)}render(t,s){return t.render({setRootNode:this.setRootNode,setFocusOn:this.setFocusOn},s)}constructor(t){super(t),y(this,"csfLoadFailTimeout",void 0),y(this,"csfLoadFailTimeoutMS",void 0),y(this,"csfConfigFailTimeout",void 0),y(this,"csfConfigFailTimeoutMS",void 0),y(this,"numCharsInField",void 0),y(this,"rootNode",void 0),y(this,"numDateFields",void 0),y(this,"csf",void 0),y(this,"handleOnLoad",void 0),y(this,"handleOnConfigSuccess",void 0),y(this,"handleOnFieldValid",void 0),y(this,"handleOnAllValid",void 0),y(this,"handleOnBrand",void 0),y(this,"handleFocus",void 0),y(this,"handleOnError",void 0),y(this,"handleOnAutoComplete",void 0),y(this,"handleOnNoDataRequired",void 0),y(this,"handleOnTouchstartIOS",void 0),y(this,"handleKeyDown",void 0),y(this,"state",void 0),y(this,"props",void 0),y(this,"issuingCountryCode",void 0),y(this,"setRootNode",t=>{this.rootNode=t});const s={status:"loading",brand:t.type,errors:{},valid:{},data:{},cvcPolicy:c,expiryDatePolicy:p,isSfpValid:!1,hasKoreanFields:t.hasKoreanFields};this.state=s,this.csfLoadFailTimeout=null,this.csfLoadFailTimeoutMS=3e4,this.csfConfigFailTimeout=null,this.csfConfigFailTimeoutMS=15e3,this.numCharsInField={},this.handleOnLoad=r.handleOnLoad.bind(this),this.handleOnConfigSuccess=r.handleOnConfigSuccess.bind(this),this.handleOnFieldValid=r.handleOnFieldValid.bind(this),this.handleOnAllValid=r.handleOnAllValid.bind(this),this.handleOnBrand=r.handleOnBrand.bind(this),this.handleFocus=r.handleFocus.bind(this),this.handleOnError=r.handleOnError.bind(this),this.handleOnNoDataRequired=r.handleOnNoDataRequired.bind(this),this.handleOnAutoComplete=r.handleOnAutoComplete.bind(this),this.handleOnTouchstartIOS=r.handleOnTouchstartIOS.bind(this),this.handleKeyDown=r.handleKeyDown.bind(this),this.processBinLookupResponse=this.processBinLookupResponse.bind(this),this.setFocusOn=this.setFocusOn.bind(this),this.updateStyles=this.updateStyles.bind(this),this.handleUnsupportedCard=this.handleUnsupportedCard.bind(this),this.showValidation=this.showValidation.bind(this),this.destroy=this.destroy.bind(this)}}y(F,"defaultProps",d);export{F as default};
 //# sourceMappingURL=SecuredFieldsProvider.js.map