npm - @adyen/adyen-web - Versions diffs - 6.43.0 → 6.45.0 - Mend

@adyen/adyen-web 6.43.0 → 6.45.0

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import {\n h,\n RefCallback,\n InputHTMLAttributes,\n GenericEventHandler,\n TargetedInputEvent,\n TargetedKeyboardEvent,\n TargetedFocusEvent,\n TargetedEvent\n} from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport { trimValWithOneSpace } from '../../../utils/validator-utils';\nimport Language from '../../../language';\nimport { AutocompleteValue } from './types';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends InputHTMLAttributes {\n classNameModifiers?: string[];\n isInvalid?: boolean;\n isValid?: boolean;\n readonly?: boolean;\n uniqueId?: string;\n disabled?: boolean;\n className?: string;\n placeholder?: string;\n value?: string;\n name?: string;\n checked?: boolean;\n setRef?: RefCallback<HTMLInputElement>;\n trimOnBlur?: boolean;\n i18n?: Language;\n label?: string;\n onBlurHandler?: GenericEventHandler<HTMLInputElement>;\n onFocusHandler?: GenericEventHandler<HTMLInputElement>;\n maxlength?: number \| null;\n addContextualElement?: boolean;\n type?: string;\n /*\n WCAG 2.2 autocomplete token for browser autofill.\n * Pass undefined to omit the attribute entirely.\n * @see https://www.w3.org/TR/WCAG22/#input-purposes\n /\n autocomplete: AutocompleteValue;\n}\n\nexport default function InputBase({ setRef, ...props }: Readonly<InputBaseProps>) {\n const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellcheck, type, uniqueId, disabled } = props;\n const className = props.className;\n\n /\n To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n /\n if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n }\n\n const handleInput = useCallback(\n (event: TargetedInputEvent<HTMLInputElement>) => {\n props.onInput?.(event);\n },\n [props.onInput]\n );\n\n /\n Event is fired when a key that produces a character value is pressed down.\n * ENTER keypress also triggers this event.\n \n TODO: 'keypress' event is deprecated\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event\n /\n const ~~handleKeyPress~~ = useCallback(\n (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n if (props?.~~onKeyPress~~) props.~~onKeyPress~~(event);\n },\n [props?.~~onKeyPress~~]\n );\n\n /\n Event is fired when certain keys are pressed (keys that do not output characters):\n * Backspace, Arrow keys, Shift, Ctrl, Command, Option, Esc\n \n Exception: ENTER keypress triggers 'onKeyPress' AND 'onKeyUp'\n */\n const handleKeyUp = useCallback(\n (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n if (props?.onKeyUp) props.onKeyUp(event);\n },\n [props?.onKeyUp]\n );\n\n const handleBlur = useCallback(\n (event: TargetedFocusEvent<HTMLInputElement>) => {\n props?.onBlurHandler?.(event); // From Field component\n\n if (props.trimOnBlur) {\n const input = event.target as HTMLInputElement;\n input.value = trimValWithOneSpace(input.value);\n }\n\n props?.onBlur?.(event);\n },\n [props.onBlur, props.onBlurHandler]\n );\n\n const handleFocus = useCallback(\n (event: TargetedEvent<HTMLInputElement>) => {\n props?.onFocusHandler?.(event); // From Field component\n },\n [props.onFocusHandler]\n );\n\n const inputClassNames = classNames(\n 'adyen-checkout__input',\n [`adyen-checkout__input--${type}`],\n className,\n {\n 'adyen-checkout__input--invalid': isInvalid,\n 'adyen-checkout__input--valid': isValid\n },\n (classNameModifiers ?? []).map(m => `adyen-checkout__input--${m}`)\n );\n\n // Don't spread classNameModifiers etc to input element (it ends up as an attribute on the element itself)\n const {\n classNameModifiers: cnm,\n uniqueId: uid,\n isInvalid: iiv,\n isValid: iv,\n addContextualElement: ace,\n 'aria-describedby': ariaDescribedByProp,\n autocomplete,\n ...restProps\n } = props;\n\n const internalDescribedBy = uniqueId ? `${uniqueId}${isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX}` : null;\n const extraDescribedBy = typeof ariaDescribedByProp === 'string' && ariaDescribedByProp ? ariaDescribedByProp : null;\n const mergedAriaDescribedBy = [extraDescribedBy, internalDescribedBy].filter(Boolean).join(' ') \|\| null;\n\n return (\n <input\n id={uniqueId}\n {...restProps}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'autocomplete'\n autocomplete={autocomplete}\n aria-required={restProps.required}\n type={type}\n className={inputClassNames}\n readOnly={readonly}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'spellcheck'\n spellcheck={spellcheck}\n autoCorrect={autoCorrect}\n aria-describedby={mergedAriaDescribedBy}\n aria-invalid={isInvalid}\n onInput={handleInput}\n onBlur={handleBlur}\n onFocus={handleFocus}\n ~~onKeyUp~~={~~handleKeyUp~~}\n ~~onKeyPress={handleKeyPress}\n~~ disabled={disabled}\n ref={setRef}\n />\n );\n}\n\nInputBase.defaultProps = {\n type: 'text',\n classNameModifiers: []\n};\n"],"names":["InputBase","setRef","props","autoCorrect","classNameModifiers","isInvalid","isValid","readonly","spellcheck","type","uniqueId","disabled","className","Object","prototype","hasOwnProperty","call","console","error","handleInput","useCallback","event","onInput","~~handleKeyPress~~","~~onKeyPress~~","~~handleKeyUp","onKeyUp","~~handleBlur","onBlurHandler","trimOnBlur","input","target","value","trimValWithOneSpace","onBlur","handleFocus","onFocusHandler","inputClassNames","classNames","map","m","cnm","uid","iiv","iv","addContextualElement","ace","ariaDescribedByProp","autocomplete","restProps","mergedAriaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","filter","Boolean","join","h","id","aria-required","required","readOnly","aria-describedby","aria-invalid","onFocus","ref","defaultProps"],"mappings":"oWA+Ce,SAASA,GAAUC,OAAEA,KAAWC,IAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,EACfC,IACGnB,EAAMoB,UAAUD,IAEpB,CAACnB,EAAMoB,~~UAULC~~,~~EAAiBH~~,~~EAClBC~~,IACOnB,GAAOsB,~~YAAYtB~~,EAAMsB,~~WAAWH~~,~~IAE5C~~,CAACnB,GAAOsB,~~aASNC~~,~~EAAcL~~,~~EACfC,IACOnB,GAAOwB,SAASxB,EAAMwB,QAAQL,IAEtC,CAACnB,GAAOwB,UAGNC,EAAaP,~~EACdC,IAGG,GAFAnB,~~GAAO0B~~,~~gBAAgBP~~,GAEnBnB,~~EAAM2B~~,WAAY,CAClB,MAAMC,~~EAAQT~~,~~EAAMU~~,OACpBD,EAAME,MAAQC,EAAoBH,EAAME,MAC5C,~~CAEA9B~~,~~GAAOgC~~,~~SAASb~~,IAEpB,CAACnB,~~EAAMgC~~,~~OAAQhC~~,~~EAAM0B~~,gBAGnBO,~~EAAcf~~,EACfC,IACGnB,~~GAAOkC~~,~~iBAAiBf~~,IAE5B,CAACnB,~~EAAMkC~~,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,~~0BAA0B7B~~,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,IAEnCF,GAAsB,~~IAAImC~~,IAAIC,GAAK,0BAA0BA,~~OAK9DpC~~,~~mBAAoBqC~~,~~EACpB/B~~,~~SAAUgC~~,~~EACVrC~~,~~UAAWsC~~,~~EACXrC~~,~~QAASsC~~,EACTC,qBAAsBC,EACtB,mBAAoBC,EAAmBC,aACvCA,KACGC,~~GACH/C~~,~~EAIEgD~~,EAAwB,CAD0B,iBAAxBH,GAAoCA,EAAsBA,EAAsB,~~KADpFrC~~,EAAW,GAAGA,IAAWL,~~EAAY8C~~,EAAoBC,IAAwB,MAEvCC,OAAOC,SAASC,KAAK,MAAQ,KAEnG,OACIC,EAAC1B,QAAAA,CACG2B,~~GAAI/C~~,~~KACAuC~~,EAEJD,aAAcA,EACdU,gBAAeT,EAAUU,~~SACzBlD~~,KAAMA,EACNG,~~UAAWyB~~,EACXuB,~~SAAUrD~~,EAEVC,WAAYA,EACZL,YAAaA,~~EACb0D~~,mBAAkBX,EAClBY,~~eAAczD~~,EACdiB,QAASH,~~EACTe~~,OAAQP,EACRoC,QAAS5B,EACTT,~~QAASD~~,~~EACTD~~,~~WAAYD,EACZZ,~~SAAUA,~~EACVqD~~,~~IAAK/D~~,GAGjB,CAEAD,~~EAAUiE~~,aAAe,~~CACrBxD~~,KAAM,OACNL,mBAAoB"}
1	+ {"version":3,"file":"InputBase.js","sources":["../../../../../src/components/internal/FormFields/InputBase.tsx"],"sourcesContent":["import {\n h,\n RefCallback,\n InputHTMLAttributes,\n GenericEventHandler,\n TargetedInputEvent,\n TargetedKeyboardEvent,\n TargetedFocusEvent,\n TargetedEvent\n} from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport classNames from 'classnames';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../core/Errors/constants';\nimport { trimValWithOneSpace } from '../../../utils/validator-utils';\nimport Language from '../../../language';\nimport { AutocompleteValue } from './types';\nimport './FormFields.scss';\n\nexport interface InputBaseProps extends InputHTMLAttributes {\n classNameModifiers?: string[];\n isInvalid?: boolean;\n isValid?: boolean;\n readonly?: boolean;\n uniqueId?: string;\n disabled?: boolean;\n className?: string;\n placeholder?: string;\n value?: string;\n name?: string;\n checked?: boolean;\n setRef?: RefCallback<HTMLInputElement>;\n trimOnBlur?: boolean;\n i18n?: Language;\n label?: string;\n onBlurHandler?: GenericEventHandler<HTMLInputElement>;\n onFocusHandler?: GenericEventHandler<HTMLInputElement>;\n maxlength?: number \| null;\n addContextualElement?: boolean;\n type?: string;\n /*\n WCAG 2.2 autocomplete token for browser autofill.\n * Pass undefined to omit the attribute entirely.\n * @see https://www.w3.org/TR/WCAG22/#input-purposes\n /\n autocomplete: AutocompleteValue;\n}\n\nexport default function InputBase({ setRef, ...props }: Readonly<InputBaseProps>) {\n const { autoCorrect, classNameModifiers, isInvalid, isValid, readonly = null, spellcheck, type, uniqueId, disabled } = props;\n const className = props.className;\n\n /\n To avoid confusion with misplaced/misdirected onChange handlers - InputBase only accepts onInput, onBlur & onFocus handlers.\n * The first 2 being the means by which we expect useForm--handleChangeFor validation functionality to be applied.\n */\n if (Object.prototype.hasOwnProperty.call(props, 'onChange')) {\n console.error('Error: Form fields that rely on InputBase may not have an onChange property');\n }\n\n const handleInput = useCallback(\n (event: TargetedInputEvent<HTMLInputElement>) => {\n props.onInput?.(event);\n },\n [props.onInput]\n );\n\n const handleKeyDown = useCallback(\n (event: TargetedKeyboardEvent<HTMLInputElement>) => {\n if (props?.onKeyDown) props.onKeyDown(event);\n },\n [props?.onKeyDown]\n );\n\n const handleBlur = useCallback(\n (event: TargetedFocusEvent<HTMLInputElement>) => {\n props?.onBlurHandler?.(event); // From Field component\n\n if (props.trimOnBlur) {\n const input = event.target as HTMLInputElement;\n input.value = trimValWithOneSpace(input.value);\n }\n\n props?.onBlur?.(event);\n },\n [props.onBlur, props.onBlurHandler]\n );\n\n const handleFocus = useCallback(\n (event: TargetedEvent<HTMLInputElement>) => {\n props?.onFocusHandler?.(event); // From Field component\n },\n [props.onFocusHandler]\n );\n\n const inputClassNames = classNames(\n 'adyen-checkout__input',\n [`adyen-checkout__input--${type}`],\n className,\n {\n 'adyen-checkout__input--invalid': isInvalid,\n 'adyen-checkout__input--valid': isValid\n },\n (classNameModifiers ?? []).map(m => `adyen-checkout__input--${m}`)\n );\n\n // Don't spread classNameModifiers etc to input element (it ends up as an attribute on the element itself)\n const {\n classNameModifiers: cnm,\n uniqueId: uid,\n isInvalid: iiv,\n isValid: iv,\n addContextualElement: ace,\n 'aria-describedby': ariaDescribedByProp,\n autocomplete,\n ...restProps\n } = props;\n\n const internalDescribedBy = uniqueId ? `${uniqueId}${isInvalid ? ARIA_ERROR_SUFFIX : ARIA_CONTEXT_SUFFIX}` : null;\n const extraDescribedBy = typeof ariaDescribedByProp === 'string' && ariaDescribedByProp ? ariaDescribedByProp : null;\n const mergedAriaDescribedBy = [extraDescribedBy, internalDescribedBy].filter(Boolean).join(' ') \|\| null;\n\n return (\n <input\n id={uniqueId}\n {...restProps}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'autocomplete'\n autocomplete={autocomplete}\n aria-required={restProps.required}\n type={type}\n className={inputClassNames}\n readOnly={readonly}\n // eslint-disable-next-line react/no-unknown-property -- Preact uses lowercase 'spellcheck'\n spellcheck={spellcheck}\n autoCorrect={autoCorrect}\n aria-describedby={mergedAriaDescribedBy}\n aria-invalid={isInvalid}\n onInput={handleInput}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n ref={setRef}\n />\n );\n}\n\nInputBase.defaultProps = {\n type: 'text',\n classNameModifiers: []\n};\n"],"names":["InputBase","setRef","props","autoCorrect","classNameModifiers","isInvalid","isValid","readonly","spellcheck","type","uniqueId","disabled","className","Object","prototype","hasOwnProperty","call","console","error","handleInput","useCallback","event","onInput","handleKeyDown","onKeyDown","handleBlur","onBlurHandler","trimOnBlur","input","target","value","trimValWithOneSpace","onBlur","handleFocus","onFocusHandler","inputClassNames","classNames","map","m","cnm","uid","iiv","iv","addContextualElement","ace","ariaDescribedByProp","autocomplete","restProps","mergedAriaDescribedBy","ARIA_ERROR_SUFFIX","ARIA_CONTEXT_SUFFIX","filter","Boolean","join","h","id","aria-required","required","readOnly","aria-describedby","aria-invalid","onFocus","ref","defaultProps"],"mappings":"oWA+Ce,SAASA,GAAUC,OAAEA,KAAWC,IAC3C,MAAMC,YAAEA,EAAWC,mBAAEA,EAAkBC,UAAEA,EAASC,QAAEA,EAAOC,SAAEA,EAAW,KAAIC,WAAEA,EAAUC,KAAEA,EAAIC,SAAEA,EAAQC,SAAEA,GAAaT,EACjHU,EAAYV,EAAMU,UAMpBC,OAAOC,UAAUC,eAAeC,KAAKd,EAAO,aAC5Ce,QAAQC,MAAM,+EAGlB,MAAMC,EAAcC,EACfC,IACGnB,EAAMoB,UAAUD,IAEpB,CAACnB,EAAMoB,UAGLC,EAAgBH,EACjBC,IACOnB,GAAOsB,WAAWtB,EAAMsB,UAAUH,IAE1C,CAACnB,GAAOsB,YAGNC,EAAaL,EACdC,IAGG,GAFAnB,GAAOwB,gBAAgBL,GAEnBnB,EAAMyB,WAAY,CAClB,MAAMC,EAAQP,EAAMQ,OACpBD,EAAME,MAAQC,EAAoBH,EAAME,MAC5C,CAEA5B,GAAO8B,SAASX,IAEpB,CAACnB,EAAM8B,OAAQ9B,EAAMwB,gBAGnBO,EAAcb,EACfC,IACGnB,GAAOgC,iBAAiBb,IAE5B,CAACnB,EAAMgC,iBAGLC,EAAkBC,EACpB,wBACA,CAAC,0BAA0B3B,KAC3BG,EACA,CACI,iCAAkCP,EAClC,+BAAgCC,IAEnCF,GAAsB,IAAIiC,IAAIC,GAAK,0BAA0BA,OAK9DlC,mBAAoBmC,EACpB7B,SAAU8B,EACVnC,UAAWoC,EACXnC,QAASoC,EACTC,qBAAsBC,EACtB,mBAAoBC,EAAmBC,aACvCA,KACGC,GACH7C,EAIE8C,EAAwB,CAD0B,iBAAxBH,GAAoCA,EAAsBA,EAAsB,KADpFnC,EAAW,GAAGA,IAAWL,EAAY4C,EAAoBC,IAAwB,MAEvCC,OAAOC,SAASC,KAAK,MAAQ,KAEnG,OACIC,EAAC1B,QAAAA,CACG2B,GAAI7C,KACAqC,EAEJD,aAAcA,EACdU,gBAAeT,EAAUU,SACzBhD,KAAMA,EACNG,UAAWuB,EACXuB,SAAUnD,EAEVC,WAAYA,EACZL,YAAaA,EACbwD,mBAAkBX,EAClBY,eAAcvD,EACdiB,QAASH,EACTa,OAAQP,EACRoC,QAAS5B,EACTT,UAAWD,EACXZ,SAAUA,EACVmD,IAAK7D,GAGjB,CAEAD,EAAU+D,aAAe,CACrBtD,KAAM,OACNL,mBAAoB"}

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{createElement as i}from"../../../external/preact/dist/preact.js";import n from"../../../_virtual/index.js";import t from"../Spinner/Spinner.js";const e=({children:e,status:a})=>{const o=n("adyen-checkout__loading-input__form","loading-input__form",{"loading-input__form--loading":"loading"===a}),r=n({"loading-input__spinner":!0,"loading-input__spinner--active":"loading"===a});return i("div",{style:{position:"relative"}},i("div",{className:r},i(t,null)),i("div",{className:o},e))};export{e as default};
+import{createElement as i}from"../../../external/preact/dist/preact.js";import n from"../../../_virtual/index.js";import r from"../Spinner/Spinner.js";import{useLoadingA11yReporter as o}from"../../../core/Errors/useLoadingA11yReporter.js";const e=({children:e,status:t})=>{o("loading"===t);const a=n("adyen-checkout__loading-input__form","loading-input__form",{"loading-input__form--loading":"loading"===t}),s=n({"loading-input__spinner":!0,"loading-input__spinner--active":"loading"===t});return i("div",{style:{position:"relative"}},i("div",{className:s},i(r,null)),i("div",{className:a},e))};export{e as default};
 //# sourceMappingURL=LoadingWrapper.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LoadingWrapper.js","sources":["../../../../../src/components/internal/LoadingWrapper/LoadingWrapper.tsx"],"sourcesContent":["import { ComponentChildren, h } from 'preact';\nimport classNames from 'classnames';\nimport Spinner from '../../internal/Spinner';\nimport './LoadingWrapper.scss';\n\ninterface LoadingWrapperProps {\n status?: string;\n children?: ComponentChildren;\n}\n\nconst LoadingWrapper = ({ children, status }: Readonly<LoadingWrapperProps>) => {\n const wrapperClass = classNames('adyen-checkout__loading-input__form', 'loading-input__form', {\n 'loading-input__form--loading': status === 'loading'\n });\n\n const spinnerClass = classNames({\n 'loading-input__spinner': true,\n 'loading-input__spinner--active': status === 'loading'\n });\n\n return (\n <div style={{ position: 'relative' }}>\n <div className={spinnerClass}>\n <Spinner />\n </div>\n <div className={wrapperClass}>{children}</div>\n </div>\n );\n};\n\nexport default LoadingWrapper;\n"],"names":["LoadingWrapper","children","status","wrapperClass","classNames","spinnerClass","h","div","style","position","className","Spinner"],"mappings":"~~uJAUA~~,MAAMA,EAAiB,EAAGC,WAAUC,~~aAChC~~,~~MAAMC~~,EAAeC,EAAW,sCAAuC,sBAAuB,CAC1F,+BAA2C,~~YAAXF~~,~~IAG9BG~~,EAAeD,EAAW,CAC5B,0BAA0B,EAC1B,iCAA6C,~~YAAXF~~,IAGtC,~~OACII~~,EAACC,MAAAA,CAAIC,MAAO,CAAEC,SAAU,aACpBH,EAACC,MAAAA,CAAIG,UAAWL,GACZC,EAACK,SAELL,EAACC,MAAAA,CAAIG,UAAWP,~~GAAeF~~"}
1	+ {"version":3,"file":"LoadingWrapper.js","sources":["../../../../../src/components/internal/LoadingWrapper/LoadingWrapper.tsx"],"sourcesContent":["import { ComponentChildren, h } from 'preact';\nimport classNames from 'classnames';\nimport Spinner from '../../internal/Spinner';\nimport { useLoadingA11yReporter } from '../../../core/Errors/useLoadingA11yReporter';\nimport './LoadingWrapper.scss';\n\ninterface LoadingWrapperProps {\n status?: string;\n children?: ComponentChildren;\n}\n\nconst LoadingWrapper = ({ children, status }: Readonly<LoadingWrapperProps>) => {\n // Announce the loading status to screen readers, since the spinner itself has no accessible name\n useLoadingA11yReporter(status === 'loading');\n\n const wrapperClass = classNames('adyen-checkout__loading-input__form', 'loading-input__form', {\n 'loading-input__form--loading': status === 'loading'\n });\n\n const spinnerClass = classNames({\n 'loading-input__spinner': true,\n 'loading-input__spinner--active': status === 'loading'\n });\n\n return (\n <div style={{ position: 'relative' }}>\n <div className={spinnerClass}>\n <Spinner />\n </div>\n <div className={wrapperClass}>{children}</div>\n </div>\n );\n};\n\nexport default LoadingWrapper;\n"],"names":["LoadingWrapper","children","status","useLoadingA11yReporter","wrapperClass","classNames","spinnerClass","h","div","style","position","className","Spinner"],"mappings":"+OAWA,MAAMA,EAAiB,EAAGC,WAAUC,aAEhCC,EAAkC,YAAXD,GAEvB,MAAME,EAAeC,EAAW,sCAAuC,sBAAuB,CAC1F,+BAA2C,YAAXH,IAG9BI,EAAeD,EAAW,CAC5B,0BAA0B,EAC1B,iCAA6C,YAAXH,IAGtC,OACIK,EAACC,MAAAA,CAAIC,MAAO,CAAEC,SAAU,aACpBH,EAACC,MAAAA,CAAIG,UAAWL,GACZC,EAACK,SAELL,EAACC,MAAAA,CAAIG,UAAWP,GAAeH"}

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{createElement as o}from"../../../external/preact/dist/preact.js";import t from"../Button/Button.js";import{useCoreContext as r}from"../../../core/Context/CoreProvider.js";import{createButtonLabel as e,createSecondaryLabel as s}from"./utils.js";import a from"./components/SecondaryButtonLabel.js";import{useAmount as m,useSecondaryAmount as i}from"../../../core/Context/AmountProvider.js";import{isAmountValid as n}from"../../../utils/amount-util.js";const l=({customAmount:l,classNameModifiers:u=[],label:c,...d})=>{const{amount:p,isZeroAuth:f}=m(),{secondaryAmount:j}=i(),{i18n:b}=r(),x=e(b,c,p,f,l,j),A=s(b,j,n(p),f,c),y=d.disabled||"loading"===d.status;return o(t,{...d,disabled:y,classNameModifiers:[...u,"pay"],label:x},A&&o(a,{label:A}))};export{l as default};
+import{createElement as o}from"../../../external/preact/dist/preact.js";import t from"../Button/Button.js";import{useCoreContext as e}from"../../../core/Context/CoreProvider.js";import{createButtonLabel as r,createSecondaryLabel as s}from"./utils.js";import m from"./components/SecondaryButtonLabel.js";import{useAmount as i,useSecondaryAmount as a}from"../../../core/Context/AmountProvider.js";import{isAmountValid as n}from"../../../utils/amount-util.js";const u=({customAmount:u,classNameModifiers:l=[],label:c,icon:d,showReview:p,...f})=>{const{amount:b,isZeroAuth:j}=i(),{secondaryAmount:A}=a(),{i18n:v}=e(),h=r(v,{customLabel:c,amount:b,isZeroAuth:j,customAmount:u,secondaryAmount:A,showReview:p}),w=d&&!p?d:void 0,x=s(v,A,n(b),j,c),y=f.disabled||"loading"===f.status;return o(t,{...f,icon:w,disabled:y,classNameModifiers:[...l,"pay"],label:h},x&&o(m,{label:x}))};export{u as default};
 //# sourceMappingURL=PayButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PayButton.js","sources":["../../../../../src/components/internal/PayButton/PayButton.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ButtonProps } from '../Button/types';\nimport { createButtonLabel, createSecondaryLabel } from './utils';\nimport SecondaryButtonLabel from './components/SecondaryButtonLabel';\nimport { useAmount, useSecondaryAmount } from '../../../core/Context/AmountProvider';\nimport type { PaymentAmount } from '../../../types';\nimport { isAmountValid } from '../../../utils/amount-util';\n\nexport interface PayButtonProps extends ButtonProps {\n /*\n Class name modifiers will be used as: `adyen-checkout__image--${modifier}`\n /\n classNameModifiers?: string[];\n /\n Custom amount that can be passed to the button.\n * This is useful when the amount is not available in the amount provider, such as Giftcard scenario where\n * we need to display the remaining amount\n */\n customAmount?: PaymentAmount;\n label?: string;\n status?: string;\n disabled?: boolean;\n icon?: string;\n}\n\nconst PayButton = ({ customAmount, classNameModifiers = [], label, ...props }: Readonly<PayButtonProps>) => {\n const { amount, isZeroAuth } = useAmount();\n const { secondaryAmount } = useSecondaryAmount();\n const { i18n } = useCoreContext();\n\n const buttonLabel = createButtonLabel(i18n, label, amount, isZeroAuth, customAmount, secondaryAmount);\n const secondaryAmountLabel = createSecondaryLabel(i18n, secondaryAmount, isAmountValid(amount), isZeroAuth, label);\n\n const isDisabled = props.disabled \|\| props.status === 'loading';\n\n return (\n <Button {...props} disabled={isDisabled} classNameModifiers={[...classNameModifiers, 'pay']} label={buttonLabel}>\n {secondaryAmountLabel && <SecondaryButtonLabel label={secondaryAmountLabel} />}\n </Button>\n );\n};\n\nexport default PayButton;\n"],"names":["PayButton","customAmount","classNameModifiers","label","props","amount","isZeroAuth","useAmount","secondaryAmount","useSecondaryAmount","i18n","useCoreContext","buttonLabel","createButtonLabel","secondaryAmountLabel","createSecondaryLabel","isAmountValid","isDisabled","disabled","status","h","Button","SecondaryButtonLabel"],"mappings":"~~ycA2BA~~,MAAMA,EAAY,EAAGC,eAAcC,qBAAqB,GAAIC,~~WAAUC~~,~~MAClE~~,MAAMC,OAAEA,EAAMC,WAAEA,GAAeC,KACzBC,gBAAEA,GAAoBC,KACtBC,KAAEA,GAASC,IAEXC,EAAcC,EAAkBH,~~EAAMP~~,~~EAAOE~~,~~EAAQC~~,~~EAAYL~~,~~EAAcO~~,~~GAC~~/EM,EAAuBC,~~EAAqBL~~,EAAMF,~~EAAiBQ~~,~~EAAcX~~,GAASC,~~EAAYH~~,~~GAEtGc~~,~~EAAab~~,~~EAAMc~~,UAA6B,~~YAAjBd~~,~~EAAMe~~,OAE3C,OACIC,EAACC,EAAAA,~~IAAWjB~~,~~EAAOc~~,SAAUD,~~EAAYf~~,mBAAoB,IAAIA,EAAoB,OAAQC,~~MAAOS~~,~~GAC/FE~~,GAAwBM,EAACE,EAAAA,~~CAAqBnB~~,~~MAAOW~~"}
1	+ {"version":3,"file":"PayButton.js","sources":["../../../../../src/components/internal/PayButton/PayButton.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Button from '../Button';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport { ButtonProps } from '../Button/types';\nimport { createButtonLabel, createSecondaryLabel } from './utils';\nimport SecondaryButtonLabel from './components/SecondaryButtonLabel';\nimport { useAmount, useSecondaryAmount } from '../../../core/Context/AmountProvider';\nimport type { PaymentAmount } from '../../../types';\nimport { isAmountValid } from '../../../utils/amount-util';\n\nexport interface PayButtonProps extends ButtonProps {\n /*\n Class name modifiers will be used as: `adyen-checkout__image--${modifier}`\n /\n classNameModifiers?: string[];\n /\n Custom amount that can be passed to the button.\n * This is useful when the amount is not available in the amount provider, such as Giftcard scenario where\n * we need to display the remaining amount\n */\n customAmount?: PaymentAmount;\n label?: string;\n status?: string;\n disabled?: boolean;\n icon?: string;\n showReview?: boolean;\n}\n\nconst PayButton = ({ customAmount, classNameModifiers = [], label, icon, showReview, ...props }: Readonly<PayButtonProps>) => {\n const { amount, isZeroAuth } = useAmount();\n const { secondaryAmount } = useSecondaryAmount();\n const { i18n } = useCoreContext();\n\n const buttonLabel = createButtonLabel(i18n, { customLabel: label, amount, isZeroAuth, customAmount, secondaryAmount, showReview });\n const buttonIcon = icon && !showReview ? icon : undefined;\n const secondaryAmountLabel = createSecondaryLabel(i18n, secondaryAmount, isAmountValid(amount), isZeroAuth, label);\n\n const isDisabled = props.disabled \|\| props.status === 'loading';\n\n return (\n <Button {...props} icon={buttonIcon} disabled={isDisabled} classNameModifiers={[...classNameModifiers, 'pay']} label={buttonLabel}>\n {secondaryAmountLabel && <SecondaryButtonLabel label={secondaryAmountLabel} />}\n </Button>\n );\n};\n\nexport default PayButton;\n"],"names":["PayButton","customAmount","classNameModifiers","label","icon","showReview","props","amount","isZeroAuth","useAmount","secondaryAmount","useSecondaryAmount","i18n","useCoreContext","buttonLabel","createButtonLabel","customLabel","buttonIcon","undefined","secondaryAmountLabel","createSecondaryLabel","isAmountValid","isDisabled","disabled","status","h","Button","SecondaryButtonLabel"],"mappings":"ycA4BA,MAAMA,EAAY,EAAGC,eAAcC,qBAAqB,GAAIC,QAAOC,OAAMC,gBAAeC,MACpF,MAAMC,OAAEA,EAAMC,WAAEA,GAAeC,KACzBC,gBAAEA,GAAoBC,KACtBC,KAAEA,GAASC,IAEXC,EAAcC,EAAkBH,EAAM,CAAEI,YAAab,EAAOI,SAAQC,aAAYP,eAAcS,kBAAiBL,eAC/GY,EAAab,IAASC,EAAaD,OAAOc,EAC1CC,EAAuBC,EAAqBR,EAAMF,EAAiBW,EAAcd,GAASC,EAAYL,GAEtGmB,EAAahB,EAAMiB,UAA6B,YAAjBjB,EAAMkB,OAE3C,OACIC,EAACC,EAAAA,IAAWpB,EAAOF,KAAMa,EAAYM,SAAUD,EAAYpB,mBAAoB,IAAIA,EAAoB,OAAQC,MAAOW,GACjHK,GAAwBM,EAACE,EAAAA,CAAqBxB,MAAOgB"}

package/dist/es/components/internal/PayButton/utils.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const r="/ ",n=(r,n)=>n?.value&&n?.currency?r.amount(n.value,n.currency,{currencyDisplay:n.currencyDisplay||"symbol"}):"",t=r=>{const n=r.get("payAmountFormat"),t=n.indexOf("%@");return t>=0&&n.substring(t+2).trim().length>0},e=(r,e,c)=>{const o=n(r,e);if(!o)return r.get("payButton");if(c&&t(r)){const n=u(r,c);return r.get("payAmountFormat").replace("%@",`${o}${n}`)}return r.get("payAmountFormat").replace("%@",o)},u=(r,n)=>{const t=n&&n?.value&&n?.currency?r.amount(n.value,n.currency,{currencyDisplay:n.currencyDisplay||"symbol"}):"";return`${t.length?"/ ":""}${t}`};function c(r,n,t,u,c,o){return n||(c?e(r,c):u?r.get("confirmPreauthorization"):e(r,t,o))}function o(r,n,e,c,o){return c||o||!e||!n||t(r)?null:u(r,n)}export{r as PAY_BTN_DIVIDER,n as amountLabel,c as createButtonLabel,o as createSecondaryLabel,e as payAmountLabel};
+const t="/ ",n=(t,n)=>n?.value&&n?.currency?t.amount(n.value,n.currency,{currencyDisplay:n.currencyDisplay||"symbol"}):"",r=t=>{const n=t.get("payAmountFormat"),r=n.indexOf("%@");return r>=0&&n.substring(r+2).trim().length>0},e=(t,e,o)=>{const c=n(t,e);if(!c)return t.get("payButton");if(o&&r(t)){const n=u(t,o);return t.get("payAmountFormat").replace("%@",`${c}${n}`)}return t.get("payAmountFormat").replace("%@",c)},u=(t,n)=>{const r=n&&n?.value&&n?.currency?t.amount(n.value,n.currency,{currencyDisplay:n.currencyDisplay||"symbol"}):"";return`${r.length?"/ ":""}${r}`};function o(t,{customLabel:n,amount:r,isZeroAuth:u,customAmount:o,secondaryAmount:c,showReview:a}){return a?t.get("continue"):n||(o?e(t,o):u?t.get("confirmPreauthorization"):e(t,r,c))}function c(t,n,e,o,c){return o||c||!e||!n||r(t)?null:u(t,n)}export{t as PAY_BTN_DIVIDER,n as amountLabel,o as createButtonLabel,c as createSecondaryLabel,e as payAmountLabel};
 //# sourceMappingURL=utils.js.map

package/dist/es/components/internal/PayButton/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/PayButton/utils.ts"],"sourcesContent":["import Language from '../../../language';\nimport type { PaymentAmount } from '../../../types/global-types';\n\nexport const PAY_BTN_DIVIDER = '/ ';\n\nconst amountLabel = (i18n, amount: PaymentAmount) =>\n !!amount?.value && !!amount?.currency ? i18n.amount(amount.value, amount.currency, { currencyDisplay: amount.currencyDisplay \|\| 'symbol' }) : '';\n\nconst isAmountFirstFormat = (i18n: Language): boolean => {\n const format = i18n.get('payAmountFormat');\n const tokenIndex = format.indexOf('%@');\n return tokenIndex >= 0 && format.substring(tokenIndex + 2).trim().length > 0;\n};\n\nconst payAmountLabel = (i18n: Language, amount: PaymentAmount, secondaryAmount?: PaymentAmount) => {\n const amountLabelValue = amountLabel(i18n, amount);\n if (!amountLabelValue) {\n return i18n.get('payButton');\n }\n\n if (secondaryAmount && isAmountFirstFormat(i18n)) {\n const secondaryAmountValue = formatSecondaryAmountLabel(i18n, secondaryAmount);\n return i18n.get('payAmountFormat').replace('%@', `${amountLabelValue}${secondaryAmountValue}`);\n }\n\n return i18n.get('payAmountFormat').replace('%@', amountLabelValue);\n};\n\nconst formatSecondaryAmountLabel = (i18n: Language, secondaryAmount: PaymentAmount) => {\n const convertedSecondaryAmount =\n secondaryAmount && !!secondaryAmount?.value && !!secondaryAmount?.currency\n ? i18n.amount(secondaryAmount.value, secondaryAmount.currency, { currencyDisplay: secondaryAmount.currencyDisplay \|\| 'symbol' })\n : '';\n\n const divider = convertedSecondaryAmount.length ? PAY_BTN_DIVIDER : '';\n\n return `${divider}${convertedSecondaryAmount}`;\n};\n\nfunction createButtonLabel(\n i18n: Language,\n customLabel: string,\n amount: PaymentAmount,\n isZeroAuth: boolean,\n customAmount?: PaymentAmount,\n secondaryAmount?: PaymentAmount\n): string {\n if (customLabel) {\n return customLabel;\n }\n\n if (customAmount) {\n return payAmountLabel(i18n, customAmount);\n }\n\n return isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount, secondaryAmount);\n}\n\n/*\n Show the secondaryLabel if:\n * - it's not zero auth, and\n * - we don't have a predefined label (i.e. redirect, qrcode, await based comps...), and\n * - we do have an amount object (merchant might not be passing this in order to not show the amount on the button), and\n * - we have a secondaryAmount object with some properties, and\n * - the payAmountFormat is not amount-first (e.g. \"%@ betalen\"), since in that case the secondary\n * amount is already embedded in the button label via createButtonLabel\n */\nfunction createSecondaryLabel(\n i18n: Language,\n secondaryAmount: PaymentAmount,\n isAmountValid: boolean,\n isZeroAuth: boolean,\n customLabel: string\n): string \| null {\n if (isZeroAuth \|\| customLabel \|\| !isAmountValid \|\| !secondaryAmount) {\n return null;\n }\n\n if (isAmountFirstFormat(i18n)) {\n return null;\n }\n\n return formatSecondaryAmountLabel(i18n, secondaryAmount);\n}\n\nexport { payAmountLabel, amountLabel, createButtonLabel, createSecondaryLabel };\n"],"names":["PAY_BTN_DIVIDER","amountLabel","i18n","amount","value","currency","currencyDisplay","isAmountFirstFormat","format","get","tokenIndex","indexOf","substring","trim","length","payAmountLabel","secondaryAmount","amountLabelValue","secondaryAmountValue","formatSecondaryAmountLabel","replace","convertedSecondaryAmount","createButtonLabel","customLabel","isZeroAuth","customAmount","createSecondaryLabel","isAmountValid"],"mappings":"AAGO,MAAMA,EAAkB,KAEzBC,EAAc,CAACC,EAAMC,IACrBA,GAAQC,OAAWD,GAAQE,SAAWH,EAAKC,OAAOA,EAAOC,MAAOD,EAAOE,SAAU,CAAEC,gBAAiBH,EAAOG,iBAAmB,WAAc,GAE5IC,EAAuBL,IACzB,MAAMM,EAASN,EAAKO,IAAI,mBAClBC,EAAaF,EAAOG,QAAQ,MAClC,OAAOD,GAAc,GAAKF,EAAOI,UAAUF,EAAa,GAAGG,OAAOC,OAAS,GAGzEC,EAAiB,CAACb,EAAgBC,EAAuBa,KAC3D,MAAMC,EAAmBhB,EAAYC,EAAMC,GAC3C,IAAKc,EACD,OAAOf,EAAKO,IAAI,aAGpB,GAAIO,GAAmBT,EAAoBL,GAAO,CAC9C,MAAMgB,EAAuBC,EAA2BjB,EAAMc,GAC9D,OAAOd,EAAKO,IAAI,mBAAmBW,QAAQ,KAAM,GAAGH,IAAmBC,IAC3E,CAEA,OAAOhB,EAAKO,IAAI,mBAAmBW,QAAQ,KAAMH,IAG/CE,EAA6B,CAACjB,EAAgBc,KAChD,MAAMK,EACFL,GAAqBA,GAAiBZ,OAAWY,GAAiBX,SAC5DH,EAAKC,OAAOa,EAAgBZ,MAAOY,EAAgBX,SAAU,CAAEC,gBAAiBU,EAAgBV,iBAAmB,WACnH,GAIV,MAAO,GAFSe,EAAyBP,OA/Bd,KA+ByC,KAEhDO,KAGxB,SAASC,EACLpB,~~EACAqB~~,~~EACApB~~,~~EACAqB~~,~~EACAC~~,~~EACAT~~,~~GAEA~~,~~OAAIO~~,IAIAE,EACOV,EAAeb,EAAMuB,GAGzBD,EAAatB,EAAKO,IAAI,2BAA6BM,EAAeb,EAAMC,EAAQa,GAC3F,CAWA,~~SAASU~~,~~EACLxB~~,EACAc,~~EACAW~~,~~EACAH~~,EACAD,GAEA,OAAIC,GAAcD,~~IAAgBI~~,~~IAAkBX~~,GAIhDT,EAAoBL,GAHb,KAOJiB,EAA2BjB,EAAMc,EAC5C"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../../src/components/internal/PayButton/utils.ts"],"sourcesContent":["import Language from '../../../language';\nimport type { PaymentAmount } from '../../../types/global-types';\n\nexport const PAY_BTN_DIVIDER = '/ ';\n\nconst amountLabel = (i18n, amount: PaymentAmount) =>\n !!amount?.value && !!amount?.currency ? i18n.amount(amount.value, amount.currency, { currencyDisplay: amount.currencyDisplay \|\| 'symbol' }) : '';\n\nconst isAmountFirstFormat = (i18n: Language): boolean => {\n const format = i18n.get('payAmountFormat');\n const tokenIndex = format.indexOf('%@');\n return tokenIndex >= 0 && format.substring(tokenIndex + 2).trim().length > 0;\n};\n\nconst payAmountLabel = (i18n: Language, amount: PaymentAmount, secondaryAmount?: PaymentAmount) => {\n const amountLabelValue = amountLabel(i18n, amount);\n if (!amountLabelValue) {\n return i18n.get('payButton');\n }\n\n if (secondaryAmount && isAmountFirstFormat(i18n)) {\n const secondaryAmountValue = formatSecondaryAmountLabel(i18n, secondaryAmount);\n return i18n.get('payAmountFormat').replace('%@', `${amountLabelValue}${secondaryAmountValue}`);\n }\n\n return i18n.get('payAmountFormat').replace('%@', amountLabelValue);\n};\n\nconst formatSecondaryAmountLabel = (i18n: Language, secondaryAmount: PaymentAmount) => {\n const convertedSecondaryAmount =\n secondaryAmount && !!secondaryAmount?.value && !!secondaryAmount?.currency\n ? i18n.amount(secondaryAmount.value, secondaryAmount.currency, { currencyDisplay: secondaryAmount.currencyDisplay \|\| 'symbol' })\n : '';\n\n const divider = convertedSecondaryAmount.length ? PAY_BTN_DIVIDER : '';\n\n return `${divider}${convertedSecondaryAmount}`;\n};\n\nfunction createButtonLabel(\n i18n: Language,\n {\n customLabel,\n amount,\n isZeroAuth,\n customAmount,\n secondaryAmount,\n showReview\n }: {\n customLabel: string;\n amount: PaymentAmount;\n isZeroAuth: boolean;\n customAmount?: PaymentAmount;\n secondaryAmount?: PaymentAmount;\n showReview?: boolean;\n }\n): string {\n if (showReview) {\n return i18n.get('continue');\n }\n\n if (customLabel) {\n return customLabel;\n }\n\n if (customAmount) {\n return payAmountLabel(i18n, customAmount);\n }\n\n return isZeroAuth ? i18n.get('confirmPreauthorization') : payAmountLabel(i18n, amount, secondaryAmount);\n}\n\n/*\n Show the secondaryLabel if:\n * - it's not zero auth, and\n * - we don't have a predefined label (i.e. redirect, qrcode, await based comps...), and\n * - we do have an amount object (merchant might not be passing this in order to not show the amount on the button), and\n * - we have a secondaryAmount object with some properties, and\n * - the payAmountFormat is not amount-first (e.g. \"%@ betalen\"), since in that case the secondary\n * amount is already embedded in the button label via createButtonLabel\n */\nfunction createSecondaryLabel(\n i18n: Language,\n secondaryAmount: PaymentAmount,\n isAmountValid: boolean,\n isZeroAuth: boolean,\n customLabel: string\n): string \| null {\n if (isZeroAuth \|\| customLabel \|\| !isAmountValid \|\| !secondaryAmount) {\n return null;\n }\n\n if (isAmountFirstFormat(i18n)) {\n return null;\n }\n\n return formatSecondaryAmountLabel(i18n, secondaryAmount);\n}\n\nexport { payAmountLabel, amountLabel, createButtonLabel, createSecondaryLabel };\n"],"names":["PAY_BTN_DIVIDER","amountLabel","i18n","amount","value","currency","currencyDisplay","isAmountFirstFormat","format","get","tokenIndex","indexOf","substring","trim","length","payAmountLabel","secondaryAmount","amountLabelValue","secondaryAmountValue","formatSecondaryAmountLabel","replace","convertedSecondaryAmount","createButtonLabel","customLabel","isZeroAuth","customAmount","showReview","createSecondaryLabel","isAmountValid"],"mappings":"AAGO,MAAMA,EAAkB,KAEzBC,EAAc,CAACC,EAAMC,IACrBA,GAAQC,OAAWD,GAAQE,SAAWH,EAAKC,OAAOA,EAAOC,MAAOD,EAAOE,SAAU,CAAEC,gBAAiBH,EAAOG,iBAAmB,WAAc,GAE5IC,EAAuBL,IACzB,MAAMM,EAASN,EAAKO,IAAI,mBAClBC,EAAaF,EAAOG,QAAQ,MAClC,OAAOD,GAAc,GAAKF,EAAOI,UAAUF,EAAa,GAAGG,OAAOC,OAAS,GAGzEC,EAAiB,CAACb,EAAgBC,EAAuBa,KAC3D,MAAMC,EAAmBhB,EAAYC,EAAMC,GAC3C,IAAKc,EACD,OAAOf,EAAKO,IAAI,aAGpB,GAAIO,GAAmBT,EAAoBL,GAAO,CAC9C,MAAMgB,EAAuBC,EAA2BjB,EAAMc,GAC9D,OAAOd,EAAKO,IAAI,mBAAmBW,QAAQ,KAAM,GAAGH,IAAmBC,IAC3E,CAEA,OAAOhB,EAAKO,IAAI,mBAAmBW,QAAQ,KAAMH,IAG/CE,EAA6B,CAACjB,EAAgBc,KAChD,MAAMK,EACFL,GAAqBA,GAAiBZ,OAAWY,GAAiBX,SAC5DH,EAAKC,OAAOa,EAAgBZ,MAAOY,EAAgBX,SAAU,CAAEC,gBAAiBU,EAAgBV,iBAAmB,WACnH,GAIV,MAAO,GAFSe,EAAyBP,OA/Bd,KA+ByC,KAEhDO,KAGxB,SAASC,EACLpB,GACAqB,YACIA,EAAWpB,OACXA,EAAMqB,WACNA,EAAUC,aACVA,EAAYT,gBACZA,EAAeU,WACfA,IAUJ,OAAIA,EACOxB,EAAKO,IAAI,YAGhBc,IAIAE,EACOV,EAAeb,EAAMuB,GAGzBD,EAAatB,EAAKO,IAAI,2BAA6BM,EAAeb,EAAMC,EAAQa,GAC3F,CAWA,SAASW,EACLzB,EACAc,EACAY,EACAJ,EACAD,GAEA,OAAIC,GAAcD,IAAgBK,IAAkBZ,GAIhDT,EAAoBL,GAHb,KAOJiB,EAA2BjB,EAAMc,EAC5C"}

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

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import{usePaymentStatusTimer as o}from"../../../hooks/usePaymentStatusTimer/usePaymentStatusTimer.js";import{DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS as r,DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS as a,DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS as n,DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN as i}from"../../../hooks/usePaymentStatusTimer/constants.js";import c from"../../../utils/useAutoFocus.js";import d from"../Button/Button.js";import s from"../ContentSeparator/ContentSeparator.js";import{AnalyticsInfoEvent as l,UiTarget as m,InfoEventType as p}from"../../../core/Analytics/events/AnalyticsInfoEvent.js";import u from"../Spinner/Spinner.js";import{QRDetails as y}from"./components/QRDetails.js";import{QRFinalState as _}from"./components/QRFinalState.js";import{QRLoaderDetailsProvider as h}from"./QRLoaderDetailsProvider.js";import{redirectToApp as g}from"../../../utils/urls.js";import{useAmount as f}from"../../../core/Context/AmountProvider.js";function q(r){const{i18n:a,loadingContext:n}=t(),{state:i,actions:q}=o({loadingContext:n,paymentData:r.paymentData,clientKey:r.clientKey,delay:r.delay,throttleTime:r.throttleTime,throttleInterval:r.throttledInterval,type:r.type,onError:r.onError,onComplete:r.onComplete,onActionHandled:r.onActionHandled}),{completed:C,expired:k,loading:b,percentage:T}=i,{onTick:v,onTimeUp:j}=q,{showAmount:N,url:w,brandLogo:A,brandName:D,countdownTime:P,type:I,onActionHandled:S}=r,{amount:x}=f(),$=r.qrCodeData?`${n}utility/v1/barcode.png?type=qrCode&data=${r.qrCodeData}&clientKey=${r.clientKey}`:r.qrCodeImage,B=c();if(k)return e(_,{image:"error",message:a.get("error.subtitle.payment")});if(C)return e(_,{image:"success",message:a.get("creditCard.success")});if(b)return e("div",{className:"adyen-checkout__qr-loader"},A&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{alt:D,src:A,className:"adyen-checkout__qr-loader__brand-logo"})),e(u,null));const E=r.classNameModifiers.map(e=>`adyen-checkout__qr-loader--${e}`);return e("div",{className:`adyen-checkout__qr-loader adyen-checkout__qr-loader--${I} ${E.join(" ")}`,"data-testid":`${I}-qr-loader`},A&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{src:A,alt:D,className:"adyen-checkout__qr-loader__brand-logo"})),N&&x&&null!==x.value&&!!x.currency&&e("h1",{className:"adyen-checkout__qr-loader__payment_amount"},a.amount(x.value,x.currency)),w&&e("div",{className:"adyen-checkout__qr-loader__app-link"},r.redirectIntroduction&&e("p",{className:"adyen-checkout__qr-loader__subtitle"},a.get(r.redirectIntroduction)),e(d,{classNameModifiers:["qr-loader"],onClick:()=>g(w),label:a.get(r.buttonLabel)}),e(s,null)),e("p",{ref:B,tabIndex:0,className:"adyen-checkout__qr-loader__subtitle"},"string"==typeof r.introduction?a.get(r.introduction):r.introduction?.()),e(h,{type:I,qrCodeImage:$,qrCodeData:r.qrCodeData,percentage:T,timeToPay:r.timeToPay,copyBtn:r.copyBtn,instructions:r.instructions,countdownTime:P,onTick:e=>v(e),onQRCodeLoad:()=>{S?.({componentType:r.type,actionDescription:"qr-code-loaded"})},onTimeUp:()=>j(),handleCopy:()=>{const e=new l({component:r.type,type:p.download,target:m.qrDownloadButton});r.onSubmitAnalytics(e)}},r.children?r.children:e(y,null)))}q.defaultProps={countdownTime:i,delay:n,throttleTime:a,throttledInterval:r,onError:()=>{},onComplete:()=>{},classNameModifiers:[],introduction:"wechatpay.scanqrcode",timeToPay:"wechatpay.timetopay",buttonLabel:"openApp",showAmount:!0};export{q as QRLoader};
+import{createElement as e}from"../../../external/preact/dist/preact.js";import{useCoreContext as t}from"../../../core/Context/CoreProvider.js";import{usePaymentStatusTimer as o}from"../../../hooks/usePaymentStatusTimer/usePaymentStatusTimer.js";import{DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS as r,DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS as n,DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS as a,DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN as i}from"../../../hooks/usePaymentStatusTimer/constants.js";import c from"../../../utils/useAutoFocus.js";import s from"../Button/Button.js";import d from"../ContentSeparator/ContentSeparator.js";import{AnalyticsInfoEvent as m,UiTarget as l,InfoEventType as p}from"../../../core/Analytics/events/AnalyticsInfoEvent.js";import{QRDetails as u}from"./components/QRDetails.js";import{QRFinalState as y}from"./components/QRFinalState.js";import{QRLoaderPendingState as _}from"./components/QRLoaderPendingState.js";import{useLoadingA11yReporter as g}from"../../../core/Errors/useLoadingA11yReporter.js";import{QRLoaderDetailsProvider as f}from"./QRLoaderDetailsProvider.js";import{redirectToApp as h}from"../../../utils/urls.js";import{useAmount as C}from"../../../core/Context/AmountProvider.js";function q(r){const{i18n:n,loadingContext:a}=t(),{state:i,actions:q}=o({loadingContext:a,paymentData:r.paymentData,clientKey:r.clientKey,delay:r.delay,throttleTime:r.throttleTime,throttleInterval:r.throttledInterval,type:r.type,onError:r.onError,onComplete:r.onComplete,onActionHandled:r.onActionHandled}),{completed:b,expired:T,loading:j,percentage:k}=i,{onTick:v,onTimeUp:A}=q,{showAmount:N,url:w,brandLogo:P,brandName:D,countdownTime:I,type:x,onActionHandled:L}=r,{amount:S}=C(),$=r.qrCodeData?`${a}utility/v1/barcode.png?type=qrCode&data=${r.qrCodeData}&clientKey=${r.clientKey}`:r.qrCodeImage,E=c();let R;if(T&&(R=n.get("error.subtitle.payment")),b&&(R=n.get("creditCard.success")),g(j,R),T)return e(y,{image:"error",message:n.get("error.subtitle.payment")});if(b)return e(y,{image:"success",message:n.get("creditCard.success")});if(j)return e(_,{brandLogo:P,brandName:D});const B=r.classNameModifiers.map(e=>`adyen-checkout__qr-loader--${e}`);return e("div",{className:`adyen-checkout__qr-loader adyen-checkout__qr-loader--${x} ${B.join(" ")}`,"data-testid":`${x}-qr-loader`},P&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{src:P,alt:D,className:"adyen-checkout__qr-loader__brand-logo"})),N&&S&&null!==S.value&&!!S.currency&&e("h1",{className:"adyen-checkout__qr-loader__payment_amount"},n.amount(S.value,S.currency)),w&&e("div",{className:"adyen-checkout__qr-loader__app-link"},r.redirectIntroduction&&e("p",{className:"adyen-checkout__qr-loader__subtitle"},n.get(r.redirectIntroduction)),e(s,{classNameModifiers:["qr-loader"],onClick:()=>h(w),label:n.get(r.buttonLabel)}),e(d,null)),e("p",{ref:E,tabIndex:0,className:"adyen-checkout__qr-loader__subtitle"},"string"==typeof r.introduction?n.get(r.introduction):r.introduction?.()),e(f,{type:x,qrCodeImage:$,qrCodeData:r.qrCodeData,percentage:k,timeToPay:r.timeToPay,copyBtn:r.copyBtn,instructions:r.instructions,countdownTime:I,onTick:e=>v(e),onQRCodeLoad:()=>{L?.({componentType:r.type,actionDescription:"qr-code-loaded"})},onTimeUp:()=>A(),handleCopy:()=>{const e=new m({component:r.type,type:p.download,target:l.qrDownloadButton});r.onSubmitAnalytics(e)}},r.children?r.children:e(u,null)))}q.defaultProps={countdownTime:i,delay:a,throttleTime:n,throttledInterval:r,onError:()=>{},onComplete:()=>{},classNameModifiers:[],introduction:"wechatpay.scanqrcode",timeToPay:"wechatpay.timetopay",buttonLabel:"openApp",showAmount:!0};export{q as QRLoader};
 //# sourceMappingURL=QRLoader.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"QRLoader.js","sources":["../../../../../src/components/internal/QRLoader/QRLoader.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport {\n usePaymentStatusTimer,\n DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS\n} from '../../../hooks/usePaymentStatusTimer';\nimport useAutoFocus from '../../../utils/useAutoFocus';\nimport Button from '../Button';\nimport ContentSeparator from '../ContentSeparator';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { CountdownTime } from '../Countdown/types';\nimport Spinner from '../Spinner';\nimport { QRDetails } from './components/QRDetails';\nimport { QRFinalState } from './components/QRFinalState';\nimport { QRLoaderDetailsProvider } from './QRLoaderDetailsProvider';\nimport { QRLoaderProps } from './types';\nimport { redirectToApp } from '../../../utils/urls';\nimport './QRLoader.scss';\nimport { useAmount } from '../../../core/Context/AmountProvider';\n\nconst QRCODE_URL = 'utility/v1/barcode.png?type=qrCode&data=';\n\nexport function QRLoader(props: Readonly<QRLoaderProps>) {\n const { i18n, loadingContext } = useCoreContext();\n\n const { state: timerState, actions: timerActions } = usePaymentStatusTimer({\n loadingContext,\n paymentData: props.paymentData,\n clientKey: props.clientKey,\n delay: props.delay,\n throttleTime: props.throttleTime,\n throttleInterval: props.throttledInterval,\n type: props.type,\n onError: props.onError,\n onComplete: props.onComplete,\n onActionHandled: props.onActionHandled\n });\n\n const { completed, expired, loading, percentage } = timerState;\n const { onTick, onTimeUp } = timerActions;\n\n const { showAmount, url, brandLogo, brandName, countdownTime, type, onActionHandled } = props;\n const { amount } = useAmount();\n\n const qrCodeImage = props.qrCodeData ? `${loadingContext}${QRCODE_URL}${props.qrCodeData}&clientKey=${props.clientKey}` : props.qrCodeImage;\n\n const handleCopy = () => {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.download,\n target: UiTarget.qrDownloadButton\n });\n props.onSubmitAnalytics(event);\n };\n\n const onQrCodeLoad = () => {\n onActionHandled?.({\n componentType: props.type,\n actionDescription: 'qr-code-loaded'\n });\n };\n\n const qrSubtitleRef = useAutoFocus();\n\n if (expired) {\n return <QRFinalState image=\"error\" message={i18n.get('error.subtitle.payment')} />;\n }\n\n if (completed) {\n return <QRFinalState image=\"success\" message={i18n.get('creditCard.success')} />;\n }\n\n if (loading) {\n return (\n <div className=\"adyen-checkout__qr-loader\">\n {brandLogo && (\n <div className=\"adyen-checkout__qr-loader__brand-logo-wrapper\">\n <img alt={brandName} src={brandLogo} className=\"adyen-checkout__qr-loader__brand-logo\" />\n </div>\n )}\n <Spinner />\n </div>\n );\n }\n\n const classnames = props.classNameModifiers.map(m => `adyen-checkout__qr-loader--${m}`);\n\n return (\n <div className={`adyen-checkout__qr-loader adyen-checkout__qr-loader--${type} ${classnames.join(' ')}`} data-testid={`${type}-qr-loader`}>\n {brandLogo && (\n <div className=\"adyen-checkout__qr-loader__brand-logo-wrapper\">\n <img src={brandLogo} alt={brandName} className=\"adyen-checkout__qr-loader__brand-logo\" />\n </div>\n )}\n\n {showAmount && amount && amount.value !== null && !!amount.currency && (\n <h1 className=\"adyen-checkout__qr-loader__payment_amount\">{i18n.amount(amount.value, amount.currency)}</h1>\n )}\n\n {url && (\n <div className=\"adyen-checkout__qr-loader__app-link\">\n {props.redirectIntroduction && <p className=\"adyen-checkout__qr-loader__subtitle\">{i18n.get(props.redirectIntroduction)}</p>}\n <Button classNameModifiers={['qr-loader']} onClick={() => redirectToApp(url)} label={i18n.get(props.buttonLabel)} />\n <ContentSeparator />\n </div>\n )}\n\n {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n <p ref={qrSubtitleRef} tabIndex={0} className=\"adyen-checkout__qr-loader__subtitle\">\n {typeof props.introduction === 'string' ? i18n.get(props.introduction) : props.introduction?.()}\n </p>\n\n <QRLoaderDetailsProvider\n type={type}\n qrCodeImage={qrCodeImage}\n qrCodeData={props.qrCodeData}\n percentage={percentage}\n timeToPay={props.timeToPay}\n copyBtn={props.copyBtn}\n instructions={props.instructions}\n countdownTime={countdownTime}\n onTick={(time: CountdownTime) => onTick(time)}\n onQRCodeLoad={onQrCodeLoad}\n onTimeUp={() => onTimeUp()}\n handleCopy={handleCopy}\n >\n {props.children ? props.children : <QRDetails />}\n </QRLoaderDetailsProvider>\n </div>\n );\n}\n\nQRLoader.defaultProps = {\n countdownTime: DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n delay: DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n throttleTime: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS,\n throttledInterval: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n onError: () => {},\n onComplete: () => {},\n classNameModifiers: [],\n introduction: 'wechatpay.scanqrcode',\n timeToPay: 'wechatpay.timetopay',\n buttonLabel: 'openApp',\n showAmount: true\n};\n"],"names":["QRLoader","props","i18n","loadingContext","useCoreContext","state","timerState","actions","timerActions","usePaymentStatusTimer","paymentData","clientKey","delay","throttleTime","throttleInterval","throttledInterval","type","onError","onComplete","onActionHandled","completed","expired","loading","percentage","onTick","onTimeUp","showAmount","url","brandLogo","brandName","countdownTime","amount","useAmount","qrCodeImage","qrCodeData","qrSubtitleRef","useAutoFocus","h","QRFinalState","image","message","get","div","className","img","alt","src","Spinner","classnames","classNameModifiers","map","m","join","data-testid","value","currency","h1","redirectIntroduction","p","Button","onClick","redirectToApp","label","buttonLabel","ContentSeparator","ref","tabIndex","introduction","QRLoaderDetailsProvider","timeToPay","copyBtn","instructions","time","onQRCodeLoad","componentType","actionDescription","handleCopy","event","AnalyticsInfoEvent","component","InfoEventType","download","target","UiTarget","qrDownloadButton","onSubmitAnalytics","children","QRDetails","defaultProps","DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN","DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS"],"mappings":"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"}
1	+ {"version":3,"file":"QRLoader.js","sources":["../../../../../src/components/internal/QRLoader/QRLoader.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport {\n usePaymentStatusTimer,\n DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS\n} from '../../../hooks/usePaymentStatusTimer';\nimport useAutoFocus from '../../../utils/useAutoFocus';\nimport Button from '../Button';\nimport ContentSeparator from '../ContentSeparator';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { CountdownTime } from '../Countdown/types';\nimport { QRDetails } from './components/QRDetails';\nimport { QRFinalState } from './components/QRFinalState';\nimport { QRLoaderPendingState } from './components/QRLoaderPendingState';\nimport { useLoadingA11yReporter } from '../../../core/Errors/useLoadingA11yReporter';\nimport { QRLoaderDetailsProvider } from './QRLoaderDetailsProvider';\nimport { QRLoaderProps } from './types';\nimport { redirectToApp } from '../../../utils/urls';\nimport './QRLoader.scss';\nimport { useAmount } from '../../../core/Context/AmountProvider';\n\nconst QRCODE_URL = 'utility/v1/barcode.png?type=qrCode&data=';\n\nexport function QRLoader(props: Readonly<QRLoaderProps>) {\n const { i18n, loadingContext } = useCoreContext();\n\n const { state: timerState, actions: timerActions } = usePaymentStatusTimer({\n loadingContext,\n paymentData: props.paymentData,\n clientKey: props.clientKey,\n delay: props.delay,\n throttleTime: props.throttleTime,\n throttleInterval: props.throttledInterval,\n type: props.type,\n onError: props.onError,\n onComplete: props.onComplete,\n onActionHandled: props.onActionHandled\n });\n\n const { completed, expired, loading, percentage } = timerState;\n const { onTick, onTimeUp } = timerActions;\n\n const { showAmount, url, brandLogo, brandName, countdownTime, type, onActionHandled } = props;\n const { amount } = useAmount();\n\n const qrCodeImage = props.qrCodeData ? `${loadingContext}${QRCODE_URL}${props.qrCodeData}&clientKey=${props.clientKey}` : props.qrCodeImage;\n\n const handleCopy = () => {\n const event = new AnalyticsInfoEvent({\n component: props.type,\n type: InfoEventType.download,\n target: UiTarget.qrDownloadButton\n });\n props.onSubmitAnalytics(event);\n };\n\n const onQrCodeLoad = () => {\n onActionHandled?.({\n componentType: props.type,\n actionDescription: 'qr-code-loaded'\n });\n };\n\n const qrSubtitleRef = useAutoFocus();\n\n /*\n Reported from here rather than from the child states: QRLoaderPendingState unmounts as soon\n * as the QR code arrives and so cannot announce that loading has finished, and a reporter in\n * QRFinalState would be overwritten by this one, since child effects run first and `loading`\n * flips in the same batch as `completed`/`expired`.\n /\n let finalStateMessage: string \| undefined;\n if (expired) finalStateMessage = i18n.get('error.subtitle.payment');\n if (completed) finalStateMessage = i18n.get('creditCard.success');\n useLoadingA11yReporter(loading, finalStateMessage);\n\n if (expired) {\n return <QRFinalState image=\"error\" message={i18n.get('error.subtitle.payment')} />;\n }\n\n if (completed) {\n return <QRFinalState image=\"success\" message={i18n.get('creditCard.success')} />;\n }\n\n if (loading) {\n return <QRLoaderPendingState brandLogo={brandLogo} brandName={brandName} />;\n }\n\n const classnames = props.classNameModifiers.map(m => `adyen-checkout__qr-loader--${m}`);\n\n return (\n <div className={`adyen-checkout__qr-loader adyen-checkout__qr-loader--${type} ${classnames.join(' ')}`} data-testid={`${type}-qr-loader`}>\n {brandLogo && (\n <div className=\"adyen-checkout__qr-loader__brand-logo-wrapper\">\n <img src={brandLogo} alt={brandName} className=\"adyen-checkout__qr-loader__brand-logo\" />\n </div>\n )}\n\n {showAmount && amount && amount.value !== null && !!amount.currency && (\n <h1 className=\"adyen-checkout__qr-loader__payment_amount\">{i18n.amount(amount.value, amount.currency)}</h1>\n )}\n\n {url && (\n <div className=\"adyen-checkout__qr-loader__app-link\">\n {props.redirectIntroduction && <p className=\"adyen-checkout__qr-loader__subtitle\">{i18n.get(props.redirectIntroduction)}</p>}\n <Button classNameModifiers={['qr-loader']} onClick={() => redirectToApp(url)} label={i18n.get(props.buttonLabel)} />\n <ContentSeparator />\n </div>\n )}\n\n {/ eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n <p ref={qrSubtitleRef} tabIndex={0} className=\"adyen-checkout__qr-loader__subtitle\">\n {typeof props.introduction === 'string' ? i18n.get(props.introduction) : props.introduction?.()}\n </p>\n\n <QRLoaderDetailsProvider\n type={type}\n qrCodeImage={qrCodeImage}\n qrCodeData={props.qrCodeData}\n percentage={percentage}\n timeToPay={props.timeToPay}\n copyBtn={props.copyBtn}\n instructions={props.instructions}\n countdownTime={countdownTime}\n onTick={(time: CountdownTime) => onTick(time)}\n onQRCodeLoad={onQrCodeLoad}\n onTimeUp={() => onTimeUp()}\n handleCopy={handleCopy}\n >\n {props.children ? props.children : <QRDetails />}\n </QRLoaderDetailsProvider>\n </div>\n );\n}\n\nQRLoader.defaultProps = {\n countdownTime: DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN,\n delay: DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS,\n throttleTime: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS,\n throttledInterval: DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS,\n onError: () => {},\n onComplete: () => {},\n classNameModifiers: [],\n introduction: 'wechatpay.scanqrcode',\n timeToPay: 'wechatpay.timetopay',\n buttonLabel: 'openApp',\n showAmount: true\n};\n"],"names":["QRLoader","props","i18n","loadingContext","useCoreContext","state","timerState","actions","timerActions","usePaymentStatusTimer","paymentData","clientKey","delay","throttleTime","throttleInterval","throttledInterval","type","onError","onComplete","onActionHandled","completed","expired","loading","percentage","onTick","onTimeUp","showAmount","url","brandLogo","brandName","countdownTime","amount","useAmount","qrCodeImage","qrCodeData","qrSubtitleRef","useAutoFocus","finalStateMessage","get","useLoadingA11yReporter","h","QRFinalState","image","message","QRLoaderPendingState","classnames","classNameModifiers","map","m","div","className","join","data-testid","img","src","alt","value","currency","h1","redirectIntroduction","p","Button","onClick","redirectToApp","label","buttonLabel","ContentSeparator","ref","tabIndex","introduction","QRLoaderDetailsProvider","timeToPay","copyBtn","instructions","time","onQRCodeLoad","componentType","actionDescription","handleCopy","event","AnalyticsInfoEvent","component","InfoEventType","download","target","UiTarget","qrDownloadButton","onSubmitAnalytics","children","QRDetails","defaultProps","DEFAULT_PAYMENT_STATUS_TIMER_COUNTDOWN_TIME_MIN","DEFAULT_PAYMENT_STATUS_TIMER_DELAY_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_TIME_MS","DEFAULT_PAYMENT_STATUS_TIMER_THROTTLE_INTERVAL_MS"],"mappings":"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"}

package/dist/es/components/internal/QRLoader/components/QRFinalState.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import r from"../../../../core/Context/useImage.js";import{useA11yReporter as o}from"../../../../core/Errors/useA11yReporter.js";const t=({image:t,message:a})=>{const c=r();return o(a),e("div",{className:"adyen-checkout__qr-loader adyen-checkout__qr-loader--result"},e("img",{className:"adyen-checkout__qr-loader__icon adyen-checkout__qr-loader__icon--result",src:c({imageFolder:"components/"})(t),alt:a}),e("p",{className:"adyen-checkout__qr-loader__subtitle"},a))};export{t as QRFinalState};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../../../core/Context/useImage.js";const r=({image:r,message:t})=>{const o=a();return e("div",{className:"adyen-checkout__qr-loader adyen-checkout__qr-loader--result"},e("img",{className:"adyen-checkout__qr-loader__icon adyen-checkout__qr-loader__icon--result",src:o({imageFolder:"components/"})(r),alt:t}),e("p",{className:"adyen-checkout__qr-loader__subtitle"},t))};export{r as QRFinalState};
 //# sourceMappingURL=QRFinalState.js.map

package/dist/es/components/internal/QRLoader/components/QRFinalState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QRFinalState.js","sources":["../../../../../../src/components/internal/QRLoader/components/QRFinalState.tsx"],"sourcesContent":["import { h } from 'preact';\nimport useImage from '../../../../core/Context/useImage';\~~nimport~~ { ~~useA11yReporter~~ } ~~from~~ '~~../../../../core/Errors/useA11yReporter';\~~n\nexport const QRFinalState = ({ image, message }: Readonly<{ image: string; message: string }>) => {\n const getImage = useImage();\n\n ~~useA11yReporter(message);\n\n~~ return (\n <div className=\"adyen-checkout__qr-loader adyen-checkout__qr-loader--result\">\n <img\n className=\"adyen-checkout__qr-loader__icon adyen-checkout__qr-loader__icon--result\"\n src={getImage({ imageFolder: 'components/' })(image)}\n alt={message}\n />\n <p className=\"adyen-checkout__qr-loader__subtitle\">{message}</p>\n </div>\n );\n};\n"],"names":["QRFinalState","image","message","getImage","useImage","~~useA11yReporter","~~h","div","className","img","src","imageFolder","alt","p"],"mappings":"~~kNAIaA~~,EAAe,EAAGC,QAAOC,cAClC,MAAMC,EAAWC,~~IAIjB~~,~~OAFAC~~,~~EAAgBH,GAGZI,~~EAACC,MAAAA,CAAIC,UAAU,+DACXF,EAACG,MAAAA,CACGD,UAAU,0EACVE,~~IAAKP~~,EAAS,~~CAAEQ~~,YAAa,~~eAAxBR~~,CAAyCF,~~GAC9CW~~,~~IAAKV~~,~~IAETI~~,EAACO,IAAAA,CAAEL,UAAU,~~uCAAuCN~~"}
1	+ {"version":3,"file":"QRFinalState.js","sources":["../../../../../../src/components/internal/QRLoader/components/QRFinalState.tsx"],"sourcesContent":["import { h } from 'preact';\nimport useImage from '../../../../core/Context/useImage';\n\n/*\n The result message is announced by QRLoader rather than here. `loading` and `completed`/`expired`\n * flip in the same state batch, so this component mounts in the same commit that QRLoader\n * re-renders. Child effects run before parent effects, so a reporter here would write the result\n * and then immediately have it overwritten by the parent's terminal message.\n */\nexport const QRFinalState = ({ image, message }: Readonly<{ image: string; message: string }>) => {\n const getImage = useImage();\n\n return (\n <div className=\"adyen-checkout__qr-loader adyen-checkout__qr-loader--result\">\n <img\n className=\"adyen-checkout__qr-loader__icon adyen-checkout__qr-loader__icon--result\"\n src={getImage({ imageFolder: 'components/' })(image)}\n alt={message}\n />\n <p className=\"adyen-checkout__qr-loader__subtitle\">{message}</p>\n </div>\n );\n};\n"],"names":["QRFinalState","image","message","getImage","useImage","h","div","className","img","src","imageFolder","alt","p"],"mappings":"qIASaA,EAAe,EAAGC,QAAOC,cAClC,MAAMC,EAAWC,IAEjB,OACIC,EAACC,MAAAA,CAAIC,UAAU,+DACXF,EAACG,MAAAA,CACGD,UAAU,0EACVE,IAAKN,EAAS,CAAEO,YAAa,eAAxBP,CAAyCF,GAC9CU,IAAKT,IAETG,EAACO,IAAAA,CAAEL,UAAU,uCAAuCL"}

package/dist/es/components/internal/QRLoader/components/QRLoaderPendingState.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{createElement as e}from"../../../../external/preact/dist/preact.js";import a from"../../Spinner/Spinner.js";const r=({brandLogo:r,brandName:o})=>e("div",{className:"adyen-checkout__qr-loader"},r&&e("div",{className:"adyen-checkout__qr-loader__brand-logo-wrapper"},e("img",{alt:o,src:r,className:"adyen-checkout__qr-loader__brand-logo"})),e(a,null));export{r as QRLoaderPendingState};
2	+ //# sourceMappingURL=QRLoaderPendingState.js.map

package/dist/es/components/internal/QRLoader/components/QRLoaderPendingState.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"QRLoaderPendingState.js","sources":["../../../../../../src/components/internal/QRLoader/components/QRLoaderPendingState.tsx"],"sourcesContent":["import { h } from 'preact';\nimport Spinner from '../../Spinner';\n\ninterface QRLoaderPendingStateProps {\n brandLogo?: string;\n brandName?: string;\n}\n\n/**\n * Rendered while QRLoader is waiting for the initial payment status check to resolve.\n * The loading status is announced by QRLoader, which stays mounted across the transition and so\n * can also announce that loading has finished.\n */\nexport const QRLoaderPendingState = ({ brandLogo, brandName }: Readonly<QRLoaderPendingStateProps>) => {\n return (\n <div className=\"adyen-checkout__qr-loader\">\n {brandLogo && (\n <div className=\"adyen-checkout__qr-loader__brand-logo-wrapper\">\n <img alt={brandName} src={brandLogo} className=\"adyen-checkout__qr-loader__brand-logo\" />\n </div>\n )}\n <Spinner />\n </div>\n );\n};\n"],"names":["QRLoaderPendingState","brandLogo","brandName","h","div","className","img","alt","src","Spinner"],"mappings":"yHAaaA,EAAuB,EAAGC,YAAWC,eAE1CC,EAACC,MAAAA,CAAIC,UAAU,6BACVJ,GACGE,EAACC,MAAAA,CAAIC,UAAU,iDACXF,EAACG,MAAAA,CAAIC,IAAKL,EAAWM,IAAKP,EAAWI,UAAU,2CAGvDF,EAACM,EAAAA"}

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

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