@adyen/adyen-web 6.36.0 → 6.38.0

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 t,useRef as r,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/useForm.js";import d from"../../../../FormFields/Field/Field.js";import c from"../../../../FormFields/InputText.js";import{getErrorMessage as u}from"../../../../../../utils/getErrorMessage.js";const m=m=>{const{i18n:f}=i(),{configuration:{disableOtpAutoFocus:g}}=l(),[C,j]=t(null),{handleChangeFor:F,data:b,triggerValidation:h,valid:k,errors:v,isValid:x,setData:E}=p({schema:["otp"],rules:a}),P=r({validateInput:null}),I=r(null),[R,y]=t(!1),M=o(()=>{y(!0),h()},[h]);s(()=>{b.otp&&y(!0)},[b.otp]),s(()=>{!g&&I.current&&I.current.focus()},[I.current,g]),s(()=>{P.current.validateInput=M,m.onSetInputHandlers(P.current)},[M,m.onSetInputHandlers]);const V=o(()=>{E("otp",""),j(null),g||I.current.focus(),m.onResendCode()},[m.onResendCode,I.current,g]),_=o(e=>{const t=f.get(`ctp.errors.${e}`);t&&j(t)},[f]),w=o(e=>{"Enter"===e.key&&m.onPressEnter()},[m.onPressEnter]);s(()=>{m.onChange({data:b,valid:k,errors:v,isValid:x})},[b,k,v]);const L=o(()=>R?C||m.errorMessage||u(f,v.otp,f.get("ctp.otp.fieldLabel")):null,[R,C,m.errorMessage,v.otp,f]);return e("div",{className:"adyen-checkout-ctp__otp-field-wrapper"},e(d,{name:"oneTimePassword",label:f.get("ctp.otp.fieldLabel"),errorMessage:L(),classNameModifiers:["otp"]},e(c,{name:"otp",autocorrect:"off",spellcheck:!1,value:b.otp,disabled:m.disabled,onInput:F("otp","input"),onBlur:F("otp","blur"),onKeyPress:w,setRef:e=>{I.current=e}})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:m.isValidatingOtp,onError:_,onResendCode:V})))};export{m 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 d}from"../../../../../../utils/setFocus.js";import u from"../../../../FormFields/Field/Field.js";import c 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&&d(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(u,{name:"oneTimePassword",label:g.get("ctp.otp.fieldLabel"),errorMessage:N(),classNameModifiers:["otp"],errorLive:!0},e(c,{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}})),e("div",{className:"adyen-checkout-ctp__otp-resend-code-wrapper"},e(n,{disabled:f.isValidatingOtp,onError:w,onResendCode:_})))};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 useForm from '../../../../../../utils/useForm';\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 { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useForm<CtPOneTimePasswordInputDataState>({\n        schema: formSchema,\n        rules: otpValidationRules\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        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 className={'adyen-checkout-ctp__otp-field-wrapper'}>\n            <Field name=\"oneTimePassword\" label={i18n.get('ctp.otp.fieldLabel')} errorMessage={getOtpErrorMessage()} classNameModifiers={['otp']}>\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                />\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","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useForm","schema","rules","otpValidationRules","otpInputHandlersRef","useRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyPress","event","key","onPressEnter","onChange","getOtpErrorMessage","errorMessage","getErrorMessage","h","div","className","Field","name","label","classNameModifiers","InputText","autocorrect","spellcheck","value","disabled","onInput","onBlur","onKeyPress","setRef","ref","CtPResendOtpLink","isValidatingOtp","onError"],"mappings":"6pBAiCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,OACvDC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAA0C,CAC5HC,OAHe,CAAC,OAIhBC,MAAOC,IAELC,EAAsBC,EAAwC,CAAEC,cAAe,OAC/EC,EAAWF,EAAyB,OACnCG,EAAgBC,GAAsBjB,GAAkB,GAEzDc,EAAgBI,EAAY,KAC9BD,GAAmB,GACnBd,KACD,CAACA,IAKJgB,EAAU,KACFjB,EAAKkB,KAAKH,GAAmB,IAClC,CAACf,EAAKkB,MAETD,EAAU,MACDvB,GAAuBmB,EAASM,SACjCN,EAASM,QAAQC,SAEtB,CAACP,EAASM,QAASzB,IAEtBuB,EAAU,KACNP,EAAoBS,QAAQP,cAAgBA,EAC5CtB,EAAM+B,mBAAmBX,EAAoBS,UAC9C,CAACP,EAAetB,EAAM+B,qBAEzB,MAAMC,EAAoBN,EAAY,KAClCX,EAAQ,MAAO,IACfR,EAAkB,MACbH,GACDmB,EAASM,QAAQC,QAErB9B,EAAMiC,gBACP,CAACjC,EAAMiC,aAAcV,EAASM,QAASzB,IAEpC8B,EAAyBR,EAC1BS,IACG,MAAMC,EAAUnC,EAAKoC,IAAI,cAAcF,KACnCC,GAAS7B,EAAkB6B,IAEnC,CAACnC,IAGCqC,EAAmBZ,EACpBa,IACqB,UAAdA,EAAMC,KACDxC,EAAMyC,gBAGnB,CAACzC,EAAMyC,eAGXd,EAAU,KACN3B,EAAM0C,SAAS,CAAEhC,OAAME,QAAOC,SAAQC,aACvC,CAACJ,EAAME,EAAOC,IAEjB,MAAM8B,EAAqBjB,EAAY,IAC9BF,EAEElB,GAAkBN,EAAM4C,cAAgBC,EAAgB5C,EAAMY,EAAOe,IAAK3B,EAAKoC,IAAI,uBAF9D,KAG7B,CAACb,EAAgBlB,EAAgBN,EAAM4C,aAAc/B,EAAOe,IAAK3B,IAEpE,OACI6C,EAACC,MAAAA,CAAIC,UAAW,yCACZF,EAACG,EAAAA,CAAMC,KAAK,kBAAkBC,MAAOlD,EAAKoC,IAAI,sBAAuBO,aAAcD,IAAsBS,mBAAoB,CAAC,QAC1HN,EAACO,EAAAA,CACGH,KAAM,MACNI,YAAa,MACbC,YAAY,EACZC,MAAO9C,EAAKkB,IACZ6B,SAAUzD,EAAMyD,SAChBC,QAASjD,EAAgB,MAAO,SAChCkD,OAAQlD,EAAgB,MAAO,QAC/BmD,WAAYtB,EACZuB,OAASC,IACLvC,EAASM,QAAUiC,MAI/BhB,EAACC,MAAAA,CAAIC,UAAW,+CACZF,EAACiB,EAAAA,CAAiBN,SAAUzD,EAAMgE,gBAAiBC,QAAS/B,EAAwBD,aAAcD"}
+{"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                />\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","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,MAI/BF,EAACC,MAAAA,CAAIE,UAAW,+CACZH,EAACkB,EAAAA,CAAiBL,SAAU9D,EAAMoE,gBAAiBC,QAAS/B,EAAwBD,aAAcD"}

package/dist/es/components/internal/ClickToPay/services/sdks/VisaSdk.js

@@ -1,2 +1,2 @@
-import{getVisaSetttings as e,VISA_SDK_PROD as t,VISA_SDK_TEST as i}from"./config.js";import a from"./AbstractSrcInitiator.js";import n from"./SrciError.js";const s={email:"EMAIL",telephoneNumber:"MOBILE_NUMBER"};class r extends a{isSdkIsAvailableOnWindow(){return!!window.vAdapters?.VisaSRCI}assignSdkReference(){this.schemeSdk=new window.vAdapters.VisaSRCI}async init(t,i){try{const a={...t,...e(this.customSdkConfiguration),srciTransactionId:i};await this.schemeSdk.init(a)}catch(e){throw new n(e,"init",this.schemeName)}}async identityLookup({identityValue:e,type:t}){try{const i={identityValue:e,type:s[t]};return await this.schemeSdk.identityLookup(i)}catch(e){throw new n(e,"identityLookup",this.schemeName)}}async completeIdentityValidation(e){try{return await this.schemeSdk.completeIdentityValidation(e)}catch(e){throw new n(e,"completeIdentityValidation",this.schemeName)}}constructor(e,a,n){var s,r,o;super(e.toLowerCase().includes("live")?t:i,a,n),o="visa",(r="schemeName")in(s=this)?Object.defineProperty(s,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):s[r]=o}}export{r as default};
+import{getVisaSetttings as t,VISA_SDK_PROD as e,VISA_SDK_TEST as i}from"./config.js";import s from"./AbstractSrcInitiator.js";import n from"./SrciError.js";const a={email:"EMAIL",telephoneNumber:"MOBILE_NUMBER"};class r extends s{isSdkIsAvailableOnWindow(){return!!window.vAdapters?.VisaSRCI}assignSdkReference(){this.schemeSdk=new window.vAdapters.VisaSRCI}async init(e,i){try{const s={...e,...t(this.customSdkConfiguration),srciTransactionId:i};await this.schemeSdk.init(s);const n=document.getElementById("vcop-src-system-frame");n?.setAttribute("aria-hidden","true"),n?.setAttribute("tabindex","-1"),n?.setAttribute("inert","")}catch(t){throw new n(t,"init",this.schemeName)}}async identityLookup({identityValue:t,type:e}){try{const i={identityValue:t,type:a[e]};return await this.schemeSdk.identityLookup(i)}catch(t){throw new n(t,"identityLookup",this.schemeName)}}async completeIdentityValidation(t){try{return await this.schemeSdk.completeIdentityValidation(t)}catch(t){throw new n(t,"completeIdentityValidation",this.schemeName)}}constructor(t,s,n){var a,r,o;super(t.toLowerCase().includes("live")?e:i,s,n),o="visa",(r="schemeName")in(a=this)?Object.defineProperty(a,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):a[r]=o}}export{r as default};
 //# sourceMappingURL=VisaSdk.js.map

package/dist/es/components/internal/ClickToPay/services/sdks/VisaSdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisaSdk.js","sources":["../../../../../../../src/components/internal/ClickToPay/services/sdks/VisaSdk.ts"],"sourcesContent":["import { getVisaSetttings, VISA_SDK_PROD, VISA_SDK_TEST } from './config';\nimport AbstractSrcInitiator from './AbstractSrcInitiator';\nimport SrciError, { MastercardError, VisaError } from './SrciError';\nimport type {\n    CustomSdkConfiguration,\n    SrciCompleteIdentityValidationResponse,\n    SrcIdentityLookupParams,\n    SrciIdentityLookupResponse,\n    SrcInitParams\n} from './types';\nimport type { IAnalytics } from '../../../../../core/Analytics/Analytics';\n\nconst IdentityTypeMap = {\n    email: 'EMAIL',\n    telephoneNumber: 'MOBILE_NUMBER'\n};\n\nclass VisaSdk extends AbstractSrcInitiator {\n    public readonly schemeName = 'visa';\n\n    constructor(environment: string, customSdkConfig: CustomSdkConfiguration, analytics: IAnalytics) {\n        super(environment.toLowerCase().includes('live') ? VISA_SDK_PROD : VISA_SDK_TEST, customSdkConfig, analytics);\n    }\n\n    protected isSdkIsAvailableOnWindow(): boolean {\n        // @ts-ignore vAdapters is created by the VISA sdk\n        if (window.vAdapters?.VisaSRCI) return true;\n        return false;\n    }\n\n    protected assignSdkReference(): void {\n        // @ts-ignore vAdapters is created by the VISA sdk\n        this.schemeSdk = new window.vAdapters.VisaSRCI();\n    }\n\n    public async init(params: SrcInitParams, srciTransactionId: string): Promise<void> {\n        try {\n            const sdkProps = {\n                ...params,\n                ...getVisaSetttings(this.customSdkConfiguration),\n                srciTransactionId\n            };\n\n            await this.schemeSdk.init(sdkProps);\n        } catch (err) {\n            const srciError = new SrciError(err as VisaError | MastercardError, 'init', this.schemeName);\n            throw srciError;\n        }\n    }\n\n    public async identityLookup({ identityValue, type }: SrcIdentityLookupParams): Promise<SrciIdentityLookupResponse> {\n        try {\n            const consumerIdentity = {\n                identityValue,\n                type: IdentityTypeMap[type]\n            };\n\n            const response = await this.schemeSdk.identityLookup(consumerIdentity);\n            return response;\n        } catch (err) {\n            const srciError = new SrciError(err as VisaError | MastercardError, 'identityLookup', this.schemeName);\n            throw srciError;\n        }\n    }\n\n    public async completeIdentityValidation(otp: string): Promise<SrciCompleteIdentityValidationResponse> {\n        try {\n            const response = await this.schemeSdk.completeIdentityValidation(otp);\n            return response;\n        } catch (err: unknown) {\n            const srciError = new SrciError(err as VisaError | MastercardError, 'completeIdentityValidation', this.schemeName);\n            throw srciError;\n        }\n    }\n}\n\nexport default VisaSdk;\n"],"names":["IdentityTypeMap","email","telephoneNumber","VisaSdk","AbstractSrcInitiator","isSdkIsAvailableOnWindow","window","vAdapters","VisaSRCI","assignSdkReference","this","schemeSdk","init","params","srciTransactionId","sdkProps","getVisaSetttings","customSdkConfiguration","err","SrciError","schemeName","identityLookup","identityValue","type","consumerIdentity","completeIdentityValidation","otp","constructor","environment","customSdkConfig","analytics","super","toLowerCase","includes","VISA_SDK_PROD","VISA_SDK_TEST"],"mappings":"4JAYA,MAAMA,EAAkB,CACpBC,MAAO,QACPC,gBAAiB,iBAGrB,MAAMC,UAAgBC,EAORC,wBAAAA,GAEN,QAAIC,OAAOC,WAAWC,QAE1B,CAEUC,kBAAAA,GAENC,KAAKC,UAAY,IAAIL,OAAOC,UAAUC,QAC1C,CAEA,UAAaI,CAAKC,EAAuBC,GACrC,IACI,MAAMC,EAAW,IACVF,KACAG,EAAiBN,KAAKO,wBACzBH,2BAGEJ,KAAKC,UAAUC,KAAKG,EAC9B,CAAE,MAAOG,GAEL,MADkB,IAAIC,EAAUD,EAAoC,OAAQR,KAAKU,WAErF,CACJ,CAEA,oBAAaC,EAAeC,cAAEA,EAAaC,KAAEA,IACzC,IACI,MAAMC,EAAmB,CACrBF,gBACAC,KAAMvB,EAAgBuB,IAI1B,aADuBb,KAAKC,UAAUU,eAAeG,EAEzD,CAAE,MAAON,GAEL,MADkB,IAAIC,EAAUD,EAAoC,iBAAkBR,KAAKU,WAE/F,CACJ,CAEA,gCAAaK,CAA2BC,GACpC,IAEI,aADuBhB,KAAKC,UAAUc,2BAA2BC,EAErE,CAAE,MAAOR,GAEL,MADkB,IAAIC,EAAUD,EAAoC,6BAA8BR,KAAKU,WAE3G,CACJ,CArDA,WAAAO,CAAYC,EAAqBC,EAAyCC,aACtEC,MAAMH,EAAYI,cAAcC,SAAS,QAAUC,EAAgBC,EAAeN,EAAiBC,KAH1E,UAAbV,kBAAhBV,2FAIA"}
+{"version":3,"file":"VisaSdk.js","sources":["../../../../../../../src/components/internal/ClickToPay/services/sdks/VisaSdk.ts"],"sourcesContent":["import { getVisaSetttings, VISA_SDK_PROD, VISA_SDK_TEST } from './config';\nimport AbstractSrcInitiator from './AbstractSrcInitiator';\nimport SrciError, { MastercardError, VisaError } from './SrciError';\nimport type {\n    CustomSdkConfiguration,\n    SrciCompleteIdentityValidationResponse,\n    SrcIdentityLookupParams,\n    SrciIdentityLookupResponse,\n    SrcInitParams\n} from './types';\nimport type { IAnalytics } from '../../../../../core/Analytics/Analytics';\n\nconst IdentityTypeMap = {\n    email: 'EMAIL',\n    telephoneNumber: 'MOBILE_NUMBER'\n};\n\nclass VisaSdk extends AbstractSrcInitiator {\n    public readonly schemeName = 'visa';\n\n    constructor(environment: string, customSdkConfig: CustomSdkConfiguration, analytics: IAnalytics) {\n        super(environment.toLowerCase().includes('live') ? VISA_SDK_PROD : VISA_SDK_TEST, customSdkConfig, analytics);\n    }\n\n    protected isSdkIsAvailableOnWindow(): boolean {\n        // @ts-ignore vAdapters is created by the VISA sdk\n        if (window.vAdapters?.VisaSRCI) return true;\n        return false;\n    }\n\n    protected assignSdkReference(): void {\n        // @ts-ignore vAdapters is created by the VISA sdk\n        this.schemeSdk = new window.vAdapters.VisaSRCI();\n    }\n\n    public async init(params: SrcInitParams, srciTransactionId: string): Promise<void> {\n        try {\n            const sdkProps = {\n                ...params,\n                ...getVisaSetttings(this.customSdkConfiguration),\n                srciTransactionId\n            };\n\n            await this.schemeSdk.init(sdkProps);\n            const systemIframe = document.getElementById('vcop-src-system-frame');\n            systemIframe?.setAttribute('aria-hidden', 'true');\n            systemIframe?.setAttribute('tabindex', '-1');\n            systemIframe?.setAttribute('inert', '');\n        } catch (err) {\n            const srciError = new SrciError(err as VisaError | MastercardError, 'init', this.schemeName);\n            throw srciError;\n        }\n    }\n\n    public async identityLookup({ identityValue, type }: SrcIdentityLookupParams): Promise<SrciIdentityLookupResponse> {\n        try {\n            const consumerIdentity = {\n                identityValue,\n                type: IdentityTypeMap[type]\n            };\n\n            const response = await this.schemeSdk.identityLookup(consumerIdentity);\n            return response;\n        } catch (err) {\n            const srciError = new SrciError(err as VisaError | MastercardError, 'identityLookup', this.schemeName);\n            throw srciError;\n        }\n    }\n\n    public async completeIdentityValidation(otp: string): Promise<SrciCompleteIdentityValidationResponse> {\n        try {\n            const response = await this.schemeSdk.completeIdentityValidation(otp);\n            return response;\n        } catch (err: unknown) {\n            const srciError = new SrciError(err as VisaError | MastercardError, 'completeIdentityValidation', this.schemeName);\n            throw srciError;\n        }\n    }\n}\n\nexport default VisaSdk;\n"],"names":["IdentityTypeMap","email","telephoneNumber","VisaSdk","AbstractSrcInitiator","isSdkIsAvailableOnWindow","window","vAdapters","VisaSRCI","assignSdkReference","this","schemeSdk","init","params","srciTransactionId","sdkProps","getVisaSetttings","customSdkConfiguration","systemIframe","document","getElementById","setAttribute","err","SrciError","schemeName","identityLookup","identityValue","type","consumerIdentity","completeIdentityValidation","otp","constructor","environment","customSdkConfig","analytics","super","toLowerCase","includes","VISA_SDK_PROD","VISA_SDK_TEST"],"mappings":"4JAYA,MAAMA,EAAkB,CACpBC,MAAO,QACPC,gBAAiB,iBAGrB,MAAMC,UAAgBC,EAORC,wBAAAA,GAEN,QAAIC,OAAOC,WAAWC,QAE1B,CAEUC,kBAAAA,GAENC,KAAKC,UAAY,IAAIL,OAAOC,UAAUC,QAC1C,CAEA,UAAaI,CAAKC,EAAuBC,GACrC,IACI,MAAMC,EAAW,IACVF,KACAG,EAAiBN,KAAKO,wBACzBH,2BAGEJ,KAAKC,UAAUC,KAAKG,GAC1B,MAAMG,EAAeC,SAASC,eAAe,yBAC7CF,GAAcG,aAAa,cAAe,QAC1CH,GAAcG,aAAa,WAAY,MACvCH,GAAcG,aAAa,QAAS,GACxC,CAAE,MAAOC,GAEL,MADkB,IAAIC,EAAUD,EAAoC,OAAQZ,KAAKc,WAErF,CACJ,CAEA,oBAAaC,EAAeC,cAAEA,EAAaC,KAAEA,IACzC,IACI,MAAMC,EAAmB,CACrBF,gBACAC,KAAM3B,EAAgB2B,IAI1B,aADuBjB,KAAKC,UAAUc,eAAeG,EAEzD,CAAE,MAAON,GAEL,MADkB,IAAIC,EAAUD,EAAoC,iBAAkBZ,KAAKc,WAE/F,CACJ,CAEA,gCAAaK,CAA2BC,GACpC,IAEI,aADuBpB,KAAKC,UAAUkB,2BAA2BC,EAErE,CAAE,MAAOR,GAEL,MADkB,IAAIC,EAAUD,EAAoC,6BAA8BZ,KAAKc,WAE3G,CACJ,CAzDA,WAAAO,CAAYC,EAAqBC,EAAyCC,aACtEC,MAAMH,EAAYI,cAAcC,SAAS,QAAUC,EAAgBC,EAAeN,EAAiBC,KAH1E,UAAbV,kBAAhBd,2FAIA"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as r,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import t from"../FormFields/Fieldset/Fieldset.js";import i from"../FormFields/Field/Field.js";import s from"./ReadOnlyCompanyDetails.js";import{companyDetailsValidationRules as o}from"./validate.js";import{useCoreContext as n}from"../../../core/Context/CoreProvider.js";import{getFormattedData as l}from"./utils.js";import m from"../../../utils/useForm/useForm.js";import d from"../FormFields/InputText.js";const u=["name","registrationNumber"];function p(u){const{label:p="",namePrefix:c,requiredFields:f,visibility:g}=u,{i18n:b}=n(),{handleChangeFor:F,triggerValidation:N,data:h,valid:j,errors:v,isValid:y}=m({schema:f,rules:{...o,...u.validationRules},defaultData:u.data}),C=r({});Object.keys(C.current).length||u.setComponentRef?.(C.current),C.current.showValidation=()=>{N()};const M=e=>`${c?`${c}.`:""}${e}`,x=e=>r=>{const{name:a}=r.target,t=a.split(`${c}.`).pop();F(t,e)(r)},k=e=>r=>{const{name:a}=r.target,t=a.split(`${c}.`).pop();F(t,e)(r)};return a(()=>{const e=l(h);u.onChange({data:e,valid:j,errors:v,isValid:y})},[h,j,v,y]),"hidden"===g?null:"readOnly"===g?e(s,{...u,data:h}):e(t,{classNameModifiers:[p],label:p},f.includes("name")&&e(i,{label:b.get("companyDetails.name"),classNameModifiers:["name"],errorMessage:!!v.name,i18n:b,name:M("companyName")},e(d,{name:M("name"),value:h.name,classNameModifiers:["name"],onInput:k("input"),onBlur:x("blur"),spellcheck:!1})),f.includes("registrationNumber")&&e(i,{label:b.get("companyDetails.registrationNumber"),classNameModifiers:["registrationNumber"],errorMessage:!!v.registrationNumber,i18n:b,name:M("registrationNumber")},e(d,{name:M("registrationNumber"),value:h.registrationNumber,classNameModifiers:["registrationNumber"],onInput:k("input"),onBlur:x("blur"),spellcheck:!1})))}p.defaultProps={data:{},onChange:()=>{},visibility:"editable",requiredFields:u,validationRules:o};export{u as COMPANY_DETAILS_SCHEMA,p as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useRef as r,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import i from"../FormFields/Fieldset/Fieldset.js";import t from"../FormFields/Field/Field.js";import s from"./ReadOnlyCompanyDetails.js";import{companyDetailsValidationRules as o}from"./validate.js";import{useCoreContext as n}from"../../../core/Context/CoreProvider.js";import{getFormattedData as l}from"./utils.js";import m from"../../../utils/useForm/useForm.js";import"../SecuredFields/lib/CSF/utils/userAgent.js";import d from"../FormFields/InputText.js";const u=["name","registrationNumber"];function p(u){const{label:p="",namePrefix:c,requiredFields:f,visibility:g}=u,{i18n:b}=n(),{handleChangeFor:F,triggerValidation:N,data:h,valid:j,errors:v,isValid:y}=m({schema:f,rules:{...o,...u.validationRules},defaultData:u.data}),C=r({});Object.keys(C.current).length||u.setComponentRef?.(C.current),C.current.showValidation=()=>{N()};const M=e=>`${c?`${c}.`:""}${e}`,x=e=>r=>{const{name:a}=r.target,i=a.split(`${c}.`).pop();F(i,e)(r)},k=e=>r=>{const{name:a}=r.target,i=a.split(`${c}.`).pop();F(i,e)(r)};return a(()=>{const e=l(h);u.onChange({data:e,valid:j,errors:v,isValid:y})},[h,j,v,y]),"hidden"===g?null:"readOnly"===g?e(s,{...u,data:h}):e(i,{classNameModifiers:[p],label:p},f.includes("name")&&e(t,{label:b.get("companyDetails.name"),classNameModifiers:["name"],errorMessage:!!v.name,i18n:b,name:M("companyName")},e(d,{name:M("name"),value:h.name,classNameModifiers:["name"],onInput:k("input"),onBlur:x("blur"),spellcheck:!1})),f.includes("registrationNumber")&&e(t,{label:b.get("companyDetails.registrationNumber"),classNameModifiers:["registrationNumber"],errorMessage:!!v.registrationNumber,i18n:b,name:M("registrationNumber")},e(d,{name:M("registrationNumber"),value:h.registrationNumber,classNameModifiers:["registrationNumber"],onInput:k("input"),onBlur:x("blur"),spellcheck:!1})))}p.defaultProps={data:{},onChange:()=>{},visibility:"editable",requiredFields:u,validationRules:o};export{u as COMPANY_DETAILS_SCHEMA,p as default};
 //# sourceMappingURL=CompanyDetails.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompanyDetails.js","sources":["../../../../../src/components/internal/CompanyDetails/CompanyDetails.tsx"],"sourcesContent":["import { h, FocusEventHandler, InputEventHandler } from 'preact';\nimport { useEffect, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyCompanyDetails from './ReadOnlyCompanyDetails';\nimport { companyDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { getFormattedData } from './utils';\nimport { CompanyDetailsSchema, CompanyDetailsProps } from './types';\nimport useForm from '../../../utils/useForm';\nimport InputText from '../FormFields/InputText';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\n\nexport const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber'];\n\nexport default function CompanyDetails(props: Readonly<CompanyDetailsProps>) {\n    const { label = '', namePrefix, requiredFields, visibility } = props;\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<CompanyDetailsSchema>({\n        schema: requiredFields,\n        rules: { ...companyDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const companyDetailsRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(companyDetailsRef.current).length) {\n        props.setComponentRef?.(companyDetailsRef.current);\n    }\n\n    // Expose method expected by (parent) Address.tsx\n    companyDetailsRef.current.showValidation = () => {\n        triggerValidation();\n    };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    const eventHandler =\n        (mode: HandleChangeForModeType): FocusEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const inputEventHandler =\n        (mode: HandleChangeForModeType): InputEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyCompanyDetails {...props} data={data} />;\n\n    return (\n        <Fieldset classNameModifiers={[label]} label={label}>\n            {requiredFields.includes('name') && (\n                <Field\n                    label={i18n.get('companyDetails.name')}\n                    classNameModifiers={['name']}\n                    errorMessage={!!errors.name}\n                    i18n={i18n}\n                    name={generateFieldName('companyName')}\n                >\n                    <InputText\n                        name={generateFieldName('name')}\n                        value={data.name}\n                        classNameModifiers={['name']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellcheck={false}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('registrationNumber') && (\n                <Field\n                    label={i18n.get('companyDetails.registrationNumber')}\n                    classNameModifiers={['registrationNumber']}\n                    errorMessage={!!errors.registrationNumber}\n                    i18n={i18n}\n                    name={generateFieldName('registrationNumber')}\n                >\n                    <InputText\n                        name={generateFieldName('registrationNumber')}\n                        value={data.registrationNumber}\n                        classNameModifiers={['registrationNumber']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellcheck={false}\n                    />\n                </Field>\n            )}\n        </Fieldset>\n    );\n}\n\nCompanyDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: COMPANY_DETAILS_SCHEMA,\n    validationRules: companyDetailsValidationRules\n};\n"],"names":["COMPANY_DETAILS_SCHEMA","CompanyDetails","props","label","namePrefix","requiredFields","visibility","i18n","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","companyDetailsValidationRules","validationRules","defaultData","companyDetailsRef","useRef","Object","keys","current","length","setComponentRef","showValidation","generateFieldName","name","eventHandler","mode","e","target","key","split","pop","inputEventHandler","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyCompanyDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","InputText","value","onInput","onBlur","spellcheck","registrationNumber","defaultProps"],"mappings":"0jBAcaA,EAAyB,CAAC,OAAQ,sBAEhC,SAASC,EAAeC,GACnC,MAAMC,MAAEA,EAAQ,GAAEC,WAAEA,EAAUC,eAAEA,EAAcC,WAAEA,GAAeJ,GACzDK,KAAEA,GAASC,KACXC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA8B,CACvGC,OAAQX,EACRY,MAAO,IAAKC,KAAkChB,EAAMiB,iBACpDC,YAAalB,EAAMS,OAIjBU,EAAoBC,EAA4B,IAEjDC,OAAOC,KAAKH,EAAkBI,SAASC,QACxCxB,EAAMyB,kBAAkBN,EAAkBI,SAI9CJ,EAAkBI,QAAQG,eAAiB,KACvClB,KAGJ,MAAMmB,EAAqBC,GAAyB,GAAG1B,EAAa,GAAGA,KAAgB,KAAK0B,IAEtFC,EACDC,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,IAG7BK,EACDN,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,IAQnC,OALAM,EAAU,KACN,MAAMC,EAAgBC,EAAiB9B,GACvCT,EAAMwC,SAAS,CAAE/B,KAAM6B,EAAe5B,QAAOC,SAAQC,aACtD,CAACH,EAAMC,EAAOC,EAAQC,IAEN,WAAfR,EAAgC,KACjB,aAAfA,EAAkCqC,EAACC,EAAAA,IAA2B1C,EAAOS,KAAMA,IAG3EgC,EAACE,EAAAA,CAASC,mBAAoB,CAAC3C,GAAQA,MAAOA,GACzCE,EAAe0C,SAAS,SACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,uBAChBH,mBAAoB,CAAC,QACrBI,eAAgBrC,EAAOiB,KACvBvB,KAAMA,EACNuB,KAAMD,EAAkB,gBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,QACxBuB,MAAOzC,EAAKmB,KACZgB,mBAAoB,CAAC,QACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAKvBlD,EAAe0C,SAAS,uBACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,qCAChBH,mBAAoB,CAAC,sBACrBI,eAAgBrC,EAAO2C,mBACvBjD,KAAMA,EACNuB,KAAMD,EAAkB,uBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,sBACxBuB,MAAOzC,EAAK6C,mBACZV,mBAAoB,CAAC,sBACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAMpC,CAEAtD,EAAewD,aAAe,CAC1B9C,KAAM,CAAA,EACN+B,SAAU,OACVpC,WAAY,WACZD,eAAgBL,EAChBmB,gBAAiBD"}
+{"version":3,"file":"CompanyDetails.js","sources":["../../../../../src/components/internal/CompanyDetails/CompanyDetails.tsx"],"sourcesContent":["import { h, FocusEventHandler, InputEventHandler } from 'preact';\nimport { useEffect, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyCompanyDetails from './ReadOnlyCompanyDetails';\nimport { companyDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { getFormattedData } from './utils';\nimport { CompanyDetailsSchema, CompanyDetailsProps } from './types';\nimport useForm from '../../../utils/useForm';\nimport InputText from '../FormFields/InputText';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\n\nexport const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber'];\n\nexport default function CompanyDetails(props: Readonly<CompanyDetailsProps>) {\n    const { label = '', namePrefix, requiredFields, visibility } = props;\n    const { i18n } = useCoreContext();\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<CompanyDetailsSchema>({\n        schema: requiredFields,\n        rules: { ...companyDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const companyDetailsRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(companyDetailsRef.current).length) {\n        props.setComponentRef?.(companyDetailsRef.current);\n    }\n\n    // Expose method expected by (parent) Address.tsx\n    companyDetailsRef.current.showValidation = () => {\n        triggerValidation();\n    };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    const eventHandler =\n        (mode: HandleChangeForModeType): FocusEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const inputEventHandler =\n        (mode: HandleChangeForModeType): InputEventHandler<HTMLInputElement> =>\n        (e): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyCompanyDetails {...props} data={data} />;\n\n    return (\n        <Fieldset classNameModifiers={[label]} label={label}>\n            {requiredFields.includes('name') && (\n                <Field\n                    label={i18n.get('companyDetails.name')}\n                    classNameModifiers={['name']}\n                    errorMessage={!!errors.name}\n                    i18n={i18n}\n                    name={generateFieldName('companyName')}\n                >\n                    <InputText\n                        name={generateFieldName('name')}\n                        value={data.name}\n                        classNameModifiers={['name']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellcheck={false}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('registrationNumber') && (\n                <Field\n                    label={i18n.get('companyDetails.registrationNumber')}\n                    classNameModifiers={['registrationNumber']}\n                    errorMessage={!!errors.registrationNumber}\n                    i18n={i18n}\n                    name={generateFieldName('registrationNumber')}\n                >\n                    <InputText\n                        name={generateFieldName('registrationNumber')}\n                        value={data.registrationNumber}\n                        classNameModifiers={['registrationNumber']}\n                        onInput={inputEventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        spellcheck={false}\n                    />\n                </Field>\n            )}\n        </Fieldset>\n    );\n}\n\nCompanyDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: COMPANY_DETAILS_SCHEMA,\n    validationRules: companyDetailsValidationRules\n};\n"],"names":["COMPANY_DETAILS_SCHEMA","CompanyDetails","props","label","namePrefix","requiredFields","visibility","i18n","useCoreContext","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","companyDetailsValidationRules","validationRules","defaultData","companyDetailsRef","useRef","Object","keys","current","length","setComponentRef","showValidation","generateFieldName","name","eventHandler","mode","e","target","key","split","pop","inputEventHandler","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyCompanyDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","InputText","value","onInput","onBlur","spellcheck","registrationNumber","defaultProps"],"mappings":"8mBAcaA,EAAyB,CAAC,OAAQ,sBAEhC,SAASC,EAAeC,GACnC,MAAMC,MAAEA,EAAQ,GAAEC,WAAEA,EAAUC,eAAEA,EAAcC,WAAEA,GAAeJ,GACzDK,KAAEA,GAASC,KACXC,gBAAEA,EAAeC,kBAAEA,EAAiBC,KAAEA,EAAIC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,GAAYC,EAA8B,CACvGC,OAAQX,EACRY,MAAO,IAAKC,KAAkChB,EAAMiB,iBACpDC,YAAalB,EAAMS,OAIjBU,EAAoBC,EAA4B,IAEjDC,OAAOC,KAAKH,EAAkBI,SAASC,QACxCxB,EAAMyB,kBAAkBN,EAAkBI,SAI9CJ,EAAkBI,QAAQG,eAAiB,KACvClB,KAGJ,MAAMmB,EAAqBC,GAAyB,GAAG1B,EAAa,GAAGA,KAAgB,KAAK0B,IAEtFC,EACDC,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,IAG7BK,EACDN,GACAC,IACG,MAAMH,KAAEA,GAASG,EAAEC,OACbC,EAAML,EAAKM,MAAM,GAAGhC,MAAeiC,MAEzC5B,EAAgB0B,EAAKH,EAArBvB,CAA2BwB,IAQnC,OALAM,EAAU,KACN,MAAMC,EAAgBC,EAAiB9B,GACvCT,EAAMwC,SAAS,CAAE/B,KAAM6B,EAAe5B,QAAOC,SAAQC,aACtD,CAACH,EAAMC,EAAOC,EAAQC,IAEN,WAAfR,EAAgC,KACjB,aAAfA,EAAkCqC,EAACC,EAAAA,IAA2B1C,EAAOS,KAAMA,IAG3EgC,EAACE,EAAAA,CAASC,mBAAoB,CAAC3C,GAAQA,MAAOA,GACzCE,EAAe0C,SAAS,SACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,uBAChBH,mBAAoB,CAAC,QACrBI,eAAgBrC,EAAOiB,KACvBvB,KAAMA,EACNuB,KAAMD,EAAkB,gBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,QACxBuB,MAAOzC,EAAKmB,KACZgB,mBAAoB,CAAC,QACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAKvBlD,EAAe0C,SAAS,uBACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,qCAChBH,mBAAoB,CAAC,sBACrBI,eAAgBrC,EAAO2C,mBACvBjD,KAAMA,EACNuB,KAAMD,EAAkB,uBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,sBACxBuB,MAAOzC,EAAK6C,mBACZV,mBAAoB,CAAC,sBACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,KAMpC,CAEAtD,EAAewD,aAAe,CAC1B9C,KAAM,CAAA,EACN+B,SAAU,OACVpC,WAAY,WACZD,eAAgBL,EAChBmB,gBAAiBD"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useMemo, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\nimport uuid from '../../../../utils/uuid';\n\nconst Field: FunctionalComponent<Readonly<FieldProps>> = props => {\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        staticValue,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel,\n        onInputContainerClick\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText && contextualText.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const staticValueId = useMemo(() => (staticValue ? `input-static-value-${uuid()}` : null), [staticValue]);\n\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                        data-testid={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                {/* The <div> element has a child <input> element that allows keyboard interaction */}\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                    onClick={onInputContainerClick}\n                >\n                    {staticValue && (\n                        <span id={staticValueId} className=\"adyen-checkout__field-static-value\">\n                            {staticValue}\n                        </span>\n                    )}\n\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const propsFromFieldComponent = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            'aria-owns': staticValueId,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n\n                        return cloneElement(child as VNode, propsFromFieldComponent);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark_black`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    /**\n     * Use cases:\n     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element\n     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)\n     */\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId, id: `${uniqueId}-label` })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            data-testid=\"form-field\"\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers?.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","staticValue","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","onInputContainerClick","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","staticValueId","useMemo","uuid","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","data-testid","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","undefined","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","onClick","toChildArray","child","propsFromFieldComponent","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","htmlFor","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useMemo, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\nimport uuid from '../../../../utils/uuid';\n\nconst Field: FunctionalComponent<Readonly<FieldProps>> = props => {\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        staticValue,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel,\n        onInputContainerClick,\n        errorLive\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText && contextualText.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const staticValueId = useMemo(() => (staticValue ? `input-static-value-${uuid()}` : null), [staticValue]);\n\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                        data-testid={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n                {...(contextVisibleToSR && errorLive && { 'aria-live': 'polite' })}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                {/* The <div> element has a child <input> element that allows keyboard interaction */}\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                    onClick={onInputContainerClick}\n                >\n                    {staticValue && (\n                        <span id={staticValueId} className=\"adyen-checkout__field-static-value\">\n                            {staticValue}\n                        </span>\n                    )}\n\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const propsFromFieldComponent = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            'aria-owns': staticValueId,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n\n                        return cloneElement(child as VNode, propsFromFieldComponent);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark_black`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    /**\n     * Use cases:\n     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element\n     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)\n     */\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId, id: `${uniqueId}-label` })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            data-testid=\"form-field\"\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers?.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","staticValue","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","onInputContainerClick","errorLive","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","staticValueId","useMemo","uuid","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","data-testid","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","undefined","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","onClick","toChildArray","child","propsFromFieldComponent","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","htmlFor","defaultProps"],"mappings":"omBAYA,MAAMA,EAAmDC,IACrD,MAAMC,SACFA,EAAQC,UACRA,EAASC,mBACTA,EAAkBC,IAClBA,EAAGC,SACHA,EAAQC,SACRA,EAAQC,aACRA,EAAYC,OACZA,EAAMC,sBACNA,EAAqBC,UACrBA,EAASC,QACTA,EAAOC,MACPA,EAAKC,kBACLA,EAAiBC,KACjBA,EAAIC,OACJA,EAAMC,YACNA,EAAWC,QACXA,EAAOC,aAGPA,EAAYC,cACZA,EAAaC,gBACbA,EAAeC,iBACfA,EAAgBC,sBAChBA,EAAqBC,YACrBA,EAAWC,eACXA,EAEAC,OAAQC,EACRC,QAASC,EAAYC,KACrBA,EAAIC,6BACJA,EAA4BC,yBAC5BA,EAAwBC,sBACxBA,EAAqBC,UACrBA,GACAjC,EAIEkC,EAAqBJ,IAAgC,EACrDK,EAAYd,GAA4C,iBAAjBd,GAA6BA,EAAa6B,OAAS,EAC1FC,EAAcf,IAA0Ba,GAAaX,GAAkBA,EAAeY,OAAS,EAE/FE,EAAWC,EAAOC,EAAY,kBAAkB1B,MAChD2B,EAAgBC,EAAQ,IAAOnB,EAAc,sBAAsBoB,MAAW,KAAO,CAACpB,KAErFI,EAASiB,IAAcC,GAAS,IAChCpB,GAAQqB,IAAaD,GAAS,GAGjB,MAAhBjB,GAAsBgB,KAAahB,GACpB,MAAfF,GAAqBoB,KAAYpB,GAGrC,MAAMqB,GAAiBC,EAClBC,IACGL,IAAW,GACX3B,IAAUgC,IAEd,CAAChC,IAGCiC,GAAgBF,EACjBC,IACGL,IAAW,GACX7B,IAASkC,GAETjC,IAAciC,IAElB,CAAClC,EAAQC,IAGPmC,GAAmCH,EAAY,IAE7CI,EAACC,EAAAA,KACqB,iBAAVzC,GACJwC,EAACE,OAAAA,CACGpD,UAAWqD,EAAW,CAClB,+BAA+B,EAC/B,qCAAsChD,IAE1CiD,UAAS1C,EACT2C,cAAa3C,GAEZF,GAMS,mBAAVA,GAAwBA,IAE/BC,GAAqBuC,EAACE,OAAAA,CAAKpD,UAAU,wCAAwCW,GAE7EL,GAAU4C,EAACE,OAAAA,CAAKpD,UAAW,+BAAgCM,IAGrE,CAACI,EAAOL,EAAcM,EAAmBL,IAEtCkD,GAA6BV,EAAY,KAC3C,MAAMW,EACFP,EAACE,OAAAA,CACGpD,UAAWqD,EAAW,CAAE,yCAAyC,EAAM,0CAA2CpB,OAC7GD,GAAsB,CAAE0B,GAAI,GAAGtB,EAASuB,UAAUC,KACvDC,cAAa7B,OAAqB8B,EAAY,UACzC9B,GAAsBD,GAAa,CAAE,YAAa,WAEtD1B,GAGH0D,EACFb,EAACE,OAAAA,CACGpD,UAAWqD,EAAW,CAAE,kCAAkC,EAAM,0CAA2ClB,OACtGH,GAAsB,CAAE0B,GAAI,GAAGtB,EAASuB,UAAUK,KACvDH,cAAa7B,OAAqB8B,EAAY,QAE7CxC,GAIT,OACI4B,EAACC,OAGGD,EAACe,MAAAA,CACGjE,UAAWqD,EAAW,CAClB,mCACG9C,EAAsB2D,IAAIC,GAAK,kCAAkCA,OAExEjE,IAAKA,EACLkE,QAAStC,GAERT,GACG6B,EAACE,OAAAA,CAAKM,GAAInB,EAAevC,UAAU,sCAC9BqB,GAIRgD,EAAatE,GAAUmE,IAAKI,IACzB,MAAMC,EAA0B,CAC5B9D,UACAoC,kBACAG,iBACAwB,YAAanE,EACb,YAAakC,KACT3B,GAAQ,CAAEwB,SAAUA,EAASuB,SACjCxC,iBAAkBA,GAGtB,OAAOsD,EAAaH,EAAgBC,KAGvC/D,GACG0C,EAACE,OAAAA,CAAKpD,UAAU,4FACZkD,EAACwB,EAAAA,CAAQC,KAAK,WAIrBlE,IAA6B,IAAlBQ,GACRiC,EAACE,OAAAA,CAAKpD,UAAU,0FACZkD,EAAC0B,EAAAA,CAAKC,KAAM,GAAGC,mBAAyBC,IAAKpD,GAAMqD,IAAI,kBAI9D3E,GACG6C,EAACE,OAAAA,CAAKpD,UAAU,4FACZkD,EAAC0B,EAAAA,CAAKC,KAAM,GAAGC,eAAqBC,IAAKpD,GAAMqD,IAAI,mBAI9DvB,EACAM,IAGV,CAAChE,EAAUM,EAAciB,EAAgBd,EAAWC,EAASoC,GAAgBG,KAO1EiC,GAAqBnC,EACvB,EAAG9B,eAAcS,UAASF,SAAQpB,WAAUS,OAAMwB,WAAUlB,kBAAiBgE,iBAAgBnF,WAAU8B,+BACnG,MAAMsD,EAAsB,CACxBf,QAASpD,EACThB,UAAWqD,EAAW,CAClB,yBAAyB,EACzB,iCAAkC5B,EAClC,gCAAiCF,EACjC,kCAAmCpB,KAI3C,OAAOe,EAEHgC,EAACxC,QAAAA,IAAUyE,MAA2BD,GAAkBtE,GAAQ,CAAEwE,QAAShD,EAAUsB,GAAI,GAAGtB,YACvFrC,GAGL8B,EAAyBsD,EAAqBpF,EAAUqC,IAahE,IAMJ,OACIc,EAACe,MAAAA,CACGV,cAAY,aACZvD,UAAWqD,EACP,wBACArD,EACAC,GAAoBiE,IAAIC,GAAK,0BAA0BA,KACvD,CACI,+BAAgC9D,EAChC,+BAAgCI,EAChC,kCAAmCL,GAAYD,KAIvD+C,EAAC+B,GAAAA,CACGjE,aAAcA,EACdJ,KAAMA,EACNT,SAAUA,EACVoB,OAAQA,GACRE,QAASA,EACTP,gBAAiBA,EACjBkB,SAAUA,EAASuB,QACnBuB,gBAAiBlD,EACjBH,yBAA0BA,GAEzBoB,MAEJO,OAKb3D,EAAMwF,aAAe,CACjBrF,UAAW,GACXC,mBAAoB,GACpBM,sBAAuB,GACvBW,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,EACvBS,yBAA0B,IAAM"}

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 o from"../../../../../_virtual/index.js";import a from"../../../Img/Img.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";function d({filterable:t,toggleButtonRef:o,showList:a,selectListId:n,...d}){if(t){const{id:t,...a}=d;return e("div",{...a,ref:o})}return e("button",{id:d.id,"aria-haspopup":"listbox","aria-expanded":a,"aria-controls":n,"aria-disabled":d.readonly,"aria-describedby":d.ariaDescribedBy,"aria-labelledby":d.id?`${d.id}-label ${d.id}-value`:void 0,type:"button",...d,ref:o})}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,f=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,m=r.id?`listItem-${r.id}`:"";return e(d,{className:o({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":u,"adyen-checkout__dropdown__button--invalid":i.isInvalid,"adyen-checkout__dropdown__button--valid":i.isValid,"adyen-checkout__dropdown__button--disabled":l.disabled}),disabled:i.disabled,filterable:i.filterable,onClick:f,onKeyDown:s?null:i.onButtonKeyDown,toggleButtonRef:i.toggleButtonRef,id:i.id,showList:u,selectListId:i.selectListId},i.filterable?e(t,null,!u&&l.icon&&e(a,{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:"adyen-checkout__filter-input",onInput:i.onInput,ref:i.filterInputRef,role:"combobox","aria-activedescendant":m,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(a,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("span",{id:i.id?`${i.id}-value`:void 0,className:o("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 o from"../../../../../_virtual/index.js";import a from"../../../Img/Img.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";function d({filterable:t,toggleButtonRef:o,showList:a,selectListId:n,...d}){if(t){const{id:t,...a}=d;return e("div",{...a,ref:o})}return e("button",{id:d.id,"aria-haspopup":"listbox","aria-expanded":a,"aria-controls":n,"aria-disabled":d.readonly,"aria-describedby":d.ariaDescribedBy,"aria-labelledby":d.id?`${d.id}-label ${d.id}-value`:void 0,type:"button",...d,ref:o})}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,f=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,m=r.id?`listItem-${r.id}`:"";return e(d,{className:o({"adyen-checkout__dropdown__button":!0,"adyen-checkout__dropdown__button--readonly":s,"adyen-checkout__dropdown__button--active":u,"adyen-checkout__dropdown__button--invalid":i.isInvalid,"adyen-checkout__dropdown__button--valid":i.isValid,"adyen-checkout__dropdown__button--disabled":l.disabled}),disabled:i.disabled,filterable:i.filterable,onClick:f,onKeyDown:s?null:i.onButtonKeyDown,toggleButtonRef:i.toggleButtonRef,id:i.id,showList:u,selectListId:i.selectListId},i.filterable?e(t,null,!u&&l.icon&&e(a,{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:o("adyen-checkout__filter-input",{"adyen-checkout__filter-input--placeholder":!u&&p}),onInput:i.onInput,ref:i.filterInputRef,role:"combobox","aria-activedescendant":m,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(a,{className:"adyen-checkout__dropdown__button__icon",src:l.icon,alt:l.name}),e("span",{id:i.id?`${i.id}-value`:void 0,className:o("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            id={props.id}\n            aria-haspopup=\"listbox\"\n            aria-expanded={showList}\n            aria-controls={selectListId}\n            aria-disabled={props.readonly}\n            aria-describedby={props.ariaDescribedBy}\n            aria-labelledby={props.id ? `${props.id}-label ${props.id}-value` : undefined}\n            type={'button'}\n            {...props}\n            ref={toggleButtonRef}\n        />\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    const displayInputText = showList ? inputText : displayText;\n\n    const setFocus = (e: Event) => {\n        e.preventDefault();\n        if (document.activeElement === props.filterInputRef.current) {\n            if (!props.showList) {\n                props.toggleList(e);\n            }\n        } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n    };\n\n    // 1. If readonly we ignore the click action\n    // 2. If filterable we want to show the list and focus on the input\n    // 3. Otherwise we just toggle the list\n    const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n    // 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        >\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=\"adyen-checkout__filter-input\"\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","aria-haspopup","aria-expanded","aria-controls","aria-disabled","readonly","aria-describedby","ariaDescribedBy","aria-labelledby","undefined","type","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span","classnames"],"mappings":"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"}
+{"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            id={props.id}\n            aria-haspopup=\"listbox\"\n            aria-expanded={showList}\n            aria-controls={selectListId}\n            aria-disabled={props.readonly}\n            aria-describedby={props.ariaDescribedBy}\n            aria-labelledby={props.id ? `${props.id}-label ${props.id}-value` : undefined}\n            type={'button'}\n            {...props}\n            ref={toggleButtonRef}\n        />\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        >\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","aria-haspopup","aria-expanded","aria-controls","aria-disabled","readonly","aria-describedby","ariaDescribedBy","aria-labelledby","undefined","type","SelectButton","active","selected","inputText","required","isShowingPlaceholder","useMemo","displayText","selectedOptionName","name","trim","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-owns","autoComplete","classnames","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"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"}

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useMemo as r,useRef as a,useEffect as t}from"../../../external/preact/hooks/dist/hooks.js";import s from"../FormFields/Fieldset/Fieldset.js";import l from"../FormFields/Field/Field.js";import i from"./ReadOnlyPersonalDetails.js";import{personalDetailsValidationRules as o}from"./validate.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import{checkDateInputSupport as n}from"../FormFields/InputDate/utils.js";import{getFormattedData as d}from"./utils.js";import p from"../../../utils/useForm/useForm.js";import u from"../FormFields/InputText.js";import f from"../FormFields/InputDate/InputDate.js";import h from"../FormFields/InputEmail.js";import c from"../FormFields/InputTelephone.js";import{getErrorMessage as N}from"../../../utils/getErrorMessage.js";const b=["firstName","lastName","dateOfBirth","shopperEmail","telephoneNumber"];function g(b){const{label:g="",namePrefix:F,placeholders:M,requiredFields:B,visibility:j}=b,{i18n:E}=m(),O=r(n,[]),{handleChangeFor:v,triggerValidation:I,data:q,valid:C,errors:x,isValid:D}=p({schema:B,rules:{...o,...b.validationRules},defaultData:b.data}),R=a({showValidation:()=>{I()}});t(()=>{b.setComponentRef(R.current)},[b.setComponentRef]);const k=e=>r=>{const{name:a}=r.target,t=a.split(`${F}.`).pop();v(t,e)(r)},y=e=>`${F?`${F}.`:""}${e}`;return t(()=>{const e=d(q);b.onChange({data:e,valid:C,errors:x,isValid:D})},[q,C,x,D]),"hidden"===j?null:"readOnly"===j?e(i,{...b,data:q}):e(s,{classNameModifiers:["personalDetails"],label:g},B.includes("firstName")&&e(l,{label:E.get("firstName"),classNameModifiers:["col-50","firstName"],errorMessage:N(E,x.firstName,E.get("firstName")),name:"firstName",i18n:E},e(u,{name:y("firstName"),value:q.firstName,classNameModifiers:["firstName"],onInput:k("input"),onBlur:k("blur"),placeholder:M.firstName,spellcheck:!1,required:!0})),B.includes("lastName")&&e(l,{label:E.get("lastName"),classNameModifiers:["col-50","lastName"],errorMessage:N(E,x.lastName,E.get("lastName")),name:"lastName",i18n:E},e(u,{name:y("lastName"),value:q.lastName,classNameModifiers:["lastName"],onInput:k("input"),onBlur:k("blur"),placeholder:M.lastName,spellcheck:!1,required:!0})),B.includes("dateOfBirth")&&e(l,{label:E.get("dateOfBirth"),classNameModifiers:["col-50","dateOfBirth"],errorMessage:N(E,x.dateOfBirth,E.get("dateOfBirth")),helper:O?null:E.get("dateOfBirth.format"),name:"dateOfBirth",i18n:E},e(f,{name:y("dateOfBirth"),value:q.dateOfBirth,classNameModifiers:["dateOfBirth"],onInput:k("input"),onBlur:k("blur"),placeholder:M.dateOfBirth,required:!0})),B.includes("shopperEmail")&&e(l,{label:E.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:N(E,x.shopperEmail,E.get("shopperEmail")),dir:"ltr",name:"emailAddress",i18n:E},e(h,{name:y("shopperEmail"),value:q.shopperEmail,classNameModifiers:["shopperEmail"],onInput:k("input"),onBlur:k("blur"),placeholder:M.shopperEmail,required:!0})),B.includes("telephoneNumber")&&e(l,{label:E.get("telephoneNumber"),classNameModifiers:["telephoneNumber"],errorMessage:N(E,x.telephoneNumber,E.get("telephoneNumber")),dir:"ltr",name:"telephoneNumber",i18n:E},e(c,{name:y("telephoneNumber"),value:q.telephoneNumber,classNameModifiers:["telephoneNumber"],onInput:k("input"),onBlur:k("blur"),placeholder:M.telephoneNumber,required:!0})))}g.defaultProps={data:{},onChange:()=>{},placeholders:{},requiredFields:b,validationRules:o,visibility:"editable"};export{b as PERSONAL_DETAILS_SCHEMA,g as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useMemo as r,useRef as a,useEffect as t}from"../../../external/preact/hooks/dist/hooks.js";import s from"../FormFields/Fieldset/Fieldset.js";import l from"../FormFields/Field/Field.js";import i from"./ReadOnlyPersonalDetails.js";import{personalDetailsValidationRules as o}from"./validate.js";import{useCoreContext as m}from"../../../core/Context/CoreProvider.js";import{checkDateInputSupport as n}from"../FormFields/InputDate/utils.js";import{getFormattedData as d}from"./utils.js";import p from"../../../utils/useForm/useForm.js";import"../SecuredFields/lib/CSF/utils/userAgent.js";import u from"../FormFields/InputText.js";import f from"../FormFields/InputDate/InputDate.js";import h from"../FormFields/InputEmail.js";import c from"../FormFields/InputTelephone.js";import{getErrorMessage as N}from"../../../utils/getErrorMessage.js";const b=["firstName","lastName","dateOfBirth","shopperEmail","telephoneNumber"];function g(b){const{label:g="",namePrefix:F,placeholders:M,requiredFields:B,visibility:j}=b,{i18n:E}=m(),O=r(n,[]),{handleChangeFor:v,triggerValidation:I,data:C,valid:q,errors:x,isValid:D}=p({schema:B,rules:{...o,...b.validationRules},defaultData:b.data}),R=a({showValidation:()=>{I()}});t(()=>{b.setComponentRef(R.current)},[b.setComponentRef]);const k=e=>r=>{const{name:a}=r.target,t=a.split(`${F}.`).pop();v(t,e)(r)},y=e=>`${F?`${F}.`:""}${e}`;return t(()=>{const e=d(C);b.onChange({data:e,valid:q,errors:x,isValid:D})},[C,q,x,D]),"hidden"===j?null:"readOnly"===j?e(i,{...b,data:C}):e(s,{classNameModifiers:["personalDetails"],label:g},B.includes("firstName")&&e(l,{label:E.get("firstName"),classNameModifiers:["col-50","firstName"],errorMessage:N(E,x.firstName,E.get("firstName")),name:"firstName",i18n:E},e(u,{name:y("firstName"),value:C.firstName,classNameModifiers:["firstName"],onInput:k("input"),onBlur:k("blur"),placeholder:M.firstName,spellcheck:!1,required:!0})),B.includes("lastName")&&e(l,{label:E.get("lastName"),classNameModifiers:["col-50","lastName"],errorMessage:N(E,x.lastName,E.get("lastName")),name:"lastName",i18n:E},e(u,{name:y("lastName"),value:C.lastName,classNameModifiers:["lastName"],onInput:k("input"),onBlur:k("blur"),placeholder:M.lastName,spellcheck:!1,required:!0})),B.includes("dateOfBirth")&&e(l,{label:E.get("dateOfBirth"),classNameModifiers:["col-50","dateOfBirth"],errorMessage:N(E,x.dateOfBirth,E.get("dateOfBirth")),helper:O?null:E.get("dateOfBirth.format"),name:"dateOfBirth",i18n:E},e(f,{name:y("dateOfBirth"),value:C.dateOfBirth,classNameModifiers:["dateOfBirth"],onInput:k("input"),onBlur:k("blur"),placeholder:M.dateOfBirth,required:!0})),B.includes("shopperEmail")&&e(l,{label:E.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:N(E,x.shopperEmail,E.get("shopperEmail")),dir:"ltr",name:"emailAddress",i18n:E},e(h,{name:y("shopperEmail"),value:C.shopperEmail,classNameModifiers:["shopperEmail"],onInput:k("input"),onBlur:k("blur"),placeholder:M.shopperEmail,required:!0})),B.includes("telephoneNumber")&&e(l,{label:E.get("telephoneNumber"),classNameModifiers:["telephoneNumber"],errorMessage:N(E,x.telephoneNumber,E.get("telephoneNumber")),dir:"ltr",name:"telephoneNumber",i18n:E},e(c,{name:y("telephoneNumber"),value:C.telephoneNumber,classNameModifiers:["telephoneNumber"],onInput:k("input"),onBlur:k("blur"),placeholder:M.telephoneNumber,required:!0})))}g.defaultProps={data:{},onChange:()=>{},placeholders:{},requiredFields:b,validationRules:o,visibility:"editable"};export{b as PERSONAL_DETAILS_SCHEMA,g as default};
 //# sourceMappingURL=PersonalDetails.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PersonalDetails.js","sources":["../../../../../src/components/internal/PersonalDetails/PersonalDetails.tsx"],"sourcesContent":["import { GenericEventHandler, h } from 'preact';\nimport { useEffect, useMemo, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyPersonalDetails from './ReadOnlyPersonalDetails';\nimport { personalDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { PersonalDetailsProps } from './types';\nimport { checkDateInputSupport } from '../FormFields/InputDate/utils';\nimport { PersonalDetailsSchema } from '../../../types';\nimport { getFormattedData } from './utils';\nimport useForm from '../../../utils/useForm';\nimport InputText from '../FormFields/InputText';\nimport InputDate from '../FormFields/InputDate';\nimport InputEmail from '../FormFields/InputEmail';\nimport InputTelephone from '../FormFields/InputTelephone';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\nimport './PersonalDetails.scss';\n\nexport const PERSONAL_DETAILS_SCHEMA = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber'];\n\nexport default function PersonalDetails(props: Readonly<PersonalDetailsProps>) {\n    const { label = '', namePrefix, placeholders, requiredFields, visibility } = props;\n\n    const { i18n } = useCoreContext();\n\n    const isDateInputSupported = useMemo(checkDateInputSupport, []);\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<PersonalDetailsSchema>({\n        schema: requiredFields,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...personalDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    const personalDetailsRef = useRef<ComponentMethodsRef>({\n        showValidation: () => {\n            triggerValidation();\n        }\n    });\n\n    useEffect(() => {\n        props.setComponentRef(personalDetailsRef.current);\n    }, [props.setComponentRef]);\n\n    const eventHandler =\n        (mode: HandleChangeForModeType): GenericEventHandler<EventTarget> =>\n        (e: Event): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyPersonalDetails {...props} data={data} />;\n\n    return (\n        <Fieldset classNameModifiers={['personalDetails']} label={label}>\n            {requiredFields.includes('firstName') && (\n                <Field\n                    label={i18n.get('firstName')}\n                    classNameModifiers={['col-50', 'firstName']}\n                    errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n                    name={'firstName'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        name={generateFieldName('firstName')}\n                        value={data.firstName}\n                        classNameModifiers={['firstName']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.firstName}\n                        spellcheck={false}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('lastName') && (\n                <Field\n                    label={i18n.get('lastName')}\n                    classNameModifiers={['col-50', 'lastName']}\n                    errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n                    name={'lastName'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        name={generateFieldName('lastName')}\n                        value={data.lastName}\n                        classNameModifiers={['lastName']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.lastName}\n                        spellcheck={false}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('dateOfBirth') && (\n                <Field\n                    label={i18n.get('dateOfBirth')}\n                    classNameModifiers={['col-50', 'dateOfBirth']}\n                    errorMessage={getErrorMessage(i18n, errors.dateOfBirth, i18n.get('dateOfBirth'))}\n                    helper={isDateInputSupported ? null : i18n.get('dateOfBirth.format')}\n                    name={'dateOfBirth'}\n                    i18n={i18n}\n                >\n                    <InputDate\n                        name={generateFieldName('dateOfBirth')}\n                        value={data.dateOfBirth}\n                        classNameModifiers={['dateOfBirth']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.dateOfBirth}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('shopperEmail') && (\n                <Field\n                    label={i18n.get('shopperEmail')}\n                    classNameModifiers={['shopperEmail']}\n                    errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                    dir={'ltr'}\n                    name={'emailAddress'}\n                    i18n={i18n}\n                >\n                    <InputEmail\n                        name={generateFieldName('shopperEmail')}\n                        value={data.shopperEmail}\n                        classNameModifiers={['shopperEmail']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.shopperEmail}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('telephoneNumber') && (\n                <Field\n                    label={i18n.get('telephoneNumber')}\n                    classNameModifiers={['telephoneNumber']}\n                    errorMessage={getErrorMessage(i18n, errors.telephoneNumber, i18n.get('telephoneNumber'))}\n                    dir={'ltr'}\n                    name={'telephoneNumber'}\n                    i18n={i18n}\n                >\n                    <InputTelephone\n                        name={generateFieldName('telephoneNumber')}\n                        value={data.telephoneNumber}\n                        classNameModifiers={['telephoneNumber']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.telephoneNumber}\n                        required={true}\n                    />\n                </Field>\n            )}\n        </Fieldset>\n    );\n}\n\nPersonalDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    placeholders: {},\n    requiredFields: PERSONAL_DETAILS_SCHEMA,\n    validationRules: personalDetailsValidationRules,\n    visibility: 'editable'\n};\n"],"names":["PERSONAL_DETAILS_SCHEMA","PersonalDetails","props","label","namePrefix","placeholders","requiredFields","visibility","i18n","useCoreContext","isDateInputSupported","useMemo","checkDateInputSupport","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","personalDetailsValidationRules","validationRules","defaultData","personalDetailsRef","useRef","showValidation","useEffect","setComponentRef","current","eventHandler","mode","e","name","target","key","split","pop","generateFieldName","formattedData","getFormattedData","onChange","h","ReadOnlyPersonalDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","getErrorMessage","firstName","InputText","value","onInput","onBlur","placeholder","spellcheck","required","lastName","dateOfBirth","helper","InputDate","shopperEmail","dir","InputEmail","telephoneNumber","InputTelephone","defaultProps"],"mappings":"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"}
+{"version":3,"file":"PersonalDetails.js","sources":["../../../../../src/components/internal/PersonalDetails/PersonalDetails.tsx"],"sourcesContent":["import { GenericEventHandler, h } from 'preact';\nimport { useEffect, useMemo, useRef } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport Field from '../FormFields/Field';\nimport ReadOnlyPersonalDetails from './ReadOnlyPersonalDetails';\nimport { personalDetailsValidationRules } from './validate';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { PersonalDetailsProps } from './types';\nimport { checkDateInputSupport } from '../FormFields/InputDate/utils';\nimport { PersonalDetailsSchema } from '../../../types';\nimport { getFormattedData } from './utils';\nimport useForm from '../../../utils/useForm';\nimport InputText from '../FormFields/InputText';\nimport InputDate from '../FormFields/InputDate';\nimport InputEmail from '../FormFields/InputEmail';\nimport InputTelephone from '../FormFields/InputTelephone';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport { HandleChangeForModeType } from '../../../utils/useForm/types';\nimport './PersonalDetails.scss';\n\nexport const PERSONAL_DETAILS_SCHEMA = ['firstName', 'lastName', 'dateOfBirth', 'shopperEmail', 'telephoneNumber'];\n\nexport default function PersonalDetails(props: Readonly<PersonalDetailsProps>) {\n    const { label = '', namePrefix, placeholders, requiredFields, visibility } = props;\n\n    const { i18n } = useCoreContext();\n\n    const isDateInputSupported = useMemo(checkDateInputSupport, []);\n    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<PersonalDetailsSchema>({\n        schema: requiredFields,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...personalDetailsValidationRules, ...props.validationRules },\n        defaultData: props.data\n    });\n\n    const personalDetailsRef = useRef<ComponentMethodsRef>({\n        showValidation: () => {\n            triggerValidation();\n        }\n    });\n\n    useEffect(() => {\n        props.setComponentRef(personalDetailsRef.current);\n    }, [props.setComponentRef]);\n\n    const eventHandler =\n        (mode: HandleChangeForModeType): GenericEventHandler<EventTarget> =>\n        (e: Event): void => {\n            const { name } = e.target as HTMLInputElement;\n            const key = name.split(`${namePrefix}.`).pop();\n\n            handleChangeFor(key, mode)(e);\n        };\n\n    const generateFieldName = (name: string): string => `${namePrefix ? `${namePrefix}.` : ''}${name}`;\n\n    useEffect(() => {\n        const formattedData = getFormattedData(data);\n        props.onChange({ data: formattedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyPersonalDetails {...props} data={data} />;\n\n    return (\n        <Fieldset classNameModifiers={['personalDetails']} label={label}>\n            {requiredFields.includes('firstName') && (\n                <Field\n                    label={i18n.get('firstName')}\n                    classNameModifiers={['col-50', 'firstName']}\n                    errorMessage={getErrorMessage(i18n, errors.firstName, i18n.get('firstName'))}\n                    name={'firstName'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        name={generateFieldName('firstName')}\n                        value={data.firstName}\n                        classNameModifiers={['firstName']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.firstName}\n                        spellcheck={false}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('lastName') && (\n                <Field\n                    label={i18n.get('lastName')}\n                    classNameModifiers={['col-50', 'lastName']}\n                    errorMessage={getErrorMessage(i18n, errors.lastName, i18n.get('lastName'))}\n                    name={'lastName'}\n                    i18n={i18n}\n                >\n                    <InputText\n                        name={generateFieldName('lastName')}\n                        value={data.lastName}\n                        classNameModifiers={['lastName']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.lastName}\n                        spellcheck={false}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('dateOfBirth') && (\n                <Field\n                    label={i18n.get('dateOfBirth')}\n                    classNameModifiers={['col-50', 'dateOfBirth']}\n                    errorMessage={getErrorMessage(i18n, errors.dateOfBirth, i18n.get('dateOfBirth'))}\n                    helper={isDateInputSupported ? null : i18n.get('dateOfBirth.format')}\n                    name={'dateOfBirth'}\n                    i18n={i18n}\n                >\n                    <InputDate\n                        name={generateFieldName('dateOfBirth')}\n                        value={data.dateOfBirth}\n                        classNameModifiers={['dateOfBirth']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.dateOfBirth}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('shopperEmail') && (\n                <Field\n                    label={i18n.get('shopperEmail')}\n                    classNameModifiers={['shopperEmail']}\n                    errorMessage={getErrorMessage(i18n, errors.shopperEmail, i18n.get('shopperEmail'))}\n                    dir={'ltr'}\n                    name={'emailAddress'}\n                    i18n={i18n}\n                >\n                    <InputEmail\n                        name={generateFieldName('shopperEmail')}\n                        value={data.shopperEmail}\n                        classNameModifiers={['shopperEmail']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.shopperEmail}\n                        required={true}\n                    />\n                </Field>\n            )}\n\n            {requiredFields.includes('telephoneNumber') && (\n                <Field\n                    label={i18n.get('telephoneNumber')}\n                    classNameModifiers={['telephoneNumber']}\n                    errorMessage={getErrorMessage(i18n, errors.telephoneNumber, i18n.get('telephoneNumber'))}\n                    dir={'ltr'}\n                    name={'telephoneNumber'}\n                    i18n={i18n}\n                >\n                    <InputTelephone\n                        name={generateFieldName('telephoneNumber')}\n                        value={data.telephoneNumber}\n                        classNameModifiers={['telephoneNumber']}\n                        onInput={eventHandler('input')}\n                        onBlur={eventHandler('blur')}\n                        placeholder={placeholders.telephoneNumber}\n                        required={true}\n                    />\n                </Field>\n            )}\n        </Fieldset>\n    );\n}\n\nPersonalDetails.defaultProps = {\n    data: {},\n    onChange: () => {},\n    placeholders: {},\n    requiredFields: PERSONAL_DETAILS_SCHEMA,\n    validationRules: personalDetailsValidationRules,\n    visibility: 'editable'\n};\n"],"names":["PERSONAL_DETAILS_SCHEMA","PersonalDetails","props","label","namePrefix","placeholders","requiredFields","visibility","i18n","useCoreContext","isDateInputSupported","useMemo","checkDateInputSupport","handleChangeFor","triggerValidation","data","valid","errors","isValid","useForm","schema","rules","personalDetailsValidationRules","validationRules","defaultData","personalDetailsRef","useRef","showValidation","useEffect","setComponentRef","current","eventHandler","mode","e","name","target","key","split","pop","generateFieldName","formattedData","getFormattedData","onChange","h","ReadOnlyPersonalDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","getErrorMessage","firstName","InputText","value","onInput","onBlur","placeholder","spellcheck","required","lastName","dateOfBirth","helper","InputDate","shopperEmail","dir","InputEmail","telephoneNumber","InputTelephone","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/PhoneInput/PhoneInputFields.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as r}from"../../../external/preact/dist/preact.js";import{useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import n from"../FormFields/Field/Field.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import a from"../FormFields/Select/Select.js";import l from"../FormFields/InputText.js";function p({getError:p,showNumber:i,showPrefix:h,form:m,canSelectPrefix:u=!0,...s}){const{i18n:c}=t(),{handleChangeFor:d,data:f,valid:b}=m;return o(()=>{f.phoneNumber&&d("phoneNumber","blur")(f.phoneNumber)},[f.phonePrefix]),e(r,null,h&&e(n,{className:"adyen-checkout-field--phone-prefix",label:c.get("telephonePrefix"),errorMessage:p("phonePrefix"),showValidIcon:!1,isValid:b.phonePrefix,dir:"ltr",i18n:c,name:"phonePrefix"},e(a,{readonly:!u,className:"adyen-checkout-dropdown adyen-checkout-dropdown--countrycode-selector",name:"phonePrefix",items:s.items,onChange:d("phonePrefix"),placeholder:s?.placeholders?.phonePrefix,selectedValue:f.phonePrefix})),i&&e(n,{className:"adyen-checkout-field--phone-number",label:s.phoneNumberKey?c.get(s.phoneNumberKey):c.get("telephoneNumber"),errorMessage:p("phoneNumber"),isValid:b.phoneNumber,filled:f?.phoneNumber?.length>0,dir:"ltr",i18n:c,name:"phoneNumber"},e(l,{className:"adyen-checkout__input adyen-checkout-input adyen-checkout-input--phone-number",type:"tel",name:"phoneNumber",value:f.phoneNumber,onInput:d("phoneNumber","input"),onBlur:d("phoneNumber","blur"),placeholder:s?.placeholders?.phoneNumber,autoCorrect:"off",required:!0})))}export{p as default};
+import{createElement as e,Fragment as r}from"../../../external/preact/dist/preact.js";import{useEffect as o}from"../../../external/preact/hooks/dist/hooks.js";import n from"../FormFields/Field/Field.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import a from"../FormFields/Select/Select.js";import l from"../FormFields/InputText.js";function i({getError:i,showNumber:p,showPrefix:h,form:m,canSelectPrefix:u=!0,errorLive:s,...c}){const{i18n:d}=t(),{handleChangeFor:f,data:b,valid:N}=m;return o(()=>{b.phoneNumber&&f("phoneNumber","blur")(b.phoneNumber)},[b.phonePrefix]),e(r,null,h&&e(n,{className:"adyen-checkout-field--phone-prefix",label:d.get("telephonePrefix"),errorMessage:i("phonePrefix"),showValidIcon:!1,isValid:N.phonePrefix,dir:"ltr",i18n:d,name:"phonePrefix",errorLive:s},e(a,{readonly:!u,className:"adyen-checkout-dropdown adyen-checkout-dropdown--countrycode-selector",name:"phonePrefix",items:c.items,onChange:f("phonePrefix"),placeholder:c?.placeholders?.phonePrefix,selectedValue:b.phonePrefix})),p&&e(n,{className:"adyen-checkout-field--phone-number",label:c.phoneNumberKey?d.get(c.phoneNumberKey):d.get("telephoneNumber"),errorMessage:i("phoneNumber"),isValid:N.phoneNumber,filled:b?.phoneNumber?.length>0,dir:"ltr",i18n:d,name:"phoneNumber",errorLive:s},e(l,{className:"adyen-checkout__input adyen-checkout-input adyen-checkout-input--phone-number",type:"tel",name:"phoneNumber",value:b.phoneNumber,onInput:f("phoneNumber","input"),onBlur:f("phoneNumber","blur"),placeholder:c?.placeholders?.phoneNumber,autoCorrect:"off",required:!0})))}export{i as default};
 //# sourceMappingURL=PhoneInputFields.js.map

package/dist/es/components/internal/PhoneInput/PhoneInputFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInputFields.js","sources":["../../../../../src/components/internal/PhoneInput/PhoneInputFields.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useEffect } from 'preact/hooks';\nimport Field from '../FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport './PhoneInput.scss';\nimport Select from '../FormFields/Select';\nimport { PhoneInputSchema } from './types';\nimport InputText from '../FormFields/InputText';\nimport { DataSet } from '../../../core/Services/data-set';\nimport { Form } from '../../../utils/useForm/types';\n\nexport interface PhoneInputFieldProps {\n    items: DataSet;\n    requiredFields?: string[];\n    form: Form<PhoneInputSchema>;\n    getError: (key: string) => string | boolean;\n    phoneNumberKey?: string;\n    phonePrefixErrorKey?: string;\n    phoneNumberErrorKey?: string;\n    placeholders?: PhoneInputSchema;\n    showPrefix?: boolean;\n    showNumber?: boolean;\n    canSelectPrefix?: boolean;\n}\n/**\n *\n * @param PhoneInputFormProps\n * @constructor\n */\nexport default function PhoneInputFields({\n    getError,\n    showNumber,\n    showPrefix,\n    form,\n    canSelectPrefix = true,\n    ...props\n}: Readonly<PhoneInputFieldProps>) {\n    const { i18n } = useCoreContext();\n\n    const { handleChangeFor, data, valid } = form;\n\n    // Force re-validation of the phoneNumber when data.phonePrefix changes (since the validation rules will also change)\n    useEffect((): void => {\n        if (data.phoneNumber) {\n            handleChangeFor('phoneNumber', 'blur')(data.phoneNumber);\n        }\n    }, [data.phonePrefix]);\n\n    return (\n        <Fragment>\n            {showPrefix && (\n                <Field\n                    className={'adyen-checkout-field--phone-prefix'}\n                    label={i18n.get('telephonePrefix')}\n                    errorMessage={getError('phonePrefix')}\n                    showValidIcon={false}\n                    isValid={valid.phonePrefix}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'phonePrefix'}\n                >\n                    <Select\n                        readonly={!canSelectPrefix}\n                        className={'adyen-checkout-dropdown adyen-checkout-dropdown--countrycode-selector'}\n                        name={'phonePrefix'}\n                        items={props.items}\n                        onChange={handleChangeFor('phonePrefix')}\n                        placeholder={props?.placeholders?.phonePrefix}\n                        selectedValue={data.phonePrefix}\n                    />\n                </Field>\n            )}\n\n            {showNumber && (\n                <Field\n                    className={'adyen-checkout-field--phone-number'}\n                    label={props.phoneNumberKey ? i18n.get(props.phoneNumberKey) : i18n.get('telephoneNumber')}\n                    errorMessage={getError('phoneNumber')}\n                    isValid={valid.phoneNumber}\n                    filled={data?.phoneNumber?.length > 0}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'phoneNumber'}\n                >\n                    <InputText\n                        className=\"adyen-checkout__input adyen-checkout-input adyen-checkout-input--phone-number\"\n                        type=\"tel\"\n                        name=\"phoneNumber\"\n                        value={data.phoneNumber}\n                        onInput={handleChangeFor('phoneNumber', 'input')}\n                        onBlur={handleChangeFor('phoneNumber', 'blur')}\n                        placeholder={props?.placeholders?.phoneNumber}\n                        autoCorrect=\"off\"\n                        required={true}\n                    />\n                </Field>\n            )}\n        </Fragment>\n    );\n}\n"],"names":["PhoneInputFields","getError","showNumber","showPrefix","form","canSelectPrefix","props","i18n","useCoreContext","handleChangeFor","data","valid","useEffect","phoneNumber","phonePrefix","h","Fragment","Field","className","label","get","errorMessage","showValidIcon","isValid","dir","name","Select","readonly","items","onChange","placeholder","placeholders","selectedValue","phoneNumberKey","filled","length","InputText","type","value","onInput","onBlur","autoCorrect","required"],"mappings":"0WA6Be,SAASA,GAAiBC,SACrCA,EAAQC,WACRA,EAAUC,WACVA,EAAUC,KACVA,EAAIC,gBACJA,GAAkB,KACfC,IAEH,MAAMC,KAAEA,GAASC,KAEXC,gBAAEA,EAAeC,KAAEA,EAAIC,MAAEA,GAAUP,EASzC,OANAQ,EAAU,KACFF,EAAKG,aACLJ,EAAgB,cAAe,OAA/BA,CAAuCC,EAAKG,cAEjD,CAACH,EAAKI,cAGLC,EAACC,EAAAA,KACIb,GACGY,EAACE,EAAAA,CACGC,UAAW,qCACXC,MAAOZ,EAAKa,IAAI,mBAChBC,aAAcpB,EAAS,eACvBqB,eAAe,EACfC,QAASZ,EAAMG,YACfU,IAAK,MACLjB,KAAMA,EACNkB,KAAM,eAENV,EAACW,EAAAA,CACGC,UAAWtB,EACXa,UAAW,wEACXO,KAAM,cACNG,MAAOtB,EAAMsB,MACbC,SAAUpB,EAAgB,eAC1BqB,YAAaxB,GAAOyB,cAAcjB,YAClCkB,cAAetB,EAAKI,eAK/BZ,GACGa,EAACE,EAAAA,CACGC,UAAW,qCACXC,MAAOb,EAAM2B,eAAiB1B,EAAKa,IAAId,EAAM2B,gBAAkB1B,EAAKa,IAAI,mBACxEC,aAAcpB,EAAS,eACvBsB,QAASZ,EAAME,YACfqB,OAAQxB,GAAMG,aAAasB,OAAS,EACpCX,IAAK,MACLjB,KAAMA,EACNkB,KAAM,eAENV,EAACqB,EAAAA,CACGlB,UAAU,gFACVmB,KAAK,MACLZ,KAAK,cACLa,MAAO5B,EAAKG,YACZ0B,QAAS9B,EAAgB,cAAe,SACxC+B,OAAQ/B,EAAgB,cAAe,QACvCqB,YAAaxB,GAAOyB,cAAclB,YAClC4B,YAAY,MACZC,UAAU,KAMlC"}
+{"version":3,"file":"PhoneInputFields.js","sources":["../../../../../src/components/internal/PhoneInput/PhoneInputFields.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useEffect } from 'preact/hooks';\nimport Field from '../FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport './PhoneInput.scss';\nimport Select from '../FormFields/Select';\nimport { PhoneInputSchema } from './types';\nimport InputText from '../FormFields/InputText';\nimport { DataSet } from '../../../core/Services/data-set';\nimport { Form } from '../../../utils/useForm/types';\n\nexport interface PhoneInputFieldProps {\n    items: DataSet;\n    requiredFields?: string[];\n    form: Form<PhoneInputSchema>;\n    getError: (key: string) => string | boolean;\n    phoneNumberKey?: string;\n    phonePrefixErrorKey?: string;\n    phoneNumberErrorKey?: string;\n    placeholders?: PhoneInputSchema;\n    showPrefix?: boolean;\n    showNumber?: boolean;\n    canSelectPrefix?: boolean;\n    errorLive?: boolean;\n}\n/**\n *\n * @param PhoneInputFormProps\n * @constructor\n */\nexport default function PhoneInputFields({\n    getError,\n    showNumber,\n    showPrefix,\n    form,\n    canSelectPrefix = true,\n    errorLive,\n    ...props\n}: Readonly<PhoneInputFieldProps>) {\n    const { i18n } = useCoreContext();\n\n    const { handleChangeFor, data, valid } = form;\n\n    // Force re-validation of the phoneNumber when data.phonePrefix changes (since the validation rules will also change)\n    useEffect((): void => {\n        if (data.phoneNumber) {\n            handleChangeFor('phoneNumber', 'blur')(data.phoneNumber);\n        }\n    }, [data.phonePrefix]);\n\n    return (\n        <Fragment>\n            {showPrefix && (\n                <Field\n                    className={'adyen-checkout-field--phone-prefix'}\n                    label={i18n.get('telephonePrefix')}\n                    errorMessage={getError('phonePrefix')}\n                    showValidIcon={false}\n                    isValid={valid.phonePrefix}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'phonePrefix'}\n                    errorLive={errorLive}\n                >\n                    <Select\n                        readonly={!canSelectPrefix}\n                        className={'adyen-checkout-dropdown adyen-checkout-dropdown--countrycode-selector'}\n                        name={'phonePrefix'}\n                        items={props.items}\n                        onChange={handleChangeFor('phonePrefix')}\n                        placeholder={props?.placeholders?.phonePrefix}\n                        selectedValue={data.phonePrefix}\n                    />\n                </Field>\n            )}\n\n            {showNumber && (\n                <Field\n                    className={'adyen-checkout-field--phone-number'}\n                    label={props.phoneNumberKey ? i18n.get(props.phoneNumberKey) : i18n.get('telephoneNumber')}\n                    errorMessage={getError('phoneNumber')}\n                    isValid={valid.phoneNumber}\n                    filled={data?.phoneNumber?.length > 0}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'phoneNumber'}\n                    errorLive={errorLive}\n                >\n                    <InputText\n                        className=\"adyen-checkout__input adyen-checkout-input adyen-checkout-input--phone-number\"\n                        type=\"tel\"\n                        name=\"phoneNumber\"\n                        value={data.phoneNumber}\n                        onInput={handleChangeFor('phoneNumber', 'input')}\n                        onBlur={handleChangeFor('phoneNumber', 'blur')}\n                        placeholder={props?.placeholders?.phoneNumber}\n                        autoCorrect=\"off\"\n                        required={true}\n                    />\n                </Field>\n            )}\n        </Fragment>\n    );\n}\n"],"names":["PhoneInputFields","getError","showNumber","showPrefix","form","canSelectPrefix","errorLive","props","i18n","useCoreContext","handleChangeFor","data","valid","useEffect","phoneNumber","phonePrefix","h","Fragment","Field","className","label","get","errorMessage","showValidIcon","isValid","dir","name","Select","readonly","items","onChange","placeholder","placeholders","selectedValue","phoneNumberKey","filled","length","InputText","type","value","onInput","onBlur","autoCorrect","required"],"mappings":"0WA8Be,SAASA,GAAiBC,SACrCA,EAAQC,WACRA,EAAUC,WACVA,EAAUC,KACVA,EAAIC,gBACJA,GAAkB,EAAIC,UACtBA,KACGC,IAEH,MAAMC,KAAEA,GAASC,KAEXC,gBAAEA,EAAeC,KAAEA,EAAIC,MAAEA,GAAUR,EASzC,OANAS,EAAU,KACFF,EAAKG,aACLJ,EAAgB,cAAe,OAA/BA,CAAuCC,EAAKG,cAEjD,CAACH,EAAKI,cAGLC,EAACC,EAAAA,KACId,GACGa,EAACE,EAAAA,CACGC,UAAW,qCACXC,MAAOZ,EAAKa,IAAI,mBAChBC,aAAcrB,EAAS,eACvBsB,eAAe,EACfC,QAASZ,EAAMG,YACfU,IAAK,MACLjB,KAAMA,EACNkB,KAAM,cACNpB,UAAWA,GAEXU,EAACW,EAAAA,CACGC,UAAWvB,EACXc,UAAW,wEACXO,KAAM,cACNG,MAAOtB,EAAMsB,MACbC,SAAUpB,EAAgB,eAC1BqB,YAAaxB,GAAOyB,cAAcjB,YAClCkB,cAAetB,EAAKI,eAK/Bb,GACGc,EAACE,EAAAA,CACGC,UAAW,qCACXC,MAAOb,EAAM2B,eAAiB1B,EAAKa,IAAId,EAAM2B,gBAAkB1B,EAAKa,IAAI,mBACxEC,aAAcrB,EAAS,eACvBuB,QAASZ,EAAME,YACfqB,OAAQxB,GAAMG,aAAasB,OAAS,EACpCX,IAAK,MACLjB,KAAMA,EACNkB,KAAM,cACNpB,UAAWA,GAEXU,EAACqB,EAAAA,CACGlB,UAAU,gFACVmB,KAAK,MACLZ,KAAK,cACLa,MAAO5B,EAAKG,YACZ0B,QAAS9B,EAAgB,cAAe,SACxC+B,OAAQ/B,EAAgB,cAAe,QACvCqB,YAAaxB,GAAOyB,cAAclB,YAClC4B,YAAY,MACZC,UAAU,KAMlC"}

package/dist/es/components/internal/PhoneInput/PhoneInputForm.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useEffect as r,useRef as o,useCallback as t}from"../../../external/preact/hooks/dist/hooks.js";import s from"../../../utils/useForm/useForm.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import{phoneValidationRules as n,phoneFormatters as a}from"./validate.js";import l from"../FormFields/Fieldset/Fieldset.js";import m from"./PhoneInputFields.js";function u(u){const{i18n:p}=i(),d=u.requiredFields||[...u?.items?.length?["phonePrefix"]:[],"phoneNumber"],f=d.includes("phonePrefix")&&!!u?.items?.length,h=d.includes("phoneNumber"),c=s({...u,schema:d,defaultData:u.data,rules:n,formatters:a});r(()=>{c.setSchema(d)},[d.toString()]);const{data:g,valid:b,errors:x,isValid:F,triggerValidation:j}=c;r(()=>{u.onChange({data:g,valid:b,errors:x,isValid:F})},[g,b,x,F]);const N=o({showValidation:j});r(()=>{u.setComponentRef(N.current)},[u.setComponentRef]);const P=t(e=>{if(x[e]){const r="phoneNumber"===e?"phoneNumberErrorKey":"phonePrefixErrorKey",o=u[r]?u[r]:x[e].errorMessage;return p.get(o)??null}return null},[x]);return e(l,{classNameModifiers:["phone-input"]},e(m,{getError:P,showNumber:h,showPrefix:f,form:c,...u}))}u.defaultProps={phoneLabel:"telephoneNumber"};export{u as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useEffect as r,useRef as o,useCallback as t}from"../../../external/preact/hooks/dist/hooks.js";import s from"../../../utils/useForm/useForm.js";import"../SecuredFields/lib/CSF/utils/userAgent.js";import{useCoreContext as i}from"../../../core/Context/CoreProvider.js";import{phoneValidationRules as n,phoneFormatters as a}from"./validate.js";import l from"../FormFields/Fieldset/Fieldset.js";import m from"./PhoneInputFields.js";function u(u){const{i18n:d}=i(),p=u.requiredFields||[...u?.items?.length?["phonePrefix"]:[],"phoneNumber"],f=p.includes("phonePrefix")&&!!u?.items?.length,h=p.includes("phoneNumber"),c=s({...u,schema:p,defaultData:u.data,rules:n,formatters:a});r(()=>{c.setSchema(p)},[p.toString()]);const{data:g,valid:F,errors:b,isValid:j,triggerValidation:x}=c;r(()=>{u.onChange({data:g,valid:F,errors:b,isValid:j})},[g,F,b,j]);const C=o({showValidation:x});r(()=>{u.setComponentRef(C.current)},[u.setComponentRef]);const N=t(e=>{if(b[e]){const r="phoneNumber"===e?"phoneNumberErrorKey":"phonePrefixErrorKey",o=u[r]?u[r]:b[e].errorMessage;return d.get(o)??null}return null},[b]);return e(l,{classNameModifiers:["phone-input"]},e(m,{getError:N,showNumber:h,showPrefix:f,form:c,...u}))}u.defaultProps={phoneLabel:"telephoneNumber"};export{u as default};
 //# sourceMappingURL=PhoneInputForm.js.map