npm - @adyen/adyen-web - Versions diffs - 6.0.0-alpha.3 → 6.0.0-alpha.4 - Mend

@adyen/adyen-web 6.0.0-alpha.3 → 6.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1054) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport useCoreContext from '../../../../../../core/Context/~~useCoreContext~~';\nimport useForm from '../../../../../../utils/useForm';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n hideResendOtpButton: boolean;\n disabled: boolean;\n isValidatingOtp: boolean;\n errorMessage?: string;\n onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n onPressEnter(): Promise<void>;\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: CtPOneTimePasswordInputProps): h.JSX.Element => {\n const { i18n } = useCoreContext();\n const {\n configuration: { disableOtpAutoFocus }\n } = useClickToPayContext();\n\n const formSchema = ['otp'];\n const [resendOtpError, setResendOtpError] = useState<string>(null);\n const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useForm<CtPOneTimePasswordInputDataState>({\n schema: formSchema,\n rules: otpValidationRules\n });\n const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n const inputRef = useRef<HTMLInputElement>(null);\n const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n const validateInput = useCallback(() => {\n setIsOtpFieldDirty(true);\n triggerValidation();\n }, [triggerValidation]);\n\n /*\n If shopper changes the value of the OTP fields, input becomes dirty\n */\n useEffect(() => {\n if (data.otp) setIsOtpFieldDirty(true);\n }, [data.otp]);\n\n useEffect(() => {\n if (!disableOtpAutoFocus && inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef.current, disableOtpAutoFocus]);\n\n useEffect(() => {\n otpInputHandlersRef.current.validateInput = validateInput;\n props.onSetInputHandlers(otpInputHandlersRef.current);\n }, [validateInput, props.onSetInputHandlers]);\n\n const handleOnResendOtp = useCallback(() => {\n setData('otp', '');\n setResendOtpError(null);\n if (!disableOtpAutoFocus) {\n inputRef.current.focus();\n }\n props.onResendCode();\n }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n const handleOnResendOtpError = useCallback(\n (errorCode: string) => {\n const message = i18n.get(`ctp.errors.${errorCode}`);\n if (message) setResendOtpError(message);\n },\n [i18n]\n );\n\n const handleOnKeyUp = useCallback(\n (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n props.onPressEnter();\n }\n },\n [props.onPressEnter]\n );\n\n const handleOnKeyPress = useCallback((event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n // Prevent <form> submission if Component is placed inside an form\n if (event.key === 'Enter') event.preventDefault();\n }, []);\n\n useEffect(() => {\n props.onChange({ data, valid, errors, isValid });\n }, [data, valid, errors]);\n\n return (\n <Field\n name=\"oneTimePassword\"\n label={i18n.get('ctp.otp.fieldLabel')}\n labelEndAdornment={\n !props.hideResendOtpButton && (\n <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n )\n }\n errorMessage={isOtpFielDirty ? resendOtpError \|\| props.errorMessage \|\| !!errors.otp : null}\n classNameModifiers={['otp']}\n >\n <InputText\n name={'otp'}\n autocorrect={'off'}\n spellcheck={false}\n value={data.otp}\n disabled={props.disabled}\n onInput={handleChangeFor('otp', 'input')}\n onBlur={handleChangeFor('otp', 'blur')}\n onKeyUp={handleOnKeyUp}\n onKeyPress={handleOnKeyPress}\n setRef={(ref: HTMLInputElement) => {\n inputRef.current = ref;\n }}\n />\n </Field>\n );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useForm","schema","rules","otpValidationRules","otpInputHandlersRef","useRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyUp","event","key","onPressEnter","handleOnKeyPress","preventDefault","onChange","h","Field","name","label","labelEndAdornment","hideResendOtpButton","CtPResendOtpLink","disabled","isValidatingOtp","onError","errorMessage","classNameModifiers","InputText","autocorrect","spellcheck","value","onInput","onBlur","onKeyUp","onKeyPress","setRef","ref"],"mappings":"~~gkBAgCA~~,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,OACvDC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAA0C,CAC5HC,OAHe,CAAC,OAIhBC,MAAOC,IAELC,EAAsBC,EAAwC,CAAEC,cAAe,OAC/EC,EAAWF,EAAyB,OACnCG,EAAgBC,GAAsBjB,GAAkB,GAEzDc,EAAgBI,GAAY,KAC9BD,GAAmB,GACnBd,GAAAA,GACD,CAACA,IAKJgB,GAAU,KACFjB,EAAKkB,KAAKH,GAAmB,EAAA,GAClC,CAACf,EAAKkB,MAETD,GAAU,MACDvB,GAAuBmB,EAASM,SACjCN,EAASM,QAAQC,OACrB,GACD,CAACP,EAASM,QAASzB,IAEtBuB,GAAU,KACNP,EAAoBS,QAAQP,cAAgBA,EAC5CtB,EAAM+B,mBAAmBX,EAAoBS,QAAO,GACrD,CAACP,EAAetB,EAAM+B,qBAEzB,MAAMC,EAAoBN,GAAY,KAClCX,EAAQ,MAAO,IACfR,EAAkB,MACbH,GACDmB,EAASM,QAAQC,QAErB9B,EAAMiC,cAAY,GACnB,CAACjC,EAAMiC,aAAcV,EAASM,QAASzB,IAEpC8B,EAAyBR,GAC1BS,IACG,MAAMC,EAAUnC,EAAKoC,IAAI,cAAcF,KACnCC,GAAS7B,EAAkB6B,EAAAA,GAEnC,CAACnC,IAGCqC,EAAgBZ,GACjBa,IACqB,UAAdA,EAAMC,KACNxC,EAAMyC,cACV,GAEJ,CAACzC,EAAMyC,eAGLC,EAAmBhB,GAAaa,IAEhB,UAAdA,EAAMC,KAAiBD,EAAMI,gBAAc,GAChD,IAMH,OAJAhB,GAAU,KACN3B,EAAM4C,SAAS,CAAElC,OAAME,QAAOC,SAAQC,WAAQ,GAC/C,CAACJ,EAAME,EAAOC,IAGbgC,EAACC,EAAAA,CACGC,KAAK,kBACLC,MAAO/C,EAAKoC,IAAI,sBAChBY,mBACKjD,EAAMkD,qBACHL,EAACM,EAAAA,CAAiBC,SAAUpD,EAAMqD,gBAAiBC,QAASpB,EAAwBD,aAAcD,IAG1GuB,aAAc/B,EAAiBlB,GAAkBN,EAAMuD,gBAAkB1C,EAAOe,IAAM,KACtF4B,mBAAoB,CAAC,QAErBX,EAACY,EAAAA,CACGV,KAAM,MACNW,YAAa,MACbC,YAAY,EACZC,MAAOlD,EAAKkB,IACZwB,SAAUpD,EAAMoD,SAChBS,QAASpD,EAAgB,MAAO,SAChCqD,OAAQrD,EAAgB,MAAO,QAC/BsD,QAASzB,EACT0B,WAAYtB,EACZuB,OAASC,IACL3C,EAASM,QAAUqC,CAAAA"}
1	+ {"version":3,"file":"CtPOneTimePasswordInput.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPOneTimePasswordInput/CtPOneTimePasswordInput.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { otpValidationRules } from './validate';\nimport CtPResendOtpLink from './CtPResendOtpLink';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useForm from '../../../../../../utils/useForm';\nimport Field from '../../../../FormFields/Field';\nimport './CtPOneTimePasswordInput.scss';\nimport InputText from '../../../../FormFields/InputText';\n\ntype OnChangeProps = { data: CtPOneTimePasswordInputDataState; valid; errors; isValid: boolean };\n\ninterface CtPOneTimePasswordInputProps {\n hideResendOtpButton: boolean;\n disabled: boolean;\n isValidatingOtp: boolean;\n errorMessage?: string;\n onSetInputHandlers(handlers: CtPOneTimePasswordInputHandlers): void;\n onPressEnter(): Promise<void>;\n onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n onResendCode(): void;\n}\n\ninterface CtPOneTimePasswordInputDataState {\n otp?: string;\n}\n\nexport type CtPOneTimePasswordInputHandlers = {\n validateInput(): void;\n};\n\nconst CtPOneTimePasswordInput = (props: CtPOneTimePasswordInputProps): h.JSX.Element => {\n const { i18n } = useCoreContext();\n const {\n configuration: { disableOtpAutoFocus }\n } = useClickToPayContext();\n\n const formSchema = ['otp'];\n const [resendOtpError, setResendOtpError] = useState<string>(null);\n const { handleChangeFor, data, triggerValidation, valid, errors, isValid, setData } = useForm<CtPOneTimePasswordInputDataState>({\n schema: formSchema,\n rules: otpValidationRules\n });\n const otpInputHandlersRef = useRef<CtPOneTimePasswordInputHandlers>({ validateInput: null });\n const inputRef = useRef<HTMLInputElement>(null);\n const [isOtpFielDirty, setIsOtpFieldDirty] = useState<boolean>(false);\n\n const validateInput = useCallback(() => {\n setIsOtpFieldDirty(true);\n triggerValidation();\n }, [triggerValidation]);\n\n /*\n If shopper changes the value of the OTP fields, input becomes dirty\n */\n useEffect(() => {\n if (data.otp) setIsOtpFieldDirty(true);\n }, [data.otp]);\n\n useEffect(() => {\n if (!disableOtpAutoFocus && inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef.current, disableOtpAutoFocus]);\n\n useEffect(() => {\n otpInputHandlersRef.current.validateInput = validateInput;\n props.onSetInputHandlers(otpInputHandlersRef.current);\n }, [validateInput, props.onSetInputHandlers]);\n\n const handleOnResendOtp = useCallback(() => {\n setData('otp', '');\n setResendOtpError(null);\n if (!disableOtpAutoFocus) {\n inputRef.current.focus();\n }\n props.onResendCode();\n }, [props.onResendCode, inputRef.current, disableOtpAutoFocus]);\n\n const handleOnResendOtpError = useCallback(\n (errorCode: string) => {\n const message = i18n.get(`ctp.errors.${errorCode}`);\n if (message) setResendOtpError(message);\n },\n [i18n]\n );\n\n const handleOnKeyUp = useCallback(\n (event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n props.onPressEnter();\n }\n },\n [props.onPressEnter]\n );\n\n const handleOnKeyPress = useCallback((event: h.JSX.TargetedKeyboardEvent<HTMLInputElement>) => {\n // Prevent <form> submission if Component is placed inside an form\n if (event.key === 'Enter') event.preventDefault();\n }, []);\n\n useEffect(() => {\n props.onChange({ data, valid, errors, isValid });\n }, [data, valid, errors]);\n\n return (\n <Field\n name=\"oneTimePassword\"\n label={i18n.get('ctp.otp.fieldLabel')}\n labelEndAdornment={\n !props.hideResendOtpButton && (\n <CtPResendOtpLink disabled={props.isValidatingOtp} onError={handleOnResendOtpError} onResendCode={handleOnResendOtp} />\n )\n }\n errorMessage={isOtpFielDirty ? resendOtpError \|\| props.errorMessage \|\| !!errors.otp : null}\n classNameModifiers={['otp']}\n >\n <InputText\n name={'otp'}\n autocorrect={'off'}\n spellcheck={false}\n value={data.otp}\n disabled={props.disabled}\n onInput={handleChangeFor('otp', 'input')}\n onBlur={handleChangeFor('otp', 'blur')}\n onKeyUp={handleOnKeyUp}\n onKeyPress={handleOnKeyPress}\n setRef={(ref: HTMLInputElement) => {\n inputRef.current = ref;\n }}\n />\n </Field>\n );\n};\n\nexport default CtPOneTimePasswordInput;\n"],"names":["CtPOneTimePasswordInput","props","i18n","useCoreContext","configuration","disableOtpAutoFocus","useClickToPayContext","resendOtpError","setResendOtpError","useState","handleChangeFor","data","triggerValidation","valid","errors","isValid","setData","useForm","schema","rules","otpValidationRules","otpInputHandlersRef","useRef","validateInput","inputRef","isOtpFielDirty","setIsOtpFieldDirty","useCallback","useEffect","otp","current","focus","onSetInputHandlers","handleOnResendOtp","onResendCode","handleOnResendOtpError","errorCode","message","get","handleOnKeyUp","event","key","onPressEnter","handleOnKeyPress","preventDefault","onChange","h","Field","name","label","labelEndAdornment","hideResendOtpButton","CtPResendOtpLink","disabled","isValidatingOtp","onError","errorMessage","classNameModifiers","InputText","autocorrect","spellcheck","value","onInput","onBlur","onKeyUp","onKeyPress","setRef","ref"],"mappings":"glBAgCA,MAAMA,EAA2BC,IAC7B,MAAMC,KAAEA,GAASC,KAEbC,eAAeC,oBAAEA,IACjBC,KAGGC,EAAgBC,GAAqBC,EAAiB,OACvDC,gBAAEA,EAAeC,KAAEA,EAAIC,kBAAEA,EAAiBC,MAAEA,EAAKC,OAAEA,EAAMC,QAAEA,EAAOC,QAAEA,GAAYC,EAA0C,CAC5HC,OAHe,CAAC,OAIhBC,MAAOC,IAELC,EAAsBC,EAAwC,CAAEC,cAAe,OAC/EC,EAAWF,EAAyB,OACnCG,EAAgBC,GAAsBjB,GAAkB,GAEzDc,EAAgBI,GAAY,KAC9BD,GAAmB,GACnBd,GAAAA,GACD,CAACA,IAKJgB,GAAU,KACFjB,EAAKkB,KAAKH,GAAmB,EAAA,GAClC,CAACf,EAAKkB,MAETD,GAAU,MACDvB,GAAuBmB,EAASM,SACjCN,EAASM,QAAQC,OACrB,GACD,CAACP,EAASM,QAASzB,IAEtBuB,GAAU,KACNP,EAAoBS,QAAQP,cAAgBA,EAC5CtB,EAAM+B,mBAAmBX,EAAoBS,QAAO,GACrD,CAACP,EAAetB,EAAM+B,qBAEzB,MAAMC,EAAoBN,GAAY,KAClCX,EAAQ,MAAO,IACfR,EAAkB,MACbH,GACDmB,EAASM,QAAQC,QAErB9B,EAAMiC,cAAY,GACnB,CAACjC,EAAMiC,aAAcV,EAASM,QAASzB,IAEpC8B,EAAyBR,GAC1BS,IACG,MAAMC,EAAUnC,EAAKoC,IAAI,cAAcF,KACnCC,GAAS7B,EAAkB6B,EAAAA,GAEnC,CAACnC,IAGCqC,EAAgBZ,GACjBa,IACqB,UAAdA,EAAMC,KACNxC,EAAMyC,cACV,GAEJ,CAACzC,EAAMyC,eAGLC,EAAmBhB,GAAaa,IAEhB,UAAdA,EAAMC,KAAiBD,EAAMI,gBAAc,GAChD,IAMH,OAJAhB,GAAU,KACN3B,EAAM4C,SAAS,CAAElC,OAAME,QAAOC,SAAQC,WAAQ,GAC/C,CAACJ,EAAME,EAAOC,IAGbgC,EAACC,EAAAA,CACGC,KAAK,kBACLC,MAAO/C,EAAKoC,IAAI,sBAChBY,mBACKjD,EAAMkD,qBACHL,EAACM,EAAAA,CAAiBC,SAAUpD,EAAMqD,gBAAiBC,QAASpB,EAAwBD,aAAcD,IAG1GuB,aAAc/B,EAAiBlB,GAAkBN,EAAMuD,gBAAkB1C,EAAOe,IAAM,KACtF4B,mBAAoB,CAAC,QAErBX,EAACY,EAAAA,CACGV,KAAM,MACNW,YAAa,MACbC,YAAY,EACZC,MAAOlD,EAAKkB,IACZwB,SAAUpD,EAAMoD,SAChBS,QAASpD,EAAgB,MAAO,SAChCqD,OAAQrD,EAAgB,MAAO,QAC/BsD,QAASzB,EACT0B,WAAYtB,EACZuB,OAASC,IACL3C,EAASM,QAAUqC,CAAAA"}

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

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

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

	@@ -1 +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/~~useCoreContext~~';\nimport Icon from '../../../../Icon';\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 }: 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) {\n onError(error.reason);\n setCounter(0);\n setShowConfirmation(false);\n }\n },\n [startIdentityValidation, onError, onResendCode]\n );\n\n if (showConfirmation) {\n return (\n <div className=\"adyen-checkout-ctp__otp-resend-code--confirmation\">\n {i18n.get('ctp.otp.codeResent')}\n <Icon type=\"checkmark\" height={14} width={14} />\n </div>\n );\n }\n\n if (counter > 0) {\n return (\n <div 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 <div\n role=\"link\"\n tabIndex={0}\n className={classnames('adyen-checkout-ctp__otp-resend-code', { 'adyen-checkout-ctp__otp-resend-code--disabled': disabled })}\n onClick={handleResendCodeClick}\n >\n {i18n.get('ctp.otp.resendCode')}\n </div>\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","reason","h","div","className","get","Icon","type","height","width","span","role","tabIndex","classnames","onClick"],"mappings":"~~gaAOA~~,MAQMA,EAAmB,EAAGC,UAASC,eAAcC,eAC/C,MAAOC,EAASC,GAAcC,EAAiB,OACxCC,EAAkBC,GAAuBF,GAAkB,IAC5DG,KAAEA,GAASC,KACXC,wBAAEA,GAA4BC,IAEpCC,GAAU,KACN,IAAIC,EAAU,KAId,OAHIV,EAAU,IACVU,EAAUC,YAAW,IAAMV,EAAWD,EAAU,IAAI,MAEjD,IAAMY,aAAaF,EAAAA,GAC3B,CAACV,IAEJS,GAAU,KACN,IAAIC,EAAU,KAQd,OANIP,IACAO,EAAUC,YAAW,KACjBP,GAAoB,GACpBH,EAAW,GAAA,GA5BO,MA+BnB,IAAMW,aAAaF,EAAAA,GAC3B,CAACP,IAEJ,MAAMU,EAAwBC,GAC1BC,MAAMC,IACFA,EAAMC,iBAEN,IACInB,IACAM,GAAoB,SACdG,GACV,CAAE,MAAOW,GACLrB,EAAQqB,EAAMC,QACdlB,EAAW,GACXG,GAAoB,EACxB,IAEJ,CAACG,EAAyBV,EAASC,IAGvC,OAAIK,EAEIiB,EAACC,MAAAA,CAAIC,UAAU,qDACVjB,EAAKkB,IAAI,sBACVH,EAACI,EAAAA,CAAKC,KAAK,YAAYC,OAAQ,GAAIC,MAAO,MAKlD3B,EAAU,EAENoB,EAACC,MAAAA,CAAIC,UAAU,iDACVjB,EAAKkB,IAAI,sBAAsB,KAAG,IACnCH,EAACQ,OAAAA,CAAKN,UAAU,+CAA8C,IAAEtB,EAAU,GAAK,GAAGA,KAAW,MAMrGoB,EAACC,MAAAA,CACGQ,KAAK,OACLC,SAAU,EACVR,UAAWS,EAAW,sCAAuC,CAAE,gDAAiDhC,IAChHiC,QAASnB,GAERR,EAAKkB,IAAI,sBAAA"}
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';\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 }: 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) {\n onError(error.reason);\n setCounter(0);\n setShowConfirmation(false);\n }\n },\n [startIdentityValidation, onError, onResendCode]\n );\n\n if (showConfirmation) {\n return (\n <div className=\"adyen-checkout-ctp__otp-resend-code--confirmation\">\n {i18n.get('ctp.otp.codeResent')}\n <Icon type=\"checkmark\" height={14} width={14} />\n </div>\n );\n }\n\n if (counter > 0) {\n return (\n <div 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 <div\n role=\"link\"\n tabIndex={0}\n className={classnames('adyen-checkout-ctp__otp-resend-code', { 'adyen-checkout-ctp__otp-resend-code--disabled': disabled })}\n onClick={handleResendCodeClick}\n >\n {i18n.get('ctp.otp.resendCode')}\n </div>\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","reason","h","div","className","get","Icon","type","height","width","span","role","tabIndex","classnames","onClick"],"mappings":"gbAOA,MAQMA,EAAmB,EAAGC,UAASC,eAAcC,eAC/C,MAAOC,EAASC,GAAcC,EAAiB,OACxCC,EAAkBC,GAAuBF,GAAkB,IAC5DG,KAAEA,GAASC,KACXC,wBAAEA,GAA4BC,IAEpCC,GAAU,KACN,IAAIC,EAAU,KAId,OAHIV,EAAU,IACVU,EAAUC,YAAW,IAAMV,EAAWD,EAAU,IAAI,MAEjD,IAAMY,aAAaF,EAAAA,GAC3B,CAACV,IAEJS,GAAU,KACN,IAAIC,EAAU,KAQd,OANIP,IACAO,EAAUC,YAAW,KACjBP,GAAoB,GACpBH,EAAW,GAAA,GA5BO,MA+BnB,IAAMW,aAAaF,EAAAA,GAC3B,CAACP,IAEJ,MAAMU,EAAwBC,GAC1BC,MAAMC,IACFA,EAAMC,iBAEN,IACInB,IACAM,GAAoB,SACdG,GACV,CAAE,MAAOW,GACLrB,EAAQqB,EAAMC,QACdlB,EAAW,GACXG,GAAoB,EACxB,IAEJ,CAACG,EAAyBV,EAASC,IAGvC,OAAIK,EAEIiB,EAACC,MAAAA,CAAIC,UAAU,qDACVjB,EAAKkB,IAAI,sBACVH,EAACI,EAAAA,CAAKC,KAAK,YAAYC,OAAQ,GAAIC,MAAO,MAKlD3B,EAAU,EAENoB,EAACC,MAAAA,CAAIC,UAAU,iDACVjB,EAAKkB,IAAI,sBAAsB,KAAG,IACnCH,EAACQ,OAAAA,CAAKN,UAAU,+CAA8C,IAAEtB,EAAU,GAAK,GAAGA,KAAW,MAMrGoB,EAACC,MAAAA,CACGQ,KAAK,OACLC,SAAU,EACVR,UAAWS,EAAW,sCAAuC,CAAE,gDAAiDhC,IAChHiC,QAASnB,GAERR,EAAKkB,IAAI,sBAAA"}

package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as o}from"../../../../../../external/preact/dist/preact.js";import t from"../../../../../../external/classnames/index.js";import c from"../../../../FormFields/Field/Field.js";import s from"../../../../FormFields/Checkbox/Checkbox.js";import a from"../../../../../../core/Context/useCoreContext.js";import{useState as n,useCallback as i}from"../../../../../../external/preact/hooks/dist/hooks.js";import r from"../../../context/useClickToPayContext.js";import k from"../../../../../../utils/isScreenSmall.js";function p(){const{i18n:p}=a(),{updateStoreCookiesConsent:l,isStoringCookies:m}=r(),[d,C]=n(m),[h,x]=n(k()),b=i((()=>{const e=!d;C(e),l(e)}),[l,C,d]);return e("div",{className:t("adyen-checkout-ctp__otp-checkbox-container",{"adyen-checkout-ctp__otp-checkbox-container--checked":d})},e(c,{classNameModifiers:["consentCheckbox"],name:"clickToPayCookiesCheckbox",showContextualElement:!1,useLabelElement:!1,i18n:p},e(s,{name:"clickToPayCookiesCheckbox",onInput:b,label:p.get("ctp.otp.saveCookiesCheckbox.label"),checked:d,"aria-describedby":"adyen-ctp-cookies-info"})),e("p",{className:"adyen-checkout-ctp__otp-checkbox-info"},h?e(o,null,e("span",{id:"adyen-ctp-cookies-info"},p.get("ctp.otp.saveCookiesCheckbox.shorterInfo")," "),e("button",{className:"adyen-checkout-ctp__otp-readmore-button",onClick:()=>x(!1)},p.get("readMore"),"..")):e("span",{id:"adyen-ctp-cookies-info"},p.get("ctp.otp.saveCookiesCheckbox.information"))))}export{p as default};
+import{createElement as e,Fragment as o}from"../../../../../../external/preact/dist/preact.js";import t from"../../../../../../external/classnames/index.js";import c from"../../../../FormFields/Field/Field.js";import s from"../../../../FormFields/Checkbox/Checkbox.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import{useState as n,useCallback as i}from"../../../../../../external/preact/hooks/dist/hooks.js";import r from"../../../context/useClickToPayContext.js";import k from"../../../../../../utils/isScreenSmall.js";function p(){const{i18n:p}=a(),{updateStoreCookiesConsent:l,isStoringCookies:m}=r(),[d,C]=n(m),[h,x]=n(k()),b=i((()=>{const e=!d;C(e),l(e)}),[l,C,d]);return e("div",{className:t("adyen-checkout-ctp__otp-checkbox-container",{"adyen-checkout-ctp__otp-checkbox-container--checked":d})},e(c,{classNameModifiers:["consentCheckbox"],name:"clickToPayCookiesCheckbox",showContextualElement:!1,useLabelElement:!1,i18n:p},e(s,{name:"clickToPayCookiesCheckbox",onInput:b,label:p.get("ctp.otp.saveCookiesCheckbox.label"),checked:d,"aria-describedby":"adyen-ctp-cookies-info"})),e("p",{className:"adyen-checkout-ctp__otp-checkbox-info"},h?e(o,null,e("span",{id:"adyen-ctp-cookies-info"},p.get("ctp.otp.saveCookiesCheckbox.shorterInfo")," "),e("button",{className:"adyen-checkout-ctp__otp-readmore-button",onClick:()=>x(!1)},p.get("readMore"),"..")):e("span",{id:"adyen-ctp-cookies-info"},p.get("ctp.otp.saveCookiesCheckbox.information"))))}export{p as default};
 //# sourceMappingURL=CtPSaveCookiesCheckbox.js.map

package/dist/es/components/internal/ClickToPay/components/CtPOneTimePassword/CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CtPSaveCookiesCheckbox.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport classnames from 'classnames';\nimport Field from '../../../../FormFields/Field';\nimport Checkbox from '../../../../FormFields/Checkbox';\nimport useCoreContext from '../../../../../../core/Context/~~useCoreContext~~';\nimport { useState, useCallback } from 'preact/hooks';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport isScreenSmall from '../../../../../../utils/isScreenSmall';\nimport './CtPSaveCookiesCheckbox.scss';\n\nfunction CtPSaveCookiesCheckbox() {\n const { i18n } = useCoreContext();\n const { updateStoreCookiesConsent, isStoringCookies } = useClickToPayContext();\n const [checked, setIsChecked] = useState(isStoringCookies);\n const [isTextTruncated, setIsTextTruncated] = useState<boolean>(isScreenSmall());\n\n const handleOnChange = useCallback(() => {\n const newChecked = !checked;\n setIsChecked(newChecked);\n updateStoreCookiesConsent(newChecked);\n }, [updateStoreCookiesConsent, setIsChecked, checked]);\n\n return (\n <div\n className={classnames('adyen-checkout-ctp__otp-checkbox-container', {\n 'adyen-checkout-ctp__otp-checkbox-container--checked': checked\n })}\n >\n <Field\n classNameModifiers={['consentCheckbox']}\n name={'clickToPayCookiesCheckbox'}\n showContextualElement={false}\n useLabelElement={false}\n i18n={i18n}\n >\n <Checkbox\n name={'clickToPayCookiesCheckbox'}\n onInput={handleOnChange}\n label={i18n.get('ctp.otp.saveCookiesCheckbox.label')}\n checked={checked}\n aria-describedby={'adyen-ctp-cookies-info'}\n />\n </Field>\n\n <p className=\"adyen-checkout-ctp__otp-checkbox-info\">\n {isTextTruncated ? (\n <Fragment>\n <span id=\"adyen-ctp-cookies-info\">{i18n.get('ctp.otp.saveCookiesCheckbox.shorterInfo')} </span>\n <button className=\"adyen-checkout-ctp__otp-readmore-button\" onClick={() => setIsTextTruncated(false)}>\n {i18n.get('readMore')}..\n </button>\n </Fragment>\n ) : (\n <span id=\"adyen-ctp-cookies-info\">{i18n.get('ctp.otp.saveCookiesCheckbox.information')}</span>\n )}\n </p>\n </div>\n );\n}\n\nexport default CtPSaveCookiesCheckbox;\n"],"names":["CtPSaveCookiesCheckbox","i18n","useCoreContext","updateStoreCookiesConsent","isStoringCookies","useClickToPayContext","checked","setIsChecked","useState","isTextTruncated","setIsTextTruncated","isScreenSmall","handleOnChange","useCallback","newChecked","h","div","className","classnames","Field","classNameModifiers","name","showContextualElement","useLabelElement","Checkbox","onInput","label","get","aria-describedby","p","Fragment","span","id","button","onClick"],"mappings":"+~~hBAUA~~,SAASA,IACL,MAAMC,KAAEA,GAASC,KACXC,0BAAEA,EAAyBC,iBAAEA,GAAqBC,KACjDC,EAASC,GAAgBC,EAASJ,IAClCK,EAAiBC,GAAsBF,EAAkBG,KAE1DC,EAAiBC,GAAY,KAC/B,MAAMC,GAAcR,EACpBC,EAAaO,GACbX,EAA0BW,EAAAA,GAC3B,CAACX,EAA2BI,EAAcD,IAE7C,OACIS,EAACC,MAAAA,CACGC,UAAWC,EAAW,6CAA8C,CAChE,sDAAuDZ,KAG3DS,EAACI,EAAAA,CACGC,mBAAoB,CAAC,mBACrBC,KAAM,4BACNC,uBAAuB,EACvBC,iBAAiB,EACjBtB,KAAMA,GAENc,EAACS,EAAAA,CACGH,KAAM,4BACNI,QAASb,EACTc,MAAOzB,EAAK0B,IAAI,qCAChBrB,QAASA,EACTsB,mBAAkB,4BAI1Bb,EAACc,IAAAA,CAAEZ,UAAU,yCACRR,EACGM,EAACe,OACGf,EAACgB,OAAAA,CAAKC,GAAG,0BAA0B/B,EAAK0B,IAAI,2CAA2C,KACvFZ,EAACkB,SAAAA,CAAOhB,UAAU,0CAA0CiB,QAAS,IAAMxB,GAAmB,IACzFT,EAAK0B,IAAI,YAAY,OAI9BZ,EAACgB,OAAAA,CAAKC,GAAG,0BAA0B/B,EAAK0B,IAAI,6CAKhE"}
1	+ {"version":3,"file":"CtPSaveCookiesCheckbox.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPOneTimePassword/CtPSaveCookiesCheckbox/CtPSaveCookiesCheckbox.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport classnames from 'classnames';\nimport Field from '../../../../FormFields/Field';\nimport Checkbox from '../../../../FormFields/Checkbox';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { useState, useCallback } from 'preact/hooks';\nimport useClickToPayContext from '../../../context/useClickToPayContext';\nimport isScreenSmall from '../../../../../../utils/isScreenSmall';\nimport './CtPSaveCookiesCheckbox.scss';\n\nfunction CtPSaveCookiesCheckbox() {\n const { i18n } = useCoreContext();\n const { updateStoreCookiesConsent, isStoringCookies } = useClickToPayContext();\n const [checked, setIsChecked] = useState(isStoringCookies);\n const [isTextTruncated, setIsTextTruncated] = useState<boolean>(isScreenSmall());\n\n const handleOnChange = useCallback(() => {\n const newChecked = !checked;\n setIsChecked(newChecked);\n updateStoreCookiesConsent(newChecked);\n }, [updateStoreCookiesConsent, setIsChecked, checked]);\n\n return (\n <div\n className={classnames('adyen-checkout-ctp__otp-checkbox-container', {\n 'adyen-checkout-ctp__otp-checkbox-container--checked': checked\n })}\n >\n <Field\n classNameModifiers={['consentCheckbox']}\n name={'clickToPayCookiesCheckbox'}\n showContextualElement={false}\n useLabelElement={false}\n i18n={i18n}\n >\n <Checkbox\n name={'clickToPayCookiesCheckbox'}\n onInput={handleOnChange}\n label={i18n.get('ctp.otp.saveCookiesCheckbox.label')}\n checked={checked}\n aria-describedby={'adyen-ctp-cookies-info'}\n />\n </Field>\n\n <p className=\"adyen-checkout-ctp__otp-checkbox-info\">\n {isTextTruncated ? (\n <Fragment>\n <span id=\"adyen-ctp-cookies-info\">{i18n.get('ctp.otp.saveCookiesCheckbox.shorterInfo')} </span>\n <button className=\"adyen-checkout-ctp__otp-readmore-button\" onClick={() => setIsTextTruncated(false)}>\n {i18n.get('readMore')}..\n </button>\n </Fragment>\n ) : (\n <span id=\"adyen-ctp-cookies-info\">{i18n.get('ctp.otp.saveCookiesCheckbox.information')}</span>\n )}\n </p>\n </div>\n );\n}\n\nexport default CtPSaveCookiesCheckbox;\n"],"names":["CtPSaveCookiesCheckbox","i18n","useCoreContext","updateStoreCookiesConsent","isStoringCookies","useClickToPayContext","checked","setIsChecked","useState","isTextTruncated","setIsTextTruncated","isScreenSmall","handleOnChange","useCallback","newChecked","h","div","className","classnames","Field","classNameModifiers","name","showContextualElement","useLabelElement","Checkbox","onInput","label","get","aria-describedby","p","Fragment","span","id","button","onClick"],"mappings":"+iBAUA,SAASA,IACL,MAAMC,KAAEA,GAASC,KACXC,0BAAEA,EAAyBC,iBAAEA,GAAqBC,KACjDC,EAASC,GAAgBC,EAASJ,IAClCK,EAAiBC,GAAsBF,EAAkBG,KAE1DC,EAAiBC,GAAY,KAC/B,MAAMC,GAAcR,EACpBC,EAAaO,GACbX,EAA0BW,EAAAA,GAC3B,CAACX,EAA2BI,EAAcD,IAE7C,OACIS,EAACC,MAAAA,CACGC,UAAWC,EAAW,6CAA8C,CAChE,sDAAuDZ,KAG3DS,EAACI,EAAAA,CACGC,mBAAoB,CAAC,mBACrBC,KAAM,4BACNC,uBAAuB,EACvBC,iBAAiB,EACjBtB,KAAMA,GAENc,EAACS,EAAAA,CACGH,KAAM,4BACNI,QAASb,EACTc,MAAOzB,EAAK0B,IAAI,qCAChBrB,QAASA,EACTsB,mBAAkB,4BAI1Bb,EAACc,IAAAA,CAAEZ,UAAU,yCACRR,EACGM,EAACe,OACGf,EAACgB,OAAAA,CAAKC,GAAG,0BAA0B/B,EAAK0B,IAAI,2CAA2C,KACvFZ,EAACkB,SAAAA,CAAOhB,UAAU,0CAA0CiB,QAAS,IAAMxB,GAAmB,IACzFT,EAAK0B,IAAI,YAAY,OAI9BZ,EAACgB,OAAAA,CAAKC,GAAG,0BAA0B/B,EAAK0B,IAAI,6CAKhE"}

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../context/useClickToPayContext.js";import{CtpState as e}from"../../services/ClickToPayService.js";import r from"../../../../../external/classnames/index.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";import s from"../../../../../core/Context/useCoreContext.js";const a=()=>{const{ctpState:a,logoutShopper:c,status:l,cards:u}=o(),{i18n:i}=s();if(!1===[e.Ready,e.OneTimePassword].includes(a))return null;const p=n((()=>a===e.Ready&&u.length>1?i.get("ctp.logout.notYourCards"):a===e.Ready&&1===u.length?i.get("ctp.logout.notYourCard"):a===e.Ready&&0===u.length?i.get("ctp.logout.notYourProfile"):i.get("ctp.logout.notYou")),[i,a]);return t("span",{role:"button",tabIndex:0,className:r("adyen-checkout-ctp__section-logout-button",{"adyen-checkout-ctp__section-logout-button--disabled":"loading"===l}),onClick:c},p)};export{a as default};
+import{createElement as t}from"../../../../../external/preact/dist/preact.js";import o from"../../context/useClickToPayContext.js";import{CtpState as e}from"../../services/ClickToPayService.js";import r from"../../../../../external/classnames/index.js";import{useMemo as n}from"../../../../../external/preact/hooks/dist/hooks.js";import{useCoreContext as s}from"../../../../../core/Context/CoreProvider.js";const a=()=>{const{ctpState:a,logoutShopper:c,status:l,cards:i}=o(),{i18n:u}=s();if(!1===[e.Ready,e.OneTimePassword].includes(a))return null;const d=n((()=>a===e.Ready&&i.length>1?u.get("ctp.logout.notYourCards"):a===e.Ready&&1===i.length?u.get("ctp.logout.notYourCard"):a===e.Ready&&0===i.length?u.get("ctp.logout.notYourProfile"):u.get("ctp.logout.notYou")),[u,a]);return t("span",{role:"button",tabIndex:0,className:r("adyen-checkout-ctp__section-logout-button",{"adyen-checkout-ctp__section-logout-button--disabled":"loading"===l}),onClick:c},d)};export{a as default};
 //# sourceMappingURL=CtPLogoutLink.js.map

package/dist/es/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CtPLogoutLink.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.tsx"],"sourcesContent":["import { h } from 'preact';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport { CtpState } from '../../services/ClickToPayService';\nimport classnames from 'classnames';\nimport { useMemo } from 'preact/hooks';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport './CtPLogoutLink.scss';\n\nconst CtPLogoutLink = () => {\n const { ctpState, logoutShopper, status, cards } = useClickToPayContext();\n const { i18n } = useCoreContext();\n\n if ([CtpState.Ready, CtpState.OneTimePassword].includes(ctpState) === false) {\n return null;\n }\n\n const label = useMemo(() => {\n if (ctpState === CtpState.Ready && cards.length > 1) return i18n.get('ctp.logout.notYourCards');\n if (ctpState === CtpState.Ready && cards.length === 1) return i18n.get('ctp.logout.notYourCard');\n if (ctpState === CtpState.Ready && cards.length === 0) return i18n.get('ctp.logout.notYourProfile');\n return i18n.get('ctp.logout.notYou');\n }, [i18n, ctpState]);\n\n return (\n <span\n role=\"button\"\n tabIndex={0}\n className={classnames('adyen-checkout-ctp__section-logout-button', {\n 'adyen-checkout-ctp__section-logout-button--disabled': status === 'loading'\n })}\n onClick={logoutShopper}\n >\n {label}\n </span>\n );\n};\n\nexport default CtPLogoutLink;\n"],"names":["CtPLogoutLink","ctpState","logoutShopper","status","cards","useClickToPayContext","i18n","useCoreContext","CtpState","Ready","OneTimePassword","includes","label","useMemo","length","get","h","span","role","tabIndex","className","classnames","onClick"],"mappings":"~~uYAQA~~,MAAMA,EAAgB,KAClB,MAAMC,SAAEA,EAAQC,cAAEA,EAAaC,OAAEA,EAAMC,MAAEA,GAAUC,KAC7CC,KAAEA,GAASC,IAEjB,IAAsE,IAAlE,CAACC,EAASC,MAAOD,EAASE,iBAAiBC,SAASV,GACpD,OAAO,KAGX,MAAMW,EAAQC,GAAQ,IACdZ,IAAaO,EAASC,OAASL,EAAMU,OAAS,EAAUR,EAAKS,IAAI,2BACjEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,0BACnEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,6BAChET,EAAKS,IAAI,sBACjB,CAACT,EAAML,IAEV,OACIe,EAACC,OAAAA,CACGC,KAAK,SACLC,SAAU,EACVC,UAAWC,EAAW,4CAA6C,CAC/D,sDAAkE,YAAXlB,IAE3DmB,QAASpB,GAERU,EAAAA"}
1	+ {"version":3,"file":"CtPLogoutLink.js","sources":["../../../../../../../src/components/internal/ClickToPay/components/CtPSection/CtPLogoutLink.tsx"],"sourcesContent":["import { h } from 'preact';\nimport useClickToPayContext from '../../context/useClickToPayContext';\nimport { CtpState } from '../../services/ClickToPayService';\nimport classnames from 'classnames';\nimport { useMemo } from 'preact/hooks';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport './CtPLogoutLink.scss';\n\nconst CtPLogoutLink = () => {\n const { ctpState, logoutShopper, status, cards } = useClickToPayContext();\n const { i18n } = useCoreContext();\n\n if ([CtpState.Ready, CtpState.OneTimePassword].includes(ctpState) === false) {\n return null;\n }\n\n const label = useMemo(() => {\n if (ctpState === CtpState.Ready && cards.length > 1) return i18n.get('ctp.logout.notYourCards');\n if (ctpState === CtpState.Ready && cards.length === 1) return i18n.get('ctp.logout.notYourCard');\n if (ctpState === CtpState.Ready && cards.length === 0) return i18n.get('ctp.logout.notYourProfile');\n return i18n.get('ctp.logout.notYou');\n }, [i18n, ctpState]);\n\n return (\n <span\n role=\"button\"\n tabIndex={0}\n className={classnames('adyen-checkout-ctp__section-logout-button', {\n 'adyen-checkout-ctp__section-logout-button--disabled': status === 'loading'\n })}\n onClick={logoutShopper}\n >\n {label}\n </span>\n );\n};\n\nexport default CtPLogoutLink;\n"],"names":["CtPLogoutLink","ctpState","logoutShopper","status","cards","useClickToPayContext","i18n","useCoreContext","CtpState","Ready","OneTimePassword","includes","label","useMemo","length","get","h","span","role","tabIndex","className","classnames","onClick"],"mappings":"uZAQA,MAAMA,EAAgB,KAClB,MAAMC,SAAEA,EAAQC,cAAEA,EAAaC,OAAEA,EAAMC,MAAEA,GAAUC,KAC7CC,KAAEA,GAASC,IAEjB,IAAsE,IAAlE,CAACC,EAASC,MAAOD,EAASE,iBAAiBC,SAASV,GACpD,OAAO,KAGX,MAAMW,EAAQC,GAAQ,IACdZ,IAAaO,EAASC,OAASL,EAAMU,OAAS,EAAUR,EAAKS,IAAI,2BACjEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,0BACnEd,IAAaO,EAASC,OAA0B,IAAjBL,EAAMU,OAAqBR,EAAKS,IAAI,6BAChET,EAAKS,IAAI,sBACjB,CAACT,EAAML,IAEV,OACIe,EAACC,OAAAA,CACGC,KAAK,SACLC,SAAU,EACVC,UAAWC,EAAW,4CAA6C,CAC/D,sDAAkE,YAAXlB,IAE3DmB,QAASpB,GAERU,EAAAA"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CompanyDetails.js","sources":["../../../../../src/components/internal/CompanyDetails/CompanyDetails.tsx"],"sourcesContent":["import { h } 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/~~useCoreContext~~';\nimport { getFormattedData } from './utils';\nimport { CompanyDetailsSchema, CompanyDetailsProps } from './types';\nimport useForm from '../../../utils/useForm';\nimport InputText from '../FormFields/InputText';\nimport { ComponentMethodsRef } from '../UIElement/types';\n\nexport const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber'];\n\nexport default function CompanyDetails(props: 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: string): h.JSX.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 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={eventHandler('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={eventHandler('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","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyCompanyDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","InputText","value","onInput","onBlur","spellCheck","registrationNumber","defaultProps"],"mappings":"~~0iBAaaA~~,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,CAAA,GAEjDC,OAAOC,KAAKH,EAAkBI,SAASC,QACxCxB,EAAMyB,kBAAkBN,EAAkBI,SAI9CJ,EAAkBI,QAAQG,eAAiB,KACvClB,GAAAA,EAGJ,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,EAAAA,EAQnC,OALAK,GAAU,KACN,MAAMC,EAAgBC,EAAiB7B,GACvCT,EAAMuC,SAAS,CAAE9B,KAAM4B,EAAe3B,QAAOC,SAAQC,WAAQ,GAC9D,CAACH,EAAMC,EAAOC,EAAQC,IAEN,WAAfR,EAAgC,KACjB,aAAfA,EAAkCoC,EAACC,EAAAA,IAA2BzC,EAAOS,KAAMA,IAG3E+B,EAACE,EAAAA,CAASC,mBAAoB,CAAC1C,GAAQA,MAAOA,GACzCE,EAAeyC,SAAS,SACrBJ,EAACK,EAAAA,CACG5C,MAAOI,EAAKyC,IAAI,uBAChBH,mBAAoB,CAAC,QACrBI,eAAgBpC,EAAOiB,KACvBvB,KAAMA,EACNuB,KAAMD,EAAkB,gBAExBa,EAACQ,EAAAA,CACGpB,KAAMD,EAAkB,QACxBsB,MAAOxC,EAAKmB,KACZe,mBAAoB,CAAC,QACrBO,QAASrB,EAAa,SACtBsB,OAAQtB,EAAa,QACrBuB,YAAY,KAKvBjD,EAAeyC,SAAS,uBACrBJ,EAACK,EAAAA,CACG5C,MAAOI,EAAKyC,IAAI,qCAChBH,mBAAoB,CAAC,sBACrBI,eAAgBpC,EAAO0C,mBACvBhD,KAAMA,EACNuB,KAAMD,EAAkB,uBAExBa,EAACQ,EAAAA,CACGpB,KAAMD,EAAkB,sBACxBsB,MAAOxC,EAAK4C,mBACZV,mBAAoB,CAAC,sBACrBO,QAASrB,EAAa,SACtBsB,OAAQtB,EAAa,QACrBuB,YAAY,KAMpC,CAEArD,EAAeuD,aAAe,CAC1B7C,KAAM,CAAC,EACP8B,SAAU,OACVnC,WAAY,WACZD,eAAgBL,EAChBmB,gBAAiBD"}
1	+ {"version":3,"file":"CompanyDetails.js","sources":["../../../../../src/components/internal/CompanyDetails/CompanyDetails.tsx"],"sourcesContent":["import { h } 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';\n\nexport const COMPANY_DETAILS_SCHEMA = ['name', 'registrationNumber'];\n\nexport default function CompanyDetails(props: 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: string): h.JSX.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 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={eventHandler('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={eventHandler('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","useEffect","formattedData","getFormattedData","onChange","h","ReadOnlyCompanyDetails","Fieldset","classNameModifiers","includes","Field","get","errorMessage","InputText","value","onInput","onBlur","spellCheck","registrationNumber","defaultProps"],"mappings":"0jBAaaA,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,CAAA,GAEjDC,OAAOC,KAAKH,EAAkBI,SAASC,QACxCxB,EAAMyB,kBAAkBN,EAAkBI,SAI9CJ,EAAkBI,QAAQG,eAAiB,KACvClB,GAAAA,EAGJ,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,EAAAA,EAQnC,OALAK,GAAU,KACN,MAAMC,EAAgBC,EAAiB7B,GACvCT,EAAMuC,SAAS,CAAE9B,KAAM4B,EAAe3B,QAAOC,SAAQC,WAAQ,GAC9D,CAACH,EAAMC,EAAOC,EAAQC,IAEN,WAAfR,EAAgC,KACjB,aAAfA,EAAkCoC,EAACC,EAAAA,IAA2BzC,EAAOS,KAAMA,IAG3E+B,EAACE,EAAAA,CAASC,mBAAoB,CAAC1C,GAAQA,MAAOA,GACzCE,EAAeyC,SAAS,SACrBJ,EAACK,EAAAA,CACG5C,MAAOI,EAAKyC,IAAI,uBAChBH,mBAAoB,CAAC,QACrBI,eAAgBpC,EAAOiB,KACvBvB,KAAMA,EACNuB,KAAMD,EAAkB,gBAExBa,EAACQ,EAAAA,CACGpB,KAAMD,EAAkB,QACxBsB,MAAOxC,EAAKmB,KACZe,mBAAoB,CAAC,QACrBO,QAASrB,EAAa,SACtBsB,OAAQtB,EAAa,QACrBuB,YAAY,KAKvBjD,EAAeyC,SAAS,uBACrBJ,EAACK,EAAAA,CACG5C,MAAOI,EAAKyC,IAAI,qCAChBH,mBAAoB,CAAC,sBACrBI,eAAgBpC,EAAO0C,mBACvBhD,KAAMA,EACNuB,KAAMD,EAAkB,uBAExBa,EAACQ,EAAAA,CACGpB,KAAMD,EAAkB,sBACxBsB,MAAOxC,EAAK4C,mBACZV,mBAAoB,CAAC,sBACrBO,QAASrB,EAAa,SACtBsB,OAAQtB,EAAa,QACrBuB,YAAY,KAMpC,CAEArD,EAAeuD,aAAe,CAC1B7C,KAAM,CAAC,EACP8B,SAAU,OACVnC,WAAY,WACZD,eAAgBL,EAChBmB,gBAAiBD"}

package/dist/es/components/internal/ConsentCheckboxLabel/ConsentCheckboxLabel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import r from"../../../core/Context/useCoreContext.js";function a(a){const{i18n:n}=r(),o=n.get("paymentConditions"),c=n.get("afterPay.agreement"),[l,s]=c.split("%@");return l&&s?e(t,null,l,e("a",{className:"adyen-checkout-link",target:"_blank",rel:"noopener noreferrer",href:a.url},o),s):e("span",{className:"adyen-checkout__checkbox__label"},n.get("privacyPolicy"))}export{a as default};
+import{createElement as e,Fragment as r}from"../../../external/preact/dist/preact.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";function a(a){const{i18n:n}=t(),o=n.get("paymentConditions"),c=n.get("afterPay.agreement"),[l,s]=c.split("%@");return l&&s?e(r,null,l,e("a",{className:"adyen-checkout-link",target:"_blank",rel:"noopener noreferrer",href:a.url},o),s):e("span",{className:"adyen-checkout__checkbox__label"},n.get("privacyPolicy"))}export{a as default};
 //# sourceMappingURL=ConsentCheckboxLabel.js.map

package/dist/es/components/internal/ConsentCheckboxLabel/ConsentCheckboxLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConsentCheckboxLabel.js","sources":["../../../../../src/components/internal/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport useCoreContext from '../../../core/Context/~~useCoreContext~~';\n\ninterface ConsentCheckboxLabelProps {\n url: string;\n}\n\nexport default function ConsentCheckboxLabel(props: ConsentCheckboxLabelProps) {\n const { i18n } = useCoreContext();\n const linkText = i18n.get('paymentConditions');\n const translationString = i18n.get('afterPay.agreement');\n const [textBeforeLink, textAfterLink] = translationString.split('%@');\n\n if (textBeforeLink && textAfterLink) {\n return (\n <Fragment>\n {textBeforeLink}\n <a className=\"adyen-checkout-link\" target=\"_blank\" rel=\"noopener noreferrer\" href={props.url}>\n {linkText}\n </a>\n {textAfterLink}\n </Fragment>\n );\n }\n\n return <span className=\"adyen-checkout__checkbox__label\">{i18n.get('privacyPolicy')}</span>;\n}\n"],"names":["ConsentCheckboxLabel","props","i18n","useCoreContext","linkText","get","translationString","textBeforeLink","textAfterLink","split","h","Fragment","a","className","target","rel","href","url","span"],"mappings":"~~6IAOe~~,SAASA,EAAqBC,GACzC,MAAMC,KAAEA,GAASC,IACXC,EAAWF,EAAKG,IAAI,qBACpBC,EAAoBJ,EAAKG,IAAI,uBAC5BE,EAAgBC,GAAiBF,EAAkBG,MAAM,MAEhE,OAAIF,GAAkBC,EAEdE,EAACC,EACIJ,KAAAA,EACDG,EAACE,IAAAA,CAAEC,UAAU,sBAAsBC,OAAO,SAASC,IAAI,sBAAsBC,KAAMf,EAAMgB,KACpFb,GAEJI,GAKNE,EAACQ,OAAAA,CAAKL,UAAU,mCAAmCX,EAAKG,IAAI,iBACvE"}
1	+ {"version":3,"file":"ConsentCheckboxLabel.js","sources":["../../../../../src/components/internal/ConsentCheckboxLabel/ConsentCheckboxLabel.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\n\ninterface ConsentCheckboxLabelProps {\n url: string;\n}\n\nexport default function ConsentCheckboxLabel(props: ConsentCheckboxLabelProps) {\n const { i18n } = useCoreContext();\n const linkText = i18n.get('paymentConditions');\n const translationString = i18n.get('afterPay.agreement');\n const [textBeforeLink, textAfterLink] = translationString.split('%@');\n\n if (textBeforeLink && textAfterLink) {\n return (\n <Fragment>\n {textBeforeLink}\n <a className=\"adyen-checkout-link\" target=\"_blank\" rel=\"noopener noreferrer\" href={props.url}>\n {linkText}\n </a>\n {textAfterLink}\n </Fragment>\n );\n }\n\n return <span className=\"adyen-checkout__checkbox__label\">{i18n.get('privacyPolicy')}</span>;\n}\n"],"names":["ConsentCheckboxLabel","props","i18n","useCoreContext","linkText","get","translationString","textBeforeLink","textAfterLink","split","h","Fragment","a","className","target","rel","href","url","span"],"mappings":"6JAOe,SAASA,EAAqBC,GACzC,MAAMC,KAAEA,GAASC,IACXC,EAAWF,EAAKG,IAAI,qBACpBC,EAAoBJ,EAAKG,IAAI,uBAC5BE,EAAgBC,GAAiBF,EAAkBG,MAAM,MAEhE,OAAIF,GAAkBC,EAEdE,EAACC,EACIJ,KAAAA,EACDG,EAACE,IAAAA,CAAEC,UAAU,sBAAsBC,OAAO,SAASC,IAAI,sBAAsBC,KAAMf,EAAMgB,KACpFb,GAEJI,GAKNE,EAACQ,OAAAA,CAAKL,UAAU,mCAAmCX,EAAKG,IAAI,iBACvE"}

package/dist/es/components/internal/ContentSeparator/ContentSeparator.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import t from"../../../external/classnames/index.js";import r from"../../../core/Context/useCoreContext.js";function a({label:a="qrCodeOrApp",classNames:o=[]}){const{i18n:s}=r();return e("div",{className:t("adyen-checkout__content-separator",...o)},s.get(a))}export{a as default};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import r from"../../../external/classnames/index.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";function a({label:a="qrCodeOrApp",classNames:o=[]}){const{i18n:s}=t();return e("div",{className:r("adyen-checkout__content-separator",...o)},s.get(a))}export{a as default};
 //# sourceMappingURL=ContentSeparator.js.map

package/dist/es/components/internal/ContentSeparator/ContentSeparator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentSeparator.js","sources":["../../../../../src/components/internal/ContentSeparator/ContentSeparator.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport useCoreContext from '../../../core/Context/~~useCoreContext~~';\nimport './ContentSeparator.scss';\n\ninterface ContentSeparatorProps {\n label?: string;\n classNames?: string[];\n}\n\nfunction ContentSeparator({ label = 'qrCodeOrApp', classNames = [] }: ContentSeparatorProps) {\n const { i18n } = useCoreContext();\n return <div className={classnames('adyen-checkout__content-separator', ...classNames)}>{i18n.get(label)}</div>;\n}\n\nexport default ContentSeparator;\n"],"names":["ContentSeparator","label","classNames","i18n","useCoreContext","h","div","className","classnames","get"],"mappings":"~~oLAUA~~,SAASA,GAAiBC,MAAEA,EAAQ,cAAaC,WAAEA,EAAa,KAC5D,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,MAAAA,CAAIC,UAAWC,EAAW,uCAAwCN,IAAcC,EAAKM,IAAIR,GACrG"}
1	+ {"version":3,"file":"ContentSeparator.js","sources":["../../../../../src/components/internal/ContentSeparator/ContentSeparator.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classnames from 'classnames';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport './ContentSeparator.scss';\n\ninterface ContentSeparatorProps {\n label?: string;\n classNames?: string[];\n}\n\nfunction ContentSeparator({ label = 'qrCodeOrApp', classNames = [] }: ContentSeparatorProps) {\n const { i18n } = useCoreContext();\n return <div className={classnames('adyen-checkout__content-separator', ...classNames)}>{i18n.get(label)}</div>;\n}\n\nexport default ContentSeparator;\n"],"names":["ContentSeparator","label","classNames","i18n","useCoreContext","h","div","className","classnames","get"],"mappings":"oMAUA,SAASA,GAAiBC,MAAEA,EAAQ,cAAaC,WAAEA,EAAa,KAC5D,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,MAAAA,CAAIC,UAAWC,EAAW,uCAAwCN,IAAcC,EAAKM,IAAIR,GACrG"}

package/dist/es/components/internal/Countdown/useCountdownA11yReporter.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useRef as r,useEffect as e}from"../../../external/preact/hooks/dist/hooks.js";import{CountdownA11yReporter as t}from"./CountdownA11yReporter.js";import o from"../../../core/Errors/useSRPanelContext.js";import n from"../../../core/Context/useCoreContext.js";const s=s=>{const{i18n:u}=n(),{srPanel:c}=o(),a=r(null);e((()=>(a.current=new t({i18n:u,srPanel:c}),()=>{a.current.tearDown()})),[]),e((()=>{try{if(!a.current)return;a.current.update(s)}catch(r){throw a.current.tearDown(),a.current=null,r}}),[s])};export{s as useCountdownA11yReporter};
+import{useRef as r,useEffect as e}from"../../../external/preact/hooks/dist/hooks.js";import{CountdownA11yReporter as t}from"./CountdownA11yReporter.js";import o from"../../../core/Errors/useSRPanelContext.js";import{useCoreContext as n}from"../../../core/Context/CoreProvider.js";const s=s=>{const{i18n:c}=n(),{srPanel:u}=o(),a=r(null);e((()=>(a.current=new t({i18n:c,srPanel:u}),()=>{a.current.tearDown()})),[]),e((()=>{try{if(!a.current)return;a.current.update(s)}catch(r){throw a.current.tearDown(),a.current=null,r}}),[s])};export{s as useCountdownA11yReporter};
 //# sourceMappingURL=useCountdownA11yReporter.js.map

package/dist/es/components/internal/Countdown/useCountdownA11yReporter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useCountdownA11yReporter.js","sources":["../../../../../src/components/internal/Countdown/useCountdownA11yReporter.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks';\nimport { CountdownA11yReporter } from './CountdownA11yReporter';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport useCoreContext from '../../../core/Context/~~useCoreContext~~';\nimport { CountdownTime } from './types';\n\nexport const useCountdownA11yReporter = (time: CountdownTime): void => {\n const { i18n } = useCoreContext();\n const { srPanel } = useSRPanelContext();\n const reporter = useRef<CountdownA11yReporter>(null);\n\n useEffect(() => {\n reporter.current = new CountdownA11yReporter({ i18n, srPanel });\n return () => {\n reporter.current.tearDown();\n };\n }, []);\n\n useEffect(() => {\n try {\n if (!reporter.current) return;\n reporter.current.update(time);\n } catch (e) {\n reporter.current.tearDown();\n reporter.current = null;\n throw e;\n }\n }, [time]);\n};\n"],"names":["useCountdownA11yReporter","time","i18n","useCoreContext","srPanel","useSRPanelContext","reporter","useRef","useEffect","current","CountdownA11yReporter","tearDown","update","e"],"mappings":"~~wQAMO~~,MAAMA,EAA4BC,IACrC,MAAMC,KAAEA,GAASC,KACXC,QAAEA,GAAYC,IACdC,EAAWC,EAA8B,MAE/CC,GAAU,KACNF,EAASG,QAAU,IAAIC,EAAsB,CAAER,OAAME,YAC9C,KACHE,EAASG,QAAQE,UAAQ,IAE9B,IAEHH,GAAU,KACN,IACI,IAAKF,EAASG,QAAS,OACvBH,EAASG,QAAQG,OAAOX,EAC5B,CAAE,MAAOY,GAGL,MAFAP,EAASG,QAAQE,WACjBL,EAASG,QAAU,KACbI,CACV,IACD,CAACZ,GAAK"}
1	+ {"version":3,"file":"useCountdownA11yReporter.js","sources":["../../../../../src/components/internal/Countdown/useCountdownA11yReporter.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks';\nimport { CountdownA11yReporter } from './CountdownA11yReporter';\nimport useSRPanelContext from '../../../core/Errors/useSRPanelContext';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { CountdownTime } from './types';\n\nexport const useCountdownA11yReporter = (time: CountdownTime): void => {\n const { i18n } = useCoreContext();\n const { srPanel } = useSRPanelContext();\n const reporter = useRef<CountdownA11yReporter>(null);\n\n useEffect(() => {\n reporter.current = new CountdownA11yReporter({ i18n, srPanel });\n return () => {\n reporter.current.tearDown();\n };\n }, []);\n\n useEffect(() => {\n try {\n if (!reporter.current) return;\n reporter.current.update(time);\n } catch (e) {\n reporter.current.tearDown();\n reporter.current = null;\n throw e;\n }\n }, [time]);\n};\n"],"names":["useCountdownA11yReporter","time","i18n","useCoreContext","srPanel","useSRPanelContext","reporter","useRef","useEffect","current","CountdownA11yReporter","tearDown","update","e"],"mappings":"wRAMO,MAAMA,EAA4BC,IACrC,MAAMC,KAAEA,GAASC,KACXC,QAAEA,GAAYC,IACdC,EAAWC,EAA8B,MAE/CC,GAAU,KACNF,EAASG,QAAU,IAAIC,EAAsB,CAAER,OAAME,YAC9C,KACHE,EAASG,QAAQE,UAAQ,IAE9B,IAEHH,GAAU,KACN,IACI,IAAKF,EAASG,QAAS,OACvBH,EAASG,QAAQG,OAAOX,EAC5B,CAAE,MAAOY,GAGL,MAFAP,EAASG,QAAQE,WACjBL,EAASG,QAAU,KACbI,CACV,IACD,CAACZ,GAAK"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\n\nconst Field: FunctionalComponent<FieldProps> = props => {\n //\n const {\n children,\n className,\n classNameModifiers,\n dir,\n disabled,\n readOnly,\n errorMessage,\n helper,\n inputWrapperModifiers,\n isLoading,\n isValid,\n label,\n labelEndAdornment,\n name,\n onBlur,\n onFieldBlur,\n onFocus,\n // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n onFocusField,\n showValidIcon,\n useLabelElement,\n showErrorElement,\n showContextualElement,\n contextualText,\n // Redeclare prop names to avoid internal clashes\n filled: propsFilled,\n focused: propsFocused,\n i18n,\n contextVisibleToScreenReader,\n renderAlternativeToLabel\n } = props;\n\n // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n\n const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n\n const [focused, setFocused] = useState(false);\n const [filled, setFilled] = useState(false);\n\n // The means by which focussed/filled is set for securedFields\n if (propsFocused != null) setFocused(!!propsFocused);\n if (propsFilled != null) setFilled(!!propsFilled);\n\n // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n const onFocusHandler = useCallback(\n (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n setFocused(true);\n onFocus?.(event);\n },\n [onFocus]\n );\n\n const onBlurHandler = useCallback(\n (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n setFocused(false);\n onBlur?.(event);\n // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n onFieldBlur?.(event);\n },\n [onBlur, onFieldBlur]\n );\n\n const renderLabelOrAlternativeContents = useCallback(() => {\n return (\n <Fragment>\n {typeof label === 'string' && (\n <span\n className={classNames({\n 'adyen-checkout__label__text': true,\n 'adyen-checkout__label__text--error': errorMessage\n })}\n data-id={name}\n >\n {label}\n </span>\n )}\n\n {/TODO - in what scenario is label a function? /}\n {/@ts-ignore - function is callable/}\n {typeof label === 'function' && label()}\n\n {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n </Fragment>\n );\n }, [label, errorMessage, labelEndAdornment, helper]);\n\n const renderInputRelatedElements = useCallback(() => {\n const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n const errorElem = showError && (\n <span\n className={'adyen-checkout-contextual-text--error'}\n {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n aria-hidden={contextVisibleToSR ? null : 'true'}\n >\n {errorMessage}\n </span>\n );\n\n const showContext = showContextualElement && !showError && contextualText?.length > 0;\n const contextualElem = showContext && (\n <span\n className={'adyen-checkout-contextual-text'}\n {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n aria-hidden={contextVisibleToSR ? null : 'true'}\n >\n {contextualText}\n </span>\n );\n\n return (\n <Fragment>\n <div\n className={classNames([\n 'adyen-checkout__input-wrapper',\n ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n ])}\n dir={dir}\n >\n {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n const childProps = {\n isValid,\n onFocusHandler,\n onBlurHandler,\n isInvalid: !!errorMessage,\n ...(name && { uniqueId: uniqueId.current }),\n showErrorElement: showErrorElement\n };\n return cloneElement(child as VNode, childProps);\n })}\n\n {isLoading && (\n <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n <Spinner size=\"small\" />\n </span>\n )}\n\n {isValid && showValidIcon !== false && (\n <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n <Icon type=\"checkmark\" alt={i18n?.get('field.valid')} />\n </span>\n )}\n\n {errorMessage && (\n <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n <Icon type=\"field_error\" alt={i18n?.get('error.title')} />\n </span>\n )}\n </div>\n {errorElem}\n {contextualElem}\n </Fragment>\n );\n }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n const LabelOrAlternative = useCallback(\n ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n const defaultWrapperProps = {\n onClick: onFocusField,\n className: classNames({\n 'adyen-checkout__label': true,\n 'adyen-checkout__label--focused': focused,\n 'adyen-checkout__label--filled': filled,\n 'adyen-checkout__label--disabled': disabled\n })\n };\n\n return useLabelElement ? (\n // if contextVisibleToSR is true then we are NOT dealing with the label for a securedField... so give it a `for` attribute\n <label {...defaultWrapperProps} {...(!isSecuredField && { htmlFor: name && uniqueId })}>\n {children}\n </label>\n ) : (\n renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n // Example usage:\n // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n // return (\n // <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n // {children}\n // </div>\n // );\n // };\n // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n );\n },\n []\n );\n\n /*\n RENDER\n */\n return (\n <div\n className={classNames(\n 'adyen-checkout__field',\n className,\n classNameModifiers.map(m => `adyen-checkout__field--${m}`),\n {\n 'adyen-checkout__field--error': errorMessage,\n 'adyen-checkout__field--valid': isValid,\n 'adyen-checkout__field--inactive': readOnly \|\| disabled\n }\n )}\n >\n <LabelOrAlternative\n onFocusField={onFocusField}\n name={name}\n disabled={disabled}\n filled={filled}\n focused={focused}\n useLabelElement={useLabelElement}\n uniqueId={uniqueId.current}\n isSecuredField={!contextVisibleToSR}\n renderAlternativeToLabel={renderAlternativeToLabel}\n >\n {renderLabelOrAlternativeContents()}\n </LabelOrAlternative>\n {renderInputRelatedElements()}\n </div>\n );\n};\n\nField.defaultProps = {\n className: '',\n classNameModifiers: [],\n inputWrapperModifiers: [],\n useLabelElement: true,\n showErrorElement: true,\n showContextualElement: true,\n renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","contextVisibleToSR","uniqueId","useRef","getUniqueId","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","renderInputRelatedElements","showError","length","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","toChildArray","child","childProps","isInvalid","cloneElement","Spinner","size","Icon","type","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","onClick","htmlFor","defaultProps"],"mappings":"wgBAUA,MAAMA,EAAyCC,IAE3C,MAAMC,SACFA,EAAQC,UACRA,EAASC,mBACTA,EAAkBC,IAClBA,EAAGC,SACHA,EAAQC,SACRA,EAAQC,aACRA,EAAYC,OACZA,EAAMC,sBACNA,EAAqBC,UACrBA,EAASC,QACTA,EAAOC,MACPA,EAAKC,kBACLA,EAAiBC,KACjBA,EAAIC,OACJA,EAAMC,YACNA,EAAWC,QACXA,EAAOC,aAGPA,EAAYC,cACZA,EAAaC,gBACbA,EAAeC,iBACfA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAEAC,OAAQC,EACRC,QAASC,EAAYC,KACrBA,EAAIC,6BACJA,EAA4BC,yBAC5BA,GACA9B,EAIE+B,EAAqBF,IAAgC,EAErDG,EAAWC,EAAOC,EAAY,kBAAkBpB,OAE/CY,EAASS,GAAcC,GAAS,IAChCZ,EAAQa,GAAaD,GAAS,GAGjB,MAAhBT,GAAsBQ,IAAaR,GACpB,MAAfF,GAAqBY,IAAYZ,GAGrC,MAAMa,EAAiBC,GAClBC,IACGL,GAAW,GACXlB,IAAUuB,EAAAA,GAEd,CAACvB,IAGCwB,EAAgBF,GACjBC,IACGL,GAAW,GACXpB,IAASyB,GAETxB,IAAcwB,EAAAA,GAElB,CAACzB,EAAQC,IAGP0B,EAAmCH,GAAY,IAE7CI,EAACC,EAAAA,KACqB,iBAAVhC,GACJ+B,EAACE,OAAAA,CACG3C,UAAW4C,EAAW,CAClB,+BAA+B,EAC/B,qCAAsCvC,IAE1CwC,UAASjC,GAERF,GAMS,mBAAVA,GAAwBA,IAE/BC,GAAqB8B,EAACE,OAAAA,CAAK3C,UAAU,wCAAwCW,GAE7EL,GAAUmC,EAACE,OAAAA,CAAK3C,UAAW,+BAAgCM,KAGrE,CAACI,EAAOL,EAAcM,EAAmBL,IAEtCwC,EAA6BT,GAAY,KAC3C,MAAMU,EAAY5B,GAA4C,iBAAjBd,GAA6BA,EAAa2C,OAAS,EAC1FC,EAAYF,GACdN,EAACE,OAAAA,CACG3C,UAAW,2CACN6B,GAAsB,CAAEqB,GAAI,GAAGpB,EAASqB,UAAUC,KACvDC,cAAaxB,EAAqB,KAAO,QAExCxB,GAKHiD,EADclC,IAA0B2B,GAAa1B,GAAgB2B,OAAS,GAEhFP,EAACE,OAAAA,CACG3C,UAAW,oCACN6B,GAAsB,CAAEqB,GAAI,GAAGpB,EAASqB,UAAUI,KACvDF,cAAaxB,EAAqB,KAAO,QAExCR,GAIT,OACIoB,EAACC,OACGD,EAACe,MAAAA,CACGxD,UAAW4C,EAAW,CAClB,mCACGrC,EAAsBkD,KAAIC,GAAK,kCAAkCA,QAExExD,IAAKA,GAEJyD,EAAa5D,GAAU0D,KAAKG,IACzB,MAAMC,EAAa,CACfpD,UACA2B,iBACAG,gBACAuB,YAAazD,KACTO,GAAQ,CAAEkB,SAAUA,EAASqB,SACjChC,iBAAkBA,GAEtB,OAAO4C,EAAaH,EAAgBC,EAAAA,IAGvCrD,GACGiC,EAACE,OAAAA,CAAK3C,UAAU,4FACZyC,EAACuB,EAAAA,CAAQC,KAAK,WAIrBxD,IAA6B,IAAlBQ,GACRwB,EAACE,OAAAA,CAAK3C,UAAU,0FACZyC,EAACyB,EAAAA,CAAKC,KAAK,YAAYC,IAAK1C,GAAM2C,IAAI,kBAI7ChE,GACGoC,EAACE,OAAAA,CAAK3C,UAAU,4FACZyC,EAACyB,EAAAA,CAAKC,KAAK,cAAcC,IAAK1C,GAAM2C,IAAI,mBAInDpB,EACAK,EAAAA,GAGV,CAACvD,EAAUM,EAAcgB,EAAgBb,EAAWC,EAAS2B,EAAgBG,IAE1E+B,EAAqBjC,GACvB,EAAGrB,eAAcQ,UAASF,SAAQnB,WAAUS,OAAMkB,WAAUZ,kBAAiBqD,iBAAgBxE,WAAU6B,+BACnG,MAAM4C,EAAsB,CACxBC,QAASzD,EACThB,UAAW4C,EAAW,CAClB,yBAAyB,EACzB,iCAAkCpB,EAClC,gCAAiCF,EACjC,kCAAmCnB,KAI3C,OAAOe,EAEHuB,EAAC/B,QAAAA,IAAU8D,MAA2BD,GAAkB,CAAEG,QAAS9D,GAAQkB,IACtE/B,GAGL6B,EAAyB4C,EAAqBzE,EAAU+B,KAahE,IAMJ,OACIW,EAACe,MAAAA,CACGxD,UAAW4C,EACP,wBACA5C,EACAC,EAAmBwD,KAAIC,GAAK,0BAA0BA,MACtD,CACI,+BAAgCrD,EAChC,+BAAgCI,EAChC,kCAAmCL,GAAYD,KAIvDsC,EAAC6B,EAAAA,CACGtD,aAAcA,EACdJ,KAAMA,EACNT,SAAUA,EACVmB,OAAQA,EACRE,QAASA,EACTN,gBAAiBA,EACjBY,SAAUA,EAASqB,QACnBoB,gBAAiB1C,EACjBD,yBAA0BA,GAEzBY,KAEJM,IAAAA,EAKbjD,EAAM8E,aAAe,CACjB3E,UAAW,GACXC,mBAAoB,GACpBM,sBAAuB,GACvBW,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,EACvBQ,yBAA0B,IAAM"}
1	+ {"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\n\nconst Field: FunctionalComponent<FieldProps> = props => {\n //\n const {\n children,\n className,\n classNameModifiers,\n dir,\n disabled,\n readOnly,\n errorMessage,\n helper,\n inputWrapperModifiers,\n isLoading,\n isValid,\n label,\n labelEndAdornment,\n name,\n onBlur,\n onFieldBlur,\n onFocus,\n // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n onFocusField,\n showValidIcon,\n useLabelElement,\n showErrorElement,\n showContextualElement,\n contextualText,\n // Redeclare prop names to avoid internal clashes\n filled: propsFilled,\n focused: propsFocused,\n i18n,\n contextVisibleToScreenReader,\n renderAlternativeToLabel\n } = props;\n\n // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n const showContext = showContextualElement && !showError && contextualText?.length > 0;\n\n const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n const [focused, setFocused] = useState(false);\n const [filled, setFilled] = useState(false);\n\n // The means by which focussed/filled is set for securedFields\n if (propsFocused != null) setFocused(!!propsFocused);\n if (propsFilled != null) setFilled(!!propsFilled);\n\n // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n const onFocusHandler = useCallback(\n (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n setFocused(true);\n onFocus?.(event);\n },\n [onFocus]\n );\n\n const onBlurHandler = useCallback(\n (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n setFocused(false);\n onBlur?.(event);\n // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n onFieldBlur?.(event);\n },\n [onBlur, onFieldBlur]\n );\n\n const renderLabelOrAlternativeContents = useCallback(() => {\n return (\n <Fragment>\n {typeof label === 'string' && (\n <span\n className={classNames({\n 'adyen-checkout__label__text': true,\n 'adyen-checkout__label__text--error': errorMessage\n })}\n data-id={name}\n >\n {label}\n </span>\n )}\n\n {/TODO - in what scenario is label a function? /}\n {/@ts-ignore - function is callable/}\n {typeof label === 'function' && label()}\n\n {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n </Fragment>\n );\n }, [label, errorMessage, labelEndAdornment, helper]);\n\n const renderInputRelatedElements = useCallback(() => {\n const errorElem = (\n <span\n className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n aria-hidden={contextVisibleToSR ? null : 'true'}\n >\n {errorMessage}\n </span>\n );\n const contextualElem = (\n <span\n className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n aria-hidden={contextVisibleToSR ? null : 'true'}\n >\n {contextualText}\n </span>\n );\n\n return (\n <Fragment>\n <div\n className={classNames([\n 'adyen-checkout__input-wrapper',\n ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n ])}\n dir={dir}\n >\n {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n const childProps = {\n isValid,\n onFocusHandler,\n onBlurHandler,\n isInvalid: !!errorMessage,\n ...(name && { uniqueId: uniqueId.current }),\n showErrorElement: showErrorElement\n };\n return cloneElement(child as VNode, childProps);\n })}\n\n {isLoading && (\n <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n <Spinner size=\"small\" />\n </span>\n )}\n\n {isValid && showValidIcon !== false && (\n <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n <Icon type=\"checkmark\" alt={i18n?.get('field.valid')} />\n </span>\n )}\n\n {errorMessage && (\n <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n <Icon type=\"field_error\" alt={i18n?.get('error.title')} />\n </span>\n )}\n </div>\n {errorElem}\n {contextualElem}\n </Fragment>\n );\n }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n const LabelOrAlternative = useCallback(\n ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n const defaultWrapperProps = {\n onClick: onFocusField,\n className: classNames({\n 'adyen-checkout__label': true,\n 'adyen-checkout__label--focused': focused,\n 'adyen-checkout__label--filled': filled,\n 'adyen-checkout__label--disabled': disabled\n })\n };\n\n return useLabelElement ? (\n // if contextVisibleToSR is true then we are NOT dealing with the label for a securedField... so give it a `for` attribute\n <label {...defaultWrapperProps} {...(!isSecuredField && { htmlFor: name && uniqueId })}>\n {children}\n </label>\n ) : (\n renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n // Example usage:\n // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n // return (\n // <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n // {children}\n // </div>\n // );\n // };\n // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n );\n },\n []\n );\n\n /*\n RENDER\n */\n return (\n <div\n className={classNames(\n 'adyen-checkout__field',\n className,\n classNameModifiers.map(m => `adyen-checkout__field--${m}`),\n {\n 'adyen-checkout__field--error': errorMessage,\n 'adyen-checkout__field--valid': isValid,\n 'adyen-checkout__field--inactive': readOnly \|\| disabled\n }\n )}\n >\n <LabelOrAlternative\n onFocusField={onFocusField}\n name={name}\n disabled={disabled}\n filled={filled}\n focused={focused}\n useLabelElement={useLabelElement}\n uniqueId={uniqueId.current}\n isSecuredField={!contextVisibleToSR}\n renderAlternativeToLabel={renderAlternativeToLabel}\n >\n {renderLabelOrAlternativeContents()}\n </LabelOrAlternative>\n {renderInputRelatedElements()}\n </div>\n );\n};\n\nField.defaultProps = {\n className: '',\n classNameModifiers: [],\n inputWrapperModifiers: [],\n useLabelElement: true,\n showErrorElement: true,\n showContextualElement: true,\n renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","toChildArray","child","childProps","isInvalid","cloneElement","Spinner","size","Icon","type","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","onClick","htmlFor","defaultProps"],"mappings":"wgBAUA,MAAMA,EAAyCC,IAE3C,MAAMC,SACFA,EAAQC,UACRA,EAASC,mBACTA,EAAkBC,IAClBA,EAAGC,SACHA,EAAQC,SACRA,EAAQC,aACRA,EAAYC,OACZA,EAAMC,sBACNA,EAAqBC,UACrBA,EAASC,QACTA,EAAOC,MACPA,EAAKC,kBACLA,EAAiBC,KACjBA,EAAIC,OACJA,EAAMC,YACNA,EAAWC,QACXA,EAAOC,aAGPA,EAAYC,cACZA,EAAaC,gBACbA,EAAeC,iBACfA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAEAC,OAAQC,EACRC,QAASC,EAAYC,KACrBA,EAAIC,6BACJA,EAA4BC,yBAC5BA,GACA9B,EAIE+B,EAAqBF,IAAgC,EACrDG,EAAYX,GAA4C,iBAAjBd,GAA6BA,EAAa0B,OAAS,EAC1FC,EAAcZ,IAA0BU,GAAaT,GAAgBU,OAAS,EAE9EE,EAAWC,EAAOC,EAAY,kBAAkBvB,OAC/CY,EAASY,GAAcC,GAAS,IAChCf,EAAQgB,GAAaD,GAAS,GAGjB,MAAhBZ,GAAsBW,IAAaX,GACpB,MAAfF,GAAqBe,IAAYf,GAGrC,MAAMgB,EAAiBC,GAClBC,IACGL,GAAW,GACXrB,IAAU0B,EAAAA,GAEd,CAAC1B,IAGC2B,EAAgBF,GACjBC,IACGL,GAAW,GACXvB,IAAS4B,GAET3B,IAAc2B,EAAAA,GAElB,CAAC5B,EAAQC,IAGP6B,EAAmCH,GAAY,IAE7CI,EAACC,EAAAA,KACqB,iBAAVnC,GACJkC,EAACE,OAAAA,CACG9C,UAAW+C,EAAW,CAClB,+BAA+B,EAC/B,qCAAsC1C,IAE1C2C,UAASpC,GAERF,GAMS,mBAAVA,GAAwBA,IAE/BC,GAAqBiC,EAACE,OAAAA,CAAK9C,UAAU,wCAAwCW,GAE7EL,GAAUsC,EAACE,OAAAA,CAAK9C,UAAW,+BAAgCM,KAGrE,CAACI,EAAOL,EAAcM,EAAmBL,IAEtC2C,EAA6BT,GAAY,KAC3C,MAAMU,EACFN,EAACE,OAAAA,CACG9C,UAAW+C,EAAW,CAAE,yCAAyC,EAAM,0CAA2CjB,OAC7GD,GAAsB,CAAEsB,GAAI,GAAGlB,EAASmB,UAAUC,KACvDC,cAAazB,EAAqB,KAAO,QAExCxB,GAGHkD,EACFX,EAACE,OAAAA,CACG9C,UAAW+C,EAAW,CAAE,kCAAkC,EAAM,0CAA2Cf,OACtGH,GAAsB,CAAEsB,GAAI,GAAGlB,EAASmB,UAAUI,KACvDF,cAAazB,EAAqB,KAAO,QAExCR,GAIT,OACIuB,EAACC,OACGD,EAACa,MAAAA,CACGzD,UAAW+C,EAAW,CAClB,mCACGxC,EAAsBmD,KAAIC,GAAK,kCAAkCA,QAExEzD,IAAKA,GAEJ0D,EAAa7D,GAAU2D,KAAKG,IACzB,MAAMC,EAAa,CACfrD,UACA8B,iBACAG,gBACAqB,YAAa1D,KACTO,GAAQ,CAAEqB,SAAUA,EAASmB,SACjCjC,iBAAkBA,GAEtB,OAAO6C,EAAaH,EAAgBC,EAAAA,IAGvCtD,GACGoC,EAACE,OAAAA,CAAK9C,UAAU,4FACZ4C,EAACqB,EAAAA,CAAQC,KAAK,WAIrBzD,IAA6B,IAAlBQ,GACR2B,EAACE,OAAAA,CAAK9C,UAAU,0FACZ4C,EAACuB,EAAAA,CAAKC,KAAK,YAAYC,IAAK3C,GAAM4C,IAAI,kBAI7CjE,GACGuC,EAACE,OAAAA,CAAK9C,UAAU,4FACZ4C,EAACuB,EAAAA,CAAKC,KAAK,cAAcC,IAAK3C,GAAM4C,IAAI,mBAInDpB,EACAK,EAAAA,GAGV,CAACxD,EAAUM,EAAcgB,EAAgBb,EAAWC,EAAS8B,EAAgBG,IAE1E6B,GAAqB/B,GACvB,EAAGxB,eAAcQ,UAASF,SAAQnB,WAAUS,OAAMqB,WAAUf,kBAAiBsD,iBAAgBzE,WAAU6B,+BACnG,MAAM6C,EAAsB,CACxBC,QAAS1D,EACThB,UAAW+C,EAAW,CAClB,yBAAyB,EACzB,iCAAkCvB,EAClC,gCAAiCF,EACjC,kCAAmCnB,KAI3C,OAAOe,EAEH0B,EAAClC,QAAAA,IAAU+D,MAA2BD,GAAkB,CAAEG,QAAS/D,GAAQqB,IACtElC,GAGL6B,EAAyB6C,EAAqB1E,EAAUkC,KAahE,IAMJ,OACIW,EAACa,MAAAA,CACGzD,UAAW+C,EACP,wBACA/C,EACAC,EAAmByD,KAAIC,GAAK,0BAA0BA,MACtD,CACI,+BAAgCtD,EAChC,+BAAgCI,EAChC,kCAAmCL,GAAYD,KAIvDyC,EAAC2B,GAAAA,CACGvD,aAAcA,EACdJ,KAAMA,EACNT,SAAUA,EACVmB,OAAQA,EACRE,QAASA,EACTN,gBAAiBA,EACjBe,SAAUA,EAASmB,QACnBoB,gBAAiB3C,EACjBD,yBAA0BA,GAEzBe,KAEJM,IAAAA,EAKbpD,EAAM+E,aAAe,CACjB5E,UAAW,GACXC,mBAAoB,GACpBM,sBAAuB,GACvBW,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,EACvBQ,yBAA0B,IAAM"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../external/classnames/index.js";import a from"../../../../core/Context/useCoreContext.js";function s({children:s,classNameModifiers:l=[],label:c,readonly:d=!1}){const{i18n:n}=a();return e("fieldset",{className:t(["adyen-checkout__fieldset",...l.map((e=>`adyen-checkout__fieldset--${e}`)),{"adyen-checkout__fieldset--readonly":d}])},c&&e("legend",{className:"adyen-checkout__fieldset__title"},n.get(c)),e("div",{className:"adyen-checkout__fieldset__fields"},s))}export{s as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../external/classnames/index.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";function s({children:s,classNameModifiers:l=[],label:c,readonly:d=!1}){const{i18n:r}=a();return e("fieldset",{className:t(["adyen-checkout__fieldset",...l.map((e=>`adyen-checkout__fieldset--${e}`)),{"adyen-checkout__fieldset--readonly":d}])},c&&e("legend",{className:"adyen-checkout__fieldset__title"},r.get(c)),e("div",{className:"adyen-checkout__fieldset__fields"},s))}export{s as default};
 //# sourceMappingURL=Fieldset.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport useCoreContext from '../../../../core/Context/~~useCoreContext~~';\nimport './Fieldset.scss';\n\ninterface FieldsetProps {\n children: ComponentChildren;\n classNameModifiers: string[];\n label?: string;\n readonly?: boolean;\n}\n\nexport default function Fieldset({ children, classNameModifiers = [], label, readonly = false }: FieldsetProps) {\n const { i18n } = useCoreContext();\n\n return (\n <fieldset\n className={cx([\n 'adyen-checkout__fieldset',\n ...classNameModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n { 'adyen-checkout__fieldset--readonly': readonly }\n ])}\n >\n {label && <legend className=\"adyen-checkout__fieldset__title\">{i18n.get(label)}</legend>}\n\n <div className=\"adyen-checkout__fieldset__fields\">{children}</div>\n </fieldset>\n );\n}\n"],"names":["Fieldset","children","classNameModifiers","label","readonly","i18n","useCoreContext","h","fieldset","className","cx","map","m","legend","get","div"],"mappings":"~~6LAYe~~,SAASA,GAASC,SAAEA,EAAQC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,SAAEA,GAAW,IACpF,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,WAAAA,CACGC,UAAWC,EAAG,CACV,8BACGR,EAAmBS,KAAIC,GAAK,6BAA6BA,MAC5D,CAAE,qCAAsCR,MAG3CD,GAASI,EAACM,SAAAA,CAAOJ,UAAU,mCAAmCJ,EAAKS,IAAIX,IAExEI,EAACQ,MAAAA,CAAIN,UAAU,oCAAoCR,GAG/D"}
1	+ {"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\n\ninterface FieldsetProps {\n children: ComponentChildren;\n classNameModifiers: string[];\n label?: string;\n readonly?: boolean;\n}\n\nexport default function Fieldset({ children, classNameModifiers = [], label, readonly = false }: FieldsetProps) {\n const { i18n } = useCoreContext();\n\n return (\n <fieldset\n className={cx([\n 'adyen-checkout__fieldset',\n ...classNameModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n { 'adyen-checkout__fieldset--readonly': readonly }\n ])}\n >\n {label && <legend className=\"adyen-checkout__fieldset__title\">{i18n.get(label)}</legend>}\n\n <div className=\"adyen-checkout__fieldset__fields\">{children}</div>\n </fieldset>\n );\n}\n"],"names":["Fieldset","children","classNameModifiers","label","readonly","i18n","useCoreContext","h","fieldset","className","cx","map","m","legend","get","div"],"mappings":"6MAYe,SAASA,GAASC,SAAEA,EAAQC,mBAAEA,EAAqB,GAAEC,MAAEA,EAAKC,SAAEA,GAAW,IACpF,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,WAAAA,CACGC,UAAWC,EAAG,CACV,8BACGR,EAAmBS,KAAIC,GAAK,6BAA6BA,MAC5D,CAAE,qCAAsCR,MAG3CD,GAASI,EAACM,SAAAA,CAAOJ,UAAU,mCAAmCJ,EAAKS,IAAIX,IAExEI,EAACQ,MAAAA,CAAIN,UAAU,oCAAoCR,GAG/D"}

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

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

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

	@@ -1 +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/~~useCoreContext~~';\n\nexport default function RadioGroup(props: RadioGroupProps) {\n const { items, name, onChange, value, isInvalid, uniqueId } = props;\n\n const { i18n } = useCoreContext();\n const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n return (\n <div className=\"adyen-checkout__radio_group\">\n {items.map(item => {\n const uniqueId = getUniqueId(uniqueIdBase);\n return (\n <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n <input\n id={uniqueId}\n type=\"radio\"\n checked={value === item.id}\n className=\"adyen-checkout__radio_group__input\"\n name={name}\n onChange={onChange}\n onClick={onChange}\n value={item.id}\n />\n <label\n className={cx([\n 'adyen-checkout__label__text',\n 'adyen-checkout__radio_group__label',\n props.className,\n { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n ])}\n htmlFor={uniqueId}\n >\n {i18n.get(item.name)}\n </label>\n </div>\n );\n })}\n </div>\n );\n}\n\nRadioGroup.defaultProps = {\n onChange: () => {},\n items: []\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","map","item","getUniqueId","key","id","input","type","checked","onClick","label","cx","htmlFor","get","defaultProps"],"mappings":"~~4PAOe~~,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,GAAaN,GAExDO,KAAEA,GAASC,IACXC,EAAeH,GAAUI,QAAQ,SAAU,IAAIC,UAAU,EAAGL,EAASM,YAAY,MAEvF,OACIC,EAACC,MAAAA,CAAIC,UAAU,+BACVd,EAAMe,KAAIC,IACP,MAAMX,EAAWY,EAAYT,GAC7B,OACII,EAACC,MAAAA,CAAIK,IAAKF,EAAKG,GAAIL,UAAU,8CACzBF,EAACQ,QAAAA,CACGD,GAAId,EACJgB,KAAK,QACLC,QAASnB,IAAUa,EAAKG,GACxBL,UAAU,qCACVb,KAAMA,EACNC,SAAUA,EACVqB,QAASrB,EACTC,MAAOa,EAAKG,KAEhBP,EAACY,QAAAA,CACGV,UAAWW,EAAG,CACV,8BACA,qCACA1B,EAAMe,UACN,CAAE,8CAA+CV,KAErDsB,QAASrB,GAERC,EAAKqB,IAAIX,EAAKf,OAAI,IAO/C,CAEAH,EAAW8B,aAAe,CACtB1B,SAAU,OACVF,MAAO"}
1	+ {"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/internal/FormFields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport './RadioGroup.scss';\nimport { RadioGroupProps } from './types';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\n\nexport default function RadioGroup(props: RadioGroupProps) {\n const { items, name, onChange, value, isInvalid, uniqueId } = props;\n\n const { i18n } = useCoreContext();\n const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));\n\n return (\n <div className=\"adyen-checkout__radio_group\">\n {items.map(item => {\n const uniqueId = getUniqueId(uniqueIdBase);\n return (\n <div key={item.id} className=\"adyen-checkout__radio_group__input-wrapper\">\n <input\n id={uniqueId}\n type=\"radio\"\n checked={value === item.id}\n className=\"adyen-checkout__radio_group__input\"\n name={name}\n onChange={onChange}\n onClick={onChange}\n value={item.id}\n />\n <label\n className={cx([\n 'adyen-checkout__label__text',\n 'adyen-checkout__radio_group__label',\n props.className,\n { 'adyen-checkout__radio_group__label--invalid': isInvalid }\n ])}\n htmlFor={uniqueId}\n >\n {i18n.get(item.name)}\n </label>\n </div>\n );\n })}\n </div>\n );\n}\n\nRadioGroup.defaultProps = {\n onChange: () => {},\n items: []\n};\n"],"names":["RadioGroup","props","items","name","onChange","value","isInvalid","uniqueId","i18n","useCoreContext","uniqueIdBase","replace","substring","lastIndexOf","h","div","className","map","item","getUniqueId","key","id","input","type","checked","onClick","label","cx","htmlFor","get","defaultProps"],"mappings":"4QAOe,SAASA,EAAWC,GAC/B,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,SAAEA,EAAQC,MAAEA,EAAKC,UAAEA,EAASC,SAAEA,GAAaN,GAExDO,KAAEA,GAASC,IACXC,EAAeH,GAAUI,QAAQ,SAAU,IAAIC,UAAU,EAAGL,EAASM,YAAY,MAEvF,OACIC,EAACC,MAAAA,CAAIC,UAAU,+BACVd,EAAMe,KAAIC,IACP,MAAMX,EAAWY,EAAYT,GAC7B,OACII,EAACC,MAAAA,CAAIK,IAAKF,EAAKG,GAAIL,UAAU,8CACzBF,EAACQ,QAAAA,CACGD,GAAId,EACJgB,KAAK,QACLC,QAASnB,IAAUa,EAAKG,GACxBL,UAAU,qCACVb,KAAMA,EACNC,SAAUA,EACVqB,QAASrB,EACTC,MAAOa,EAAKG,KAEhBP,EAACY,QAAAA,CACGV,UAAWW,EAAG,CACV,8BACA,qCACA1B,EAAMe,UACN,CAAE,8CAA+CV,KAErDsB,QAASrB,GAERC,EAAKqB,IAAIX,EAAKf,OAAI,IAO/C,CAEAH,EAAW8B,aAAe,CACtB1B,SAAU,OACVF,MAAO"}

package/dist/es/components/internal/FormFields/Select/components/SelectButton.js CHANGED Viewed

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

package/dist/es/components/internal/FormFields/Select/components/SelectButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n if (filterable) return <div {...props} ref={toggleButtonRef} />;\n\n return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: SelectButtonProps) {\n const { active, selected, inputText, readonly, showList } = props;\n\n // display fallback order\n const displayText = selected.selectedOptionName \|\| selected.name \|\| props.placeholder \|\| '';\n // displayInputText only used for the text input for the filter\n // display the \"typed\" filter text when showing the dropdown,\n // hide it and show the \"selected\" value when collapsed\n const displayInputText = showList ? inputText : displayText;\n\n const setFocus = (e: Event) => {\n e.preventDefault();\n if (document.activeElement === props.filterInputRef.current) {\n if (!props.showList) {\n props.toggleList(e);\n }\n } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n };\n\n // 1. If readonly we ignore the click action\n // 2. If filterable we want to show the list and focus on the input\n // 3. Otherwise we just toggle the list\n const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n const onFocusHandler = readonly ? null : props.onFocus;\n\n return (\n <SelectButtonElement\n className={cx({\n 'adyen-checkout__dropdown__button': true,\n 'adyen-checkout__dropdown__button--readonly': readonly,\n 'adyen-checkout__dropdown__button--active': showList,\n 'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n 'adyen-checkout__dropdown__button--valid': props.isValid,\n 'adyen-checkout__dropdown__button--disabled': selected.disabled\n })}\n disabled={props.disabled}\n filterable={props.filterable}\n onClick={onClickHandler}\n onKeyDown={!readonly ? props.onButtonKeyDown : null}\n toggleButtonRef={props.toggleButtonRef}\n >\n {!props.filterable ? (\n <Fragment>\n {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <span className=\"adyen-checkout__dropdown__button__text\">{displayText}</span>\n {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n </Fragment>\n ) : (\n <Fragment>\n {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <input\n value={displayInputText}\n aria-autocomplete=\"list\"\n aria-controls={props.selectListId}\n aria-expanded={showList}\n aria-owns={props.selectListId}\n autoComplete=\"off\"\n className=\"adyen-checkout__filter-input\"\n onInput={props.onInput}\n onFocus={onFocusHandler}\n ref={props.filterInputRef}\n role=\"combobox\"\n aria-activedescendant={~~`listItem-${active.id~~}`}\n type=\"text\"\n readOnly={props.readonly}\n id={props.id}\n aria-describedby={props.ariaDescribedBy}\n />\n {!showList && selected.secondaryText && (\n <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n )}\n </Fragment>\n )}\n </SelectButtonElement>\n );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","filterable","toggleButtonRef","props","h","div","ref","button","id","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","displayText","selectedOptionName","name","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"0LAKA,SAASA,GAAoBC,WAAEA,EAAUC,gBAAEA,KAAoBC,IAC3D,OAAIF,EAAmBG,EAACC,MAAAA,IAAQF,EAAOG,IAAKJ,IAErCE,EAACG,SAAAA,CAAOC,GAAIL,EAAMK,GAAIC,mBAAkBN,EAAMO,gBAAiBC,KAAM,YAAcR,EAAOG,IAAKJ,GAC1G,CAEA,SAASU,EAAaT,GAClB,MAAMU,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAad,EAGtDe,EAAcJ,EAASK,oBAAsBL,EAASM,MAAQjB,EAAMkB,aAAe,GAInFC,EAAmBL,EAAWF,EAAYG,EAc1CK,EAAiBP,EAAW,KAAOb,EAAMF,WAZ7BuB,IACdA,EAAEC,iBACEC,SAASC,gBAAkBxB,EAAMyB,eAAeC,QAC3C1B,EAAMc,UACPd,EAAM2B,WAAWN,GAEdrB,EAAMyB,eAAeC,SAAS1B,EAAMyB,eAAeC,QAAQE,OAAK,EAMR5B,EAAM2B,WAEvEE,EAAiBhB,EAAW,KAAOb,EAAM8B,~~QAE/C~~,~~OACI7B~~,EAACJ,EAAAA,~~CACGkC~~,UAAWC,EAAG,CACV,oCAAoC,EACpC,~~6CAA8CnB~~,EAC9C,2CAA4CC,EAC5C,4CAA6Cd,~~EAAMiC~~,UACnD,~~0CAA2CjC~~,~~EAAMkC~~,QACjD,~~6CAA8CvB~~,~~EAASwB~~,WAE3DA,~~SAAUnC~~,~~EAAMmC~~,~~SAChBrC~~,WAAYE,EAAMF,~~WAClBsC~~,~~QAAShB~~,~~EACTiB~~,~~UAAYxB~~,EAAmC,KAAxBb,~~EAAMsC~~,~~gBAC7BvC~~,gBAAiBC,EAAMD,iBAErBC,EAAMF,WAOJG,~~EAACsC~~,EAAAA,~~MACKzB~~,GAAYH,~~EAAS6B~~,~~MAAQvC~~,~~EAACwC~~,EAAAA,CAAIV,UAAU,yCAAyCW,~~IAAK/B~~,~~EAAS6B~~,KAAMG,~~IAAKhC~~,EAASM,OACzHhB,~~EAAC2C~~,QAAAA,CACGC,~~MAAO1B~~,~~EACP2B~~,oBAAkB,OAClBC,~~gBAAe/C~~,~~EAAMgD~~,aACrBC,~~gBAAenC~~,~~EACfoC~~,~~YAAWlD~~,~~EAAMgD~~,aACjBG,aAAa,MACbpB,UAAU,+BACVqB,~~QAASpD~~,~~EAAMoD~~,~~QACftB~~,QAASD,EACT1B,IAAKH,EAAMyB,~~eACX4B~~,KAAK,WACLC,~~wBAAuB~~,~~YAAY5C~~,~~EAAOL,KAC1CG,~~KAAK,~~OACL+C~~,~~SAAUvD~~,EAAMa,SAChBR,GAAIL,EAAMK,GACVC,mBAAkBN,EAAMO,mBAE1BO,GAAYH,~~EAAS6C~~,~~eACnBvD~~,~~EAACwD~~,OAAAA,CAAK1B,UAAU,~~oDAAoDpB~~,~~EAAS6C~~,~~gBA3BrFvD~~,~~EAACsC~~,~~OACI5B~~,~~EAAS6B~~,~~MAAQvC~~,~~EAACwC~~,EAAAA,CAAIV,UAAU,yCAAyCW,~~IAAK/B~~,~~EAAS6B~~,KAAMG,~~IAAKhC~~,EAASM,OAC5GhB,~~EAACwD~~,OAAAA,CAAK1B,UAAU,~~0CAA0ChB~~,GACzDJ,~~EAAS6C~~,~~eAAiBvD~~,~~EAACwD~~,OAAAA,CAAK1B,UAAU,~~oDAAoDpB~~,~~EAAS6C~~,gBA8B5H"}
1	+ {"version":3,"file":"SelectButton.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectButton.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport cx from 'classnames';\nimport { SelectButtonProps } from '../types';\nimport Img from '../../../Img';\n\nfunction SelectButtonElement({ filterable, toggleButtonRef, ...props }) {\n if (filterable) return <div {...props} ref={toggleButtonRef} />;\n\n return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;\n}\n\nfunction SelectButton(props: Readonly<SelectButtonProps>) {\n const { active, selected, inputText, readonly, showList } = props;\n\n // display fallback order\n const displayText = selected.selectedOptionName \|\| selected.name \|\| props.placeholder \|\| '';\n // displayInputText only used for the text input for the filter\n // display the \"typed\" filter text when showing the dropdown,\n // hide it and show the \"selected\" value when collapsed\n const displayInputText = showList ? inputText : displayText;\n\n const setFocus = (e: Event) => {\n e.preventDefault();\n if (document.activeElement === props.filterInputRef.current) {\n if (!props.showList) {\n props.toggleList(e);\n }\n } else if (props.filterInputRef.current) props.filterInputRef.current.focus();\n };\n\n // 1. If readonly we ignore the click action\n // 2. If filterable we want to show the list and focus on the input\n // 3. Otherwise we just toggle the list\n const onClickHandler = readonly ? null : props.filterable ? setFocus : props.toggleList;\n\n const onFocusHandler = readonly ? null : props.onFocus;\n\n // check COWEB-1301 [Investigate] Drop-in Accessibility - ADA Compliance questions\n const currentSelectedItemId = active.id ? `listItem-${active.id}` : '';\n\n return (\n <SelectButtonElement\n className={cx({\n 'adyen-checkout__dropdown__button': true,\n 'adyen-checkout__dropdown__button--readonly': readonly,\n 'adyen-checkout__dropdown__button--active': showList,\n 'adyen-checkout__dropdown__button--invalid': props.isInvalid,\n 'adyen-checkout__dropdown__button--valid': props.isValid,\n 'adyen-checkout__dropdown__button--disabled': selected.disabled\n })}\n disabled={props.disabled}\n filterable={props.filterable}\n onClick={onClickHandler}\n onKeyDown={!readonly ? props.onButtonKeyDown : null}\n toggleButtonRef={props.toggleButtonRef}\n >\n {!props.filterable ? (\n <Fragment>\n {selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <span className=\"adyen-checkout__dropdown__button__text\">{displayText}</span>\n {selected.secondaryText && <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>}\n </Fragment>\n ) : (\n <Fragment>\n {!showList && selected.icon && <Img className=\"adyen-checkout__dropdown__button__icon\" src={selected.icon} alt={selected.name} />}\n <input\n value={displayInputText}\n aria-autocomplete=\"list\"\n aria-controls={props.selectListId}\n aria-expanded={showList}\n aria-owns={props.selectListId}\n autoComplete=\"off\"\n className=\"adyen-checkout__filter-input\"\n onInput={props.onInput}\n onFocus={onFocusHandler}\n ref={props.filterInputRef}\n role=\"combobox\"\n aria-activedescendant={currentSelectedItemId}\n type=\"text\"\n readOnly={props.readonly}\n id={props.id}\n aria-describedby={props.ariaDescribedBy}\n />\n {!showList && selected.secondaryText && (\n <span className=\"adyen-checkout__dropdown__button__secondary-text\">{selected.secondaryText}</span>\n )}\n </Fragment>\n )}\n </SelectButtonElement>\n );\n}\n\nexport default SelectButton;\n"],"names":["SelectButtonElement","filterable","toggleButtonRef","props","h","div","ref","button","id","aria-describedby","ariaDescribedBy","type","SelectButton","active","selected","inputText","readonly","showList","displayText","selectedOptionName","name","placeholder","displayInputText","onClickHandler","e","preventDefault","document","activeElement","filterInputRef","current","toggleList","focus","onFocusHandler","onFocus","currentSelectedItemId","className","cx","isInvalid","isValid","disabled","onClick","onKeyDown","onButtonKeyDown","Fragment","icon","Img","src","alt","input","value","aria-autocomplete","aria-controls","selectListId","aria-expanded","aria-owns","autoComplete","onInput","role","aria-activedescendant","readOnly","secondaryText","span"],"mappings":"0LAKA,SAASA,GAAoBC,WAAEA,EAAUC,gBAAEA,KAAoBC,IAC3D,OAAIF,EAAmBG,EAACC,MAAAA,IAAQF,EAAOG,IAAKJ,IAErCE,EAACG,SAAAA,CAAOC,GAAIL,EAAMK,GAAIC,mBAAkBN,EAAMO,gBAAiBC,KAAM,YAAcR,EAAOG,IAAKJ,GAC1G,CAEA,SAASU,EAAaT,GAClB,MAAMU,OAAEA,EAAMC,SAAEA,EAAQC,UAAEA,EAASC,SAAEA,EAAQC,SAAEA,GAAad,EAGtDe,EAAcJ,EAASK,oBAAsBL,EAASM,MAAQjB,EAAMkB,aAAe,GAInFC,EAAmBL,EAAWF,EAAYG,EAc1CK,EAAiBP,EAAW,KAAOb,EAAMF,WAZ7BuB,IACdA,EAAEC,iBACEC,SAASC,gBAAkBxB,EAAMyB,eAAeC,QAC3C1B,EAAMc,UACPd,EAAM2B,WAAWN,GAEdrB,EAAMyB,eAAeC,SAAS1B,EAAMyB,eAAeC,QAAQE,OAAK,EAMR5B,EAAM2B,WAEvEE,EAAiBhB,EAAW,KAAOb,EAAM8B,QAGzCC,EAAwBrB,EAAOL,GAAK,YAAYK,EAAOL,KAAO,GAEpE,OACIJ,EAACJ,EAAAA,CACGmC,UAAWC,EAAG,CACV,oCAAoC,EACpC,6CAA8CpB,EAC9C,2CAA4CC,EAC5C,4CAA6Cd,EAAMkC,UACnD,0CAA2ClC,EAAMmC,QACjD,6CAA8CxB,EAASyB,WAE3DA,SAAUpC,EAAMoC,SAChBtC,WAAYE,EAAMF,WAClBuC,QAASjB,EACTkB,UAAYzB,EAAmC,KAAxBb,EAAMuC,gBAC7BxC,gBAAiBC,EAAMD,iBAErBC,EAAMF,WAOJG,EAACuC,EAAAA,MACK1B,GAAYH,EAAS8B,MAAQxC,EAACyC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASM,OACzHhB,EAAC4C,QAAAA,CACGC,MAAO3B,EACP4B,oBAAkB,OAClBC,gBAAehD,EAAMiD,aACrBC,gBAAepC,EACfqC,YAAWnD,EAAMiD,aACjBG,aAAa,MACbpB,UAAU,+BACVqB,QAASrD,EAAMqD,QACfvB,QAASD,EACT1B,IAAKH,EAAMyB,eACX6B,KAAK,WACLC,wBAAuBxB,EACvBvB,KAAK,OACLgD,SAAUxD,EAAMa,SAChBR,GAAIL,EAAMK,GACVC,mBAAkBN,EAAMO,mBAE1BO,GAAYH,EAAS8C,eACnBxD,EAACyD,OAAAA,CAAK1B,UAAU,oDAAoDrB,EAAS8C,gBA3BrFxD,EAACuC,OACI7B,EAAS8B,MAAQxC,EAACyC,EAAAA,CAAIV,UAAU,yCAAyCW,IAAKhC,EAAS8B,KAAMG,IAAKjC,EAASM,OAC5GhB,EAACyD,OAAAA,CAAK1B,UAAU,0CAA0CjB,GACzDJ,EAAS8C,eAAiBxD,EAACyD,OAAAA,CAAK1B,UAAU,oDAAoDrB,EAAS8C,gBA8B5H"}

package/dist/es/components/internal/FormFields/Select/components/SelectList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./SelectListItem.js";import n from"../../../../../core/Context/useCoreContext.js";function s({selected:s,active:i,filteredItems:c,showList:d,...r}){const{i18n:l}=n();return e("ul",{className:t({"adyen-checkout__dropdown__list":!0,"adyen-checkout__dropdown__list--active":d}),id:r.selectListId,ref:r.selectListRef,role:"listbox"},c.length?c.map((t=>e(o,{active:t.id===i.id,item:t,key:t.id,onSelect:r.onSelect,onHover:r.onHover,selected:t.id===s.id}))):e("div",{className:"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options"},l.get("select.noOptionsFound")))}export{s as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./SelectListItem.js";import{useCoreContext as n}from"../../../../../core/Context/CoreProvider.js";function s({selected:s,active:i,filteredItems:r,showList:c,...d}){const{i18n:l}=n();return e("ul",{className:t({"adyen-checkout__dropdown__list":!0,"adyen-checkout__dropdown__list--active":c}),id:d.selectListId,ref:d.selectListRef,role:"listbox"},r.length?r.map((t=>e(o,{active:t.id===i.id,item:t,key:t.id,onSelect:d.onSelect,onHover:d.onHover,selected:t.id===s.id}))):e("div",{className:"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options"},l.get("select.noOptionsFound")))}export{s as default};
 //# sourceMappingURL=SelectList.js.map

package/dist/es/components/internal/FormFields/Select/components/SelectList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectList.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport SelectListItem from './SelectListItem';\nimport useCoreContext from '../../../../../core/Context/~~useCoreContext~~';\nimport { SelectListProps } from '../types';\n\nfunction SelectList({ selected, active, filteredItems, showList, ...props }: SelectListProps) {\n const { i18n } = useCoreContext();\n\n return (\n <ul\n className={cx({\n 'adyen-checkout__dropdown__list': true,\n 'adyen-checkout__dropdown__list--active': showList\n })}\n id={props.selectListId}\n ref={props.selectListRef}\n role=\"listbox\"\n >\n {filteredItems.length ? (\n filteredItems.map(item => (\n <SelectListItem\n active={item.id === active.id}\n item={item}\n key={item.id}\n onSelect={props.onSelect}\n onHover={props.onHover}\n selected={item.id === selected.id}\n />\n ))\n ) : (\n <div className=\"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options\">\n {i18n.get('select.noOptionsFound')}\n </div>\n )}\n </ul>\n );\n}\n\nexport default SelectList;\n"],"names":["SelectList","selected","active","filteredItems","showList","props","i18n","useCoreContext","h","ul","className","cx","id","selectListId","ref","selectListRef","role","length","map","item","SelectListItem","key","onSelect","onHover","div","get"],"mappings":"~~yOAMA~~,SAASA,GAAWC,SAAEA,EAAQC,OAAEA,EAAMC,cAAEA,EAAaC,SAAEA,KAAaC,IAChE,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,kCAAkC,EAClC,yCAA0CP,IAE9CQ,GAAIP,EAAMQ,aACVC,IAAKT,EAAMU,cACXC,KAAK,WAEJb,EAAcc,OACXd,EAAce,KAAIC,GACdX,EAACY,EAAAA,CACGlB,OAAQiB,EAAKP,KAAOV,EAAOU,GAC3BO,KAAMA,EACNE,IAAKF,EAAKP,GACVU,SAAUjB,EAAMiB,SAChBC,QAASlB,EAAMkB,QACftB,SAAUkB,EAAKP,KAAOX,EAASW,OAIvCJ,EAACgB,MAAAA,CAAId,UAAU,mFACVJ,EAAKmB,IAAI,0BAK9B"}
1	+ {"version":3,"file":"SelectList.js","sources":["../../../../../../../src/components/internal/FormFields/Select/components/SelectList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport cx from 'classnames';\nimport SelectListItem from './SelectListItem';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { SelectListProps } from '../types';\n\nfunction SelectList({ selected, active, filteredItems, showList, ...props }: SelectListProps) {\n const { i18n } = useCoreContext();\n\n return (\n <ul\n className={cx({\n 'adyen-checkout__dropdown__list': true,\n 'adyen-checkout__dropdown__list--active': showList\n })}\n id={props.selectListId}\n ref={props.selectListRef}\n role=\"listbox\"\n >\n {filteredItems.length ? (\n filteredItems.map(item => (\n <SelectListItem\n active={item.id === active.id}\n item={item}\n key={item.id}\n onSelect={props.onSelect}\n onHover={props.onHover}\n selected={item.id === selected.id}\n />\n ))\n ) : (\n <div className=\"adyen-checkout__dropdown__element adyen-checkout__dropdown__element--no-options\">\n {i18n.get('select.noOptionsFound')}\n </div>\n )}\n </ul>\n );\n}\n\nexport default SelectList;\n"],"names":["SelectList","selected","active","filteredItems","showList","props","i18n","useCoreContext","h","ul","className","cx","id","selectListId","ref","selectListRef","role","length","map","item","SelectListItem","key","onSelect","onHover","div","get"],"mappings":"yPAMA,SAASA,GAAWC,SAAEA,EAAQC,OAAEA,EAAMC,cAAEA,EAAaC,SAAEA,KAAaC,IAChE,MAAMC,KAAEA,GAASC,IAEjB,OACIC,EAACC,KAAAA,CACGC,UAAWC,EAAG,CACV,kCAAkC,EAClC,yCAA0CP,IAE9CQ,GAAIP,EAAMQ,aACVC,IAAKT,EAAMU,cACXC,KAAK,WAEJb,EAAcc,OACXd,EAAce,KAAIC,GACdX,EAACY,EAAAA,CACGlB,OAAQiB,EAAKP,KAAOV,EAAOU,GAC3BO,KAAMA,EACNE,IAAKF,EAAKP,GACVU,SAAUjB,EAAMiB,SAChBC,QAASlB,EAAMkB,QACftB,SAAUkB,EAAKP,KAAOX,EAASW,OAIvCJ,EAACgB,MAAAA,CAAId,UAAU,mFACVJ,EAAKmB,IAAI,0BAK9B"}

package/dist/es/components/internal/FormInstruction/FormInstruction.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../external/preact/dist/preact.js";import e from"../../../core/Context/useCoreContext.js";const r=()=>{const{i18n:r}=e();return t("p",{className:"adyen-checkout-form-instruction"},r.get("form.instruction"))};export{r as default};
+import{createElement as t}from"../../../external/preact/dist/preact.js";import{useCoreContext as e}from"../../../core/Context/CoreProvider.js";const r=()=>{const{i18n:r}=e();return t("p",{className:"adyen-checkout-form-instruction"},r.get("form.instruction"))};export{r as default};
 //# sourceMappingURL=FormInstruction.js.map

package/dist/es/components/internal/FormInstruction/FormInstruction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormInstruction.js","sources":["../../../../../src/components/internal/FormInstruction/FormInstruction.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './FormInstruction.scss';\nimport useCoreContext from '../../../core/Context/~~useCoreContext~~';\n\nconst FormInstruction = () => {\n const { i18n } = useCoreContext();\n return <p className=\"adyen-checkout-form-instruction\">{i18n.get('form.instruction')}</p>;\n};\n\nexport default FormInstruction;\n"],"names":["FormInstruction","i18n","useCoreContext","h","p","className","get"],"mappings":"+~~HAIA~~,MAAMA,EAAkB,KACpB,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,IAAAA,CAAEC,UAAU,mCAAmCJ,EAAKK,IAAI,oBAAA"}
1	+ {"version":3,"file":"FormInstruction.js","sources":["../../../../../src/components/internal/FormInstruction/FormInstruction.tsx"],"sourcesContent":["import { h } from 'preact';\nimport './FormInstruction.scss';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\n\nconst FormInstruction = () => {\n const { i18n } = useCoreContext();\n return <p className=\"adyen-checkout-form-instruction\">{i18n.get('form.instruction')}</p>;\n};\n\nexport default FormInstruction;\n"],"names":["FormInstruction","i18n","useCoreContext","h","p","className","get"],"mappings":"+IAIA,MAAMA,EAAkB,KACpB,MAAMC,KAAEA,GAASC,IACjB,OAAOC,EAACC,IAAAA,CAAEC,UAAU,mCAAmCJ,EAAKK,IAAI,oBAAA"}

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

@@ -1,2 +1,2 @@
-import{Component as a,createElement as e}from"../../../external/preact/dist/preact.js";import t from"../../../core/Context/useCoreContext.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";const m={isValid:!1,errorMessage:"ach.accountHolderNameField.invalid",error:"ach.accountHolderNameField.invalid"},b={isValid:!1,errorMessage:"sepaDirectDebit.ibanField.invalid",error:"sepaDirectDebit.ibanField.invalid"};class c extends a{ibanNumber;constructor(a){if(super(a),this.state={status:"ready",data:{ownerName:a?.data?.ownerName||"",ibanNumber:a?.data?.ibanNumber||"",countryCode:a?.data?.countryCode||""},isValid:!1,cursor:0,errors:{},valid:{}},this.state.data.ibanNumber){const a=n(this.state.data.ibanNumber);this.state.data.ibanNumber=o(a)}if(this.state.data.ibanNumber||this.state.data.ownerName){const a=this.props.holderName?s(this.state.data.ownerName):"",e=(this.state.data.ibanNumber?"valid"===i(this.state.data.ibanNumber).status:"")&&a,t={data:this.state.data,isValid:e};this.props.onChange(t)}}static defaultProps={onChange:()=>{},countryCode:null,holderName:!0,placeholders:{},label:null};setStatus(a){this.setState({status:a})}onChange(){const a=!this.props.holderName||s(this.state.data.ownerName),e="valid"===i(this.state.data.ibanNumber).status&&a,t={data:this.state.data,isValid:e,errors:this.state.errors};this.props.onChange(t)}setData=(a,e,t)=>{this.setState((t=>({data:{...t.data,[a]:e}})),t)};setError=(a,e,t)=>{this.setState((t=>({errors:{...t.errors,[a]:e}})),t)};setValid=(a,e,t)=>{this.setState((t=>({valid:{...t.valid,[a]:e}})),t)};handleHolderInput=a=>{this.setState((e=>({data:{...e.data,ownerName:a}})),(()=>{const a=s(this.state.data.ownerName),e=null==a||a?null:m;this.setError("holder",e,this.onChange)}))};handleIbanInput=a=>{const e=a.target.value,t=n(e),r=o(t),s=i(r).status,h=l(t),u=a.target.selectionStart,m=this.state.data.ibanNumber,c=d(u,r,m);this.setState((a=>({data:{...a.data,ibanNumber:r,countryCode:h},errors:{...a.errors,iban:"invalid"===s?b:null},valid:{...a.valid,iban:"valid"===s}})),(()=>{a.target.setSelectionRange(c,c),this.onChange()}))};handleIbanBlur=a=>{const e=a.target.value;if(e.length>0){const a=i(e).status;this.setError("iban","valid"!==a?b:null,this.onChange)}else this.setError("iban",null,this.onChange)};showValidation(){const a=i(this.state.data.ibanNumber).status,e=s(this.state.data.ownerName);this.setError("iban","valid"!==a?b:null);const t=e?null:m;this.setError("holder",t,this.onChange)}render({placeholders:a},{data:s,errors:i,valid:n}){const{i18n:o}=t();return e(h,{classNameModifiers:["iban-input"],label:this.props.label},this.props.holderName&&e(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"},e(u,{name:"ownerName",className:"adyen-checkout__iban-input__owner-name",placeholder:a?.ownerName,value:s.ownerName,"aria-invalid":!!this.state.errors.holder,"aria-label":o.get("sepa.ownerName"),onInput:a=>this.handleHolderInput(a.target.value),onBlur:a=>this.handleHolderInput(a.target.value)})),e(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"},e(u,{setRef:a=>{this.ibanNumber=a},name:"ibanNumber",className:"adyen-checkout__iban-input__iban-number",classNameModifiers:["large"],placeholder:a?.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}))}}export{c as default};
+import{Component as a,createElement as e}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";const m={isValid:!1,errorMessage:"ach.accountHolderNameField.invalid",error:"ach.accountHolderNameField.invalid"},b={isValid:!1,errorMessage:"sepaDirectDebit.ibanField.invalid",error:"sepaDirectDebit.ibanField.invalid"};class c extends a{ibanNumber;constructor(a){if(super(a),this.state={status:"ready",data:{ownerName:a?.data?.ownerName||"",ibanNumber:a?.data?.ibanNumber||"",countryCode:a?.data?.countryCode||""},isValid:!1,cursor:0,errors:{},valid:{}},this.state.data.ibanNumber){const a=n(this.state.data.ibanNumber);this.state.data.ibanNumber=o(a)}if(this.state.data.ibanNumber||this.state.data.ownerName){const a=this.props.holderName?s(this.state.data.ownerName):"",e=(this.state.data.ibanNumber?"valid"===i(this.state.data.ibanNumber).status:"")&&a,t={data:this.state.data,isValid:e};this.props.onChange(t)}}static defaultProps={onChange:()=>{},countryCode:null,holderName:!0,placeholders:{},label:null};setStatus(a){this.setState({status:a})}onChange(){const a=!this.props.holderName||s(this.state.data.ownerName),e="valid"===i(this.state.data.ibanNumber).status&&a,t={data:this.state.data,isValid:e,errors:this.state.errors};this.props.onChange(t)}setData=(a,e,t)=>{this.setState((t=>({data:{...t.data,[a]:e}})),t)};setError=(a,e,t)=>{this.setState((t=>({errors:{...t.errors,[a]:e}})),t)};setValid=(a,e,t)=>{this.setState((t=>({valid:{...t.valid,[a]:e}})),t)};handleHolderInput=a=>{this.setState((e=>({data:{...e.data,ownerName:a}})),(()=>{const a=s(this.state.data.ownerName),e=null==a||a?null:m;this.setError("holder",e,this.onChange)}))};handleIbanInput=a=>{const e=a.target.value,t=n(e),r=o(t),s=i(r).status,h=l(t),u=a.target.selectionStart,m=this.state.data.ibanNumber,c=d(u,r,m);this.setState((a=>({data:{...a.data,ibanNumber:r,countryCode:h},errors:{...a.errors,iban:"invalid"===s?b:null},valid:{...a.valid,iban:"valid"===s}})),(()=>{a.target.setSelectionRange(c,c),this.onChange()}))};handleIbanBlur=a=>{const e=a.target.value;if(e.length>0){const a=i(e).status;this.setError("iban","valid"!==a?b:null,this.onChange)}else this.setError("iban",null,this.onChange)};showValidation(){const a=i(this.state.data.ibanNumber).status,e=s(this.state.data.ownerName);this.setError("iban","valid"!==a?b:null);const t=e?null:m;this.setError("holder",t,this.onChange)}render({placeholders:a},{data:s,errors:i,valid:n}){const{i18n:o}=t();return e(h,{classNameModifiers:["iban-input"],label:this.props.label},this.props.holderName&&e(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"},e(u,{name:"ownerName",className:"adyen-checkout__iban-input__owner-name",placeholder:a?.ownerName,value:s.ownerName,"aria-invalid":!!this.state.errors.holder,"aria-label":o.get("sepa.ownerName"),onInput:a=>this.handleHolderInput(a.target.value),onBlur:a=>this.handleHolderInput(a.target.value)})),e(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"},e(u,{setRef:a=>{this.ibanNumber=a},name:"ibanNumber",className:"adyen-checkout__iban-input__iban-number",classNameModifiers:["large"],placeholder:a?.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}))}}export{c as default};
 //# sourceMappingURL=IbanInput.js.map