@adyen/adyen-web 6.39.0 → 6.40.0

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as t,useEffect as o,useCallback as r}from"../../../../../../external/preact/hooks/dist/hooks.js";import s from"../../../context/useClickToPayContext.js";import n from"../../../../../../_virtual/index.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import c from"../../../../Icon/Icon.js";import{isSrciError as i}from"../../../services/utils.js";import{PREFIX as d}from"../../../../Icon/constants.js";import l from"../../../../Button/Button.js";const m=({onError:m,onResendCode:p,disabled:u})=>{const[f,k]=t(null),[h,j]=t(!1),{i18n:C}=a(),{startIdentityValidation:v}=s();o(()=>{let e=null;return f>0&&(e=setTimeout(()=>k(f-1),1e3)),()=>clearTimeout(e)},[f]),o(()=>{let e=null;return h&&(e=setTimeout(()=>{j(!1),k(60)},2e3)),()=>clearTimeout(e)},[h]);const y=r(async e=>{e.preventDefault();try{p(),j(!0),await v()}catch(e){if(k(0),j(!1),!i(e))return void console.error(e);m(e.reason)}},[v,m,p]);return h?e("div",{role:"alert",className:"adyen-checkout-ctp__otp-resend-code--confirmation"},C.get("ctp.otp.codeResent"),e(c,{type:`${d}checkmark_black`,height:14,width:14})):f>0?e("div",{role:"timer",className:"adyen-checkout-ctp__otp-resend-code--disabled"},C.get("ctp.otp.resendCode")," -"," ",e("span",{className:"adyen-checkout-ctp__otp-resend-code-counter"}," ",f>0&&`${f}s`," ")):e(l,{classNameModifiers:[n("otp-resend-code",{"otp-resend-code--disabled":u})],onClick:y,variant:"link",inline:!0,disabled:u},C.get("ctp.otp.resendCode"))};export{m as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as t,useEffect as o,useCallback as r}from"../../../../../../external/preact/hooks/dist/hooks.js";import s from"../../../context/useClickToPayContext.js";import n from"../../../../../../_virtual/index.js";import{useCoreContext as c}from"../../../../../../core/Context/CoreProvider.js";import{useA11yReporter as a}from"../../../../../../core/Errors/useA11yReporter.js";import i from"../../../../Icon/Icon.js";import{isSrciError as d}from"../../../services/utils.js";import{PREFIX as p}from"../../../../Icon/constants.js";import l from"../../../../Button/Button.js";const m=({onError:m,onResendCode:u,disabled:f})=>{const[k,C]=t(null),[h,j]=t(!1),{i18n:y}=c(),{startIdentityValidation:v}=s(),[_,x]=t(null);a(_),o(()=>{let e;return k>0&&(e=setTimeout(()=>C(k-1),1e3)),60===k?x(`${y.get("ctp.otp.resendCode")} - ${k}s`):0===k&&x(y.get("ctp.otp.resendCode")),()=>clearTimeout(e)},[k]),o(()=>{let e;return h&&(e=setTimeout(()=>{j(!1),C(60)},2e3)),()=>clearTimeout(e)},[h]);const b=r(async e=>{e.preventDefault();try{u(),j(!0),await v()}catch(e){if(C(0),j(!1),!d(e))return void console.error(e);m(e.reason)}},[v,m,u]);return h?e("div",{role:"alert",className:"adyen-checkout-ctp__otp-resend-code--confirmation"},y.get("ctp.otp.codeResent"),e(i,{type:`${p}checkmark_black`,height:14,width:14})):k>0?e("div",{role:"timer",className:"adyen-checkout-ctp__otp-resend-code--disabled"},y.get("ctp.otp.resendCode")," -"," ",e("span",{className:"adyen-checkout-ctp__otp-resend-code-counter"}," ",k>0&&`${k}s`," ")):e(l,{classNameModifiers:[n("otp-resend-code",{"otp-resend-code--disabled":f})],onClick:b,variant:"link",inline:!0,disabled:f},y.get("ctp.otp.resendCode"))};export{m as default};
 //# sourceMappingURL=CtPResendOtpLink.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CtPResendOtpLink.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport classnames from 'classnames';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport Icon from '../../../../Icon';\nimport { isSrciError } from '../../../services/utils';\nimport { PREFIX } from '../../../../Icon/constants';\nimport Button from '../../../../Button';\n\nconst CONFIRMATION_SHOWING_TIME = 2000;\n\ninterface CtPResendOtpLinkProps {\n    onError(errorCode: string): void;\n    onResendCode(): void;\n    disabled: boolean;\n}\n\nconst CtPResendOtpLink = ({ onError, onResendCode, disabled }: Readonly<CtPResendOtpLinkProps>): h.JSX.Element => {\n    const [counter, setCounter] = useState<number>(null);\n    const [showConfirmation, setShowConfirmation] = useState<boolean>(false);\n    const { i18n } = useCoreContext();\n    const { startIdentityValidation } = useClickToPayContext();\n\n    useEffect(() => {\n        let timeout = null;\n        if (counter > 0) {\n            timeout = setTimeout(() => setCounter(counter - 1), 1000);\n        }\n        return () => clearTimeout(timeout);\n    }, [counter]);\n\n    useEffect(() => {\n        let timeout = null;\n\n        if (showConfirmation) {\n            timeout = setTimeout(() => {\n                setShowConfirmation(false);\n                setCounter(60);\n            }, CONFIRMATION_SHOWING_TIME);\n        }\n        return () => clearTimeout(timeout);\n    }, [showConfirmation]);\n\n    const handleResendCodeClick = useCallback(\n        async event => {\n            event.preventDefault();\n\n            try {\n                onResendCode();\n                setShowConfirmation(true);\n                await startIdentityValidation();\n            } catch (error: unknown) {\n                setCounter(0);\n                setShowConfirmation(false);\n\n                if (!isSrciError(error)) {\n                    console.error(error);\n                    return;\n                }\n\n                onError(error.reason);\n            }\n        },\n        [startIdentityValidation, onError, onResendCode]\n    );\n\n    if (showConfirmation) {\n        return (\n            <div role=\"alert\" className=\"adyen-checkout-ctp__otp-resend-code--confirmation\">\n                {i18n.get('ctp.otp.codeResent')}\n                <Icon type={`${PREFIX}checkmark_black`} height={14} width={14} />\n            </div>\n        );\n    }\n\n    if (counter > 0) {\n        return (\n            <div role=\"timer\" className=\"adyen-checkout-ctp__otp-resend-code--disabled\">\n                {i18n.get('ctp.otp.resendCode')} -{' '}\n                <span className=\"adyen-checkout-ctp__otp-resend-code-counter\"> {counter > 0 && `${counter}s`} </span>\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            classNameModifiers={[classnames('otp-resend-code', { 'otp-resend-code--disabled': disabled })]}\n            onClick={handleResendCodeClick}\n            variant=\"link\"\n            inline={true}\n            disabled={disabled}\n        >\n            {i18n.get('ctp.otp.resendCode')}\n        </Button>\n    );\n};\n\nexport default CtPResendOtpLink;\n"],"names":["CtPResendOtpLink","onError","onResendCode","disabled","counter","setCounter","useState","showConfirmation","setShowConfirmation","i18n","useCoreContext","startIdentityValidation","useClickToPayContext","useEffect","timeout","setTimeout","clearTimeout","handleResendCodeClick","useCallback","async","event","preventDefault","error","isSrciError","console","reason","h","div","role","className","get","Icon","type","PREFIX","height","width","span","Button","classNameModifiers","classnames","onClick","variant","inline"],"mappings":"ikBAUA,MAQMA,EAAmB,EAAGC,UAASC,eAAcC,eAC/C,MAAOC,EAASC,GAAcC,EAAiB,OACxCC,EAAkBC,GAAuBF,GAAkB,IAC5DG,KAAEA,GAASC,KACXC,wBAAEA,GAA4BC,IAEpCC,EAAU,KACN,IAAIC,EAAU,KAId,OAHIV,EAAU,IACVU,EAAUC,WAAW,IAAMV,EAAWD,EAAU,GAAI,MAEjD,IAAMY,aAAaF,IAC3B,CAACV,IAEJS,EAAU,KACN,IAAIC,EAAU,KAQd,OANIP,IACAO,EAAUC,WAAW,KACjBP,GAAoB,GACpBH,EAAW,KA5BO,MA+BnB,IAAMW,aAAaF,IAC3B,CAACP,IAEJ,MAAMU,EAAwBC,EAC1BC,MAAMC,IACFA,EAAMC,iBAEN,IACInB,IACAM,GAAoB,SACdG,GACV,CAAE,MAAOW,GAIL,GAHAjB,EAAW,GACXG,GAAoB,IAEfe,EAAYD,GAEb,YADAE,QAAQF,MAAMA,GAIlBrB,EAAQqB,EAAMG,OAClB,GAEJ,CAACd,EAAyBV,EAASC,IAGvC,OAAIK,EAEImB,EAACC,MAAAA,CAAIC,KAAK,QAAQC,UAAU,qDACvBpB,EAAKqB,IAAI,sBACVJ,EAACK,EAAAA,CAAKC,KAAM,GAAGC,mBAAyBC,OAAQ,GAAIC,MAAO,MAKnE/B,EAAU,EAENsB,EAACC,MAAAA,CAAIC,KAAK,QAAQC,UAAU,iDACvBpB,EAAKqB,IAAI,sBAAsB,KAAG,IACnCJ,EAACU,OAAAA,CAAKP,UAAU,+CAA8C,IAAEzB,EAAU,GAAK,GAAGA,KAAW,MAMrGsB,EAACW,EAAAA,CACGC,mBAAoB,CAACC,EAAW,kBAAmB,CAAE,4BAA6BpC,KAClFqC,QAASvB,EACTwB,QAAQ,OACRC,QAAQ,EACRvC,SAAUA,GAETM,EAAKqB,IAAI"}
+{"version":3,"file":"CtPResendOtpLink.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPResendOtpLink.tsx"],"sourcesContent":["import { h, TargetedMouseEvent } from 'preact';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport classnames from 'classnames';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { useA11yReporter } from '../../../../../../core/Errors/useA11yReporter';\nimport Icon from '../../../../Icon';\nimport { isSrciError } from '../../../services/utils';\nimport { PREFIX } from '../../../../Icon/constants';\nimport Button from '../../../../Button';\n\nconst CONFIRMATION_SHOWING_TIME = 2000;\nconst RESEND_OTP_COUNTDOWN_SECONDS = 60;\n\ninterface CtPResendOtpLinkProps {\n    onError(errorCode: string): void;\n    onResendCode(): void;\n    disabled: boolean;\n}\n\nconst CtPResendOtpLink = ({ onError, onResendCode, disabled }: Readonly<CtPResendOtpLinkProps>): h.JSX.Element => {\n    const [counter, setCounter] = useState<number | null>(null);\n    const [showConfirmation, setShowConfirmation] = useState<boolean>(false);\n    const { i18n } = useCoreContext();\n    const { startIdentityValidation } = useClickToPayContext();\n    const [resendStatusMessage, setResendStatusMessage] = useState<string | null>(null);\n    useA11yReporter(resendStatusMessage);\n\n    useEffect(() => {\n        let timeout: ReturnType<typeof setTimeout> | undefined;\n        if (counter > 0) {\n            timeout = setTimeout(() => setCounter(counter - 1), 1000);\n        }\n        if (counter === RESEND_OTP_COUNTDOWN_SECONDS) {\n            setResendStatusMessage(`${i18n.get('ctp.otp.resendCode')} - ${counter}s`);\n        } else if (counter === 0) {\n            setResendStatusMessage(i18n.get('ctp.otp.resendCode'));\n        }\n        return () => clearTimeout(timeout);\n    }, [counter]);\n\n    useEffect(() => {\n        let timeout: ReturnType<typeof setTimeout> | undefined;\n\n        if (showConfirmation) {\n            timeout = setTimeout(() => {\n                setShowConfirmation(false);\n                setCounter(RESEND_OTP_COUNTDOWN_SECONDS);\n            }, CONFIRMATION_SHOWING_TIME);\n        }\n        return () => clearTimeout(timeout);\n    }, [showConfirmation]);\n\n    const handleResendCodeClick = useCallback(\n        async (event: TargetedMouseEvent<HTMLButtonElement>) => {\n            event.preventDefault();\n\n            try {\n                onResendCode();\n                setShowConfirmation(true);\n                await startIdentityValidation();\n            } catch (error: unknown) {\n                setCounter(0);\n                setShowConfirmation(false);\n\n                if (!isSrciError(error)) {\n                    console.error(error);\n                    return;\n                }\n\n                onError(error.reason);\n            }\n        },\n        [startIdentityValidation, onError, onResendCode]\n    );\n\n    if (showConfirmation) {\n        return (\n            <div role=\"alert\" className=\"adyen-checkout-ctp__otp-resend-code--confirmation\">\n                {i18n.get('ctp.otp.codeResent')}\n                <Icon type={`${PREFIX}checkmark_black`} height={14} width={14} />\n            </div>\n        );\n    }\n\n    if (counter > 0) {\n        return (\n            <div role=\"timer\" className=\"adyen-checkout-ctp__otp-resend-code--disabled\">\n                {i18n.get('ctp.otp.resendCode')} -{' '}\n                <span className=\"adyen-checkout-ctp__otp-resend-code-counter\"> {counter > 0 && `${counter}s`} </span>\n            </div>\n        );\n    }\n\n    return (\n        <Button\n            classNameModifiers={[classnames('otp-resend-code', { 'otp-resend-code--disabled': disabled })]}\n            onClick={handleResendCodeClick}\n            variant=\"link\"\n            inline={true}\n            disabled={disabled}\n        >\n            {i18n.get('ctp.otp.resendCode')}\n        </Button>\n    );\n};\n\nexport default CtPResendOtpLink;\n"],"names":["CtPResendOtpLink","onError","onResendCode","disabled","counter","setCounter","useState","showConfirmation","setShowConfirmation","i18n","useCoreContext","startIdentityValidation","useClickToPayContext","resendStatusMessage","setResendStatusMessage","useA11yReporter","useEffect","timeout","setTimeout","get","clearTimeout","handleResendCodeClick","useCallback","async","event","preventDefault","error","isSrciError","console","reason","h","div","role","className","Icon","type","PREFIX","height","width","span","Button","classNameModifiers","classnames","onClick","variant","inline"],"mappings":"opBAWA,MASMA,EAAmB,EAAGC,UAASC,eAAcC,eAC/C,MAAOC,EAASC,GAAcC,EAAwB,OAC/CC,EAAkBC,GAAuBF,GAAkB,IAC5DG,KAAEA,GAASC,KACXC,wBAAEA,GAA4BC,KAC7BC,EAAqBC,GAA0BR,EAAwB,MAC9ES,EAAgBF,GAEhBG,EAAU,KACN,IAAIC,EASJ,OARIb,EAAU,IACVa,EAAUC,WAAW,IAAMb,EAAWD,EAAU,GAAI,MAnB3B,KAqBzBA,EACAU,EAAuB,GAAGL,EAAKU,IAAI,2BAA2Bf,MAC3C,IAAZA,GACPU,EAAuBL,EAAKU,IAAI,uBAE7B,IAAMC,aAAaH,IAC3B,CAACb,IAEJY,EAAU,KACN,IAAIC,EAQJ,OANIV,IACAU,EAAUC,WAAW,KACjBV,GAAoB,GACpBH,EAnCqB,KADH,MAuCnB,IAAMe,aAAaH,IAC3B,CAACV,IAEJ,MAAMc,EAAwBC,EAC1BC,MAAOC,IACHA,EAAMC,iBAEN,IACIvB,IACAM,GAAoB,SACdG,GACV,CAAE,MAAOe,GAIL,GAHArB,EAAW,GACXG,GAAoB,IAEfmB,EAAYD,GAEb,YADAE,QAAQF,MAAMA,GAIlBzB,EAAQyB,EAAMG,OAClB,GAEJ,CAAClB,EAAyBV,EAASC,IAGvC,OAAIK,EAEIuB,EAACC,MAAAA,CAAIC,KAAK,QAAQC,UAAU,qDACvBxB,EAAKU,IAAI,sBACVW,EAACI,EAAAA,CAAKC,KAAM,GAAGC,mBAAyBC,OAAQ,GAAIC,MAAO,MAKnElC,EAAU,EAEN0B,EAACC,MAAAA,CAAIC,KAAK,QAAQC,UAAU,iDACvBxB,EAAKU,IAAI,sBAAsB,KAAG,IACnCW,EAACS,OAAAA,CAAKN,UAAU,+CAA8C,IAAE7B,EAAU,GAAK,GAAGA,KAAW,MAMrG0B,EAACU,EAAAA,CACGC,mBAAoB,CAACC,EAAW,kBAAmB,CAAE,4BAA6BvC,KAClFwC,QAAStB,EACTuB,QAAQ,OACRC,QAAQ,EACR1C,SAAUA,GAETM,EAAKU,IAAI"}

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 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};
+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"../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,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,autocomplete:"organization"})),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,autocomplete:void 0})))}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":"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"}
+{"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                        autocomplete={'organization'}\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                        autocomplete={undefined}\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","autocomplete","registrationNumber","undefined","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,EACZC,aAAc,kBAKzBnD,EAAe0C,SAAS,uBACrBJ,EAACK,EAAAA,CACG7C,MAAOI,EAAK0C,IAAI,qCAChBH,mBAAoB,CAAC,sBACrBI,eAAgBrC,EAAO4C,mBACvBlD,KAAMA,EACNuB,KAAMD,EAAkB,uBAExBc,EAACQ,EAAAA,CACGrB,KAAMD,EAAkB,sBACxBuB,MAAOzC,EAAK8C,mBACZX,mBAAoB,CAAC,sBACrBO,QAASf,EAAkB,SAC3BgB,OAAQvB,EAAa,QACrBwB,YAAY,EACZC,kBAAcE,KAMtC,CAEAzD,EAAe0D,aAAe,CAC1BhD,KAAM,CAAA,EACN+B,SAAU,OACVpC,WAAY,WACZD,eAAgBL,EAChBmB,gBAAiBD"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/internal/FormFields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './RadioGroup.scss';\nimport { RadioGroupProps } from './types';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function RadioGroup(props: Readonly<RadioGroupProps>) {\n    const { items, name, onChange, value, isInvalid, uniqueId, ariaLabel, style = 'classic' } = props;\n\n    const { i18n } = useCoreContext();\n    const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n    return (\n        <div\n            className={cx(['adyen-checkout__radio_group', `adyen-checkout__radio_group--${style}`])}\n            role={'radiogroup'}\n            {...(ariaLabel && { ['aria-label']: ariaLabel })}\n        >\n            {items.map(item => {\n                const uniqueId = getUniqueId(uniqueIdBase);\n                return (\n                    <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n                        <input\n                            id={uniqueId}\n                            type=\"radio\"\n                            checked={value === item.id}\n                            className=\"adyen-checkout__radio_group__input\"\n                            name={name}\n                            onChange={onChange}\n                            onClick={onChange}\n                            value={item.id}\n                        />\n                        <label\n                            className={cx([\n                                'adyen-checkout__label__text',\n                                'adyen-checkout__radio_group__label',\n                                props.className,\n                                { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n                            ])}\n                            htmlFor={uniqueId}\n                        >\n                            {i18n.get(item.name)}\n                        </label>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\nRadioGroup.defaultProps = {\n    onChange: () => {},\n    items: []\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","ariaLabel","style","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","cx","role","map","item","getUniqueId","key","id","input","type","checked","onClick","label","htmlFor","get","defaultProps"],"mappings":"iQAOe,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAQ,WAAcR,GAEtFS,KAAEA,GAASC,IACXC,EAAeL,GAAUM,QAAQ,SAAU,IAAIC,UAAU,EAAGP,EAASQ,YAAY,MAEvF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAG,CAAC,8BAA+B,gCAAgCV,MAC9EW,KAAM,gBACDZ,GAAa,CAAE,aAAgBA,IAEnCN,EAAMmB,IAAIC,IACP,MAAMf,EAAWgB,EAAYX,GAC7B,OACII,EAACC,MAAAA,CAAIO,IAAKF,EAAKG,GAAIP,UAAU,8CACzBF,EAACU,QAAAA,CACGD,GAAIlB,EACJoB,KAAK,QACLC,QAASvB,IAAUiB,EAAKG,GACxBP,UAAU,qCACVf,KAAMA,EACNC,SAAUA,EACVyB,QAASzB,EACTC,MAAOiB,EAAKG,KAEhBT,EAACc,QAAAA,CACGZ,UAAWC,EAAG,CACV,8BACA,qCACAlB,EAAMiB,UACN,CAAE,8CAA+CZ,KAErDyB,QAASxB,GAERG,EAAKsB,IAAIV,EAAKnB,UAO3C,CAEAH,EAAWiC,aAAe,CACtB7B,SAAU,OACVF,MAAO"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/internal/FormFields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './RadioGroup.scss';\nimport { RadioGroupProps } from './types';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function RadioGroup(props: Readonly<RadioGroupProps>) {\n    const { items, name, onChange, value, isInvalid, uniqueId, ariaLabel, style = 'classic' } = props;\n\n    const { i18n } = useCoreContext();\n    const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n    return (\n        <div\n            className={cx(['adyen-checkout__radio_group', `adyen-checkout__radio_group--${style}`])}\n            role={'radiogroup'}\n            {...(ariaLabel && { ['aria-label']: ariaLabel })}\n        >\n            {items.map(item => {\n                const uniqueId = getUniqueId(uniqueIdBase);\n                return (\n                    <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n                        <input\n                            id={uniqueId}\n                            type=\"radio\"\n                            checked={value === item.id}\n                            className=\"adyen-checkout__radio_group__input\"\n                            name={name}\n                            onChange={onChange}\n                            onClick={onChange}\n                            value={item.id}\n                        />\n                        <label\n                            className={cx([\n                                'adyen-checkout__label__text',\n                                'adyen-checkout__radio_group__label',\n                                props.className,\n                                { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n                            ])}\n                            htmlFor={uniqueId}\n                        >\n                            {i18n.get(item.name)}\n                        </label>\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n\nRadioGroup.defaultProps = {\n    onChange: () => {},\n    items: [],\n    autocomplete: undefined\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","ariaLabel","style","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","cx","role","map","item","getUniqueId","key","id","input","type","checked","onClick","label","htmlFor","get","defaultProps","autocomplete","undefined"],"mappings":"iQAOe,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,EAAQC,UAAEA,EAASC,MAAEA,EAAQ,WAAcR,GAEtFS,KAAEA,GAASC,IACXC,EAAeL,GAAUM,QAAQ,SAAU,IAAIC,UAAU,EAAGP,EAASQ,YAAY,MAEvF,OACIC,EAACC,MAAAA,CACGC,UAAWC,EAAG,CAAC,8BAA+B,gCAAgCV,MAC9EW,KAAM,gBACDZ,GAAa,CAAE,aAAgBA,IAEnCN,EAAMmB,IAAIC,IACP,MAAMf,EAAWgB,EAAYX,GAC7B,OACII,EAACC,MAAAA,CAAIO,IAAKF,EAAKG,GAAIP,UAAU,8CACzBF,EAACU,QAAAA,CACGD,GAAIlB,EACJoB,KAAK,QACLC,QAASvB,IAAUiB,EAAKG,GACxBP,UAAU,qCACVf,KAAMA,EACNC,SAAUA,EACVyB,QAASzB,EACTC,MAAOiB,EAAKG,KAEhBT,EAACc,QAAAA,CACGZ,UAAWC,EAAG,CACV,8BACA,qCACAlB,EAAMiB,UACN,CAAE,8CAA+CZ,KAErDyB,QAASxB,GAERG,EAAKsB,IAAIV,EAAKnB,UAO3C,CAEAH,EAAWiC,aAAe,CACtB7B,SAAU,OACVF,MAAO,GACPgC,kBAAcC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IbanInput.js","sources":["../../../../../src/components/internal/IbanInput/IbanInput.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../FormFields/Field';\nimport { checkIbanStatus, isValidHolder } from './validate';\nimport { electronicFormat, formatIban, getCountryCode, getNextCursorPosition } from './utils';\nimport Fieldset from '../FormFields/Fieldset';\nimport { GenericError } from '../../../core/Errors/types';\nimport InputText from '../FormFields/InputText';\n\ninterface IbanInputProps {\n    holderName?: boolean;\n    placeholders?: Omit<IbanData, 'countryCode'>;\n    countryCode?: string;\n    showPayButton?: boolean;\n    payButton?: any;\n    onChange: (data) => void;\n    label: string;\n    data: IbanData;\n}\n\ninterface IbanData {\n    ownerName?: string;\n    ibanNumber?: string;\n    countryCode?: string;\n}\n\ninterface IbanInputState {\n    data: any;\n    errors: any;\n    valid: any;\n    status: string;\n    isValid: boolean;\n    cursor: number;\n}\n\nconst ibanHolderNameErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'ach.accountHolderNameField.invalid', // TODO create bespoke translation key\n    error: 'ach.accountHolderNameField.invalid'\n};\n\nconst ibanErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'sepaDirectDebit.ibanField.invalid',\n    error: 'sepaDirectDebit.ibanField.invalid'\n};\n\nclass IbanInput extends Component<Readonly<IbanInputProps>, IbanInputState> {\n    private ibanNumber: HTMLInputElement;\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            status: 'ready',\n            data: {\n                ownerName: props?.data?.ownerName || '',\n                ibanNumber: props?.data?.ibanNumber || '',\n                countryCode: props?.data?.countryCode || ''\n            },\n            isValid: false,\n            cursor: 0,\n            errors: {},\n            valid: {}\n        };\n\n        if (this.state.data['ibanNumber']) {\n            const electronicFormatIban = electronicFormat(this.state.data['ibanNumber']); // example: NL13TEST0123456789\n            this.state.data['ibanNumber'] = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        }\n\n        if (this.state.data['ibanNumber'] || this.state.data['ownerName']) {\n            const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : '';\n            const ibanValid = this.state.data['ibanNumber'] ? checkIbanStatus(this.state.data['ibanNumber']).status === 'valid' : '';\n            const isValid = ibanValid && holderNameValid;\n            const data = { data: this.state.data, isValid };\n\n            this.props.onChange(data);\n        }\n    }\n\n    public static readonly defaultProps = {\n        onChange: () => {},\n        countryCode: null,\n        holderName: true,\n        placeholders: {},\n        label: null\n    };\n\n    setStatus(status) {\n        this.setState({ status });\n    }\n\n    onChange() {\n        const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : true;\n        const ibanValid = checkIbanStatus(this.state.data['ibanNumber']).status === 'valid';\n        const isValid = ibanValid && holderNameValid;\n        const data = { data: this.state.data, isValid, errors: this.state.errors };\n\n        this.props.onChange(data);\n    }\n\n    public setData = (key, value, cb?) => {\n        this.setState(prevState => ({ data: { ...prevState.data, [key]: value } }), cb);\n    };\n\n    public setError = (key, value, cb?) => {\n        this.setState(prevState => ({ errors: { ...prevState.errors, [key]: value } }), cb);\n    };\n\n    public setValid = (key, value, cb?) => {\n        this.setState(prevState => ({ valid: { ...prevState.valid, [key]: value } }), cb);\n    };\n\n    public handleHolderInput = holder => {\n        this.setState(\n            prevState => ({ data: { ...prevState.data, ownerName: holder } }),\n            () => {\n                const holderStatus = isValidHolder(this.state.data['ownerName']);\n                const holderErr =\n                    holderStatus != null && !holderStatus // *don't* consider null, i.e. a value that has just been deleted, to be in error\n                        ? ibanHolderNameErrorObj\n                        : null;\n\n                this.setError('holder', holderErr, this.onChange);\n            }\n        );\n    };\n\n    public handleIbanInput = e => {\n        const inputValue = e.target.value;\n        const electronicFormatIban = electronicFormat(inputValue); // example: NL13TEST0123456789\n        const iban = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        const validationStatus = checkIbanStatus(iban).status;\n\n        const countryCode = getCountryCode(electronicFormatIban);\n\n        // calculate cursor's new position\n        const cursor = e.target.selectionStart;\n        const previousIban = this.state.data['ibanNumber'];\n        const newCursorPosition = getNextCursorPosition(cursor, iban, previousIban);\n\n        this.setState(\n            prevState => ({\n                data: { ...prevState.data, ibanNumber: iban, countryCode: countryCode },\n                errors: {\n                    ...prevState.errors,\n                    iban: validationStatus === 'invalid' ? ibanErrorObj : null\n                },\n                valid: { ...prevState.valid, iban: validationStatus === 'valid' }\n            }),\n            () => {\n                e.target.setSelectionRange(newCursorPosition, newCursorPosition);\n                this.onChange();\n            }\n        );\n    };\n\n    public handleIbanBlur = e => {\n        const currentIban = e.target.value;\n\n        if (currentIban.length > 0) {\n            const validationStatus = checkIbanStatus(currentIban).status;\n            this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null, this.onChange);\n        } else {\n            // Empty field is not in error\n            this.setError('iban', null, this.onChange);\n        }\n    };\n\n    showValidation() {\n        const validationStatus = checkIbanStatus(this.state.data['ibanNumber']).status;\n        const holderStatus = isValidHolder(this.state.data['ownerName']);\n        this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null);\n\n        const holderErr = !holderStatus // *do* consider null, i.e. an empty field, to be in error\n            ? ibanHolderNameErrorObj\n            : null;\n\n        this.setError('holder', holderErr, this.onChange); // add callback param to force propagation of state to parent comp\n    }\n\n    render({ placeholders }: IbanInputProps, { data, errors, valid }) {\n        const { i18n } = useCoreContext();\n        return (\n            <Fieldset classNameModifiers={['iban-input']} label={this.props.label}>\n                {this.props.holderName && (\n                    <Field\n                        className={'adyen-checkout__field--owner-name'}\n                        label={i18n.get('sepa.ownerName')}\n                        filled={data['ownerName'] && data['ownerName'].length}\n                        errorMessage={errors.holder ? i18n.get(errors.holder.error) : false}\n                        dir={'ltr'}\n                        i18n={i18n}\n                        name={'ownerName'}\n                    >\n                        <InputText\n                            name={'ownerName'}\n                            className={'adyen-checkout__iban-input__owner-name'}\n                            placeholder={placeholders?.ownerName}\n                            value={data['ownerName']}\n                            aria-invalid={!!this.state.errors.holder}\n                            aria-label={i18n.get('sepa.ownerName')}\n                            onInput={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                            onBlur={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                        />\n                    </Field>\n                )}\n\n                <Field\n                    className={'adyen-checkout__field--iban-number'}\n                    label={i18n.get('sepa.ibanNumber')}\n                    errorMessage={errors.iban ? i18n.get(errors.iban.error) : false}\n                    filled={data['ibanNumber'] && data['ibanNumber'].length}\n                    isValid={valid.iban}\n                    onBlur={this.handleIbanBlur}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'ibanNumber'}\n                >\n                    <InputText\n                        setRef={ref => {\n                            this.ibanNumber = ref;\n                        }}\n                        name={'ibanNumber'}\n                        className={'adyen-checkout__iban-input__iban-number'}\n                        classNameModifiers={['large']}\n                        placeholder={placeholders?.ibanNumber}\n                        value={data['ibanNumber']}\n                        onInput={this.handleIbanInput}\n                        aria-invalid={!!this.state.errors.iban}\n                        aria-label={i18n.get('sepa.ibanNumber')}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                    />\n                </Field>\n\n                {this.props.showPayButton && this.props.payButton({ status: this.state.status })}\n            </Fieldset>\n        );\n    }\n}\n\nexport default IbanInput;\n"],"names":["ibanHolderNameErrorObj","isValid","errorMessage","error","ibanErrorObj","IbanInput","Component","setStatus","status","this","setState","onChange","holderNameValid","props","holderName","isValidHolder","state","data","checkIbanStatus","errors","showValidation","validationStatus","holderStatus","setError","holderErr","render","placeholders","valid","i18n","useCoreContext","h","Fieldset","classNameModifiers","label","Field","className","get","filled","length","holder","dir","name","InputText","placeholder","ownerName","value","aria-invalid","aria-label","onInput","e","handleHolderInput","target","onBlur","iban","handleIbanBlur","setRef","ref","ibanNumber","handleIbanInput","autocorrect","spellcheck","showPayButton","payButton","constructor","super","_define_property","setData","key","cb","prevState","setValid","inputValue","electronicFormatIban","electronicFormat","formatIban","countryCode","getCountryCode","cursor","selectionStart","previousIban","newCursorPosition","getNextCursorPosition","setSelectionRange","currentIban","defaultProps"],"mappings":"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"}
+{"version":3,"file":"IbanInput.js","sources":["../../../../../src/components/internal/IbanInput/IbanInput.tsx"],"sourcesContent":["import { Component, h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../FormFields/Field';\nimport { checkIbanStatus, isValidHolder } from './validate';\nimport { electronicFormat, formatIban, getCountryCode, getNextCursorPosition } from './utils';\nimport Fieldset from '../FormFields/Fieldset';\nimport { GenericError } from '../../../core/Errors/types';\nimport InputText from '../FormFields/InputText';\n\ninterface IbanInputProps {\n    holderName?: boolean;\n    placeholders?: Omit<IbanData, 'countryCode'>;\n    countryCode?: string;\n    showPayButton?: boolean;\n    payButton?: any;\n    onChange: (data) => void;\n    label: string;\n    data: IbanData;\n}\n\ninterface IbanData {\n    ownerName?: string;\n    ibanNumber?: string;\n    countryCode?: string;\n}\n\ninterface IbanInputState {\n    data: any;\n    errors: any;\n    valid: any;\n    status: string;\n    isValid: boolean;\n    cursor: number;\n}\n\nconst ibanHolderNameErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'ach.accountHolderNameField.invalid', // TODO create bespoke translation key\n    error: 'ach.accountHolderNameField.invalid'\n};\n\nconst ibanErrorObj: GenericError = {\n    isValid: false,\n    errorMessage: 'sepaDirectDebit.ibanField.invalid',\n    error: 'sepaDirectDebit.ibanField.invalid'\n};\n\nclass IbanInput extends Component<Readonly<IbanInputProps>, IbanInputState> {\n    private ibanNumber: HTMLInputElement;\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            status: 'ready',\n            data: {\n                ownerName: props?.data?.ownerName || '',\n                ibanNumber: props?.data?.ibanNumber || '',\n                countryCode: props?.data?.countryCode || ''\n            },\n            isValid: false,\n            cursor: 0,\n            errors: {},\n            valid: {}\n        };\n\n        if (this.state.data['ibanNumber']) {\n            const electronicFormatIban = electronicFormat(this.state.data['ibanNumber']); // example: NL13TEST0123456789\n            this.state.data['ibanNumber'] = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        }\n\n        if (this.state.data['ibanNumber'] || this.state.data['ownerName']) {\n            const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : '';\n            const ibanValid = this.state.data['ibanNumber'] ? checkIbanStatus(this.state.data['ibanNumber']).status === 'valid' : '';\n            const isValid = ibanValid && holderNameValid;\n            const data = { data: this.state.data, isValid };\n\n            this.props.onChange(data);\n        }\n    }\n\n    public static readonly defaultProps = {\n        onChange: () => {},\n        countryCode: null,\n        holderName: true,\n        placeholders: {},\n        label: null\n    };\n\n    setStatus(status) {\n        this.setState({ status });\n    }\n\n    onChange() {\n        const holderNameValid = this.props.holderName ? isValidHolder(this.state.data['ownerName']) : true;\n        const ibanValid = checkIbanStatus(this.state.data['ibanNumber']).status === 'valid';\n        const isValid = ibanValid && holderNameValid;\n        const data = { data: this.state.data, isValid, errors: this.state.errors };\n\n        this.props.onChange(data);\n    }\n\n    public setData = (key, value, cb?) => {\n        this.setState(prevState => ({ data: { ...prevState.data, [key]: value } }), cb);\n    };\n\n    public setError = (key, value, cb?) => {\n        this.setState(prevState => ({ errors: { ...prevState.errors, [key]: value } }), cb);\n    };\n\n    public setValid = (key, value, cb?) => {\n        this.setState(prevState => ({ valid: { ...prevState.valid, [key]: value } }), cb);\n    };\n\n    public handleHolderInput = holder => {\n        this.setState(\n            prevState => ({ data: { ...prevState.data, ownerName: holder } }),\n            () => {\n                const holderStatus = isValidHolder(this.state.data['ownerName']);\n                const holderErr =\n                    holderStatus != null && !holderStatus // *don't* consider null, i.e. a value that has just been deleted, to be in error\n                        ? ibanHolderNameErrorObj\n                        : null;\n\n                this.setError('holder', holderErr, this.onChange);\n            }\n        );\n    };\n\n    public handleIbanInput = e => {\n        const inputValue = e.target.value;\n        const electronicFormatIban = electronicFormat(inputValue); // example: NL13TEST0123456789\n        const iban = formatIban(electronicFormatIban); // example: NL13 TEST 0123 4567 89\n        const validationStatus = checkIbanStatus(iban).status;\n\n        const countryCode = getCountryCode(electronicFormatIban);\n\n        // calculate cursor's new position\n        const cursor = e.target.selectionStart;\n        const previousIban = this.state.data['ibanNumber'];\n        const newCursorPosition = getNextCursorPosition(cursor, iban, previousIban);\n\n        this.setState(\n            prevState => ({\n                data: { ...prevState.data, ibanNumber: iban, countryCode: countryCode },\n                errors: {\n                    ...prevState.errors,\n                    iban: validationStatus === 'invalid' ? ibanErrorObj : null\n                },\n                valid: { ...prevState.valid, iban: validationStatus === 'valid' }\n            }),\n            () => {\n                e.target.setSelectionRange(newCursorPosition, newCursorPosition);\n                this.onChange();\n            }\n        );\n    };\n\n    public handleIbanBlur = e => {\n        const currentIban = e.target.value;\n\n        if (currentIban.length > 0) {\n            const validationStatus = checkIbanStatus(currentIban).status;\n            this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null, this.onChange);\n        } else {\n            // Empty field is not in error\n            this.setError('iban', null, this.onChange);\n        }\n    };\n\n    showValidation() {\n        const validationStatus = checkIbanStatus(this.state.data['ibanNumber']).status;\n        const holderStatus = isValidHolder(this.state.data['ownerName']);\n        this.setError('iban', validationStatus !== 'valid' ? ibanErrorObj : null);\n\n        const holderErr = !holderStatus // *do* consider null, i.e. an empty field, to be in error\n            ? ibanHolderNameErrorObj\n            : null;\n\n        this.setError('holder', holderErr, this.onChange); // add callback param to force propagation of state to parent comp\n    }\n\n    render({ placeholders }: IbanInputProps, { data, errors, valid }) {\n        const { i18n } = useCoreContext();\n        return (\n            <Fieldset classNameModifiers={['iban-input']} label={this.props.label}>\n                {this.props.holderName && (\n                    <Field\n                        className={'adyen-checkout__field--owner-name'}\n                        label={i18n.get('sepa.ownerName')}\n                        filled={data['ownerName'] && data['ownerName'].length}\n                        errorMessage={errors.holder ? i18n.get(errors.holder.error) : false}\n                        dir={'ltr'}\n                        i18n={i18n}\n                        name={'ownerName'}\n                    >\n                        <InputText\n                            name={'ownerName'}\n                            className={'adyen-checkout__iban-input__owner-name'}\n                            placeholder={placeholders?.ownerName}\n                            value={data['ownerName']}\n                            aria-invalid={!!this.state.errors.holder}\n                            aria-label={i18n.get('sepa.ownerName')}\n                            onInput={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                            onBlur={e => this.handleHolderInput((e.target as HTMLInputElement).value)}\n                            autocomplete={'name'}\n                        />\n                    </Field>\n                )}\n\n                <Field\n                    className={'adyen-checkout__field--iban-number'}\n                    label={i18n.get('sepa.ibanNumber')}\n                    errorMessage={errors.iban ? i18n.get(errors.iban.error) : false}\n                    filled={data['ibanNumber'] && data['ibanNumber'].length}\n                    isValid={valid.iban}\n                    onBlur={this.handleIbanBlur}\n                    dir={'ltr'}\n                    i18n={i18n}\n                    name={'ibanNumber'}\n                >\n                    <InputText\n                        setRef={ref => {\n                            this.ibanNumber = ref;\n                        }}\n                        name={'ibanNumber'}\n                        className={'adyen-checkout__iban-input__iban-number'}\n                        classNameModifiers={['large']}\n                        placeholder={placeholders?.ibanNumber}\n                        value={data['ibanNumber']}\n                        onInput={this.handleIbanInput}\n                        aria-invalid={!!this.state.errors.iban}\n                        aria-label={i18n.get('sepa.ibanNumber')}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                        autocomplete={undefined}\n                    />\n                </Field>\n\n                {this.props.showPayButton && this.props.payButton({ status: this.state.status })}\n            </Fieldset>\n        );\n    }\n}\n\nexport default IbanInput;\n"],"names":["ibanHolderNameErrorObj","isValid","errorMessage","error","ibanErrorObj","IbanInput","Component","setStatus","status","this","setState","onChange","holderNameValid","props","holderName","isValidHolder","state","data","checkIbanStatus","errors","showValidation","validationStatus","holderStatus","setError","holderErr","render","placeholders","valid","i18n","useCoreContext","h","Fieldset","classNameModifiers","label","Field","className","get","filled","length","holder","dir","name","InputText","placeholder","ownerName","value","aria-invalid","aria-label","onInput","e","handleHolderInput","target","onBlur","autocomplete","iban","handleIbanBlur","setRef","ref","ibanNumber","handleIbanInput","autocorrect","spellcheck","undefined","showPayButton","payButton","constructor","super","_define_property","setData","key","cb","prevState","setValid","inputValue","electronicFormatIban","electronicFormat","formatIban","countryCode","getCountryCode","cursor","selectionStart","previousIban","newCursorPosition","getNextCursorPosition","setSelectionRange","currentIban","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/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"../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};
+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 l from"../FormFields/Fieldset/Fieldset.js";import s 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 p}from"./utils.js";import d 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:v}=m(),E=r(n,[]),{handleChangeFor:O,triggerValidation:I,data:C,valid:q,errors:x,isValid:y}=d({schema:B,rules:{...o,...b.validationRules},defaultData:b.data}),D=a({showValidation:()=>{I()}});t(()=>{b.setComponentRef(D.current)},[b.setComponentRef]);const R=e=>r=>{const{name:a}=r.target,t=a.split(`${F}.`).pop();O(t,e)(r)},k=e=>`${F?`${F}.`:""}${e}`;return t(()=>{const e=p(C);b.onChange({data:e,valid:q,errors:x,isValid:y})},[C,q,x,y]),"hidden"===j?null:"readOnly"===j?e(i,{...b,data:C}):e(l,{classNameModifiers:["personalDetails"],label:g},B.includes("firstName")&&e(s,{label:v.get("firstName"),classNameModifiers:["col-50","firstName"],errorMessage:N(v,x.firstName,v.get("firstName")),name:"firstName",i18n:v},e(u,{name:k("firstName"),value:C.firstName,classNameModifiers:["firstName"],onInput:R("input"),onBlur:R("blur"),placeholder:M.firstName,spellcheck:!1,required:!0,autocomplete:"given-name"})),B.includes("lastName")&&e(s,{label:v.get("lastName"),classNameModifiers:["col-50","lastName"],errorMessage:N(v,x.lastName,v.get("lastName")),name:"lastName",i18n:v},e(u,{name:k("lastName"),value:C.lastName,classNameModifiers:["lastName"],onInput:R("input"),onBlur:R("blur"),placeholder:M.lastName,spellcheck:!1,required:!0,autocomplete:"family-name"})),B.includes("dateOfBirth")&&e(s,{label:v.get("dateOfBirth"),classNameModifiers:["col-50","dateOfBirth"],errorMessage:N(v,x.dateOfBirth,v.get("dateOfBirth")),helper:E?null:v.get("dateOfBirth.format"),name:"dateOfBirth",i18n:v},e(f,{name:k("dateOfBirth"),value:C.dateOfBirth,classNameModifiers:["dateOfBirth"],onInput:R("input"),onBlur:R("blur"),placeholder:M.dateOfBirth,required:!0,autocomplete:"bday"})),B.includes("shopperEmail")&&e(s,{label:v.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:N(v,x.shopperEmail,v.get("shopperEmail")),dir:"ltr",name:"emailAddress",i18n:v},e(h,{name:k("shopperEmail"),value:C.shopperEmail,classNameModifiers:["shopperEmail"],onInput:R("input"),onBlur:R("blur"),placeholder:M.shopperEmail,required:!0,autocomplete:"email"})),B.includes("telephoneNumber")&&e(s,{label:v.get("telephoneNumber"),classNameModifiers:["telephoneNumber"],errorMessage:N(v,x.telephoneNumber,v.get("telephoneNumber")),dir:"ltr",name:"telephoneNumber",i18n:v},e(c,{name:k("telephoneNumber"),value:C.telephoneNumber,classNameModifiers:["telephoneNumber"],onInput:R("input"),onBlur:R("blur"),placeholder:M.telephoneNumber,required:!0,autocomplete:"tel"})))}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                        autocomplete={'given-name'}\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                        autocomplete={'family-name'}\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                        autocomplete={'bday'}\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                        autocomplete={'email'}\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                        autocomplete={'tel'}\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","autocomplete","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 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};
+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 l from"../FormFields/Select/Select.js";import a from"../FormFields/InputText.js";function p({getError:p,showNumber:i,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:p("phonePrefix"),showValidIcon:!1,isValid:N.phonePrefix,dir:"ltr",i18n:d,name:"phonePrefix",errorLive:s},e(l,{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})),i&&e(n,{className:"adyen-checkout-field--phone-number",label:c.phoneNumberKey?d.get(c.phoneNumberKey):d.get("telephoneNumber"),errorMessage:p("phoneNumber"),isValid:N.phoneNumber,filled:b?.phoneNumber?.length>0,dir:"ltr",i18n:d,name:"phoneNumber",errorLive:s},e(a,{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,autocomplete:"tel"})))}export{p 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    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"}
+{"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                        autocomplete={'tel'}\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","autocomplete"],"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,EACVC,aAAc,SAMtC"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import o from"../../../_virtual/index.js";import{useState as r}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as s}from"../../../core/Context/CoreProvider.js";import a from"../FormFields/Field/Field.js";import t from"../FormFields/Checkbox/Checkbox.js";import l from"../FormFields/InputEmail.js";import{getErrorMessage as m}from"../../../utils/getErrorMessage.js";function i(i){const{errors:n,value:p,onInput:c,onBlur:d}=i,{i18n:u}=s(),[f,h]=r(!1);return e("div",{className:o("adyen-checkout__fieldset","adyen-checkout__fieldset--sendCopyToEmail",i.classNames)},e(a,{classNameModifiers:["sendCopyToEmail","consentCheckbox"],name:"sendCopyToEmail",useLabelElement:!1,showErrorElement:!1},e(t,{onChange:e=>{h(e.target.checked),i.onToggle(f)},label:u.get("boleto.sendCopyToEmail"),name:"sendCopyToEmail"})),f&&e(a,{label:u.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:m(u,n,u.get("shopperEmail")),name:"shopperEmail"},e(l,{name:"shopperEmail",autoCorrect:"off",spellcheck:!1,value:p,onInput:c,onBlur:d})))}export{i as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import o from"../../../_virtual/index.js";import{useState as r}from"../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as s}from"../../../core/Context/CoreProvider.js";import a from"../FormFields/Field/Field.js";import t from"../FormFields/Checkbox/Checkbox.js";import l from"../FormFields/InputEmail.js";import{getErrorMessage as m}from"../../../utils/getErrorMessage.js";function i(i){const{errors:n,value:p,onInput:c,onBlur:d}=i,{i18n:u}=s(),[f,h]=r(!1);return e("div",{className:o("adyen-checkout__fieldset","adyen-checkout__fieldset--sendCopyToEmail",i.classNames)},e(a,{classNameModifiers:["sendCopyToEmail","consentCheckbox"],name:"sendCopyToEmail",useLabelElement:!1,showErrorElement:!1},e(t,{onChange:e=>{h(e.target.checked),i.onToggle(f)},label:u.get("boleto.sendCopyToEmail"),name:"sendCopyToEmail"})),f&&e(a,{label:u.get("shopperEmail"),classNameModifiers:["shopperEmail"],errorMessage:m(u,n,u.get("shopperEmail")),name:"shopperEmail"},e(l,{name:"shopperEmail",autoCorrect:"off",spellcheck:!1,value:p,onInput:c,onBlur:d,autocomplete:"email"})))}export{i as default};
 //# sourceMappingURL=SendCopyToEmail.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SendCopyToEmail.js","sources":["../../../../../src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport { useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../FormFields/Field';\nimport Checkbox from '../FormFields/Checkbox';\nimport InputEmail from '../FormFields/InputEmail';\nimport './SendCopyToEmail.scss';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\n\nexport default function SendCopyToEmail(props) {\n    const { errors, value, onInput, onBlur } = props;\n    const { i18n } = useCoreContext();\n    const [sendCopyToEmail, setSendCopyToEmail] = useState(false);\n\n    const toggleEmailField = e => {\n        setSendCopyToEmail(e.target.checked);\n        props.onToggle(sendCopyToEmail);\n    };\n\n    return (\n        <div className={cx('adyen-checkout__fieldset', 'adyen-checkout__fieldset--sendCopyToEmail', props.classNames)}>\n            <Field\n                classNameModifiers={['sendCopyToEmail', 'consentCheckbox']}\n                name={'sendCopyToEmail'}\n                useLabelElement={false}\n                showErrorElement={false}\n            >\n                <Checkbox onChange={toggleEmailField} label={i18n.get('boleto.sendCopyToEmail')} name={'sendCopyToEmail'} />\n            </Field>\n\n            {sendCopyToEmail && (\n                <Field\n                    label={i18n.get('shopperEmail')}\n                    classNameModifiers={['shopperEmail']}\n                    errorMessage={getErrorMessage(i18n, errors, i18n.get('shopperEmail'))}\n                    name={'shopperEmail'}\n                >\n                    <InputEmail name={'shopperEmail'} autoCorrect={'off'} spellcheck={false} value={value} onInput={onInput} onBlur={onBlur} />\n                </Field>\n            )}\n        </div>\n    );\n}\n"],"names":["SendCopyToEmail","props","errors","value","onInput","onBlur","i18n","useCoreContext","sendCopyToEmail","setSendCopyToEmail","useState","h","div","className","cx","classNames","Field","classNameModifiers","name","useLabelElement","showErrorElement","Checkbox","onChange","e","target","checked","onToggle","label","get","errorMessage","getErrorMessage","InputEmail","autoCorrect","spellcheck"],"mappings":"8cAUe,SAASA,EAAgBC,GACpC,MAAMC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,EAAOC,OAAEA,GAAWJ,GACrCK,KAAEA,GAASC,KACVC,EAAiBC,GAAsBC,GAAS,GAOvD,OACIC,EAACC,MAAAA,CAAIC,UAAWC,EAAG,2BAA4B,4CAA6Cb,EAAMc,aAC9FJ,EAACK,EAAAA,CACGC,mBAAoB,CAAC,kBAAmB,mBACxCC,KAAM,kBACNC,iBAAiB,EACjBC,kBAAkB,GAElBT,EAACU,EAAAA,CAASC,SAbGC,IACrBd,EAAmBc,EAAEC,OAAOC,SAC5BxB,EAAMyB,SAASlB,IAW+BmB,MAAOrB,EAAKsB,IAAI,0BAA2BV,KAAM,qBAG1FV,GACGG,EAACK,EAAAA,CACGW,MAAOrB,EAAKsB,IAAI,gBAChBX,mBAAoB,CAAC,gBACrBY,aAAcC,EAAgBxB,EAAMJ,EAAQI,EAAKsB,IAAI,iBACrDV,KAAM,gBAENP,EAACoB,EAAAA,CAAWb,KAAM,eAAgBc,YAAa,MAAOC,YAAY,EAAO9B,MAAOA,EAAOC,QAASA,EAASC,OAAQA,KAKrI"}
+{"version":3,"file":"SendCopyToEmail.js","sources":["../../../../../src/components/internal/SendCopyToEmail/SendCopyToEmail.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport { useState } from 'preact/hooks';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport Field from '../FormFields/Field';\nimport Checkbox from '../FormFields/Checkbox';\nimport InputEmail from '../FormFields/InputEmail';\nimport './SendCopyToEmail.scss';\nimport { getErrorMessage } from '../../../utils/getErrorMessage';\n\nexport default function SendCopyToEmail(props) {\n    const { errors, value, onInput, onBlur } = props;\n    const { i18n } = useCoreContext();\n    const [sendCopyToEmail, setSendCopyToEmail] = useState(false);\n\n    const toggleEmailField = e => {\n        setSendCopyToEmail(e.target.checked);\n        props.onToggle(sendCopyToEmail);\n    };\n\n    return (\n        <div className={cx('adyen-checkout__fieldset', 'adyen-checkout__fieldset--sendCopyToEmail', props.classNames)}>\n            <Field\n                classNameModifiers={['sendCopyToEmail', 'consentCheckbox']}\n                name={'sendCopyToEmail'}\n                useLabelElement={false}\n                showErrorElement={false}\n            >\n                <Checkbox onChange={toggleEmailField} label={i18n.get('boleto.sendCopyToEmail')} name={'sendCopyToEmail'} />\n            </Field>\n\n            {sendCopyToEmail && (\n                <Field\n                    label={i18n.get('shopperEmail')}\n                    classNameModifiers={['shopperEmail']}\n                    errorMessage={getErrorMessage(i18n, errors, i18n.get('shopperEmail'))}\n                    name={'shopperEmail'}\n                >\n                    <InputEmail\n                        name={'shopperEmail'}\n                        autoCorrect={'off'}\n                        spellcheck={false}\n                        value={value}\n                        onInput={onInput}\n                        onBlur={onBlur}\n                        autocomplete={'email'}\n                    />\n                </Field>\n            )}\n        </div>\n    );\n}\n"],"names":["SendCopyToEmail","props","errors","value","onInput","onBlur","i18n","useCoreContext","sendCopyToEmail","setSendCopyToEmail","useState","h","div","className","cx","classNames","Field","classNameModifiers","name","useLabelElement","showErrorElement","Checkbox","onChange","e","target","checked","onToggle","label","get","errorMessage","getErrorMessage","InputEmail","autoCorrect","spellcheck","autocomplete"],"mappings":"8cAUe,SAASA,EAAgBC,GACpC,MAAMC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,EAAOC,OAAEA,GAAWJ,GACrCK,KAAEA,GAASC,KACVC,EAAiBC,GAAsBC,GAAS,GAOvD,OACIC,EAACC,MAAAA,CAAIC,UAAWC,EAAG,2BAA4B,4CAA6Cb,EAAMc,aAC9FJ,EAACK,EAAAA,CACGC,mBAAoB,CAAC,kBAAmB,mBACxCC,KAAM,kBACNC,iBAAiB,EACjBC,kBAAkB,GAElBT,EAACU,EAAAA,CAASC,SAbGC,IACrBd,EAAmBc,EAAEC,OAAOC,SAC5BxB,EAAMyB,SAASlB,IAW+BmB,MAAOrB,EAAKsB,IAAI,0BAA2BV,KAAM,qBAG1FV,GACGG,EAACK,EAAAA,CACGW,MAAOrB,EAAKsB,IAAI,gBAChBX,mBAAoB,CAAC,gBACrBY,aAAcC,EAAgBxB,EAAMJ,EAAQI,EAAKsB,IAAI,iBACrDV,KAAM,gBAENP,EAACoB,EAAAA,CACGb,KAAM,eACNc,YAAa,MACbC,YAAY,EACZ9B,MAAOA,EACPC,QAASA,EACTC,OAAQA,EACR6B,aAAc,WAMtC"}

package/dist/es/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js

@@ -1,2 +1,2 @@
-import e from"../FormFields/Field/Field.js";import a from"./SocialSecurityNumberBrazil.js";import{createElement as r}from"../../../external/preact/dist/preact.js";import t from"../FormFields/InputText.js";import s from"../FormFields/Fieldset/Fieldset.js";function l(l){const{i18n:i,data:o,handleChangeFor:m,errors:c,valid:u}=l,n=e=>e&&e.errorMessage?i.get(e.errorMessage):!!e;return r("div",{className:"adyen-checkout__fieldset adyen-checkout__fieldset--address adyen-checkout__fieldset--personalDetails"},r("div",{className:"adyen-checkout__fieldset__title"},i.get("personalDetails")),r(s,null,r(e,{label:i.get("firstName"),classNameModifiers:["firstName","col-50"],errorMessage:n(c.firstName),name:"firstName"},r(t,{name:"firstName",autocorrect:"off",spellcheck:!1,value:o.firstName,onInput:m("firstName","input"),onBlur:m("firstName","blur")})),r(e,{label:i.get("lastName"),classNameModifiers:["lastName","col-50"],errorMessage:n(c.lastName),name:"lastName"},r(t,{name:"lastName",autocorrect:"off",spellcheck:!1,value:o.lastName,onInput:m("lastName","input"),onBlur:m("lastName","blur")})),r(a,{data:o.socialSecurityNumber,error:c.socialSecurityNumber,valid:u.socialSecurityNumber,onInput:m("socialSecurityNumber","input"),onBlur:m("socialSecurityNumber","blur")})))}export{l as BrazilPersonalDetail};
+import e from"../FormFields/Field/Field.js";import a from"./SocialSecurityNumberBrazil.js";import{createElement as r}from"../../../external/preact/dist/preact.js";import t from"../FormFields/InputText.js";import s from"../FormFields/Fieldset/Fieldset.js";function l(l){const{i18n:i,data:o,handleChangeFor:m,errors:c,valid:u}=l,n=e=>e&&e.errorMessage?i.get(e.errorMessage):!!e;return r("div",{className:"adyen-checkout__fieldset adyen-checkout__fieldset--address adyen-checkout__fieldset--personalDetails"},r("div",{className:"adyen-checkout__fieldset__title"},i.get("personalDetails")),r(s,null,r(e,{label:i.get("firstName"),classNameModifiers:["firstName","col-50"],errorMessage:n(c.firstName),name:"firstName"},r(t,{name:"firstName",autocorrect:"off",spellcheck:!1,value:o.firstName,onInput:m("firstName","input"),onBlur:m("firstName","blur"),autocomplete:"given-name"})),r(e,{label:i.get("lastName"),classNameModifiers:["lastName","col-50"],errorMessage:n(c.lastName),name:"lastName"},r(t,{name:"lastName",autocorrect:"off",spellcheck:!1,value:o.lastName,onInput:m("lastName","input"),onBlur:m("lastName","blur"),autocomplete:"family-name"})),r(a,{data:o.socialSecurityNumber,error:c.socialSecurityNumber,valid:u.socialSecurityNumber,onInput:m("socialSecurityNumber","input"),onBlur:m("socialSecurityNumber","blur")})))}export{l as BrazilPersonalDetail};
 //# sourceMappingURL=BrazilPersonalDetail.js.map

package/dist/es/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrazilPersonalDetail.js","sources":["../../../../../src/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.tsx"],"sourcesContent":["import Field from '../FormFields/Field';\nimport SocialSecurityNumberBrazil from './SocialSecurityNumberBrazil';\nimport { h } from 'preact';\nimport InputText from '../FormFields/InputText';\nimport Fieldset from '../FormFields/Fieldset';\n\nexport function BrazilPersonalDetail(props) {\n    const { i18n, data, handleChangeFor, errors, valid } = props;\n    const getErrorMessage = error => (error && error.errorMessage ? i18n.get(error.errorMessage) : !!error);\n    return (\n        <div className={'adyen-checkout__fieldset adyen-checkout__fieldset--address adyen-checkout__fieldset--personalDetails'}>\n            <div className=\"adyen-checkout__fieldset__title\">{i18n.get('personalDetails')}</div>\n\n            <Fieldset>\n                <Field\n                    label={i18n.get('firstName')}\n                    classNameModifiers={['firstName', 'col-50']}\n                    errorMessage={getErrorMessage(errors.firstName)}\n                    name={'firstName'}\n                >\n                    <InputText\n                        name={'firstName'}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                        value={data.firstName}\n                        onInput={handleChangeFor('firstName', 'input')}\n                        onBlur={handleChangeFor('firstName', 'blur')}\n                    />\n                </Field>\n\n                <Field\n                    label={i18n.get('lastName')}\n                    classNameModifiers={['lastName', 'col-50']}\n                    errorMessage={getErrorMessage(errors.lastName)}\n                    name={'lastName'}\n                >\n                    <InputText\n                        name={'lastName'}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                        value={data.lastName}\n                        onInput={handleChangeFor('lastName', 'input')}\n                        onBlur={handleChangeFor('lastName', 'blur')}\n                    />\n                </Field>\n                <SocialSecurityNumberBrazil\n                    data={data.socialSecurityNumber}\n                    error={errors.socialSecurityNumber}\n                    valid={valid.socialSecurityNumber}\n                    onInput={handleChangeFor('socialSecurityNumber', 'input')}\n                    onBlur={handleChangeFor('socialSecurityNumber', 'blur')}\n                />\n            </Fieldset>\n        </div>\n    );\n}\n"],"names":["BrazilPersonalDetail","props","i18n","data","handleChangeFor","errors","valid","getErrorMessage","error","errorMessage","get","h","div","className","Fieldset","Field","label","classNameModifiers","firstName","name","InputText","autocorrect","spellcheck","value","onInput","onBlur","lastName","SocialSecurityNumberBrazil","socialSecurityNumber"],"mappings":"+PAMO,SAASA,EAAqBC,GACjC,MAAMC,KAAEA,EAAIC,KAAEA,EAAIC,gBAAEA,EAAeC,OAAEA,EAAMC,MAAEA,GAAUL,EACjDM,EAAkBC,GAAUA,GAASA,EAAMC,aAAeP,EAAKQ,IAAIF,EAAMC,gBAAkBD,EACjG,OACIG,EAACC,MAAAA,CAAIC,UAAW,wGACZF,EAACC,MAAAA,CAAIC,UAAU,mCAAmCX,EAAKQ,IAAI,oBAE3DC,EAACG,OACGH,EAACI,EAAAA,CACGC,MAAOd,EAAKQ,IAAI,aAChBO,mBAAoB,CAAC,YAAa,UAClCR,aAAcF,EAAgBF,EAAOa,WACrCC,KAAM,aAENR,EAACS,EAAAA,CACGD,KAAM,YACNE,YAAa,MACbC,YAAY,EACZC,MAAOpB,EAAKe,UACZM,QAASpB,EAAgB,YAAa,SACtCqB,OAAQrB,EAAgB,YAAa,WAI7CO,EAACI,EAAAA,CACGC,MAAOd,EAAKQ,IAAI,YAChBO,mBAAoB,CAAC,WAAY,UACjCR,aAAcF,EAAgBF,EAAOqB,UACrCP,KAAM,YAENR,EAACS,EAAAA,CACGD,KAAM,WACNE,YAAa,MACbC,YAAY,EACZC,MAAOpB,EAAKuB,SACZF,QAASpB,EAAgB,WAAY,SACrCqB,OAAQrB,EAAgB,WAAY,WAG5CO,EAACgB,EAAAA,CACGxB,KAAMA,EAAKyB,qBACXpB,MAAOH,EAAOuB,qBACdtB,MAAOA,EAAMsB,qBACbJ,QAASpB,EAAgB,uBAAwB,SACjDqB,OAAQrB,EAAgB,uBAAwB,WAKpE"}
+{"version":3,"file":"BrazilPersonalDetail.js","sources":["../../../../../src/components/internal/SocialSecurityNumberBrazil/BrazilPersonalDetail.tsx"],"sourcesContent":["import Field from '../FormFields/Field';\nimport SocialSecurityNumberBrazil from './SocialSecurityNumberBrazil';\nimport { h } from 'preact';\nimport InputText from '../FormFields/InputText';\nimport Fieldset from '../FormFields/Fieldset';\n\nexport function BrazilPersonalDetail(props) {\n    const { i18n, data, handleChangeFor, errors, valid } = props;\n    const getErrorMessage = error => (error && error.errorMessage ? i18n.get(error.errorMessage) : !!error);\n    return (\n        <div className={'adyen-checkout__fieldset adyen-checkout__fieldset--address adyen-checkout__fieldset--personalDetails'}>\n            <div className=\"adyen-checkout__fieldset__title\">{i18n.get('personalDetails')}</div>\n\n            <Fieldset>\n                <Field\n                    label={i18n.get('firstName')}\n                    classNameModifiers={['firstName', 'col-50']}\n                    errorMessage={getErrorMessage(errors.firstName)}\n                    name={'firstName'}\n                >\n                    <InputText\n                        name={'firstName'}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                        value={data.firstName}\n                        onInput={handleChangeFor('firstName', 'input')}\n                        onBlur={handleChangeFor('firstName', 'blur')}\n                        autocomplete={'given-name'}\n                    />\n                </Field>\n\n                <Field\n                    label={i18n.get('lastName')}\n                    classNameModifiers={['lastName', 'col-50']}\n                    errorMessage={getErrorMessage(errors.lastName)}\n                    name={'lastName'}\n                >\n                    <InputText\n                        name={'lastName'}\n                        autocorrect={'off'}\n                        spellcheck={false}\n                        value={data.lastName}\n                        onInput={handleChangeFor('lastName', 'input')}\n                        onBlur={handleChangeFor('lastName', 'blur')}\n                        autocomplete={'family-name'}\n                    />\n                </Field>\n                <SocialSecurityNumberBrazil\n                    data={data.socialSecurityNumber}\n                    error={errors.socialSecurityNumber}\n                    valid={valid.socialSecurityNumber}\n                    onInput={handleChangeFor('socialSecurityNumber', 'input')}\n                    onBlur={handleChangeFor('socialSecurityNumber', 'blur')}\n                />\n            </Fieldset>\n        </div>\n    );\n}\n"],"names":["BrazilPersonalDetail","props","i18n","data","handleChangeFor","errors","valid","getErrorMessage","error","errorMessage","get","h","div","className","Fieldset","Field","label","classNameModifiers","firstName","name","InputText","autocorrect","spellcheck","value","onInput","onBlur","autocomplete","lastName","SocialSecurityNumberBrazil","socialSecurityNumber"],"mappings":"+PAMO,SAASA,EAAqBC,GACjC,MAAMC,KAAEA,EAAIC,KAAEA,EAAIC,gBAAEA,EAAeC,OAAEA,EAAMC,MAAEA,GAAUL,EACjDM,EAAkBC,GAAUA,GAASA,EAAMC,aAAeP,EAAKQ,IAAIF,EAAMC,gBAAkBD,EACjG,OACIG,EAACC,MAAAA,CAAIC,UAAW,wGACZF,EAACC,MAAAA,CAAIC,UAAU,mCAAmCX,EAAKQ,IAAI,oBAE3DC,EAACG,OACGH,EAACI,EAAAA,CACGC,MAAOd,EAAKQ,IAAI,aAChBO,mBAAoB,CAAC,YAAa,UAClCR,aAAcF,EAAgBF,EAAOa,WACrCC,KAAM,aAENR,EAACS,EAAAA,CACGD,KAAM,YACNE,YAAa,MACbC,YAAY,EACZC,MAAOpB,EAAKe,UACZM,QAASpB,EAAgB,YAAa,SACtCqB,OAAQrB,EAAgB,YAAa,QACrCsB,aAAc,gBAItBf,EAACI,EAAAA,CACGC,MAAOd,EAAKQ,IAAI,YAChBO,mBAAoB,CAAC,WAAY,UACjCR,aAAcF,EAAgBF,EAAOsB,UACrCR,KAAM,YAENR,EAACS,EAAAA,CACGD,KAAM,WACNE,YAAa,MACbC,YAAY,EACZC,MAAOpB,EAAKwB,SACZH,QAASpB,EAAgB,WAAY,SACrCqB,OAAQrB,EAAgB,WAAY,QACpCsB,aAAc,iBAGtBf,EAACiB,EAAAA,CACGzB,KAAMA,EAAK0B,qBACXrB,MAAOH,EAAOwB,qBACdvB,MAAOA,EAAMuB,qBACbL,QAASpB,EAAgB,uBAAwB,SACjDqB,OAAQrB,EAAgB,uBAAwB,WAKpE"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../FormFields/Field/Field.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import l from"../FormFields/InputText.js";const i=({onBlur:i,onInput:t,valid:s=!1,error:a=null,data:u="",required:c=!1,disabled:n=!1,onFieldFocusAnalytics:m=null,onFieldBlurAnalytics:d=null})=>{const{i18n:p}=o();return e(r,{label:`${p.get("boleto.socialSecurityNumber")}`,classNameModifiers:["socialSecurityNumber"],errorMessage:a&&a.errorMessage?p.get(a.errorMessage):!!a,isValid:Boolean(s),name:"socialSecurityNumber",onFocus:e=>m?.("socialSecurityNumber",e),onBlur:e=>d?.("socialSecurityNumber",e)},e(l,{name:"socialSecurityNumber",autocorrect:"off",spellcheck:!1,value:u,maxlength:18,onInput:t,onBlur:i,required:c,disabled:n}))};export{i as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../FormFields/Field/Field.js";import{useCoreContext as o}from"../../../core/Context/CoreProvider.js";import l from"../FormFields/InputText.js";const t=({onBlur:t,onInput:i,valid:a=!1,error:s=null,data:u="",required:c=!1,disabled:n=!1,onFieldFocusAnalytics:m=null,onFieldBlurAnalytics:d=null})=>{const{i18n:p}=o();return e(r,{label:`${p.get("boleto.socialSecurityNumber")}`,classNameModifiers:["socialSecurityNumber"],errorMessage:s&&s.errorMessage?p.get(s.errorMessage):!!s,isValid:Boolean(a),name:"socialSecurityNumber",onFocus:e=>m?.("socialSecurityNumber",e),onBlur:e=>d?.("socialSecurityNumber",e)},e(l,{name:"socialSecurityNumber",autocorrect:"off",spellcheck:!1,value:u,maxlength:18,onInput:i,onBlur:t,required:c,disabled:n,autocomplete:void 0}))};export{t as default};
 //# sourceMappingURL=SocialSecurityNumberBrazil.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SocialSecurityNumberBrazil.js","sources":["../../../../../src/components/internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../FormFields/InputText';\n\nconst SocialSecurityNumberBrazil = ({\n    onBlur,\n    onInput,\n    valid = false,\n    error = null,\n    data = '',\n    required = false,\n    disabled = false,\n    onFieldFocusAnalytics = null,\n    onFieldBlurAnalytics = null\n}) => {\n    const { i18n } = useCoreContext();\n\n    return (\n        <Field\n            label={`${i18n.get('boleto.socialSecurityNumber')}`}\n            classNameModifiers={['socialSecurityNumber']}\n            errorMessage={error && error.errorMessage ? i18n.get(error.errorMessage) : !!error}\n            isValid={Boolean(valid)}\n            name={'socialSecurityNumber'}\n            onFocus={e => onFieldFocusAnalytics?.('socialSecurityNumber', e)}\n            onBlur={e => onFieldBlurAnalytics?.('socialSecurityNumber', e)}\n        >\n            <InputText\n                name={'socialSecurityNumber'}\n                autocorrect={'off'}\n                spellcheck={false}\n                value={data}\n                maxlength={18}\n                onInput={onInput}\n                onBlur={onBlur}\n                required={required}\n                disabled={disabled}\n            />\n        </Field>\n    );\n};\n\nexport default SocialSecurityNumberBrazil;\n"],"names":["SocialSecurityNumberBrazil","onBlur","onInput","valid","error","data","required","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","h","Field","label","get","classNameModifiers","errorMessage","isValid","Boolean","name","onFocus","e","InputText","autocorrect","spellcheck","value","maxlength"],"mappings":"qOAKA,MAAMA,EAA6B,EAC/BC,SACAC,UACAC,SAAQ,EACRC,QAAQ,KACRC,OAAO,GACPC,YAAW,EACXC,YAAW,EACXC,wBAAwB,KACxBC,uBAAuB,SAEvB,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,EAAAA,CACGC,MAAO,GAAGJ,EAAKK,IAAI,iCACnBC,mBAAoB,CAAC,wBACrBC,aAAcb,GAASA,EAAMa,aAAeP,EAAKK,IAAIX,EAAMa,gBAAkBb,EAC7Ec,QAASC,QAAQhB,GACjBiB,KAAM,uBACNC,QAASC,GAAKd,IAAwB,uBAAwBc,GAC9DrB,OAAQqB,GAAKb,IAAuB,uBAAwBa,IAE5DV,EAACW,EAAAA,CACGH,KAAM,uBACNI,YAAa,MACbC,YAAY,EACZC,MAAOrB,EACPsB,UAAW,GACXzB,QAASA,EACTD,OAAQA,EACRK,SAAUA,EACVC,SAAUA"}
+{"version":3,"file":"SocialSecurityNumberBrazil.js","sources":["../../../../../src/components/internal/SocialSecurityNumberBrazil/SocialSecurityNumberBrazil.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Field from '../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport InputText from '../FormFields/InputText';\n\nconst SocialSecurityNumberBrazil = ({\n    onBlur,\n    onInput,\n    valid = false,\n    error = null,\n    data = '',\n    required = false,\n    disabled = false,\n    onFieldFocusAnalytics = null,\n    onFieldBlurAnalytics = null\n}) => {\n    const { i18n } = useCoreContext();\n\n    return (\n        <Field\n            label={`${i18n.get('boleto.socialSecurityNumber')}`}\n            classNameModifiers={['socialSecurityNumber']}\n            errorMessage={error && error.errorMessage ? i18n.get(error.errorMessage) : !!error}\n            isValid={Boolean(valid)}\n            name={'socialSecurityNumber'}\n            onFocus={e => onFieldFocusAnalytics?.('socialSecurityNumber', e)}\n            onBlur={e => onFieldBlurAnalytics?.('socialSecurityNumber', e)}\n        >\n            <InputText\n                name={'socialSecurityNumber'}\n                autocorrect={'off'}\n                spellcheck={false}\n                value={data}\n                maxlength={18}\n                onInput={onInput}\n                onBlur={onBlur}\n                required={required}\n                disabled={disabled}\n                autocomplete={undefined}\n            />\n        </Field>\n    );\n};\n\nexport default SocialSecurityNumberBrazil;\n"],"names":["SocialSecurityNumberBrazil","onBlur","onInput","valid","error","data","required","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","i18n","useCoreContext","h","Field","label","get","classNameModifiers","errorMessage","isValid","Boolean","name","onFocus","e","InputText","autocorrect","spellcheck","value","maxlength","autocomplete","undefined"],"mappings":"qOAKA,MAAMA,EAA6B,EAC/BC,SACAC,UACAC,SAAQ,EACRC,QAAQ,KACRC,OAAO,GACPC,YAAW,EACXC,YAAW,EACXC,wBAAwB,KACxBC,uBAAuB,SAEvB,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,EAAAA,CACGC,MAAO,GAAGJ,EAAKK,IAAI,iCACnBC,mBAAoB,CAAC,wBACrBC,aAAcb,GAASA,EAAMa,aAAeP,EAAKK,IAAIX,EAAMa,gBAAkBb,EAC7Ec,QAASC,QAAQhB,GACjBiB,KAAM,uBACNC,QAASC,GAAKd,IAAwB,uBAAwBc,GAC9DrB,OAAQqB,GAAKb,IAAuB,uBAAwBa,IAE5DV,EAACW,EAAAA,CACGH,KAAM,uBACNI,YAAa,MACbC,YAAY,EACZC,MAAOrB,EACPsB,UAAW,GACXzB,QAASA,EACTD,OAAQA,EACRK,SAAUA,EACVC,SAAUA,EACVqB,kBAAcC"}

package/dist/es/core/config.js

@@ -1,2 +1,2 @@
-function e(e,n){if(null==e)throw new Error(n);return e}const n="https://checkoutshopper-live.adyen.com/checkoutshopper/",o=e("6.39.0","LIBRARY_VERSION is not defined"),t=e("esm","BUNDLE_TYPE is not defined"),r=["amount","secondaryAmount","countryCode","environment","_environmentUrls","loadingContext","i18n","modules","order","session","clientKey","showPayButton","redirectFromTopWhenInIframe","donation","onPaymentCompleted","onPaymentFailed","beforeRedirect","beforeSubmit","onSubmit","onActionHandled","onAdditionalDetails","onChange","onEnterKeyPressed","onError","onBalanceCheck","onOrderCancel","onOrderRequest","onOrderUpdated","onPaymentMethodsRequest"],i=6e4;var d=function(e){return e.WEB="web",e}({});const a="web";var s=function(e){return e.NATIVE="nativeComponent",e.GENERIC="genericComponent",e}({});export{d as CHANNEL,i as DEFAULT_HTTP_TIMEOUT,n as FALLBACK_CONTEXT,r as GENERIC_OPTIONS,t as LIBRARY_BUNDLE_TYPE,o as LIBRARY_VERSION,s as PAYMENT_METHOD_BEHAVIOR,a as PLATFORM};
+function e(e,n){if(null==e)throw new Error(n);return e}const n="https://checkoutshopper-live.adyen.com/checkoutshopper/",o=e("6.40.0","LIBRARY_VERSION is not defined"),t=e("esm","BUNDLE_TYPE is not defined"),r=["amount","secondaryAmount","countryCode","environment","_environmentUrls","loadingContext","i18n","modules","order","session","clientKey","showPayButton","redirectFromTopWhenInIframe","donation","onPaymentCompleted","onPaymentFailed","beforeRedirect","beforeSubmit","onSubmit","onActionHandled","onAdditionalDetails","onChange","onEnterKeyPressed","onError","onBalanceCheck","onOrderCancel","onOrderRequest","onOrderUpdated","onPaymentMethodsRequest"],i=6e4;var d=function(e){return e.WEB="web",e}({});const a="web";var s=function(e){return e.NATIVE="nativeComponent",e.GENERIC="genericComponent",e}({});export{d as CHANNEL,i as DEFAULT_HTTP_TIMEOUT,n as FALLBACK_CONTEXT,r as GENERIC_OPTIONS,t as LIBRARY_BUNDLE_TYPE,o as LIBRARY_VERSION,s as PAYMENT_METHOD_BEHAVIOR,a as PLATFORM};
 //# sourceMappingURL=config.js.map