@adyen/adyen-web 6.35.0 → 6.37.0

package/dist/es/components/UPI/components/UPIComponent/UPIComponent.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import{useState as a,useRef as o,useEffect as n,useCallback as r,useMemo as s}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../../../../core/Context/useImage.js";import{UPI_MODE as d,A11Y as c}from"../../constants.js";import"../../../../_virtual/index.js";import{SegmentedControlRegion as l}from"../../../internal/SegmentedControl/SegmentedControlRegion.js";import m from"../UPIIntentAppList/UPIIntentAppList.js";import{useCoreContext as p}from"../../../../core/Context/CoreProvider.js";import u from"../../../internal/Alert/Alert.js";import I from"../UPIMandate/UPIMandate.js";import{useAmount as f}from"../../../../core/Context/AmountProvider.js";import{BrandIcons as g}from"../../../internal/BrandIcons/BrandIcons.js";function C({mode:C,onChange:h,payButton:y,setComponentRef:N,showPayButton:j,mandate:b,appsList:A}){const{i18n:B}=p(),E=i(),[R,k]=a("ready"),[T,x]=a(null),{amount:L}=f(),[P,Q]=a(C===d.QR_CODE),S=b&&e(I,{mandate:b,amount:L}),v=o({setStatus:k,showValidation:()=>{C===d.INTENT&&O()}});n(()=>{N(v.current)},[N]);const M=r(e=>{e?.id!==T?.id&&(x(e),Q(!0),k("ready"))},[T]),O=r(()=>{T?(k("ready"),Q(!0)):(k("error"),Q(!1))},[T]),U=s(()=>A.map(e=>({src:e.icon,alt:e.name})),[A]);return n(()=>{C!==d.QR_CODE?h({data:{...T&&{app:T}},isValid:P}):h({data:{},valid:{},errors:{},isValid:!0})},[T,P,C,h]),e(t,null,C===d.INTENT&&e(l,{id:c.AreaId.INTENT,ariaLabelledBy:c.ButtonId.INTENT,className:"adyen-checkout-upi-area-intent"},e("span",{className:"adyen-checkout-upi-instruction-label"},B.get("upi.intent.instruction")),"error"===R&&e(u,{icon:"cross"},B.get("upi.error.noAppSelected")),e(m,{disabled:"loading"===R,appsList:A,selectedAppId:T?.id,onAppSelect:M}),S,j&&y({label:B.get("continue"),status:R})),C===d.QR_CODE&&e(l,{id:c.AreaId.QR,ariaLabelledBy:c.ButtonId.QR,className:"adyen-checkout-upi-area-qr-code"},e("span",{className:"adyen-checkout-upi-instruction-label"},B.get("upi.qrCode.instruction")),e(g,{className:"adyen-checkout-upi-brands",brandIcons:U,showIconOnError:!0,smallIcons:!0,remainingBrandsLabel:`+ ${B.get("paymentMethodBrand.other")}`}),S,j&&y({label:B.get("generateQRCode"),icon:E({imageFolder:"components/"})("qr"),status:R})))}export{C as default};
+import{createElement as e,Fragment as t}from"../../../../external/preact/dist/preact.js";import{useState as n,useRef as a,useMemo as o,useEffect as s,useCallback as i}from"../../../../external/preact/hooks/dist/hooks.js";import r from"../../../../core/Context/useImage.js";import{MAX_PRIMARY_APPS as p,UPI_MODE as l,A11Y as d}from"../../constants.js";import"../../../../_virtual/index.js";import{SegmentedControlRegion as c}from"../../../internal/SegmentedControl/SegmentedControlRegion.js";import m from"../UPIIntentAppList/UPIIntentAppList.js";import{useCoreContext as u}from"../../../../core/Context/CoreProvider.js";import g from"../../../internal/Alert/Alert.js";import f from"../UPIMandate/UPIMandate.js";import{useAmount as y}from"../../../../core/Context/AmountProvider.js";import{BrandIcons as I}from"../../../internal/BrandIcons/BrandIcons.js";import h from"../../../internal/ContentSeparator/ContentSeparator.js";import N from"../../../internal/FormFields/Field/Field.js";import j from"../../../internal/FormFields/Select/Select.js";import{AnalyticsInfoEvent as C,InfoEventType as b,UiTarget as A}from"../../../../core/Analytics/events/AnalyticsInfoEvent.js";import{ANALYTICS_SEARCH_DEBOUNCE_TIME as S}from"../../../../core/Analytics/constants.js";import{debounce as E}from"../../../../utils/debounce.js";function T({mode:T,onChange:k,payButton:_,setComponentRef:B,showPayButton:w,mandate:L,appsList:R,onSubmitAnalytics:v}){const{i18n:x}=u(),F=r(),[P,Q]=n("ready"),[M,V]=n(null),{amount:O}=y(),[U,q]=n(T===l.QR_CODE),D=L&&e(f,{mandate:L,amount:O}),$=a({setStatus:Q,showValidation:()=>{T===l.INTENT&&Z()}}),z=o(()=>R.slice(0,p),[R]),G=o(()=>R.slice(p),[R]);s(()=>{B($.current)},[B]);const H=i((e,t)=>{e&&e.id!==M?.id&&(V(e),q(!0),Q("ready"),v(new C({component:"upi_intent",type:b.selected,target:t,issuer:e.name})))},[M,v]),J=i(e=>H(e,A.list),[H]),K=i(e=>{const t=G.find(t=>t.id===e.target.value);H(t,A.listSearch)},[G,H]),W=i(e=>{e&&v(new C({component:"upi_intent",type:b.displayed,target:A.list}))},[v]),X=a(E(v,S)),Y=i(()=>{X.current({type:b.input,target:A.listSearch})},[]),Z=i(()=>{M?(Q("ready"),q(!0)):(Q("error"),q(!1))},[M]),ee=o(()=>R.map(e=>({src:e.icon,alt:e.name})),[R]);return s(()=>{T!==l.QR_CODE?k({data:{...M&&{app:M}},isValid:U}):k({data:{},valid:{},errors:{},isValid:!0})},[M,U,T,k]),s(()=>{T===l.INTENT&&0!==z.length&&v(new C({component:"upi_intent",type:b.displayed,target:A.list,presentedValues:z.map(e=>e.id)}))},[]),e(t,null,T===l.INTENT&&e(c,{id:d.AreaId.INTENT,ariaLabelledBy:d.ButtonId.INTENT,className:"adyen-checkout-upi-area-intent"},e("span",{className:"adyen-checkout-upi-instruction-label"},x.get("upi.intent.instruction")),e("span",{className:"adyen-checkout-upi-instruction-title"},x.get("upi.intent.apps.title")),"error"===P&&e(g,{icon:"cross"},x.get("upi.error.noAppSelected")),e(m,{disabled:"loading"===P,appsList:z,selectedAppId:M?.id,onAppSelect:J}),G.length>0&&e(t,null,e(h,{classNames:["adyen-checkout-upi-instruction-separator"],label:"issuerList.separatorText"}),e(N,{label:x.get("upi.intent.apps.dropdown.label"),classNameModifiers:["upi-app-list"],name:"upi-app-list"},e(j,{items:G,selectedValue:G.some(e=>e.id===M?.id)?M?.id:void 0,placeholder:x.get("upi.intent.apps.dropdown.placeholder"),name:"upi-app-list",className:"adyen-checkout__upi-app-list__dropdown",onChange:K,onInput:Y,onListToggle:W}))),D,w&&_({label:x.get("continue"),status:P})),T===l.QR_CODE&&e(c,{id:d.AreaId.QR,ariaLabelledBy:d.ButtonId.QR,className:"adyen-checkout-upi-area-qr-code"},e("span",{className:"adyen-checkout-upi-instruction-label-caption"},x.get("upi.qrCode.instruction")),e(I,{className:"adyen-checkout-upi-brands",brandIcons:ee,showIconOnError:!0,smallIcons:!0,remainingBrandsLabel:`+ ${x.get("paymentMethodBrand.other")}`}),D,w&&_({label:x.get("generateQRCode"),icon:F({imageFolder:"components/"})("qr"),status:P})))}export{T as default};
 //# sourceMappingURL=UPIComponent.js.map

package/dist/es/components/UPI/components/UPIComponent/UPIComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UPIComponent.js","sources":["../../../../../../src/components/UPI/components/UPIComponent/UPIComponent.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { ComponentMethodsRef, UIElementStatus } from '../../../types';\nimport { App, UPIAppList, UpiMode } from '../../types';\nimport useImage from '../../../../core/Context/useImage';\nimport { A11Y, UPI_MODE } from '../../constants';\nimport { SegmentedControlRegion } from '../../../internal/SegmentedControl';\nimport UPIIntentAppList from '../UPIIntentAppList';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Alert from '../../../internal/Alert';\nimport UPIMandate, { Mandate } from '../UPIMandate/UPIMandate';\nimport { PayButtonProps } from '../../../internal/PayButton/PayButton';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { BrandIcon } from '../../../internal/BrandIcons/types';\nimport { BrandIcons } from '../../../internal/BrandIcons/BrandIcons';\nimport { ValidationRuleResult } from '../../../../utils/Validator/ValidationRuleResult';\nimport './UPIComponent.scss';\n\ntype UpiData = { app?: App };\n\ntype OnChangeProps = { data: UpiData; valid?: { [key: string]: boolean }; errors?: { [key: string]: ValidationRuleResult }; isValid: boolean };\ninterface UPIComponentProps {\n    mode: UpiMode;\n    showPayButton: boolean;\n    appsList: UPIAppList;\n    mandate?: Mandate;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    payButton(props: PayButtonProps): h.JSX.Element;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n}\n\nexport default function UPIComponent({\n    mode,\n    onChange,\n    payButton,\n    setComponentRef,\n    showPayButton,\n    mandate,\n    appsList\n}: Readonly<UPIComponentProps>): h.JSX.Element {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const [status, setStatus] = useState<UIElementStatus>('ready');\n    const [selectedApp, setSelectedApp] = useState<App>(null);\n    const { amount } = useAmount();\n    const [isValid, setIsValid] = useState<boolean>(mode === UPI_MODE.QR_CODE);\n    const mandateComponent = mandate && <UPIMandate mandate={mandate} amount={amount} />;\n\n    const upiRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            if (mode === UPI_MODE.INTENT) {\n                validateIntentApp();\n            }\n        }\n    });\n\n    useEffect(() => {\n        setComponentRef(upiRef.current);\n    }, [setComponentRef]);\n\n    const handleAppSelect = useCallback(\n        (app: App) => {\n            if (app?.id === selectedApp?.id) return;\n\n            setSelectedApp(app);\n            setIsValid(true);\n            setStatus('ready');\n        },\n        [selectedApp]\n    );\n\n    const validateIntentApp = useCallback(() => {\n        if (selectedApp) {\n            setStatus('ready');\n            setIsValid(true);\n        } else {\n            setStatus('error');\n            setIsValid(false);\n        }\n    }, [selectedApp]);\n\n    const brandIcons: BrandIcon[] = useMemo(\n        () =>\n            appsList.map(app => ({\n                src: app.icon,\n                alt: app.name\n            })),\n        [appsList]\n    );\n\n    useEffect(() => {\n        if (mode === UPI_MODE.QR_CODE) {\n            /**\n             * When selecting QR code mode, we need to clear the state data and trigger 'onChange'.\n             */\n            onChange({ data: {}, valid: {}, errors: {}, isValid: true });\n            return;\n        }\n        onChange({\n            data: { ...(selectedApp && { app: selectedApp }) },\n            isValid\n        });\n    }, [selectedApp, isValid, mode, onChange]);\n\n    return (\n        <Fragment>\n            {mode === UPI_MODE.INTENT && (\n                <SegmentedControlRegion id={A11Y.AreaId.INTENT} ariaLabelledBy={A11Y.ButtonId.INTENT} className=\"adyen-checkout-upi-area-intent\">\n                    <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.intent.instruction')}</span>\n                    {status === 'error' && <Alert icon=\"cross\">{i18n.get('upi.error.noAppSelected')}</Alert>}\n                    <UPIIntentAppList\n                        disabled={status === 'loading'}\n                        appsList={appsList}\n                        selectedAppId={selectedApp?.id}\n                        onAppSelect={handleAppSelect}\n                    />\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('continue'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n            {mode === UPI_MODE.QR_CODE && (\n                <SegmentedControlRegion id={A11Y.AreaId.QR} ariaLabelledBy={A11Y.ButtonId.QR} className=\"adyen-checkout-upi-area-qr-code\">\n                    <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.qrCode.instruction')}</span>\n                    <BrandIcons\n                        className=\"adyen-checkout-upi-brands\"\n                        brandIcons={brandIcons}\n                        showIconOnError\n                        smallIcons\n                        remainingBrandsLabel={`+ ${i18n.get('paymentMethodBrand.other')}`}\n                    />\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('generateQRCode'),\n                            icon: getImage({ imageFolder: 'components/' })('qr'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n        </Fragment>\n    );\n}\n"],"names":["UPIComponent","mode","onChange","payButton","setComponentRef","showPayButton","mandate","appsList","i18n","useCoreContext","getImage","useImage","status","setStatus","useState","selectedApp","setSelectedApp","amount","useAmount","isValid","setIsValid","UPI_MODE","QR_CODE","mandateComponent","h","UPIMandate","upiRef","useRef","showValidation","INTENT","validateIntentApp","useEffect","current","handleAppSelect","useCallback","app","id","brandIcons","useMemo","map","src","icon","alt","name","data","valid","errors","Fragment","SegmentedControlRegion","A11Y","AreaId","ariaLabelledBy","ButtonId","className","span","get","Alert","UPIIntentAppList","disabled","selectedAppId","onAppSelect","label","QR","BrandIcons","showIconOnError","smallIcons","remainingBrandsLabel","imageFolder"],"mappings":"g0BA+Be,SAASA,GAAaC,KACjCA,EAAIC,SACJA,EAAQC,UACRA,EAASC,gBACTA,EAAeC,cACfA,EAAaC,QACbA,EAAOC,SACPA,IAEA,MAAMC,KAAEA,GAASC,IACXC,EAAWC,KACVC,EAAQC,GAAaC,EAA0B,UAC/CC,EAAaC,GAAkBF,EAAc,OAC9CG,OAAEA,GAAWC,KACZC,EAASC,GAAcN,EAAkBb,IAASoB,EAASC,SAC5DC,EAAmBjB,GAAWkB,EAACC,EAAAA,CAAWnB,QAASA,EAASW,OAAQA,IAEpES,EAASC,EAA4B,CACvCd,UAAWA,EACXe,eAAgB,KACR3B,IAASoB,EAASQ,QAClBC,OAKZC,EAAU,KACN3B,EAAgBsB,EAAOM,UACxB,CAAC5B,IAEJ,MAAM6B,EAAkBC,EACnBC,IACOA,GAAKC,KAAOrB,GAAaqB,KAE7BpB,EAAemB,GACff,GAAW,GACXP,EAAU,WAEd,CAACE,IAGCe,EAAoBI,EAAY,KAC9BnB,GACAF,EAAU,SACVO,GAAW,KAEXP,EAAU,SACVO,GAAW,KAEhB,CAACL,IAEEsB,EAA0BC,EAC5B,IACI/B,EAASgC,IAAIJ,KACTK,IAAKL,EAAIM,KACTC,IAAKP,EAAIQ,QAEjB,CAACpC,IAiBL,OAdAwB,EAAU,KACF9B,IAASoB,EAASC,QAOtBpB,EAAS,CACL0C,KAAM,IAAM7B,GAAe,CAAEoB,IAAKpB,IAClCI,YALAjB,EAAS,CAAE0C,KAAM,CAAA,EAAIC,MAAO,CAAA,EAAIC,OAAQ,CAAA,EAAI3B,SAAS,KAO1D,CAACJ,EAAaI,EAASlB,EAAMC,IAG5BsB,EAACuB,EAAAA,KACI9C,IAASoB,EAASQ,QACfL,EAACwB,EAAAA,CAAuBZ,GAAIa,EAAKC,OAAOrB,OAAQsB,eAAgBF,EAAKG,SAASvB,OAAQwB,UAAU,kCAC5F7B,EAAC8B,OAAAA,CAAKD,UAAU,wCAAwC7C,EAAK+C,IAAI,2BACrD,UAAX3C,GAAsBY,EAACgC,EAAAA,CAAMf,KAAK,SAASjC,EAAK+C,IAAI,4BACrD/B,EAACiC,EAAAA,CACGC,SAAqB,YAAX9C,EACVL,SAAUA,EACVoD,cAAe5C,GAAaqB,GAC5BwB,YAAa3B,IAEhBV,EACAlB,GACGF,EAAU,CACN0D,MAAOrD,EAAK+C,IAAI,YAChB3C,YAIfX,IAASoB,EAASC,SACfE,EAACwB,EAAAA,CAAuBZ,GAAIa,EAAKC,OAAOY,GAAIX,eAAgBF,EAAKG,SAASU,GAAIT,UAAU,mCACpF7B,EAAC8B,OAAAA,CAAKD,UAAU,wCAAwC7C,EAAK+C,IAAI,2BACjE/B,EAACuC,EAAAA,CACGV,UAAU,4BACVhB,WAAYA,EACZ2B,iBAAAA,EACAC,YAAAA,EACAC,qBAAsB,KAAK1D,EAAK+C,IAAI,gCAEvChC,EACAlB,GACGF,EAAU,CACN0D,MAAOrD,EAAK+C,IAAI,kBAChBd,KAAM/B,EAAS,CAAEyD,YAAa,eAAxBzD,CAAyC,MAC/CE,YAM5B"}
+{"version":3,"file":"UPIComponent.js","sources":["../../../../../../src/components/UPI/components/UPIComponent/UPIComponent.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport { ComponentMethodsRef, UIElementStatus } from '../../../types';\nimport { App, UPIAppList, UpiMode } from '../../types';\nimport useImage from '../../../../core/Context/useImage';\nimport { A11Y, MAX_PRIMARY_APPS, UPI_MODE } from '../../constants';\nimport { SegmentedControlRegion } from '../../../internal/SegmentedControl';\nimport UPIIntentAppList from '../UPIIntentAppList';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport Alert from '../../../internal/Alert';\nimport UPIMandate, { Mandate } from '../UPIMandate/UPIMandate';\nimport { PayButtonProps } from '../../../internal/PayButton/PayButton';\nimport { useAmount } from '../../../../core/Context/AmountProvider';\nimport { BrandIcon } from '../../../internal/BrandIcons/types';\nimport { BrandIcons } from '../../../internal/BrandIcons/BrandIcons';\nimport { ValidationRuleResult } from '../../../../utils/Validator/ValidationRuleResult';\nimport './UPIComponent.scss';\nimport ContentSeparator from '../../../internal/ContentSeparator';\nimport Field from '../../../internal/FormFields/Field';\nimport Select from '../../../internal/FormFields/Select';\nimport { SelectTargetObject } from '../../../internal/FormFields/Select/types';\nimport { AnalyticsInfoEvent, InfoEventType, UiTarget } from '../../../../core/Analytics/events/AnalyticsInfoEvent';\nimport { AbstractAnalyticsEvent } from '../../../../core/Analytics/events/AbstractAnalyticsEvent';\nimport { ANALYTICS_SEARCH_DEBOUNCE_TIME } from '../../../../core/Analytics/constants';\nimport { debounce } from '../../../../utils/debounce';\n\ntype UpiData = { app?: App };\n\ntype OnChangeProps = { data: UpiData; valid?: { [key: string]: boolean }; errors?: { [key: string]: ValidationRuleResult }; isValid: boolean };\ninterface UPIComponentProps {\n    mode: UpiMode;\n    showPayButton: boolean;\n    appsList: UPIAppList;\n    mandate?: Mandate;\n    setComponentRef: (ref: ComponentMethodsRef) => void;\n    payButton(props: PayButtonProps): h.JSX.Element;\n    onChange({ data, valid, errors, isValid }: OnChangeProps): void;\n    onSubmitAnalytics(event: AbstractAnalyticsEvent): void;\n}\n\nexport default function UPIComponent({\n    mode,\n    onChange,\n    payButton,\n    setComponentRef,\n    showPayButton,\n    mandate,\n    appsList,\n    onSubmitAnalytics\n}: Readonly<UPIComponentProps>): h.JSX.Element {\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n    const [status, setStatus] = useState<UIElementStatus>('ready');\n    const [selectedApp, setSelectedApp] = useState<App | null>(null);\n    const { amount } = useAmount();\n    const [isValid, setIsValid] = useState<boolean>(mode === UPI_MODE.QR_CODE);\n    const mandateComponent = mandate && <UPIMandate mandate={mandate} amount={amount} />;\n\n    const upiRef = useRef<ComponentMethodsRef>({\n        setStatus: setStatus,\n        showValidation: () => {\n            if (mode === UPI_MODE.INTENT) {\n                validateIntentApp();\n            }\n        }\n    });\n\n    const priorityApps = useMemo(() => appsList.slice(0, MAX_PRIMARY_APPS), [appsList]);\n    const lowPriorityApps = useMemo(() => appsList.slice(MAX_PRIMARY_APPS), [appsList]);\n\n    useEffect(() => {\n        setComponentRef(upiRef.current);\n    }, [setComponentRef]);\n\n    const selectApp = useCallback(\n        (app: App | undefined, target: UiTarget) => {\n            if (!app || app.id === selectedApp?.id) return;\n\n            setSelectedApp(app);\n            setIsValid(true);\n            setStatus('ready');\n\n            onSubmitAnalytics(\n                new AnalyticsInfoEvent({\n                    component: 'upi_intent',\n                    type: InfoEventType.selected,\n                    target,\n                    issuer: app.name\n                })\n            );\n        },\n        [selectedApp, onSubmitAnalytics]\n    );\n\n    const handleAppSelect = useCallback((app: App) => selectApp(app, UiTarget.list), [selectApp]);\n\n    const handleDropdownSelect = useCallback(\n        (event: { target: SelectTargetObject }) => {\n            const app = lowPriorityApps.find(a => a.id === event.target.value);\n            selectApp(app, UiTarget.listSearch);\n        },\n        [lowPriorityApps, selectApp]\n    );\n\n    const handleListToggle = useCallback(\n        (isOpen: boolean) => {\n            if (isOpen) {\n                onSubmitAnalytics(\n                    new AnalyticsInfoEvent({\n                        component: 'upi_intent',\n                        type: InfoEventType.displayed,\n                        target: UiTarget.list\n                    })\n                );\n            }\n        },\n        [onSubmitAnalytics]\n    );\n\n    const debounceSearchAnalytics = useRef(debounce(onSubmitAnalytics, ANALYTICS_SEARCH_DEBOUNCE_TIME));\n\n    const handleSearch = useCallback(() => {\n        debounceSearchAnalytics.current({ type: InfoEventType.input, target: UiTarget.listSearch });\n    }, []);\n\n    const validateIntentApp = useCallback(() => {\n        if (selectedApp) {\n            setStatus('ready');\n            setIsValid(true);\n        } else {\n            setStatus('error');\n            setIsValid(false);\n        }\n    }, [selectedApp]);\n\n    const brandIcons: BrandIcon[] = useMemo(\n        () =>\n            appsList.map(app => ({\n                src: app.icon,\n                alt: app.name\n            })),\n        [appsList]\n    );\n\n    useEffect(() => {\n        if (mode === UPI_MODE.QR_CODE) {\n            /**\n             * When selecting QR code mode, we need to clear the state data and trigger 'onChange'.\n             */\n            onChange({ data: {}, valid: {}, errors: {}, isValid: true });\n            return;\n        }\n        onChange({\n            data: { ...(selectedApp && { app: selectedApp }) },\n            isValid\n        });\n    }, [selectedApp, isValid, mode, onChange]);\n\n    useEffect(() => {\n        if (mode !== UPI_MODE.INTENT || priorityApps.length === 0) return;\n\n        onSubmitAnalytics(\n            new AnalyticsInfoEvent({\n                component: 'upi_intent',\n                type: InfoEventType.displayed,\n                target: UiTarget.list,\n                presentedValues: priorityApps.map(a => a.id)\n            })\n        );\n    }, []);\n\n    return (\n        <Fragment>\n            {mode === UPI_MODE.INTENT && (\n                <SegmentedControlRegion id={A11Y.AreaId.INTENT} ariaLabelledBy={A11Y.ButtonId.INTENT} className=\"adyen-checkout-upi-area-intent\">\n                    <span className=\"adyen-checkout-upi-instruction-label\">{i18n.get('upi.intent.instruction')}</span>\n                    <span className=\"adyen-checkout-upi-instruction-title\">{i18n.get('upi.intent.apps.title')}</span>\n                    {status === 'error' && <Alert icon={'cross'}>{i18n.get('upi.error.noAppSelected')}</Alert>}\n                    <UPIIntentAppList\n                        disabled={status === 'loading'}\n                        appsList={priorityApps}\n                        selectedAppId={selectedApp?.id}\n                        onAppSelect={handleAppSelect}\n                    />\n                    {lowPriorityApps.length > 0 && (\n                        <Fragment>\n                            <ContentSeparator classNames={['adyen-checkout-upi-instruction-separator']} label=\"issuerList.separatorText\" />\n                            <Field label={i18n.get('upi.intent.apps.dropdown.label')} classNameModifiers={['upi-app-list']} name={'upi-app-list'}>\n                                <Select\n                                    items={lowPriorityApps}\n                                    selectedValue={lowPriorityApps.some(a => a.id === selectedApp?.id) ? selectedApp?.id : undefined}\n                                    placeholder={i18n.get('upi.intent.apps.dropdown.placeholder')}\n                                    name={'upi-app-list'}\n                                    className={'adyen-checkout__upi-app-list__dropdown'}\n                                    onChange={handleDropdownSelect}\n                                    onInput={handleSearch}\n                                    onListToggle={handleListToggle}\n                                />\n                            </Field>\n                        </Fragment>\n                    )}\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('continue'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n            {mode === UPI_MODE.QR_CODE && (\n                <SegmentedControlRegion id={A11Y.AreaId.QR} ariaLabelledBy={A11Y.ButtonId.QR} className=\"adyen-checkout-upi-area-qr-code\">\n                    <span className=\"adyen-checkout-upi-instruction-label-caption\">{i18n.get('upi.qrCode.instruction')}</span>\n                    <BrandIcons\n                        className=\"adyen-checkout-upi-brands\"\n                        brandIcons={brandIcons}\n                        showIconOnError\n                        smallIcons\n                        remainingBrandsLabel={`+ ${i18n.get('paymentMethodBrand.other')}`}\n                    />\n                    {mandateComponent}\n                    {showPayButton &&\n                        payButton({\n                            label: i18n.get('generateQRCode'),\n                            icon: getImage({ imageFolder: 'components/' })('qr'),\n                            status\n                        })}\n                </SegmentedControlRegion>\n            )}\n        </Fragment>\n    );\n}\n"],"names":["UPIComponent","mode","onChange","payButton","setComponentRef","showPayButton","mandate","appsList","onSubmitAnalytics","i18n","useCoreContext","getImage","useImage","status","setStatus","useState","selectedApp","setSelectedApp","amount","useAmount","isValid","setIsValid","UPI_MODE","QR_CODE","mandateComponent","h","UPIMandate","upiRef","useRef","showValidation","INTENT","validateIntentApp","priorityApps","useMemo","slice","MAX_PRIMARY_APPS","lowPriorityApps","useEffect","current","selectApp","useCallback","app","target","id","AnalyticsInfoEvent","component","type","InfoEventType","selected","issuer","name","handleAppSelect","UiTarget","list","handleDropdownSelect","event","find","a","value","listSearch","handleListToggle","isOpen","displayed","debounceSearchAnalytics","debounce","ANALYTICS_SEARCH_DEBOUNCE_TIME","handleSearch","input","brandIcons","map","src","icon","alt","data","valid","errors","length","presentedValues","Fragment","SegmentedControlRegion","A11Y","AreaId","ariaLabelledBy","ButtonId","className","span","get","Alert","UPIIntentAppList","disabled","selectedAppId","onAppSelect","ContentSeparator","classNames","label","Field","classNameModifiers","Select","items","selectedValue","some","undefined","placeholder","onInput","onListToggle","QR","BrandIcons","showIconOnError","smallIcons","remainingBrandsLabel","imageFolder"],"mappings":"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"}

package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import a from"./UPIIntentAppItem/UPIIntentAppItem.js";import{useCoreContext as p}from"../../../../core/Context/CoreProvider.js";const i=({appsList:i,selectedAppId:r,disabled:o,onAppSelect:n})=>{const{i18n:s}=p();return e("ul",{className:t({"adyen-checkout-upi-app-list":!0,"adyen-checkout-upi-app-list--loading":o}),role:"radiogroup","aria-label":s.get("paymentMethodsList.aria.label")},i.map(t=>{const p=`adyen-checkout-upi-app-item-${t.id}`,i=r===t.id;return e(a,{key:p,app:{id:t.id,name:t.name},imgSrc:t.icon,isSelected:i,onSelect:n})}))};export{i as default};
+import{createElement as e}from"../../../../external/preact/dist/preact.js";import t from"../../../../_virtual/index.js";import p from"./UPIIntentAppItem/UPIIntentAppItem.js";import{useCoreContext as a}from"../../../../core/Context/CoreProvider.js";const r=({appsList:r,selectedAppId:i,disabled:o,onAppSelect:n})=>{const{i18n:s}=a();return e("ul",{className:t({"adyen-checkout-upi-app-list":!0,"adyen-checkout-upi-app-list--loading":o}),role:"radiogroup","aria-label":s.get("paymentMethodsList.aria.label")},r.map(t=>{const a=`adyen-checkout-upi-app-item-${t.id}`,r=i===t.id;return e(p,{key:a,app:t,imgSrc:t.icon,isSelected:r,onSelect:n})}))};export{r as default};
 //# sourceMappingURL=UPIIntentAppList.js.map

package/dist/es/components/UPI/components/UPIIntentAppList/UPIIntentAppList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UPIIntentAppList.js","sources":["../../../../../../src/components/UPI/components/UPIIntentAppList/UPIIntentAppList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { App, UPIAppList } from '../../types';\nimport UPIIntentAppItem from './UPIIntentAppItem';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './UPIIntentAppList.scss';\n\ninterface UPIIntentAppListProps {\n    appsList: UPIAppList;\n    selectedAppId?: string;\n    disabled?: boolean;\n    onAppSelect: (app: App) => void;\n}\n\nconst UPIIntentAppList = ({ appsList, selectedAppId, disabled, onAppSelect }: Readonly<UPIIntentAppListProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n\n    return (\n        /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n        <ul\n            className={classNames({\n                'adyen-checkout-upi-app-list': true,\n                'adyen-checkout-upi-app-list--loading': disabled\n            })}\n            role=\"radiogroup\"\n            aria-label={i18n.get('paymentMethodsList.aria.label')}\n        >\n            {appsList.map(app => {\n                const key = `adyen-checkout-upi-app-item-${app.id}`;\n                const isSelected = selectedAppId === app.id;\n                return (\n                    <UPIIntentAppItem\n                        key={key}\n                        app={{ id: app.id, name: app.name }}\n                        imgSrc={app.icon}\n                        isSelected={isSelected}\n                        onSelect={onAppSelect}\n                    />\n                );\n            })}\n        </ul>\n    );\n};\n\nexport default UPIIntentAppList;\n"],"names":["UPIIntentAppList","appsList","selectedAppId","disabled","onAppSelect","i18n","useCoreContext","h","ul","className","classNames","role","aria-label","get","map","app","key","id","isSelected","UPIIntentAppItem","name","imgSrc","icon","onSelect"],"mappings":"wPAcA,MAAMA,EAAmB,EAAGC,WAAUC,gBAAeC,WAAUC,kBAC3D,MAAMC,KAAEA,GAASC,IAEjB,OAEIC,EAACC,KAAAA,CACGC,UAAWC,EAAW,CAClB,+BAA+B,EAC/B,uCAAwCP,IAE5CQ,KAAK,aACLC,aAAYP,EAAKQ,IAAI,kCAEpBZ,EAASa,IAAIC,IACV,MAAMC,EAAM,+BAA+BD,EAAIE,KACzCC,EAAahB,IAAkBa,EAAIE,GACzC,OACIV,EAACY,EAAAA,CACGH,IAAKA,EACLD,IAAK,CAAEE,GAAIF,EAAIE,GAAIG,KAAML,EAAIK,MAC7BC,OAAQN,EAAIO,KACZJ,WAAYA,EACZK,SAAUnB"}
+{"version":3,"file":"UPIIntentAppList.js","sources":["../../../../../../src/components/UPI/components/UPIIntentAppList/UPIIntentAppList.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { App, UPIAppList } from '../../types';\nimport UPIIntentAppItem from './UPIIntentAppItem';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './UPIIntentAppList.scss';\n\ninterface UPIIntentAppListProps {\n    appsList: UPIAppList;\n    selectedAppId?: string;\n    disabled?: boolean;\n    onAppSelect: (app: App) => void;\n}\n\nconst UPIIntentAppList = ({ appsList, selectedAppId, disabled, onAppSelect }: Readonly<UPIIntentAppListProps>): h.JSX.Element => {\n    const { i18n } = useCoreContext();\n\n    return (\n        /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */\n        <ul\n            className={classNames({\n                'adyen-checkout-upi-app-list': true,\n                'adyen-checkout-upi-app-list--loading': disabled\n            })}\n            role=\"radiogroup\"\n            aria-label={i18n.get('paymentMethodsList.aria.label')}\n        >\n            {appsList.map(app => {\n                const key = `adyen-checkout-upi-app-item-${app.id}`;\n                const isSelected = selectedAppId === app.id;\n                return <UPIIntentAppItem key={key} app={app} imgSrc={app.icon} isSelected={isSelected} onSelect={onAppSelect} />;\n            })}\n        </ul>\n    );\n};\n\nexport default UPIIntentAppList;\n"],"names":["UPIIntentAppList","appsList","selectedAppId","disabled","onAppSelect","i18n","useCoreContext","h","ul","className","classNames","role","aria-label","get","map","app","key","id","isSelected","UPIIntentAppItem","imgSrc","icon","onSelect"],"mappings":"wPAcA,MAAMA,EAAmB,EAAGC,WAAUC,gBAAeC,WAAUC,kBAC3D,MAAMC,KAAEA,GAASC,IAEjB,OAEIC,EAACC,KAAAA,CACGC,UAAWC,EAAW,CAClB,+BAA+B,EAC/B,uCAAwCP,IAE5CQ,KAAK,aACLC,aAAYP,EAAKQ,IAAI,kCAEpBZ,EAASa,IAAIC,IACV,MAAMC,EAAM,+BAA+BD,EAAIE,KACzCC,EAAahB,IAAkBa,EAAIE,GACzC,OAAOV,EAACY,EAAAA,CAAiBH,IAAKA,EAAKD,IAAKA,EAAKK,OAAQL,EAAIM,KAAMH,WAAYA,EAAYI,SAAUlB"}

package/dist/es/components/UPI/constants.js

@@ -1,2 +1,2 @@
-const t={QR_CODE:"qrCode",INTENT:"intent"},e={ButtonId:{QR:"upi-button-qrCode",INTENT:"upi-button-intent"},AreaId:{QR:"upi-area-qrCode",INTENT:"upi-area-intent"}},n=5;export{e as A11Y,n as UPI_COUNTDOWN_TIME,t as UPI_MODE};
+const t={QR_CODE:"qrCode",INTENT:"intent"},e=4,n={ButtonId:{QR:"upi-button-qrCode",INTENT:"upi-button-intent"},AreaId:{QR:"upi-area-qrCode",INTENT:"upi-area-intent"}},o=5;export{n as A11Y,e as MAX_PRIMARY_APPS,o as UPI_COUNTDOWN_TIME,t as UPI_MODE};
 //# sourceMappingURL=constants.js.map

package/dist/es/components/UPI/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/components/UPI/constants.ts"],"sourcesContent":["import { UpiMode } from './types';\n\nexport const UPI_MODE = {\n    QR_CODE: 'qrCode' as UpiMode,\n    INTENT: 'intent' as UpiMode\n} as const;\n\nexport const A11Y = {\n    ButtonId: {\n        QR: 'upi-button-qrCode',\n        INTENT: 'upi-button-intent'\n    },\n    AreaId: {\n        QR: 'upi-area-qrCode',\n        INTENT: 'upi-area-intent'\n    }\n};\n\nexport const UPI_COUNTDOWN_TIME = 5;\n"],"names":["UPI_MODE","QR_CODE","INTENT","A11Y","ButtonId","QR","AreaId","UPI_COUNTDOWN_TIME"],"mappings":"MAEaA,EAAW,CACpBC,QAAS,SACTC,OAAQ,UAGCC,EAAO,CAChBC,SAAU,CACNC,GAAI,oBACJH,OAAQ,qBAEZI,OAAQ,CACJD,GAAI,kBACJH,OAAQ,oBAIHK,EAAqB"}
+{"version":3,"file":"constants.js","sources":["../../../../src/components/UPI/constants.ts"],"sourcesContent":["import { UpiMode } from './types';\n\nexport const UPI_MODE = {\n    QR_CODE: 'qrCode' as UpiMode,\n    INTENT: 'intent' as UpiMode\n} as const;\n\nexport const MAX_PRIMARY_APPS = 4;\n\nexport const A11Y = {\n    ButtonId: {\n        QR: 'upi-button-qrCode',\n        INTENT: 'upi-button-intent'\n    },\n    AreaId: {\n        QR: 'upi-area-qrCode',\n        INTENT: 'upi-area-intent'\n    }\n};\n\nexport const UPI_COUNTDOWN_TIME = 5;\n"],"names":["UPI_MODE","QR_CODE","INTENT","MAX_PRIMARY_APPS","A11Y","ButtonId","QR","AreaId","UPI_COUNTDOWN_TIME"],"mappings":"MAEaA,EAAW,CACpBC,QAAS,SACTC,OAAQ,UAGCC,EAAmB,EAEnBC,EAAO,CAChBC,SAAU,CACNC,GAAI,oBACJJ,OAAQ,qBAEZK,OAAQ,CACJD,GAAI,kBACJJ,OAAQ,oBAIHM,EAAqB"}

package/dist/es/components/helpers/IssuerListContainer/IssuerListContainer.js

@@ -1,2 +1,2 @@
-import{createElement as t}from"../../../external/preact/dist/preact.js";import{UIElement as s}from"../../internal/UIElement/UIElement.js";import e from"../../internal/IssuerList/IssuerList.js";import i from"../../../utils/get-issuer-image.js";import{FALLBACK_CONTEXT as r}from"../../../core/config.js";import o from"../../internal/RedirectButton/RedirectButton.js";class n extends s{formatProps(t){const s=t.details&&t.details.length&&(t.details.find(t=>"issuer"===t.key)||{}).items||t.issuers||[];return{...t,issuers:s}}formatData(){return{paymentMethod:{type:this.type,issuer:this.state?.data?.issuer}}}get isValid(){return 0===this.props.issuers.length||!!this.state?.isValid}get brands(){return this.props.showPaymentMethodItemImages?this.props.issuers.map(t=>({icon:t.icon,name:t.id})):[]}componentToRender(){return this.props.issuers.length>0?t(e,{ref:t=>{this.componentRef=t},items:this.props.issuers,highlightedIds:this.props.highlightedIssuers,...this.props,...this.state,showImage:this.props.showImage,type:this.constructor.type,onChange:this.setState,onSubmit:this.submit,payButton:this.payButton,contextualText:this.props.i18n.get("issuerList.selectField.contextualText"),onSubmitAnalytics:this.submitAnalytics}):t(o,{showPayButton:this.props.showPayButton,name:this.props.name,...this.props,onSubmit:this.submit,payButton:this.payButton,ref:t=>{this.componentRef=t}})}constructor(t,s){super(t,s);const e=t=>this.resources.getImage(t);if(this.props.showImage){const t=i({loadingContext:this.props.loadingContext},this.constructor.type,e);this.props.issuers=this.props.issuers.map(s=>({...s,icon:t(s.id)}))}}}var a,p,h;h={showImage:!0,issuers:[],highlightedIssuers:[],loadingContext:r,showPaymentMethodItemImages:!1},(p="defaultProps")in(a=n)?Object.defineProperty(a,p,{value:h,enumerable:!0,configurable:!0,writable:!0}):a[p]=h;export{n as default};
+import{createElement as t}from"../../../external/preact/dist/preact.js";import{UIElement as s}from"../../internal/UIElement/UIElement.js";import e from"../../internal/IssuerList/IssuerList.js";import i from"../../../utils/get-issuer-image.js";import{FALLBACK_CONTEXT as o}from"../../../core/config.js";import r from"../../internal/RedirectButton/RedirectButton.js";class n extends s{formatProps(t){const s=t?.details?.length&&t.details.find(t=>"issuer"===t.key)?.items||t.issuers||[];return{...t,issuers:s}}formatData(){return{paymentMethod:{type:this.type,issuer:this.state?.data?.issuer}}}get isValid(){return 0===this.props.issuers.length||Boolean(this.state?.isValid)}get brands(){return this.props.showPaymentMethodItemImages?this.props.issuers.map(t=>({icon:t.icon,name:t.id})):[]}componentToRender(){return this.props.issuers.length>0?t(e,{items:this.props.issuers,highlightedIds:this.props.highlightedIssuers,...this.props,...this.state,setComponentRef:this.setComponentRef,showImage:this.props.showImage,type:this.constructor.type,onChange:this.setState,onSubmit:this.submit,payButton:this.payButton,contextualText:this.props.i18n.get("issuerList.selectField.contextualText"),onSubmitAnalytics:this.submitAnalytics}):t(r,{showPayButton:this.props.showPayButton,name:this.props.name,...this.props,onSubmit:this.submit,payButton:this.payButton,ref:t=>{this.componentRef=t}})}constructor(t,s){super(t,s);const e=t=>this.resources.getImage(t);if(this.props.showImage){const t=i({loadingContext:this.props.loadingContext},this.constructor.type,e);this.props.issuers=this.props.issuers.map(s=>({...s,icon:t(s.id)}))}}}var a,p,h;h={showImage:!0,issuers:[],highlightedIssuers:[],loadingContext:o,showPaymentMethodItemImages:!1},(p="defaultProps")in(a=n)?Object.defineProperty(a,p,{value:h,enumerable:!0,configurable:!0,writable:!0}):a[p]=h;export{n as default};
 //# sourceMappingURL=IssuerListContainer.js.map

package/dist/es/components/helpers/IssuerListContainer/IssuerListContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"IssuerListContainer.js","sources":["../../../../../src/components/helpers/IssuerListContainer/IssuerListContainer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../../internal/UIElement/UIElement';\nimport IssuerList from '../../internal/IssuerList';\nimport getIssuerImageUrl from '../../../utils/get-issuer-image';\nimport { FALLBACK_CONTEXT } from '../../../core/config';\nimport RedirectButton from '../../internal/RedirectButton';\nimport { IssuerListConfiguration, IssuerListData } from './types';\nimport type { ICore } from '../../../core/types';\nimport { PaymentMethodBrand } from '../../../types/global-types';\n\nclass IssuerListContainer<TProps extends IssuerListConfiguration = IssuerListConfiguration, TData = IssuerListData> extends UIElement<TProps> {\n    protected static readonly defaultProps = {\n        showImage: true,\n        issuers: [],\n        highlightedIssuers: [],\n        loadingContext: FALLBACK_CONTEXT,\n        showPaymentMethodItemImages: false\n    };\n\n    constructor(checkout: ICore, props?: TProps) {\n        super(checkout, props);\n\n        const getImage = props => this.resources.getImage(props);\n\n        if (this.props.showImage) {\n            const getIssuerIcon = getIssuerImageUrl({ loadingContext: this.props.loadingContext }, this.constructor['type'], getImage);\n\n            this.props.issuers = this.props.issuers.map(item => ({\n                ...item,\n                icon: getIssuerIcon(item.id)\n            }));\n        }\n    }\n\n    formatProps(props) {\n        const issuers = (props.details && props.details.length && (props.details.find(d => d.key === 'issuer') || {}).items) || props.issuers || [];\n        return { ...props, issuers };\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData(): TData {\n        return {\n            paymentMethod: {\n                type: this.type,\n                issuer: this.state?.data?.issuer\n            }\n        } as TData;\n    }\n\n    /**\n     * Returns whether the component state is valid or not\n     */\n    get isValid() {\n        if (this.props.issuers.length === 0) {\n            return true;\n        }\n        return !!this.state?.isValid;\n    }\n\n    /**\n     * Returns brands array (similar to card) depending on showPaymentMethodItemImages\n     * This is used to show the brands in the PaymentMethodItem\n     * Requires brands icons to be loaded in the payment method\n     */\n    get brands(): PaymentMethodBrand[] {\n        if (this.props.showPaymentMethodItemImages) {\n            return this.props.issuers.map(brand => {\n                const brandIcon = brand.icon;\n                return { icon: brandIcon, name: brand.id };\n            });\n        }\n\n        return [];\n    }\n\n    protected override componentToRender(): h.JSX.Element {\n        return this.props.issuers.length > 0 ? (\n            <IssuerList\n                ref={ref => {\n                    this.componentRef = ref;\n                }}\n                items={this.props.issuers}\n                highlightedIds={this.props.highlightedIssuers}\n                {...this.props}\n                {...this.state}\n                showImage={this.props.showImage}\n                type={this.constructor['type']}\n                onChange={this.setState}\n                onSubmit={this.submit}\n                payButton={this.payButton}\n                contextualText={this.props.i18n.get('issuerList.selectField.contextualText')}\n                onSubmitAnalytics={this.submitAnalytics}\n            />\n        ) : (\n            <RedirectButton\n                showPayButton={this.props.showPayButton}\n                name={this.props.name}\n                {...this.props}\n                onSubmit={this.submit}\n                payButton={this.payButton}\n                ref={ref => {\n                    this.componentRef = ref;\n                }}\n            />\n        );\n    }\n}\n\nexport default IssuerListContainer;\n"],"names":["IssuerListContainer","UIElement","formatProps","props","issuers","details","length","find","d","key","items","formatData","paymentMethod","type","this","issuer","state","data","isValid","brands","showPaymentMethodItemImages","map","brand","icon","name","id","componentToRender","h","IssuerList","ref","componentRef","highlightedIds","highlightedIssuers","showImage","constructor","onChange","setState","onSubmit","submit","payButton","contextualText","i18n","get","onSubmitAnalytics","submitAnalytics","RedirectButton","showPayButton","checkout","super","getImage","resources","getIssuerIcon","getIssuerImageUrl","loadingContext","item","FALLBACK_CONTEXT","defaultProps"],"mappings":"6WAUA,MAAMA,UAAsHC,EAwBxHC,WAAAA,CAAYC,GACR,MAAMC,EAAWD,EAAME,SAAWF,EAAME,QAAQC,SAAWH,EAAME,QAAQE,KAAKC,GAAe,WAAVA,EAAEC,MAAqB,CAAA,GAAIC,OAAUP,EAAMC,SAAW,GACzI,MAAO,IAAKD,EAAOC,UACvB,CAKAO,UAAAA,GACI,MAAO,CACHC,cAAe,CACXC,KAAMC,KAAKD,KACXE,OAAQD,KAAKE,OAAOC,MAAMF,QAGtC,CAKA,WAAIG,GACA,OAAkC,IAA9BJ,KAAKX,MAAMC,QAAQE,UAGdQ,KAAKE,OAAOE,OACzB,CAOA,UAAIC,GACA,OAAIL,KAAKX,MAAMiB,4BACJN,KAAKX,MAAMC,QAAQiB,IAAIC,IAEnB,CAAEC,KADSD,EAAMC,KACEC,KAAMF,EAAMG,MAIvC,EACX,CAEmBC,iBAAAA,GACf,OAAOZ,KAAKX,MAAMC,QAAQE,OAAS,EAC/BqB,EAACC,EAAAA,CACGC,IAAKA,IACDf,KAAKgB,aAAeD,GAExBnB,MAAOI,KAAKX,MAAMC,QAClB2B,eAAgBjB,KAAKX,MAAM6B,sBACvBlB,KAAKX,SACLW,KAAKE,MACTiB,UAAWnB,KAAKX,MAAM8B,UACtBpB,KAAMC,KAAKoB,YAAY,KACvBC,SAAUrB,KAAKsB,SACfC,SAAUvB,KAAKwB,OACfC,UAAWzB,KAAKyB,UAChBC,eAAgB1B,KAAKX,MAAMsC,KAAKC,IAAI,yCACpCC,kBAAmB7B,KAAK8B,kBAG5BjB,EAACkB,EAAAA,CACGC,cAAehC,KAAKX,MAAM2C,cAC1BtB,KAAMV,KAAKX,MAAMqB,QACbV,KAAKX,MACTkC,SAAUvB,KAAKwB,OACfC,UAAWzB,KAAKyB,UAChBV,IAAKA,IACDf,KAAKgB,aAAeD,IAIpC,CAxFA,WAAAK,CAAYa,EAAiB5C,GACzB6C,MAAMD,EAAU5C,GAEhB,MAAM8C,EAAW9C,GAASW,KAAKoC,UAAUD,SAAS9C,GAElD,GAAIW,KAAKX,MAAM8B,UAAW,CACtB,MAAMkB,EAAgBC,EAAkB,CAAEC,eAAgBvC,KAAKX,MAAMkD,gBAAkBvC,KAAKoB,iBAAqBe,GAEjHnC,KAAKX,MAAMC,QAAUU,KAAKX,MAAMC,QAAQiB,IAAIiC,QACrCA,EACH/B,KAAM4B,EAAcG,EAAK7B,MAEjC,CACJ,cArByC,CACrCQ,WAAW,EACX7B,QAAS,GACT4B,mBAAoB,GACpBqB,eAAgBE,EAChBnC,6BAA6B,MALPoC,oBADxBxD"}
+{"version":3,"file":"IssuerListContainer.js","sources":["../../../../../src/components/helpers/IssuerListContainer/IssuerListContainer.tsx"],"sourcesContent":["import { h } from 'preact';\nimport UIElement from '../../internal/UIElement/UIElement';\nimport IssuerList from '../../internal/IssuerList';\nimport getIssuerImageUrl from '../../../utils/get-issuer-image';\nimport { FALLBACK_CONTEXT } from '../../../core/config';\nimport RedirectButton from '../../internal/RedirectButton';\nimport { IssuerListConfiguration, IssuerListData } from './types';\nimport type { ICore } from '../../../core/types';\nimport { PaymentMethodBrand } from '../../../types/global-types';\nimport { ImageOptions } from '../../../core/Context/Resources';\n\nclass IssuerListContainer<TProps extends IssuerListConfiguration = IssuerListConfiguration, TData = IssuerListData> extends UIElement<TProps> {\n    protected static readonly defaultProps = {\n        showImage: true,\n        issuers: [],\n        highlightedIssuers: [],\n        loadingContext: FALLBACK_CONTEXT,\n        showPaymentMethodItemImages: false\n    };\n\n    constructor(checkout: ICore, props?: TProps) {\n        super(checkout, props);\n\n        const getImage = (props: ImageOptions) => this.resources.getImage(props);\n\n        if (this.props.showImage) {\n            const getIssuerIcon = getIssuerImageUrl({ loadingContext: this.props.loadingContext }, this.constructor['type'], getImage);\n\n            this.props.issuers = this.props.issuers.map(item => ({\n                ...item,\n                icon: getIssuerIcon(item.id)\n            }));\n        }\n    }\n\n    formatProps(props: TProps): TProps {\n        const issuers =\n            // @ts-expect-error - details is not in the props type but we need it for backward compatibility\n            (props?.details?.length && props.details.find((d: Record<string, unknown>) => d.key === 'issuer')?.items) || props.issuers || [];\n        return { ...props, issuers };\n    }\n\n    /**\n     * Formats the component data output\n     */\n    formatData(): TData {\n        return {\n            paymentMethod: {\n                type: this.type,\n                issuer: this.state?.data?.issuer\n            }\n        } as TData;\n    }\n\n    /**\n     * Returns whether the component state is valid or not\n     */\n    get isValid() {\n        if (this.props.issuers.length === 0) {\n            return true;\n        }\n        return Boolean(this.state?.isValid);\n    }\n\n    /**\n     * Returns brands array (similar to card) depending on showPaymentMethodItemImages\n     * This is used to show the brands in the PaymentMethodItem\n     * Requires brands icons to be loaded in the payment method\n     */\n    get brands(): PaymentMethodBrand[] {\n        if (this.props.showPaymentMethodItemImages) {\n            return this.props.issuers.map(brand => {\n                const brandIcon = brand.icon;\n                return { icon: brandIcon, name: brand.id };\n            });\n        }\n\n        return [];\n    }\n\n    protected override componentToRender(): h.JSX.Element {\n        return this.props.issuers.length > 0 ? (\n            <IssuerList\n                items={this.props.issuers}\n                highlightedIds={this.props.highlightedIssuers}\n                {...this.props}\n                {...this.state}\n                setComponentRef={this.setComponentRef}\n                showImage={this.props.showImage}\n                type={this.constructor['type']}\n                onChange={this.setState}\n                onSubmit={this.submit}\n                payButton={this.payButton}\n                contextualText={this.props.i18n.get('issuerList.selectField.contextualText')}\n                onSubmitAnalytics={this.submitAnalytics}\n            />\n        ) : (\n            <RedirectButton\n                showPayButton={this.props.showPayButton}\n                name={this.props.name}\n                {...this.props}\n                onSubmit={this.submit}\n                payButton={this.payButton}\n                ref={ref => {\n                    this.componentRef = ref;\n                }}\n            />\n        );\n    }\n}\n\nexport default IssuerListContainer;\n"],"names":["IssuerListContainer","UIElement","formatProps","props","issuers","details","length","find","d","key","items","formatData","paymentMethod","type","this","issuer","state","data","isValid","Boolean","brands","showPaymentMethodItemImages","map","brand","icon","name","id","componentToRender","h","IssuerList","highlightedIds","highlightedIssuers","setComponentRef","showImage","constructor","onChange","setState","onSubmit","submit","payButton","contextualText","i18n","get","onSubmitAnalytics","submitAnalytics","RedirectButton","showPayButton","ref","componentRef","checkout","super","getImage","resources","getIssuerIcon","getIssuerImageUrl","loadingContext","item","FALLBACK_CONTEXT","defaultProps"],"mappings":"6WAWA,MAAMA,UAAsHC,EAwBxHC,WAAAA,CAAYC,GACR,MAAMC,EAEDD,GAAOE,SAASC,QAAUH,EAAME,QAAQE,KAAMC,GAAyC,WAAVA,EAAEC,MAAmBC,OAAUP,EAAMC,SAAW,GAClI,MAAO,IAAKD,EAAOC,UACvB,CAKAO,UAAAA,GACI,MAAO,CACHC,cAAe,CACXC,KAAMC,KAAKD,KACXE,OAAQD,KAAKE,OAAOC,MAAMF,QAGtC,CAKA,WAAIG,GACA,OAAkC,IAA9BJ,KAAKX,MAAMC,QAAQE,QAGhBa,QAAQL,KAAKE,OAAOE,QAC/B,CAOA,UAAIE,GACA,OAAIN,KAAKX,MAAMkB,4BACJP,KAAKX,MAAMC,QAAQkB,IAAIC,IAEnB,CAAEC,KADSD,EAAMC,KACEC,KAAMF,EAAMG,MAIvC,EACX,CAEmBC,iBAAAA,GACf,OAAOb,KAAKX,MAAMC,QAAQE,OAAS,EAC/BsB,EAACC,EAAAA,CACGnB,MAAOI,KAAKX,MAAMC,QAClB0B,eAAgBhB,KAAKX,MAAM4B,sBACvBjB,KAAKX,SACLW,KAAKE,MACTgB,gBAAiBlB,KAAKkB,gBACtBC,UAAWnB,KAAKX,MAAM8B,UACtBpB,KAAMC,KAAKoB,YAAY,KACvBC,SAAUrB,KAAKsB,SACfC,SAAUvB,KAAKwB,OACfC,UAAWzB,KAAKyB,UAChBC,eAAgB1B,KAAKX,MAAMsC,KAAKC,IAAI,yCACpCC,kBAAmB7B,KAAK8B,kBAG5BhB,EAACiB,EAAAA,CACGC,cAAehC,KAAKX,MAAM2C,cAC1BrB,KAAMX,KAAKX,MAAMsB,QACbX,KAAKX,MACTkC,SAAUvB,KAAKwB,OACfC,UAAWzB,KAAKyB,UAChBQ,IAAKA,IACDjC,KAAKkC,aAAeD,IAIpC,CAxFA,WAAAb,CAAYe,EAAiB9C,GACzB+C,MAAMD,EAAU9C,GAEhB,MAAMgD,EAAYhD,GAAwBW,KAAKsC,UAAUD,SAAShD,GAElE,GAAIW,KAAKX,MAAM8B,UAAW,CACtB,MAAMoB,EAAgBC,EAAkB,CAAEC,eAAgBzC,KAAKX,MAAMoD,gBAAkBzC,KAAKoB,iBAAqBiB,GAEjHrC,KAAKX,MAAMC,QAAUU,KAAKX,MAAMC,QAAQkB,IAAIkC,QACrCA,EACHhC,KAAM6B,EAAcG,EAAK9B,MAEjC,CACJ,cArByC,CACrCO,WAAW,EACX7B,QAAS,GACT2B,mBAAoB,GACpBwB,eAAgBE,EAChBpC,6BAA6B,MALPqC,oBADxB1D"}

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

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{useRef as o,useMemo as r,useState as s,useCallback as n,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import i from"../FormFields/Fieldset/Fieldset.js";import l from"./components/ReadOnlyAddress.js";import{getAddressValidationRules as d}from"./validate.js";import{addressFormatters as c,countrySpecificFormatters as u}from"./validate.formats.js";import m from"./components/FieldContainer.js";import p from"../../../utils/useForm/useForm.js";import f from"./Specifications.js";import{ADDRESS_SCHEMA as y,FALLBACK_VALUE as F}from"./constants.js";import{getMaxLengthByFieldAndCountry as h}from"../../../utils/validator-utils.js";import{useCoreContext as C}from"../../../core/Context/CoreProvider.js";import g from"./components/AddressSearch.js";function A(A){const{i18n:v}=C(),{label:b="",requiredFields:j,visibility:x,iOSFocusedField:S=null,showContextualElement:k}=A,M=o({});Object.keys(M.current).length||A.setComponentRef?.(M.current);const O=r(()=>new f(A.specifications),[A.specifications]),D=O.getAddressSchemaForCountryFlat(A.countryCode).filter(e=>j.includes(e)),[w,B]=s(!1),[E,N]=s(!1),[P,L]=s(""),R=!!A.onAddressLookup,[V,q]=s(!1),H=!A.onAddressLookup||(w||E),{data:T,errors:_,valid:I,isValid:U,handleChangeFor:$,triggerValidation:z,setData:G,mergeData:J}=p({schema:D,defaultData:A.data,rules:{...d(O),...A.validationRules},formatters:c}),K=o(A.data?.country),Q=(T.country||K.current)?.toUpperCase(),W=r(()=>({...T,country:Q}),[T,Q]),X=n(e=>{const t=y.reduce((t,o)=>{const r=e[o];return null!=r&&(t[o]=String(r)),t},{});J(t),q(!0),z(),B(!0)},[B,z,G]),Y=n(()=>{N(!0)},[]);M.current.showValidation=()=>{z(),L(!R||H||U?"":v.get("address.errors.incomplete"))};const Z=D.filter(e=>!S||e===S);if(a(()=>{if(V)return void q(!1);const e=O.countryHasDataset(T.country)?"":F,t={...T,stateOrProvince:e};j.forEach(e=>{$(e,"input")(t[e]??"")}),t.postalCode&&$("postalCode","blur")(T.postalCode)},[T.country]),a(()=>{const e=j.includes("stateOrProvince"),t=T.country&&O.countryHasDataset(T.country),o=e&&t,r=T.stateOrProvince||(o?"":F);$("stateOrProvince","input")(r)},[]),a(()=>{const e=O.getOptionalFieldsForCountry(T.country),t=y.reduce((t,o)=>{const r=e.includes(o),s=j.includes(o),n=T[o],a=A.data[o],i=r&&!n||!s?s||n||!a?F:a:n;return i?.length&&(t[o]=i),t},{});!t.country&&K.current&&(t.country=K.current),A.onChange({data:t,valid:I,errors:_,isValid:U})},[T,I,_,U]),"hidden"===x)return null;if("readOnly"===x)return e(l,{data:T,label:b});const ee=(t,{classNameModifiers:o=[]})=>j.includes(t)?e(m,{key:t,allowedCountries:A.allowedCountries,classNameModifiers:[...o,t],data:W,errors:_,valid:I,fieldName:t,onInput:$(t,"input"),onBlur:$(t,"blur"),onDropdownChange:$(t,"blur"),specifications:O,maxLength:h(u,t,Q),trimOnBlur:!0,disabled:!Z.includes(t),onFieldFocusAnalytics:A.onFieldFocusAnalytics,onFieldBlurAnalytics:A.onFieldBlurAnalytics}):null,te=O.getAddressSchemaForCountry(T.country);return e(t,null,e(i,{classNameModifiers:[b,"address"],label:b},R&&e(g,{onAddressLookup:A.onAddressLookup,onAddressSelected:A.onAddressSelected,onSelect:X,onManualAddress:Y,externalErrorMessage:P,hideManualButton:H,showContextualElement:k,contextualText:v.get("address.search.contextualText"),addressSearchDebounceMs:A.addressSearchDebounceMs}),H&&e(t,null,te.map(t=>t instanceof Array?e("div",{className:"adyen-checkout__field-group"},t.map(([e,t])=>ee(e,{classNameModifiers:[`col-${t}`]}))):ee(t,{})))))}A.defaultProps={countryCode:null,validationRules:null,data:{},onChange:()=>{},visibility:"editable",requiredFields:y,specifications:{},onFieldFocusAnalytics:()=>{},onFieldBlurAnalytics:()=>{}};export{A as default};
+import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{useRef as r,useMemo as o,useState as s,useCallback as n,useEffect as a}from"../../../external/preact/hooks/dist/hooks.js";import i from"../FormFields/Fieldset/Fieldset.js";import l from"./components/ReadOnlyAddress.js";import{getAddressValidationRules as d}from"./validate.js";import{addressFormatters as c,countrySpecificFormatters as u}from"./validate.formats.js";import m from"./components/FieldContainer.js";import p from"../../../utils/useForm/useForm.js";import f from"./Specifications.js";import{ADDRESS_SCHEMA as y,FALLBACK_VALUE as F}from"./constants.js";import{getMaxLengthByFieldAndCountry as h}from"../../../utils/validator-utils.js";import{useCoreContext as C}from"../../../core/Context/CoreProvider.js";import g from"./components/AddressSearch.js";function A(A){const{i18n:v}=C(),{label:b="",requiredFields:j,visibility:S,iOSFocusedField:x=null,showContextualElement:k}=A,M=r({});Object.keys(M.current).length||A.setComponentRef?.(M.current);const O=o(()=>new f(A.specifications),[A.specifications]),D=O.getAddressSchemaForCountryFlat(A.countryCode).filter(e=>j.includes(e)),[w,B]=s(!1),[E,L]=s(!1),[N,P]=s(""),R=!!A.onAddressLookup,[V,H]=s(!1),q=!A.onAddressLookup||(w||E),{data:T,errors:_,valid:I,isValid:U,handleChangeFor:$,triggerValidation:z,setData:G,mergeData:J}=p({schema:D,defaultData:A.data,rules:{...d(O),...A.validationRules},formatters:c}),K=r(A.data?.country),Q=(T.country||K.current)?.toUpperCase(),W=o(()=>({...T,country:Q}),[T,Q]),X=n(e=>{const t=y.reduce((t,r)=>{const o=e[r];return null!=o&&(t[r]=String(o)),t},{});J(t),H(!0),z(),B(!0)},[B,z,G]),Y=n(()=>{L(!0)},[]);M.current.showValidation=()=>{z(),P(!R||q||U?"":v.get("address.errors.incomplete"))};const Z=D.filter(e=>!x||e===x);if(a(()=>{if(V)return void H(!1);const e=O.countryHasDataset(T.country)?"":F,t={...T,stateOrProvince:e};j.forEach(e=>{$(e,"input")(t[e]??"")}),t.postalCode&&$("postalCode","blur")(T.postalCode)},[T.country]),a(()=>{const e=j.includes("stateOrProvince"),t=T.country&&O.countryHasDataset(T.country),r=e&&t,o=T.stateOrProvince||(r?"":F);$("stateOrProvince","input")(o)},[]),a(()=>{const e=O.getOptionalFieldsForCountry(T.country),t=y.reduce((t,r)=>{const o=e.includes(r),s=j.includes(r),n=T[r],a=A.data[r],i=o&&!n||!s?s||n||!a?F:a:n;return i?.length&&(t[r]=i),t},{});!t.country&&K.current&&(t.country=K.current),A.onChange({data:t,valid:I,errors:_,isValid:U})},[T,I,_,U]),"hidden"===S)return null;if("readOnly"===S)return e(l,{data:T,label:b});const ee=(t,{classNameModifiers:r=[]})=>j.includes(t)?e(m,{key:t,allowedCountries:A.allowedCountries,classNameModifiers:[...r,t],data:W,errors:_,valid:I,fieldName:t,onInput:$(t,"input"),onBlur:$(t,"blur"),onDropdownChange:$(t,"blur"),specifications:O,maxLength:h(u,t,Q),trimOnBlur:!0,disabled:!Z.includes(t),onFieldFocusAnalytics:A.onFieldFocusAnalytics,onFieldBlurAnalytics:A.onFieldBlurAnalytics}):null,te=O.getAddressSchemaForCountry(T.country);return e(t,null,e(i,{classNameModifiers:[b,"address"],label:b,renderLabelAsSectionHeading:!0},R&&e(g,{onAddressLookup:A.onAddressLookup,onAddressSelected:A.onAddressSelected,onSelect:X,onManualAddress:Y,externalErrorMessage:N,hideManualButton:q,showContextualElement:k,contextualText:v.get("address.search.contextualText"),addressSearchDebounceMs:A.addressSearchDebounceMs}),q&&e(t,null,te.map(t=>t instanceof Array?e("div",{className:"adyen-checkout__field-group"},t.map(([e,t])=>ee(e,{classNameModifiers:[`col-${t}`]}))):ee(t,{})))))}A.defaultProps={countryCode:null,validationRules:null,data:{},onChange:()=>{},visibility:"editable",requiredFields:y,specifications:{},onFieldFocusAnalytics:()=>{},onFieldBlurAnalytics:()=>{}};export{A as default};
 //# sourceMappingURL=Address.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Address.js","sources":["../../../../../src/components/internal/Address/Address.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport ReadOnlyAddress from './components/ReadOnlyAddress';\nimport { getAddressValidationRules } from './validate';\nimport { addressFormatters, countrySpecificFormatters } from './validate.formats';\nimport { AddressProps } from './types';\nimport { AddressData } from '../../../types/global-types';\nimport FieldContainer from './components/FieldContainer';\nimport useForm from '../../../utils/useForm';\nimport Specifications from './Specifications';\nimport { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants';\nimport { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport AddressSearch from './components/AddressSearch';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport './Address.scss';\n\nexport default function Address(props: Readonly<AddressProps>) {\n    const { i18n } = useCoreContext();\n\n    const { label = '', requiredFields, visibility, iOSFocusedField = null, showContextualElement } = props;\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const addressRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(addressRef.current).length) {\n        props.setComponentRef?.(addressRef.current);\n    }\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    const requiredFieldsSchema = specifications.getAddressSchemaForCountryFlat(props.countryCode).filter(field => requiredFields.includes(field));\n\n    const [hasSelectedAddress, setHasSelectedAddress] = useState(false);\n\n    const [useManualAddress, setUseManualAddress] = useState(false);\n\n    const [searchErrorMessage, setSearchErrorMessage] = useState('');\n\n    const showAddressSearch = !!props.onAddressLookup;\n\n    const [ignoreCountryChange, setIgnoreCountryChange] = useState(false);\n\n    const showAddressFields = props.onAddressLookup ? hasSelectedAddress || useManualAddress : true;\n\n    const { data, errors, valid, isValid, handleChangeFor, triggerValidation, setData, mergeData } = useForm<AddressData>({\n        schema: requiredFieldsSchema,\n        defaultData: props.data,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...getAddressValidationRules(specifications), ...props.validationRules },\n        formatters: addressFormatters\n    });\n\n    // In partial address mode, country is not in the form schema but we need it for regionalized labels.\n    // Store the merchant's country config once at mount, then use it if form data doesn't have country.\n    const initialCountryRef = useRef<string | undefined>((props.data as AddressData)?.country);\n    const effectiveCountry = (data.country || initialCountryRef.current)?.toUpperCase();\n    const dataWithCountry = useMemo(() => ({ ...data, country: effectiveCountry }), [data, effectiveCountry]);\n\n    const setSearchData = useCallback(\n        (selectedAddress: AddressData) => {\n            const propsKeysToProcess = ADDRESS_SCHEMA;\n            const newStateData = propsKeysToProcess.reduce((acc: AddressData, propKey) => {\n                // Make sure the data provided by the merchant is always strings\n                const providedValue = selectedAddress[propKey];\n                if (providedValue !== null && providedValue !== undefined) {\n                    // Cast everything to string\n                    acc[propKey] = String(providedValue);\n                }\n                return acc;\n            }, {});\n            mergeData(newStateData);\n            setIgnoreCountryChange(true);\n            triggerValidation();\n            setHasSelectedAddress(true);\n        },\n        [setHasSelectedAddress, triggerValidation, setData]\n    );\n\n    const onManualAddress = useCallback(() => {\n        setUseManualAddress(true);\n    }, []);\n\n    // Expose method expected by (parent) Address.tsx\n    addressRef.current.showValidation = () => {\n        triggerValidation();\n        if (showAddressSearch && !showAddressFields && !isValid) {\n            setSearchErrorMessage(i18n.get('address.errors.incomplete'));\n        } else {\n            setSearchErrorMessage('');\n        }\n    };\n\n    /**\n     * For iOS: iOSFocusedField is the name of the element calling for other elements to be disabled\n     * - so if it is set (meaning we are in iOS *and* an input has been focussed) only enable the field that corresponds to this element\n     */\n    const enabledFields: string[] = requiredFieldsSchema.filter(item => {\n        return !iOSFocusedField ? true : item === iOSFocusedField;\n    });\n\n    /**\n     * Effect that:\n     * - Resets validation for all fields by triggering handleChangeFor(fieldName, 'input')\n     * - Applies validation on postalCode field in case it has any value\n     */\n    useEffect((): void => {\n        // if the country was set via setSearchData we don't want to trigger this\n        if (ignoreCountryChange) {\n            setIgnoreCountryChange(false);\n            return;\n        }\n\n        const stateOrProvince = specifications.countryHasDataset(data.country) ? '' : FALLBACK_VALUE;\n        const newData = { ...data, stateOrProvince };\n\n        requiredFields.forEach(fieldName => {\n            handleChangeFor(fieldName, 'input')(newData[fieldName] ?? '');\n        });\n\n        if (newData.postalCode) {\n            handleChangeFor('postalCode', 'blur')(data.postalCode);\n        }\n    }, [data.country]);\n\n    /**\n     * Set the value of 'stateOrProvince' during the initial render if\n     * property is provided during the creation of the payment method\n     */\n    useEffect((): void => {\n        const stateFieldIsRequired = requiredFields.includes('stateOrProvince');\n        const countryHasStatesDataset = data.country && specifications.countryHasDataset(data.country);\n        const addressShouldHaveState = stateFieldIsRequired && countryHasStatesDataset;\n        const stateOrProvince = data.stateOrProvince || (addressShouldHaveState ? '' : FALLBACK_VALUE);\n\n        handleChangeFor('stateOrProvince', 'input')(stateOrProvince);\n    }, []);\n\n    useEffect((): void => {\n        const optionalFields = specifications.getOptionalFieldsForCountry(data.country);\n        const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {\n            const isOptional = optionalFields.includes(cur);\n            const isRequired = requiredFields.includes(cur);\n            const newValue = data[cur];\n            const initialValue = props.data[cur];\n            // recover default data values which are not requiredFields, or prefill with 'N/A'\n            const fallbackValue = !isRequired && !newValue && !!initialValue ? initialValue : FALLBACK_VALUE;\n            const value = (isOptional && !newValue) || !isRequired ? fallbackValue : newValue;\n            if (value?.length) acc[cur] = value;\n            return acc;\n        }, {});\n\n        // In partial address mode, ensure country is included in output for regionalized labels/validation.\n        if (!(processedData as AddressData).country && initialCountryRef.current) {\n            (processedData as AddressData).country = initialCountryRef.current;\n        }\n\n        props.onChange({ data: processedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyAddress data={data} label={label} />;\n\n    const getComponent = (fieldName: string, { classNameModifiers = [] }) => {\n        if (!requiredFields.includes(fieldName)) return null;\n\n        return (\n            <FieldContainer\n                key={fieldName}\n                allowedCountries={props.allowedCountries}\n                classNameModifiers={[...classNameModifiers, fieldName]}\n                data={dataWithCountry}\n                errors={errors}\n                valid={valid}\n                fieldName={fieldName}\n                onInput={handleChangeFor(fieldName, 'input')}\n                onBlur={handleChangeFor(fieldName, 'blur')}\n                onDropdownChange={handleChangeFor(fieldName, 'blur')}\n                specifications={specifications}\n                maxLength={getMaxLengthByFieldAndCountry(countrySpecificFormatters, fieldName, effectiveCountry, true)}\n                trimOnBlur={true}\n                disabled={!enabledFields.includes(fieldName)}\n                onFieldFocusAnalytics={props.onFieldFocusAnalytics}\n                onFieldBlurAnalytics={props.onFieldBlurAnalytics}\n            />\n        );\n    };\n\n    const getWrapper = group => (\n        <div className=\"adyen-checkout__field-group\">\n            {group.map(([field, size]) => getComponent(field, { classNameModifiers: [`col-${size}`] }))}\n        </div>\n    );\n\n    const addressSchema = specifications.getAddressSchemaForCountry(data.country);\n\n    return (\n        <Fragment>\n            <Fieldset classNameModifiers={[label, 'address']} label={label}>\n                {showAddressSearch && (\n                    <AddressSearch\n                        onAddressLookup={props.onAddressLookup}\n                        onAddressSelected={props.onAddressSelected}\n                        onSelect={setSearchData}\n                        onManualAddress={onManualAddress}\n                        externalErrorMessage={searchErrorMessage}\n                        hideManualButton={showAddressFields}\n                        showContextualElement={showContextualElement}\n                        contextualText={i18n.get('address.search.contextualText')}\n                        addressSearchDebounceMs={props.addressSearchDebounceMs}\n                    />\n                )}\n                {showAddressFields && (\n                    <Fragment>{addressSchema.map(field => (field instanceof Array ? getWrapper(field) : getComponent(field, {})))}</Fragment>\n                )}\n            </Fieldset>\n        </Fragment>\n    );\n}\n\nAddress.defaultProps = {\n    countryCode: null,\n    validationRules: null,\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: ADDRESS_SCHEMA,\n    specifications: {},\n    onFieldFocusAnalytics: () => {},\n    onFieldBlurAnalytics: () => {}\n};\n"],"names":["Address","props","i18n","useCoreContext","label","requiredFields","visibility","iOSFocusedField","showContextualElement","addressRef","useRef","Object","keys","current","length","setComponentRef","specifications","useMemo","Specifications","requiredFieldsSchema","getAddressSchemaForCountryFlat","countryCode","filter","field","includes","hasSelectedAddress","setHasSelectedAddress","useState","useManualAddress","setUseManualAddress","searchErrorMessage","setSearchErrorMessage","showAddressSearch","onAddressLookup","ignoreCountryChange","setIgnoreCountryChange","showAddressFields","data","errors","valid","isValid","handleChangeFor","triggerValidation","setData","mergeData","useForm","schema","defaultData","rules","getAddressValidationRules","validationRules","formatters","addressFormatters","initialCountryRef","country","effectiveCountry","toUpperCase","dataWithCountry","setSearchData","useCallback","selectedAddress","newStateData","ADDRESS_SCHEMA","reduce","acc","propKey","providedValue","String","onManualAddress","showValidation","get","enabledFields","item","useEffect","stateOrProvince","countryHasDataset","FALLBACK_VALUE","newData","forEach","fieldName","postalCode","stateFieldIsRequired","countryHasStatesDataset","addressShouldHaveState","optionalFields","getOptionalFieldsForCountry","processedData","cur","isOptional","isRequired","newValue","initialValue","value","onChange","h","ReadOnlyAddress","getComponent","classNameModifiers","FieldContainer","key","allowedCountries","onInput","onBlur","onDropdownChange","maxLength","getMaxLengthByFieldAndCountry","countrySpecificFormatters","trimOnBlur","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","addressSchema","getAddressSchemaForCountry","Fragment","Fieldset","AddressSearch","onAddressSelected","onSelect","externalErrorMessage","hideManualButton","contextualText","addressSearchDebounceMs","map","Array","div","className","size","defaultProps"],"mappings":"u1BAkBe,SAASA,EAAQC,GAC5B,MAAMC,KAAEA,GAASC,KAEXC,MAAEA,EAAQ,GAAEC,eAAEA,EAAcC,WAAEA,EAAUC,gBAAEA,EAAkB,KAAIC,sBAAEA,GAA0BP,EAG5FQ,EAAaC,EAA4B,IAE1CC,OAAOC,KAAKH,EAAWI,SAASC,QACjCb,EAAMc,kBAAkBN,EAAWI,SAGvC,MAAMG,EAAiBC,EAAQ,IAAM,IAAIC,EAAejB,EAAMe,gBAAiB,CAACf,EAAMe,iBAEhFG,EAAuBH,EAAeI,+BAA+BnB,EAAMoB,aAAaC,OAAOC,GAASlB,EAAemB,SAASD,KAE/HE,EAAoBC,GAAyBC,GAAS,IAEtDC,EAAkBC,GAAuBF,GAAS,IAElDG,EAAoBC,GAAyBJ,EAAS,IAEvDK,IAAsB/B,EAAMgC,iBAE3BC,EAAqBC,GAA0BR,GAAS,GAEzDS,GAAoBnC,EAAMgC,kBAAkBR,GAAsBG,IAElES,KAAEA,EAAIC,OAAEA,EAAMC,MAAEA,EAAKC,QAAEA,EAAOC,gBAAEA,EAAeC,kBAAEA,EAAiBC,QAAEA,EAAOC,UAAEA,GAAcC,EAAqB,CAClHC,OAAQ3B,EACR4B,YAAa9C,EAAMoC,KAEnBW,MAAO,IAAKC,EAA0BjC,MAAoBf,EAAMiD,iBAChEC,WAAYC,IAKVC,EAAoB3C,EAA4BT,EAAMoC,MAAsBiB,SAC5EC,GAAoBlB,EAAKiB,SAAWD,EAAkBxC,UAAU2C,cAChEC,EAAkBxC,EAAQ,KAAA,IAAYoB,EAAMiB,QAASC,IAAqB,CAAClB,EAAMkB,IAEjFG,EAAgBC,EACjBC,IACG,MACMC,EADqBC,EACaC,OAAO,CAACC,EAAkBC,KAE9D,MAAMC,EAAgBN,EAAgBK,GAKtC,OAJIC,UAEAF,EAAIC,GAAWE,OAAOD,IAEnBF,GACR,CAAA,GACHpB,EAAUiB,GACV1B,GAAuB,GACvBO,IACAhB,GAAsB,IAE1B,CAACA,EAAuBgB,EAAmBC,IAGzCyB,EAAkBT,EAAY,KAChC9B,GAAoB,IACrB,IAGHpB,EAAWI,QAAQwD,eAAiB,KAChC3B,IAIIX,GAHAC,GAAsBI,GAAsBI,EAGtB,GAFAtC,EAAKoE,IAAI,+BAUvC,MAAMC,EAA0BpD,EAAqBG,OAAOkD,IAChDjE,GAAyBiE,IAASjE,GA8D9C,GAtDAkE,EAAU,KAEN,GAAIvC,EAEA,YADAC,GAAuB,GAI3B,MAAMuC,EAAkB1D,EAAe2D,kBAAkBtC,EAAKiB,SAAW,GAAKsB,EACxEC,EAAU,IAAKxC,EAAMqC,mBAE3BrE,EAAeyE,QAAQC,IACnBtC,EAAgBsC,EAAW,QAA3BtC,CAAoCoC,EAAQE,IAAc,MAG1DF,EAAQG,YACRvC,EAAgB,aAAc,OAA9BA,CAAsCJ,EAAK2C,aAEhD,CAAC3C,EAAKiB,UAMTmB,EAAU,KACN,MAAMQ,EAAuB5E,EAAemB,SAAS,mBAC/C0D,EAA0B7C,EAAKiB,SAAWtC,EAAe2D,kBAAkBtC,EAAKiB,SAChF6B,EAAyBF,GAAwBC,EACjDR,EAAkBrC,EAAKqC,kBAAoBS,EAAyB,GAAKP,GAE/EnC,EAAgB,kBAAmB,QAAnCA,CAA4CiC,IAC7C,IAEHD,EAAU,KACN,MAAMW,EAAiBpE,EAAeqE,4BAA4BhD,EAAKiB,SACjEgC,EAAgBxB,EAAeC,OAAO,CAACC,EAAKuB,KAC9C,MAAMC,EAAaJ,EAAe5D,SAAS+D,GACrCE,EAAapF,EAAemB,SAAS+D,GACrCG,EAAWrD,EAAKkD,GAChBI,EAAe1F,EAAMoC,KAAKkD,GAG1BK,EAAQJ,IAAgBE,IAAcD,EADrBA,GAAeC,IAAcC,EAA8Bf,EAAfe,EACMD,EAEzE,OADIE,GAAO9E,SAAQkD,EAAIuB,GAAOK,GACvB5B,GACR,CAAA,IAGEsB,EAA+BhC,SAAWD,EAAkBxC,UAC5DyE,EAA8BhC,QAAUD,EAAkBxC,SAG/DZ,EAAM4F,SAAS,CAAExD,KAAMiD,EAAe/C,QAAOD,SAAQE,aACtD,CAACH,EAAME,EAAOD,EAAQE,IAEN,WAAflC,EAAyB,OAAO,KACpC,GAAmB,aAAfA,EAA2B,OAAOwF,EAACC,EAAAA,CAAgB1D,KAAMA,EAAMjC,MAAOA,IAE1E,MAAM4F,GAAe,CAACjB,GAAqBkB,qBAAqB,MACvD5F,EAAemB,SAASuD,GAGzBe,EAACI,EAAAA,CACGC,IAAKpB,EACLqB,iBAAkBnG,EAAMmG,iBACxBH,mBAAoB,IAAIA,EAAoBlB,GAC5C1C,KAAMoB,EACNnB,OAAQA,EACRC,MAAOA,EACPwC,UAAWA,EACXsB,QAAS5D,EAAgBsC,EAAW,SACpCuB,OAAQ7D,EAAgBsC,EAAW,QACnCwB,iBAAkB9D,EAAgBsC,EAAW,QAC7C/D,eAAgBA,EAChBwF,UAAWC,EAA8BC,EAA2B3B,EAAWxB,GAC/EoD,YAAY,EACZC,UAAWrC,EAAc/C,SAASuD,GAClC8B,sBAAuB5G,EAAM4G,sBAC7BC,qBAAsB7G,EAAM6G,uBAnBY,KA8B9CC,GAAgB/F,EAAegG,2BAA2B3E,EAAKiB,SAErE,OACIwC,EAACmB,OACGnB,EAACoB,EAAAA,CAASjB,mBAAoB,CAAC7F,EAAO,WAAYA,MAAOA,GACpD4B,GACG8D,EAACqB,EAAAA,CACGlF,gBAAiBhC,EAAMgC,gBACvBmF,kBAAmBnH,EAAMmH,kBACzBC,SAAU3D,EACVU,gBAAiBA,EACjBkD,qBAAsBxF,EACtByF,iBAAkBnF,EAClB5B,sBAAuBA,EACvBgH,eAAgBtH,EAAKoE,IAAI,iCACzBmD,wBAAyBxH,EAAMwH,0BAGtCrF,GACG0D,EAACmB,EAAAA,KAAUF,GAAcW,IAAInG,GAAUA,aAAiBoG,MAxBpE7B,EAAC8B,MAAAA,CAAIC,UAAU,+BAwBwEtG,EAvB5EmG,IAAI,EAAEnG,EAAOuG,KAAU9B,GAAazE,EAAO,CAAE0E,mBAAoB,CAAC,OAAO6B,SAuBY9B,GAAazE,EAAO,CAAA,MAK5H,CAEAvB,EAAQ+H,aAAe,CACnB1G,YAAa,KACb6B,gBAAiB,KACjBb,KAAM,CAAA,EACNwD,SAAU,OACVvF,WAAY,WACZD,eAAgByD,EAChB9C,eAAgB,CAAA,EAChB6F,sBAAuB,OACvBC,qBAAsB"}
+{"version":3,"file":"Address.js","sources":["../../../../../src/components/internal/Address/Address.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';\nimport Fieldset from '../FormFields/Fieldset';\nimport ReadOnlyAddress from './components/ReadOnlyAddress';\nimport { getAddressValidationRules } from './validate';\nimport { addressFormatters, countrySpecificFormatters } from './validate.formats';\nimport { AddressProps } from './types';\nimport { AddressData } from '../../../types/global-types';\nimport FieldContainer from './components/FieldContainer';\nimport useForm from '../../../utils/useForm';\nimport Specifications from './Specifications';\nimport { ADDRESS_SCHEMA, FALLBACK_VALUE } from './constants';\nimport { getMaxLengthByFieldAndCountry } from '../../../utils/validator-utils';\nimport { useCoreContext } from '../../../core/Context/CoreProvider';\nimport AddressSearch from './components/AddressSearch';\nimport { ComponentMethodsRef } from '../UIElement/types';\nimport './Address.scss';\n\nexport default function Address(props: Readonly<AddressProps>) {\n    const { i18n } = useCoreContext();\n\n    const { label = '', requiredFields, visibility, iOSFocusedField = null, showContextualElement } = props;\n\n    /** An object by which to expose 'public' members to the parent UIElement */\n    const addressRef = useRef<ComponentMethodsRef>({});\n    // Just call once\n    if (!Object.keys(addressRef.current).length) {\n        props.setComponentRef?.(addressRef.current);\n    }\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    const requiredFieldsSchema = specifications.getAddressSchemaForCountryFlat(props.countryCode).filter(field => requiredFields.includes(field));\n\n    const [hasSelectedAddress, setHasSelectedAddress] = useState(false);\n\n    const [useManualAddress, setUseManualAddress] = useState(false);\n\n    const [searchErrorMessage, setSearchErrorMessage] = useState('');\n\n    const showAddressSearch = !!props.onAddressLookup;\n\n    const [ignoreCountryChange, setIgnoreCountryChange] = useState(false);\n\n    const showAddressFields = props.onAddressLookup ? hasSelectedAddress || useManualAddress : true;\n\n    const { data, errors, valid, isValid, handleChangeFor, triggerValidation, setData, mergeData } = useForm<AddressData>({\n        schema: requiredFieldsSchema,\n        defaultData: props.data,\n        // Ensure any passed validation rules are merged with the default ones\n        rules: { ...getAddressValidationRules(specifications), ...props.validationRules },\n        formatters: addressFormatters\n    });\n\n    // In partial address mode, country is not in the form schema but we need it for regionalized labels.\n    // Store the merchant's country config once at mount, then use it if form data doesn't have country.\n    const initialCountryRef = useRef<string | undefined>((props.data as AddressData)?.country);\n    const effectiveCountry = (data.country || initialCountryRef.current)?.toUpperCase();\n    const dataWithCountry = useMemo(() => ({ ...data, country: effectiveCountry }), [data, effectiveCountry]);\n\n    const setSearchData = useCallback(\n        (selectedAddress: AddressData) => {\n            const propsKeysToProcess = ADDRESS_SCHEMA;\n            const newStateData = propsKeysToProcess.reduce((acc: AddressData, propKey) => {\n                // Make sure the data provided by the merchant is always strings\n                const providedValue = selectedAddress[propKey];\n                if (providedValue !== null && providedValue !== undefined) {\n                    // Cast everything to string\n                    acc[propKey] = String(providedValue);\n                }\n                return acc;\n            }, {});\n            mergeData(newStateData);\n            setIgnoreCountryChange(true);\n            triggerValidation();\n            setHasSelectedAddress(true);\n        },\n        [setHasSelectedAddress, triggerValidation, setData]\n    );\n\n    const onManualAddress = useCallback(() => {\n        setUseManualAddress(true);\n    }, []);\n\n    // Expose method expected by (parent) Address.tsx\n    addressRef.current.showValidation = () => {\n        triggerValidation();\n        if (showAddressSearch && !showAddressFields && !isValid) {\n            setSearchErrorMessage(i18n.get('address.errors.incomplete'));\n        } else {\n            setSearchErrorMessage('');\n        }\n    };\n\n    /**\n     * For iOS: iOSFocusedField is the name of the element calling for other elements to be disabled\n     * - so if it is set (meaning we are in iOS *and* an input has been focussed) only enable the field that corresponds to this element\n     */\n    const enabledFields: string[] = requiredFieldsSchema.filter(item => {\n        return !iOSFocusedField ? true : item === iOSFocusedField;\n    });\n\n    /**\n     * Effect that:\n     * - Resets validation for all fields by triggering handleChangeFor(fieldName, 'input')\n     * - Applies validation on postalCode field in case it has any value\n     */\n    useEffect((): void => {\n        // if the country was set via setSearchData we don't want to trigger this\n        if (ignoreCountryChange) {\n            setIgnoreCountryChange(false);\n            return;\n        }\n\n        const stateOrProvince = specifications.countryHasDataset(data.country) ? '' : FALLBACK_VALUE;\n        const newData = { ...data, stateOrProvince };\n\n        requiredFields.forEach(fieldName => {\n            handleChangeFor(fieldName, 'input')(newData[fieldName] ?? '');\n        });\n\n        if (newData.postalCode) {\n            handleChangeFor('postalCode', 'blur')(data.postalCode);\n        }\n    }, [data.country]);\n\n    /**\n     * Set the value of 'stateOrProvince' during the initial render if\n     * property is provided during the creation of the payment method\n     */\n    useEffect((): void => {\n        const stateFieldIsRequired = requiredFields.includes('stateOrProvince');\n        const countryHasStatesDataset = data.country && specifications.countryHasDataset(data.country);\n        const addressShouldHaveState = stateFieldIsRequired && countryHasStatesDataset;\n        const stateOrProvince = data.stateOrProvince || (addressShouldHaveState ? '' : FALLBACK_VALUE);\n\n        handleChangeFor('stateOrProvince', 'input')(stateOrProvince);\n    }, []);\n\n    useEffect((): void => {\n        const optionalFields = specifications.getOptionalFieldsForCountry(data.country);\n        const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {\n            const isOptional = optionalFields.includes(cur);\n            const isRequired = requiredFields.includes(cur);\n            const newValue = data[cur];\n            const initialValue = props.data[cur];\n            // recover default data values which are not requiredFields, or prefill with 'N/A'\n            const fallbackValue = !isRequired && !newValue && !!initialValue ? initialValue : FALLBACK_VALUE;\n            const value = (isOptional && !newValue) || !isRequired ? fallbackValue : newValue;\n            if (value?.length) acc[cur] = value;\n            return acc;\n        }, {});\n\n        // In partial address mode, ensure country is included in output for regionalized labels/validation.\n        if (!(processedData as AddressData).country && initialCountryRef.current) {\n            (processedData as AddressData).country = initialCountryRef.current;\n        }\n\n        props.onChange({ data: processedData, valid, errors, isValid });\n    }, [data, valid, errors, isValid]);\n\n    if (visibility === 'hidden') return null;\n    if (visibility === 'readOnly') return <ReadOnlyAddress data={data} label={label} />;\n\n    const getComponent = (fieldName: string, { classNameModifiers = [] }) => {\n        if (!requiredFields.includes(fieldName)) return null;\n\n        return (\n            <FieldContainer\n                key={fieldName}\n                allowedCountries={props.allowedCountries}\n                classNameModifiers={[...classNameModifiers, fieldName]}\n                data={dataWithCountry}\n                errors={errors}\n                valid={valid}\n                fieldName={fieldName}\n                onInput={handleChangeFor(fieldName, 'input')}\n                onBlur={handleChangeFor(fieldName, 'blur')}\n                onDropdownChange={handleChangeFor(fieldName, 'blur')}\n                specifications={specifications}\n                maxLength={getMaxLengthByFieldAndCountry(countrySpecificFormatters, fieldName, effectiveCountry, true)}\n                trimOnBlur={true}\n                disabled={!enabledFields.includes(fieldName)}\n                onFieldFocusAnalytics={props.onFieldFocusAnalytics}\n                onFieldBlurAnalytics={props.onFieldBlurAnalytics}\n            />\n        );\n    };\n\n    const getWrapper = group => (\n        <div className=\"adyen-checkout__field-group\">\n            {group.map(([field, size]) => getComponent(field, { classNameModifiers: [`col-${size}`] }))}\n        </div>\n    );\n\n    const addressSchema = specifications.getAddressSchemaForCountry(data.country);\n\n    return (\n        <Fragment>\n            <Fieldset classNameModifiers={[label, 'address']} label={label} renderLabelAsSectionHeading>\n                {showAddressSearch && (\n                    <AddressSearch\n                        onAddressLookup={props.onAddressLookup}\n                        onAddressSelected={props.onAddressSelected}\n                        onSelect={setSearchData}\n                        onManualAddress={onManualAddress}\n                        externalErrorMessage={searchErrorMessage}\n                        hideManualButton={showAddressFields}\n                        showContextualElement={showContextualElement}\n                        contextualText={i18n.get('address.search.contextualText')}\n                        addressSearchDebounceMs={props.addressSearchDebounceMs}\n                    />\n                )}\n                {showAddressFields && (\n                    <Fragment>{addressSchema.map(field => (field instanceof Array ? getWrapper(field) : getComponent(field, {})))}</Fragment>\n                )}\n            </Fieldset>\n        </Fragment>\n    );\n}\n\nAddress.defaultProps = {\n    countryCode: null,\n    validationRules: null,\n    data: {},\n    onChange: () => {},\n    visibility: 'editable',\n    requiredFields: ADDRESS_SCHEMA,\n    specifications: {},\n    onFieldFocusAnalytics: () => {},\n    onFieldBlurAnalytics: () => {}\n};\n"],"names":["Address","props","i18n","useCoreContext","label","requiredFields","visibility","iOSFocusedField","showContextualElement","addressRef","useRef","Object","keys","current","length","setComponentRef","specifications","useMemo","Specifications","requiredFieldsSchema","getAddressSchemaForCountryFlat","countryCode","filter","field","includes","hasSelectedAddress","setHasSelectedAddress","useState","useManualAddress","setUseManualAddress","searchErrorMessage","setSearchErrorMessage","showAddressSearch","onAddressLookup","ignoreCountryChange","setIgnoreCountryChange","showAddressFields","data","errors","valid","isValid","handleChangeFor","triggerValidation","setData","mergeData","useForm","schema","defaultData","rules","getAddressValidationRules","validationRules","formatters","addressFormatters","initialCountryRef","country","effectiveCountry","toUpperCase","dataWithCountry","setSearchData","useCallback","selectedAddress","newStateData","ADDRESS_SCHEMA","reduce","acc","propKey","providedValue","String","onManualAddress","showValidation","get","enabledFields","item","useEffect","stateOrProvince","countryHasDataset","FALLBACK_VALUE","newData","forEach","fieldName","postalCode","stateFieldIsRequired","countryHasStatesDataset","addressShouldHaveState","optionalFields","getOptionalFieldsForCountry","processedData","cur","isOptional","isRequired","newValue","initialValue","value","onChange","h","ReadOnlyAddress","getComponent","classNameModifiers","FieldContainer","key","allowedCountries","onInput","onBlur","onDropdownChange","maxLength","getMaxLengthByFieldAndCountry","countrySpecificFormatters","trimOnBlur","disabled","onFieldFocusAnalytics","onFieldBlurAnalytics","addressSchema","getAddressSchemaForCountry","Fragment","Fieldset","renderLabelAsSectionHeading","AddressSearch","onAddressSelected","onSelect","externalErrorMessage","hideManualButton","contextualText","addressSearchDebounceMs","map","Array","div","className","size","defaultProps"],"mappings":"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"}

package/dist/es/components/internal/Address/components/AddressSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressSearch.js","sources":["../../../../../../src/components/internal/Address/components/AddressSearch.tsx"],"sourcesContent":["import Field from '../../FormFields/Field';\nimport { h } from 'preact';\nimport { AddressLookupItem } from '../types';\nimport { useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport './AddressSearch.scss';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { debounce } from '../../../../utils/debounce';\nimport Select from '../../FormFields/Select';\nimport { AddressData } from '../../../../types';\n\nexport type OnAddressLookupType = (\n    value: string,\n    actions: {\n        resolve: (value: Array<AddressLookupItem>) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\nexport type OnAddressSelectedType = (\n    value: AddressLookupItem,\n    actions: {\n        resolve: (value: AddressLookupItem) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\ninterface AddressSearchProps {\n    onAddressLookup?: OnAddressLookupType;\n    onAddressSelected?: OnAddressSelectedType;\n    onSelect: (addressItem: AddressData) => void;\n    onManualAddress: any;\n    externalErrorMessage: string;\n    hideManualButton: boolean;\n    showContextualElement?: boolean;\n    contextualText?: string;\n    placeholder?: string;\n    addressSearchDebounceMs?: number;\n}\n\ninterface RejectionReason {\n    errorMessage: string;\n}\n\nexport default function AddressSearch({\n    onAddressLookup,\n    onAddressSelected,\n    onSelect,\n    onManualAddress,\n    externalErrorMessage,\n    hideManualButton,\n    showContextualElement,\n    contextualText,\n    placeholder,\n    addressSearchDebounceMs\n}: Readonly<AddressSearchProps>) {\n    const [formattedData, setFormattedData] = useState<AddressLookupItem[]>([]);\n    const [originalData, setOriginalData] = useState<AddressLookupItem[]>([]);\n\n    const [errorMessage, setErrorMessage] = useState('');\n\n    const { i18n } = useCoreContext();\n    const mapDataToSelect = data => data.map(({ id, name }) => ({ id, name }));\n\n    const handlePromiseReject = useCallback((reason: RejectionReason) => {\n        if (reason?.errorMessage) {\n            setErrorMessage(reason.errorMessage);\n        }\n    }, []);\n\n    const onTextInput = useCallback(\n        (inputValue: string) => {\n            new Promise<Array<AddressLookupItem>>((resolve, reject) => {\n                void onAddressLookup(inputValue, { resolve, reject });\n            })\n                .then(searchArray => {\n                    setOriginalData(searchArray);\n                    setFormattedData(mapDataToSelect(searchArray));\n                    setErrorMessage('');\n                })\n                .catch(reason => handlePromiseReject(reason));\n        },\n        [onAddressLookup]\n    );\n\n    // update error message when there's a new one\n    useEffect(() => {\n        setErrorMessage(externalErrorMessage);\n    }, [externalErrorMessage]);\n\n    const onSelectItem = event => {\n        if (!event.target.value) {\n            setErrorMessage(i18n.get('address.errors.incomplete'));\n            return;\n        }\n        const value = originalData.find(item => item.id === event.target.value);\n\n        // 1. in case we don't get a function just select item\n        if (typeof onAddressSelected !== 'function') {\n            onSelect(value);\n            setFormattedData([]);\n            return;\n        }\n\n        // 2. in case callback is provided, create and call onAddressSelected\n        new Promise<AddressLookupItem>((resolve, reject) => {\n            void onAddressSelected(value, { resolve, reject });\n        })\n            .then(fullData => {\n                onSelect(fullData);\n                setFormattedData([]);\n            })\n            .catch(reason => handlePromiseReject(reason));\n    };\n\n    const debounceInputHandler = useMemo(() => debounce(onTextInput, addressSearchDebounceMs), []);\n\n    return (\n        <div className={'adyen-checkout__address-search adyen-checkout__field-group'}>\n            <Field\n                label={i18n.get('address')}\n                classNameModifiers={['address-search']}\n                errorMessage={errorMessage}\n                name={'address-search'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    name={'address-search'}\n                    className={'adyen-checkout__address-search__dropdown'}\n                    placeholder={placeholder}\n                    onInput={debounceInputHandler}\n                    items={formattedData}\n                    onChange={onSelectItem}\n                    disableTextFilter={true}\n                    blurOnClose={true}\n                />\n            </Field>\n            {!hideManualButton && (\n                <span className=\"adyen-checkout__address-search__manual-add\">\n                    <button\n                        type=\"button\"\n                        className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button\"\n                        onClick={onManualAddress}\n                    >\n                        {'+ ' + i18n.get('address.enterManually')}\n                    </button>\n                </span>\n            )}\n        </div>\n    );\n}\n"],"names":["AddressSearch","onAddressLookup","onAddressSelected","onSelect","onManualAddress","externalErrorMessage","hideManualButton","showContextualElement","contextualText","placeholder","addressSearchDebounceMs","formattedData","setFormattedData","useState","originalData","setOriginalData","errorMessage","setErrorMessage","i18n","useCoreContext","handlePromiseReject","useCallback","reason","onTextInput","inputValue","Promise","resolve","reject","then","searchArray","map","id","name","catch","useEffect","debounceInputHandler","useMemo","debounce","h","div","className","Field","label","get","classNameModifiers","Select","onInput","items","onChange","event","target","value","find","item","fullData","disableTextFilter","blurOnClose","span","button","type","onClick"],"mappings":"saA2Ce,SAASA,GAAcC,gBAClCA,EAAeC,kBACfA,EAAiBC,SACjBA,EAAQC,gBACRA,EAAeC,qBACfA,EAAoBC,iBACpBA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAAcC,YACdA,EAAWC,wBACXA,IAEA,MAAOC,EAAeC,GAAoBC,EAA8B,KACjEC,EAAcC,GAAmBF,EAA8B,KAE/DG,EAAcC,GAAmBJ,EAAS,KAE3CK,KAAEA,GAASC,IAGXC,EAAsBC,EAAaC,IACjCA,GAAQN,cACRC,EAAgBK,EAAON,eAE5B,IAEGO,EAAcF,EACfG,IACG,IAAIC,QAAkC,CAACC,EAASC,KACvC1B,EAAgBuB,EAAY,CAAEE,UAASC,aAE3CC,KAAKC,IACFd,EAAgBc,GAChBjB,EAAiCiB,EAfZC,IAAI,EAAGC,KAAIC,WAAM,CAAQD,KAAIC,WAgBlDf,EAAgB,MAEnBgB,MAAMX,GAAUF,EAAoBE,KAE7C,CAACrB,IAILiC,EAAU,KACNjB,EAAgBZ,IACjB,CAACA,IAEJ,MAyBM8B,EAAuBC,EAAQ,IAAMC,EAASd,EAAab,GAA0B,IAE3F,OACI4B,EAACC,MAAAA,CAAIC,UAAW,8DACZF,EAACG,EAAAA,CACGC,MAAOxB,EAAKyB,IAAI,WAChBC,mBAAoB,CAAC,kBACrB5B,aAAcA,EACdgB,KAAM,iBACNzB,sBAAuBA,EACvBC,eAAgBA,GAEhB8B,EAACO,EAAAA,CACGb,KAAM,iBACNQ,UAAW,2CACX/B,YAAaA,EACbqC,QAASX,EACTY,MAAOpC,EACPqC,SA3CKC,IACjB,IAAKA,EAAMC,OAAOC,MAEd,YADAlC,EAAgBC,EAAKyB,IAAI,8BAG7B,MAAMQ,EAAQrC,EAAasC,KAAKC,GAAQA,EAAKtB,KAAOkB,EAAMC,OAAOC,OAGjE,GAAiC,mBAAtBjD,EAGP,OAFAC,EAASgD,QACTvC,EAAiB,IAKrB,IAAIa,QAA2B,CAACC,EAASC,KAChCzB,EAAkBiD,EAAO,CAAEzB,UAASC,aAExCC,KAAK0B,IACFnD,EAASmD,GACT1C,EAAiB,MAEpBqB,MAAMX,GAAUF,EAAoBE,KAsB7BiC,mBAAmB,EACnBC,aAAa,MAGnBlD,GACEgC,EAACmB,OAAAA,CAAKjB,UAAU,8CACZF,EAACoB,SAAAA,CACGC,KAAK,SACLnB,UAAU,wIACVoB,QAASxD,GAER,KAAOc,EAAKyB,IAAI,2BAMzC"}
+{"version":3,"file":"AddressSearch.js","sources":["../../../../../../src/components/internal/Address/components/AddressSearch.tsx"],"sourcesContent":["import Field from '../../FormFields/Field';\nimport { h } from 'preact';\nimport { AddressLookupItem } from '../types';\nimport { useCallback, useEffect, useState, useMemo } from 'preact/hooks';\nimport './AddressSearch.scss';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport { debounce } from '../../../../utils/debounce';\nimport Select from '../../FormFields/Select';\nimport { AddressData } from '../../../../types';\n\nexport type OnAddressLookupType = (\n    value: string,\n    actions: {\n        resolve: (value: Array<AddressLookupItem>) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\nexport type OnAddressSelectedType = (\n    value: AddressLookupItem,\n    actions: {\n        resolve: (value: AddressLookupItem) => void;\n        reject: (reason?: any) => void;\n    }\n) => Promise<void>;\n\ninterface AddressSearchProps {\n    onAddressLookup?: OnAddressLookupType;\n    onAddressSelected?: OnAddressSelectedType;\n    onSelect: (addressItem: AddressData) => void;\n    onManualAddress: any;\n    externalErrorMessage: string;\n    hideManualButton: boolean;\n    showContextualElement?: boolean;\n    contextualText?: string;\n    placeholder?: string;\n    addressSearchDebounceMs?: number;\n}\n\ninterface RejectionReason {\n    errorMessage: string;\n}\n\nexport default function AddressSearch({\n    onAddressLookup,\n    onAddressSelected,\n    onSelect,\n    onManualAddress,\n    externalErrorMessage,\n    hideManualButton,\n    showContextualElement,\n    contextualText,\n    placeholder,\n    addressSearchDebounceMs\n}: Readonly<AddressSearchProps>) {\n    const [formattedData, setFormattedData] = useState<AddressLookupItem[]>([]);\n    const [originalData, setOriginalData] = useState<AddressLookupItem[]>([]);\n\n    const [errorMessage, setErrorMessage] = useState('');\n\n    const { i18n } = useCoreContext();\n    const mapDataToSelect = data => data.map(({ id, name }) => ({ id, name }));\n\n    const handlePromiseReject = useCallback((reason: RejectionReason) => {\n        if (reason?.errorMessage) {\n            setErrorMessage(reason.errorMessage);\n        }\n    }, []);\n\n    const onTextInput = useCallback(\n        (inputValue: string) => {\n            new Promise<Array<AddressLookupItem>>((resolve, reject) => {\n                void onAddressLookup(inputValue, { resolve, reject });\n            })\n                .then(searchArray => {\n                    setOriginalData(searchArray);\n                    setFormattedData(mapDataToSelect(searchArray));\n                    setErrorMessage('');\n                })\n                .catch(reason => handlePromiseReject(reason));\n        },\n        [onAddressLookup]\n    );\n\n    // update error message when there's a new one\n    useEffect(() => {\n        setErrorMessage(externalErrorMessage);\n    }, [externalErrorMessage]);\n\n    const onSelectItem = event => {\n        if (!event.target.value) {\n            setErrorMessage(i18n.get('address.errors.incomplete'));\n            return;\n        }\n        const value = originalData.find(item => item.id === event.target.value);\n\n        // 1. in case we don't get a function just select item\n        if (typeof onAddressSelected !== 'function') {\n            onSelect(value);\n            setFormattedData([]);\n            return;\n        }\n\n        // 2. in case callback is provided, create and call onAddressSelected\n        new Promise<AddressLookupItem>((resolve, reject) => {\n            void onAddressSelected(value, { resolve, reject });\n        })\n            .then(fullData => {\n                onSelect(fullData);\n                setFormattedData([]);\n            })\n            .catch(reason => handlePromiseReject(reason));\n    };\n\n    const debounceInputHandler = useMemo(() => debounce(onTextInput, addressSearchDebounceMs), []);\n\n    return (\n        // The search field is intentionally rendered before the manual entry button in the DOM.\n        // See: ../a11y.md\n        <div className={'adyen-checkout__address-search adyen-checkout__field-group'}>\n            <Field\n                label={i18n.get('address')}\n                classNameModifiers={['address-search']}\n                errorMessage={errorMessage}\n                name={'address-search'}\n                showContextualElement={showContextualElement}\n                contextualText={contextualText}\n            >\n                <Select\n                    name={'address-search'}\n                    className={'adyen-checkout__address-search__dropdown'}\n                    placeholder={placeholder}\n                    onInput={debounceInputHandler}\n                    items={formattedData}\n                    onChange={onSelectItem}\n                    disableTextFilter={true}\n                    blurOnClose={true}\n                />\n            </Field>\n            {!hideManualButton && (\n                <span className=\"adyen-checkout__address-search__manual-add\">\n                    <button\n                        type=\"button\"\n                        className=\"adyen-checkout__button adyen-checkout__button--inline adyen-checkout__button--link adyen-checkout__address-search__manual-add__button\"\n                        onClick={onManualAddress}\n                    >\n                        {'+ ' + i18n.get('address.enterManually')}\n                    </button>\n                </span>\n            )}\n        </div>\n    );\n}\n"],"names":["AddressSearch","onAddressLookup","onAddressSelected","onSelect","onManualAddress","externalErrorMessage","hideManualButton","showContextualElement","contextualText","placeholder","addressSearchDebounceMs","formattedData","setFormattedData","useState","originalData","setOriginalData","errorMessage","setErrorMessage","i18n","useCoreContext","handlePromiseReject","useCallback","reason","onTextInput","inputValue","Promise","resolve","reject","then","searchArray","map","id","name","catch","useEffect","debounceInputHandler","useMemo","debounce","h","div","className","Field","label","get","classNameModifiers","Select","onInput","items","onChange","event","target","value","find","item","fullData","disableTextFilter","blurOnClose","span","button","type","onClick"],"mappings":"saA2Ce,SAASA,GAAcC,gBAClCA,EAAeC,kBACfA,EAAiBC,SACjBA,EAAQC,gBACRA,EAAeC,qBACfA,EAAoBC,iBACpBA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAAcC,YACdA,EAAWC,wBACXA,IAEA,MAAOC,EAAeC,GAAoBC,EAA8B,KACjEC,EAAcC,GAAmBF,EAA8B,KAE/DG,EAAcC,GAAmBJ,EAAS,KAE3CK,KAAEA,GAASC,IAGXC,EAAsBC,EAAaC,IACjCA,GAAQN,cACRC,EAAgBK,EAAON,eAE5B,IAEGO,EAAcF,EACfG,IACG,IAAIC,QAAkC,CAACC,EAASC,KACvC1B,EAAgBuB,EAAY,CAAEE,UAASC,aAE3CC,KAAKC,IACFd,EAAgBc,GAChBjB,EAAiCiB,EAfZC,IAAI,EAAGC,KAAIC,WAAM,CAAQD,KAAIC,WAgBlDf,EAAgB,MAEnBgB,MAAMX,GAAUF,EAAoBE,KAE7C,CAACrB,IAILiC,EAAU,KACNjB,EAAgBZ,IACjB,CAACA,IAEJ,MAyBM8B,EAAuBC,EAAQ,IAAMC,EAASd,EAAab,GAA0B,IAE3F,OAGI4B,EAACC,MAAAA,CAAIC,UAAW,8DACZF,EAACG,EAAAA,CACGC,MAAOxB,EAAKyB,IAAI,WAChBC,mBAAoB,CAAC,kBACrB5B,aAAcA,EACdgB,KAAM,iBACNzB,sBAAuBA,EACvBC,eAAgBA,GAEhB8B,EAACO,EAAAA,CACGb,KAAM,iBACNQ,UAAW,2CACX/B,YAAaA,EACbqC,QAASX,EACTY,MAAOpC,EACPqC,SA7CKC,IACjB,IAAKA,EAAMC,OAAOC,MAEd,YADAlC,EAAgBC,EAAKyB,IAAI,8BAG7B,MAAMQ,EAAQrC,EAAasC,KAAKC,GAAQA,EAAKtB,KAAOkB,EAAMC,OAAOC,OAGjE,GAAiC,mBAAtBjD,EAGP,OAFAC,EAASgD,QACTvC,EAAiB,IAKrB,IAAIa,QAA2B,CAACC,EAASC,KAChCzB,EAAkBiD,EAAO,CAAEzB,UAASC,aAExCC,KAAK0B,IACFnD,EAASmD,GACT1C,EAAiB,MAEpBqB,MAAMX,GAAUF,EAAoBE,KAwB7BiC,mBAAmB,EACnBC,aAAa,MAGnBlD,GACEgC,EAACmB,OAAAA,CAAKjB,UAAU,8CACZF,EAACoB,SAAAA,CACGC,KAAK,SACLnB,UAAU,wIACVoB,QAASxD,GAER,KAAOc,EAAKyB,IAAI,2BAMzC"}

package/dist/es/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../../../../external/preact/dist/preact.js";import{useRef as o}from"../../../../../../external/preact/hooks/dist/hooks.js";import{CtPBrand as s}from"../../CtPBrand/CtPBrand.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import l from"../../../../../../core/Context/useImage.js";import{Modal as n}from"../../../../Modal/Modal.js";import c from"../../../../Img/Img.js";import r from"../../../../Button/Button.js";let i=Date.now();function p(){return i+=1,`adyen-${i}`}const m=({isOpen:i,onClose:m,focusAfterClose:d})=>{const u=o(),{i18n:f}=a(),g=l(),C=p(),_=p();return e(n,{onClose:m,isOpen:i,classNameModifiers:["ctp"],labelledBy:C,describedBy:_,focusFirst:u.current,focusAfterClose:d},({onCloseModal:o})=>e(t,null,e(c,{className:"adyen-checkout__ctp-modal-header-image",src:g({imageFolder:"components/"})("ctp_landscape"),alt:""}),e("h1",{id:C,className:"adyen-checkout__ctp-modal-title"},f.get("ctp.infoPopup.title")),e("div",{id:_},e("p",{tabIndex:-1,ref:u,className:"adyen-checkout__ctp-modal-text"},f.get("ctp.infoPopup.subtitle")),e("ul",{className:"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits"},e("li",null,f.get("ctp.infoPopup.benefit1")),e("li",null,f.get("ctp.infoPopup.benefit2")),e("li",null,f.get("ctp.infoPopup.benefit3"))),e(s,{classNameModifiers:["popup"]})),e(r,{onClick:o,label:f.get("close")})))};export{m as CtPInfoModal};
+import{createElement as e,Fragment as t}from"../../../../../../external/preact/dist/preact.js";import{useRef as o}from"../../../../../../external/preact/hooks/dist/hooks.js";import{CtPBrand as s}from"../../CtPBrand/CtPBrand.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import l from"../../../../../../core/Context/useImage.js";import{Modal as n}from"../../../../Modal/Modal.js";import c from"../../../../Img/Img.js";import r from"../../../../Button/Button.js";let i=Date.now();function p(){return i+=1,`adyen-${i}`}const m=({isOpen:i,onClose:m,focusAfterClose:d})=>{const u=o(),{i18n:f}=a(),g=l(),C=p(),_=p();return e(n,{onClose:m,isOpen:i,classNameModifiers:["ctp"],labelledBy:C,describedBy:_,focusFirst:u.current,focusAfterClose:d},({onCloseModal:o})=>e(t,null,e(c,{className:"adyen-checkout__ctp-modal-header-image",src:g({imageFolder:"components/"})("ctp_landscape"),alt:""}),e("h2",{id:C,className:"adyen-checkout__ctp-modal-title"},f.get("ctp.infoPopup.title")),e("div",{id:_},e("p",{tabIndex:-1,ref:u,className:"adyen-checkout__ctp-modal-text"},f.get("ctp.infoPopup.subtitle")),e("ul",{className:"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits"},e("li",null,f.get("ctp.infoPopup.benefit1")),e("li",null,f.get("ctp.infoPopup.benefit2")),e("li",null,f.get("ctp.infoPopup.benefit3"))),e(s,{classNameModifiers:["popup"]})),e(r,{onClick:o,label:f.get("close")})))};export{m as CtPInfoModal};
 //# sourceMappingURL=CtPInfoModal.js.map

package/dist/es/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CtPInfoModal.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { CtPBrand } from '../../CtPBrand';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport { Modal } from '../../../../Modal';\nimport Img from '../../../../Img';\nimport Button from '../../../../Button';\nimport './CtPInfoModal.scss';\n\nlet idGenerator = Date.now();\n\nfunction getUniqueId() {\n    idGenerator += 1;\n    return `adyen-${idGenerator}`;\n}\n\ntype CtPInfoModalProps = {\n    isOpen: boolean;\n    onClose(): void;\n    focusAfterClose: HTMLElement;\n};\n\nconst CtPInfoModal = ({ isOpen, onClose, focusAfterClose }: Readonly<CtPInfoModalProps>) => {\n    const focusFirstElement = useRef<HTMLParagraphElement>();\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const labelledBy = getUniqueId();\n    const describedBy = getUniqueId();\n\n    return (\n        <Modal\n            onClose={onClose}\n            isOpen={isOpen}\n            classNameModifiers={['ctp']}\n            labelledBy={labelledBy}\n            describedBy={describedBy}\n            focusFirst={focusFirstElement.current}\n            focusAfterClose={focusAfterClose}\n        >\n            {({ onCloseModal }) => (\n                <Fragment>\n                    <Img className=\"adyen-checkout__ctp-modal-header-image\" src={getImage({ imageFolder: 'components/' })('ctp_landscape')} alt=\"\" />\n                    <h1 id={labelledBy} className=\"adyen-checkout__ctp-modal-title\">\n                        {i18n.get('ctp.infoPopup.title')}\n                    </h1>\n\n                    <div id={describedBy}>\n                        <p tabIndex={-1} ref={focusFirstElement} className=\"adyen-checkout__ctp-modal-text\">\n                            {i18n.get('ctp.infoPopup.subtitle')}\n                        </p>\n\n                        <ul className=\"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits\">\n                            <li>{i18n.get('ctp.infoPopup.benefit1')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit2')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit3')}</li>\n                        </ul>\n\n                        <CtPBrand classNameModifiers={['popup']} />\n                    </div>\n\n                    <Button onClick={onCloseModal} label={i18n.get('close')} />\n                </Fragment>\n            )}\n        </Modal>\n    );\n};\n\nexport { CtPInfoModal };\n"],"names":["idGenerator","Date","now","getUniqueId","CtPInfoModal","isOpen","onClose","focusAfterClose","focusFirstElement","useRef","i18n","useCoreContext","getImage","useImage","labelledBy","describedBy","h","Modal","classNameModifiers","focusFirst","current","onCloseModal","Fragment","Img","className","src","imageFolder","alt","h1","id","get","div","p","tabIndex","ref","ul","li","CtPBrand","Button","onClick","label"],"mappings":"mfAUA,IAAIA,EAAcC,KAAKC,MAEvB,SAASC,IAEL,OADAH,GAAe,EACR,SAASA,GACpB,CAQA,MAAMI,EAAe,EAAGC,SAAQC,UAASC,sBACrC,MAAMC,EAAoBC,KACpBC,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAaX,IACbY,EAAcZ,IAEpB,OACIa,EAACC,EAAAA,CACGX,QAASA,EACTD,OAAQA,EACRa,mBAAoB,CAAC,OACrBJ,WAAYA,EACZC,YAAaA,EACbI,WAAYX,EAAkBY,QAC9Bb,gBAAiBA,GAEhB,EAAGc,kBACAL,EAACM,OACGN,EAACO,EAAAA,CAAIC,UAAU,yCAAyCC,IAAKb,EAAS,CAAEc,YAAa,eAAxBd,CAAyC,iBAAkBe,IAAI,KAC5HX,EAACY,KAAAA,CAAGC,GAAIf,EAAYU,UAAU,mCACzBd,EAAKoB,IAAI,wBAGdd,EAACe,MAAAA,CAAIF,GAAId,GACLC,EAACgB,IAAAA,CAAEC,UAAU,EAAIC,IAAK1B,EAAmBgB,UAAU,kCAC9Cd,EAAKoB,IAAI,2BAGdd,EAACmB,KAAAA,CAAGX,UAAU,qEACVR,EAACoB,UAAI1B,EAAKoB,IAAI,2BACdd,EAACoB,KAAAA,KAAI1B,EAAKoB,IAAI,2BACdd,EAACoB,KAAAA,KAAI1B,EAAKoB,IAAI,4BAGlBd,EAACqB,EAAAA,CAASnB,mBAAoB,CAAC,YAGnCF,EAACsB,EAAAA,CAAOC,QAASlB,EAAcmB,MAAO9B,EAAKoB,IAAI"}
+{"version":3,"file":"CtPInfoModal.js","sources":["../../../../../../../../src/components/internal/ClickToPay/components/CtPInfo/CtPInfoModal/CtPInfoModal.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { CtPBrand } from '../../CtPBrand';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport useImage from '../../../../../../core/Context/useImage';\nimport { Modal } from '../../../../Modal';\nimport Img from '../../../../Img';\nimport Button from '../../../../Button';\nimport './CtPInfoModal.scss';\n\nlet idGenerator = Date.now();\n\nfunction getUniqueId() {\n    idGenerator += 1;\n    return `adyen-${idGenerator}`;\n}\n\ntype CtPInfoModalProps = {\n    isOpen: boolean;\n    onClose(): void;\n    focusAfterClose: HTMLElement;\n};\n\nconst CtPInfoModal = ({ isOpen, onClose, focusAfterClose }: Readonly<CtPInfoModalProps>) => {\n    const focusFirstElement = useRef<HTMLParagraphElement>();\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const labelledBy = getUniqueId();\n    const describedBy = getUniqueId();\n\n    return (\n        <Modal\n            onClose={onClose}\n            isOpen={isOpen}\n            classNameModifiers={['ctp']}\n            labelledBy={labelledBy}\n            describedBy={describedBy}\n            focusFirst={focusFirstElement.current}\n            focusAfterClose={focusAfterClose}\n        >\n            {({ onCloseModal }) => (\n                <Fragment>\n                    <Img className=\"adyen-checkout__ctp-modal-header-image\" src={getImage({ imageFolder: 'components/' })('ctp_landscape')} alt=\"\" />\n                    <h2 id={labelledBy} className=\"adyen-checkout__ctp-modal-title\">\n                        {i18n.get('ctp.infoPopup.title')}\n                    </h2>\n\n                    <div id={describedBy}>\n                        <p tabIndex={-1} ref={focusFirstElement} className=\"adyen-checkout__ctp-modal-text\">\n                            {i18n.get('ctp.infoPopup.subtitle')}\n                        </p>\n\n                        <ul className=\"adyen-checkout__ctp-modal-text adyen-checkout__ctp-modal-benefits\">\n                            <li>{i18n.get('ctp.infoPopup.benefit1')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit2')}</li>\n                            <li>{i18n.get('ctp.infoPopup.benefit3')}</li>\n                        </ul>\n\n                        <CtPBrand classNameModifiers={['popup']} />\n                    </div>\n\n                    <Button onClick={onCloseModal} label={i18n.get('close')} />\n                </Fragment>\n            )}\n        </Modal>\n    );\n};\n\nexport { CtPInfoModal };\n"],"names":["idGenerator","Date","now","getUniqueId","CtPInfoModal","isOpen","onClose","focusAfterClose","focusFirstElement","useRef","i18n","useCoreContext","getImage","useImage","labelledBy","describedBy","h","Modal","classNameModifiers","focusFirst","current","onCloseModal","Fragment","Img","className","src","imageFolder","alt","h2","id","get","div","p","tabIndex","ref","ul","li","CtPBrand","Button","onClick","label"],"mappings":"mfAUA,IAAIA,EAAcC,KAAKC,MAEvB,SAASC,IAEL,OADAH,GAAe,EACR,SAASA,GACpB,CAQA,MAAMI,EAAe,EAAGC,SAAQC,UAASC,sBACrC,MAAMC,EAAoBC,KACpBC,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAaX,IACbY,EAAcZ,IAEpB,OACIa,EAACC,EAAAA,CACGX,QAASA,EACTD,OAAQA,EACRa,mBAAoB,CAAC,OACrBJ,WAAYA,EACZC,YAAaA,EACbI,WAAYX,EAAkBY,QAC9Bb,gBAAiBA,GAEhB,EAAGc,kBACAL,EAACM,OACGN,EAACO,EAAAA,CAAIC,UAAU,yCAAyCC,IAAKb,EAAS,CAAEc,YAAa,eAAxBd,CAAyC,iBAAkBe,IAAI,KAC5HX,EAACY,KAAAA,CAAGC,GAAIf,EAAYU,UAAU,mCACzBd,EAAKoB,IAAI,wBAGdd,EAACe,MAAAA,CAAIF,GAAId,GACLC,EAACgB,IAAAA,CAAEC,UAAU,EAAIC,IAAK1B,EAAmBgB,UAAU,kCAC9Cd,EAAKoB,IAAI,2BAGdd,EAACmB,KAAAA,CAAGX,UAAU,qEACVR,EAACoB,UAAI1B,EAAKoB,IAAI,2BACdd,EAACoB,KAAAA,KAAI1B,EAAKoB,IAAI,2BACdd,EAACoB,KAAAA,KAAI1B,EAAKoB,IAAI,4BAGlBd,EAACqB,EAAAA,CAASnB,mBAAoB,CAAC,YAGnCF,EAACsB,EAAAA,CAAOC,QAASlB,EAAcmB,MAAO9B,EAAKoB,IAAI"}

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

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{isValidHttpUrl as r}from"../../../utils/isValidURL.js";import{interpolateElement as s}from"../../../language/utils.js";import a from"../Link/Link.js";function n({message:t,urls:r=[]}){return e("span",{className:"adyen-checkout-disclaimer__label"},e(i,{message:t,urls:r}))}function i({message:n,urls:i}){const l="string"==typeof n,o=i.every(e=>"string"==typeof e&&r(e));return l&&o?e(t,null,s(n,i.map(t=>function(r){return e(a,{to:t},r)}))):null}export{i as LabelOnlyDisclaimerMessage,n as default};
+import{createElement as e,Fragment as t}from"../../../external/preact/dist/preact.js";import{isValidHttpUrl as r}from"../../../utils/isValidURL.js";import{interpolateElement as s}from"../../../language/utils.js";import n from"../Link/Link.js";function a({message:t,urls:r=[]}){return e("span",{className:"adyen-checkout-disclaimer__label"},e(l,{message:t,urls:r}))}function l({message:a,urls:l}){const i="string"==typeof a,o=l.every(e=>"string"==typeof e&&r(e));if(!i||!o)return null;let u;try{u=s(a,l.map(t=>function(r){return e(n,{to:t},r)}))}catch(e){u=a,console.warn(e)}return e(t,null,u)}export{l as LabelOnlyDisclaimerMessage,a as default};
 //# sourceMappingURL=DisclaimerMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DisclaimerMessage.js","sources":["../../../../../src/components/internal/DisclaimerMessage/DisclaimerMessage.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { isValidHttpUrl } from '../../../utils/isValidURL';\nimport './DisclaimerMessage.scss';\nimport { interpolateElement } from '../../../language/utils';\nimport Link from '../Link';\n\nexport interface DisclaimerMsgObject {\n    message: string;\n    linkText: string;\n    link: string;\n}\n\ninterface InternalDisclaimerMsgObject {\n    message: string;\n    urls?: Array<string>;\n}\n\n/**\n *  props: {\n *    message: 'By continuing you agree with the %#terms and conditions%#',\n *    urls: ['https://www.adyen.com']\n *  }\n *  String inside the '%#' token pair will be rendered as an anchor element.\n */\n\nexport default function DisclaimerMessage({ message, urls = [] }: Readonly<InternalDisclaimerMsgObject>) {\n    return (\n        <span className=\"adyen-checkout-disclaimer__label\">\n            <LabelOnlyDisclaimerMessage message={message} urls={urls} />\n        </span>\n    );\n}\n\nexport function LabelOnlyDisclaimerMessage({ message, urls }: Readonly<InternalDisclaimerMsgObject>) {\n    const messageIsStr = typeof message === 'string';\n    const validUrls = urls.every(url => typeof url === 'string' && isValidHttpUrl(url));\n    if (!messageIsStr || !validUrls) return null;\n\n    return (\n        <Fragment>\n            {interpolateElement(\n                message,\n                urls.map(\n                    // for each URL in the URLs array, return a createLink function\n                    url =>\n                        function createLink(translation) {\n                            return <Link to={url}>{translation}</Link>;\n                        }\n                )\n            )}\n        </Fragment>\n    );\n}\n"],"names":["DisclaimerMessage","message","urls","h","span","className","LabelOnlyDisclaimerMessage","messageIsStr","validUrls","every","url","isValidHttpUrl","Fragment","interpolateElement","map","translation","Link","to"],"mappings":"mPAyBe,SAASA,GAAkBC,QAAEA,EAAOC,KAAEA,EAAO,KACxD,OACIC,EAACC,OAAAA,CAAKC,UAAU,oCACZF,EAACG,EAAAA,CAA2BL,QAASA,EAASC,KAAMA,IAGhE,CAEO,SAASI,GAA2BL,QAAEA,EAAOC,KAAEA,IAClD,MAAMK,EAAkC,iBAAZN,EACtBO,EAAYN,EAAKO,MAAMC,GAAsB,iBAARA,GAAoBC,EAAeD,IAC9E,OAAKH,GAAiBC,EAGlBL,EAACS,EAAAA,KACIC,EACGZ,EACAC,EAAKY,IAEDJ,GACI,SAAoBK,GAChB,OAAOZ,EAACa,EAAAA,CAAKC,GAAIP,GAAMK,EAC3B,KAXoB,IAgB5C"}
+{"version":3,"file":"DisclaimerMessage.js","sources":["../../../../../src/components/internal/DisclaimerMessage/DisclaimerMessage.tsx"],"sourcesContent":["import { Fragment, h } from 'preact';\nimport { isValidHttpUrl } from '../../../utils/isValidURL';\nimport './DisclaimerMessage.scss';\nimport { interpolateElement } from '../../../language/utils';\nimport Link from '../Link';\n\nexport interface DisclaimerMsgObject {\n    message: string;\n    linkText: string;\n    link: string;\n}\n\ninterface InternalDisclaimerMsgObject {\n    message: string;\n    urls?: Array<string>;\n}\n\n/**\n *  props: {\n *    message: 'By continuing you agree with the %#terms and conditions%#',\n *    urls: ['https://www.adyen.com']\n *  }\n *  String inside the '%#' token pair will be rendered as an anchor element.\n */\n\nexport default function DisclaimerMessage({ message, urls = [] }: Readonly<InternalDisclaimerMsgObject>) {\n    return (\n        <span className=\"adyen-checkout-disclaimer__label\">\n            <LabelOnlyDisclaimerMessage message={message} urls={urls} />\n        </span>\n    );\n}\n\nexport function LabelOnlyDisclaimerMessage({ message, urls }: Readonly<InternalDisclaimerMsgObject>) {\n    const messageIsStr = typeof message === 'string';\n    const validUrls = urls.every(url => typeof url === 'string' && isValidHttpUrl(url));\n    if (!messageIsStr || !validUrls) return null;\n\n    let content;\n    try {\n        content = interpolateElement(\n            message,\n            urls.map(\n                // for each URL in the URLs array, return a createLink function\n                url =>\n                    function createLink(translation) {\n                        return <Link to={url}>{translation}</Link>;\n                    }\n            )\n        );\n    } catch (e) {\n        // Fall back to raw message (i.e. the translation key) if interpolation fails\n        content = message;\n        // Report interpolation error to console\n        console.warn(e);\n    }\n\n    return <Fragment>{content}</Fragment>;\n}\n"],"names":["DisclaimerMessage","message","urls","h","span","className","LabelOnlyDisclaimerMessage","messageIsStr","validUrls","every","url","isValidHttpUrl","content","interpolateElement","map","translation","Link","to","e","console","warn","Fragment"],"mappings":"mPAyBe,SAASA,GAAkBC,QAAEA,EAAOC,KAAEA,EAAO,KACxD,OACIC,EAACC,OAAAA,CAAKC,UAAU,oCACZF,EAACG,EAAAA,CAA2BL,QAASA,EAASC,KAAMA,IAGhE,CAEO,SAASI,GAA2BL,QAAEA,EAAOC,KAAEA,IAClD,MAAMK,EAAkC,iBAAZN,EACtBO,EAAYN,EAAKO,MAAMC,GAAsB,iBAARA,GAAoBC,EAAeD,IAC9E,IAAKH,IAAiBC,EAAW,OAAO,KAExC,IAAII,EACJ,IACIA,EAAUC,EACNZ,EACAC,EAAKY,IAEDJ,GACI,SAAoBK,GAChB,OAAOZ,EAACa,EAAAA,CAAKC,GAAIP,GAAMK,EAC3B,GAGhB,CAAE,MAAOG,GAELN,EAAUX,EAEVkB,QAAQC,KAAKF,EACjB,CAEA,OAAOf,EAACkB,EAAAA,KAAUT,EACtB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useMemo, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\nimport uuid from '../../../../utils/uuid';\n\nconst Field: FunctionalComponent<Readonly<FieldProps>> = props => {\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        staticValue,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel,\n        onInputContainerClick\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText && contextualText.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const staticValueId = useMemo(() => (staticValue ? `input-static-value-${uuid()}` : null), [staticValue]);\n\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                        data-testid={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                {/* The <div> element has a child <input> element that allows keyboard interaction */}\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                    onClick={onInputContainerClick}\n                >\n                    {staticValue && (\n                        <span id={staticValueId} className=\"adyen-checkout__field-static-value\">\n                            {staticValue}\n                        </span>\n                    )}\n\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const propsFromFieldComponent = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            'aria-owns': staticValueId,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n\n                        return cloneElement(child as VNode, propsFromFieldComponent);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark_black`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    /**\n     * Use cases:\n     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element\n     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)\n     */\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            data-testid=\"form-field\"\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers?.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","staticValue","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","onInputContainerClick","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","staticValueId","useMemo","uuid","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","data-testid","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","undefined","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","onClick","toChildArray","child","propsFromFieldComponent","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","htmlFor","defaultProps"],"mappings":"omBAYA,MAAMA,EAAmDC,IACrD,MAAMC,SACFA,EAAQC,UACRA,EAASC,mBACTA,EAAkBC,IAClBA,EAAGC,SACHA,EAAQC,SACRA,EAAQC,aACRA,EAAYC,OACZA,EAAMC,sBACNA,EAAqBC,UACrBA,EAASC,QACTA,EAAOC,MACPA,EAAKC,kBACLA,EAAiBC,KACjBA,EAAIC,OACJA,EAAMC,YACNA,EAAWC,QACXA,EAAOC,aAGPA,EAAYC,cACZA,EAAaC,gBACbA,EAAeC,iBACfA,EAAgBC,sBAChBA,EAAqBC,YACrBA,EAAWC,eACXA,EAEAC,OAAQC,EACRC,QAASC,EAAYC,KACrBA,EAAIC,6BACJA,EAA4BC,yBAC5BA,EAAwBC,sBACxBA,GACAhC,EAIEiC,EAAqBH,IAAgC,EACrDI,EAAYb,GAA4C,iBAAjBd,GAA6BA,EAAa4B,OAAS,EAC1FC,EAAcd,IAA0BY,GAAaV,GAAkBA,EAAeW,OAAS,EAE/FE,EAAWC,EAAOC,EAAY,kBAAkBzB,MAChD0B,EAAgBC,EAAQ,IAAOlB,EAAc,sBAAsBmB,MAAW,KAAO,CAACnB,KAErFI,EAASgB,GAAcC,GAAS,IAChCnB,GAAQoB,IAAaD,GAAS,GAGjB,MAAhBhB,GAAsBe,IAAaf,GACpB,MAAfF,GAAqBmB,KAAYnB,GAGrC,MAAMoB,GAAiBC,EAClBC,IACGL,GAAW,GACX1B,IAAU+B,IAEd,CAAC/B,IAGCgC,GAAgBF,EACjBC,IACGL,GAAW,GACX5B,IAASiC,GAEThC,IAAcgC,IAElB,CAACjC,EAAQC,IAGPkC,GAAmCH,EAAY,IAE7CI,EAACC,EAAAA,KACqB,iBAAVxC,GACJuC,EAACE,OAAAA,CACGnD,UAAWoD,EAAW,CAClB,+BAA+B,EAC/B,qCAAsC/C,IAE1CgD,UAASzC,EACT0C,cAAa1C,GAEZF,GAMS,mBAAVA,GAAwBA,IAE/BC,GAAqBsC,EAACE,OAAAA,CAAKnD,UAAU,wCAAwCW,GAE7EL,GAAU2C,EAACE,OAAAA,CAAKnD,UAAW,+BAAgCM,IAGrE,CAACI,EAAOL,EAAcM,EAAmBL,IAEtCiD,GAA6BV,EAAY,KAC3C,MAAMW,EACFP,EAACE,OAAAA,CACGnD,UAAWoD,EAAW,CAAE,yCAAyC,EAAM,0CAA2CpB,OAC7GD,GAAsB,CAAE0B,GAAI,GAAGtB,EAASuB,UAAUC,KACvDC,cAAa7B,OAAqB8B,EAAY,QAE7CxD,GAGHyD,EACFb,EAACE,OAAAA,CACGnD,UAAWoD,EAAW,CAAE,kCAAkC,EAAM,0CAA2ClB,OACtGH,GAAsB,CAAE0B,GAAI,GAAGtB,EAASuB,UAAUK,KACvDH,cAAa7B,OAAqB8B,EAAY,QAE7CvC,GAIT,OACI2B,EAACC,OAGGD,EAACe,MAAAA,CACGhE,UAAWoD,EAAW,CAClB,mCACG7C,EAAsB0D,IAAIC,GAAK,kCAAkCA,OAExEhE,IAAKA,EACLiE,QAASrC,GAERT,GACG4B,EAACE,OAAAA,CAAKM,GAAInB,EAAetC,UAAU,sCAC9BqB,GAIR+C,EAAarE,GAAUkE,IAAKI,IACzB,MAAMC,EAA0B,CAC5B7D,UACAmC,kBACAG,iBACAwB,YAAalE,EACb,YAAaiC,KACT1B,GAAQ,CAAEuB,SAAUA,EAASuB,SACjCvC,iBAAkBA,GAGtB,OAAOqD,EAAaH,EAAgBC,KAGvC9D,GACGyC,EAACE,OAAAA,CAAKnD,UAAU,4FACZiD,EAACwB,EAAAA,CAAQC,KAAK,WAIrBjE,IAA6B,IAAlBQ,GACRgC,EAACE,OAAAA,CAAKnD,UAAU,0FACZiD,EAAC0B,EAAAA,CAAKC,KAAM,GAAGC,mBAAyBC,IAAKnD,GAAMoD,IAAI,kBAI9D1E,GACG4C,EAACE,OAAAA,CAAKnD,UAAU,4FACZiD,EAAC0B,EAAAA,CAAKC,KAAM,GAAGC,eAAqBC,IAAKnD,GAAMoD,IAAI,mBAI9DvB,EACAM,IAGV,CAAC/D,EAAUM,EAAciB,EAAgBd,EAAWC,EAASmC,GAAgBG,KAO1EiC,GAAqBnC,EACvB,EAAG7B,eAAcS,UAASF,SAAQpB,WAAUS,OAAMuB,WAAUjB,kBAAiB+D,iBAAgBlF,WAAU8B,+BACnG,MAAMqD,EAAsB,CACxBf,QAASnD,EACThB,UAAWoD,EAAW,CAClB,yBAAyB,EACzB,iCAAkC3B,EAClC,gCAAiCF,EACjC,kCAAmCpB,KAI3C,OAAOe,EAEH+B,EAACvC,QAAAA,IAAUwE,MAA2BD,GAAkBrE,GAAQ,CAAEuE,QAAShD,IACtEpC,GAGL8B,EAAyBqD,EAAqBnF,EAAUoC,IAahE,IAMJ,OACIc,EAACe,MAAAA,CACGV,cAAY,aACZtD,UAAWoD,EACP,wBACApD,EACAC,GAAoBgE,IAAIC,GAAK,0BAA0BA,KACvD,CACI,+BAAgC7D,EAChC,+BAAgCI,EAChC,kCAAmCL,GAAYD,KAIvD8C,EAAC+B,GAAAA,CACGhE,aAAcA,EACdJ,KAAMA,EACNT,SAAUA,EACVoB,OAAQA,GACRE,QAASA,EACTP,gBAAiBA,EACjBiB,SAAUA,EAASuB,QACnBuB,gBAAiBlD,EACjBF,yBAA0BA,GAEzBmB,MAEJO,OAKb1D,EAAMuF,aAAe,CACjBpF,UAAW,GACXC,mBAAoB,GACpBM,sBAAuB,GACvBW,iBAAiB,EACjBC,kBAAkB,EAClBC,uBAAuB,EACvBS,yBAA0B,IAAM"}
+{"version":3,"file":"Field.js","sources":["../../../../../../src/components/internal/FormFields/Field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { cloneElement, ComponentChild, Fragment, FunctionalComponent, h, toChildArray, VNode } from 'preact';\nimport Spinner from '../../Spinner';\nimport Icon from '../../Icon';\nimport { ARIA_CONTEXT_SUFFIX, ARIA_ERROR_SUFFIX } from '../../../../core/Errors/constants';\nimport { useCallback, useMemo, useRef, useState } from 'preact/hooks';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { FieldProps } from './types';\nimport './Field.scss';\nimport { PREFIX } from '../../Icon/constants';\nimport uuid from '../../../../utils/uuid';\n\nconst Field: FunctionalComponent<Readonly<FieldProps>> = props => {\n    const {\n        children,\n        className,\n        classNameModifiers,\n        dir,\n        disabled,\n        readOnly,\n        errorMessage,\n        helper,\n        inputWrapperModifiers,\n        isLoading,\n        isValid,\n        label,\n        labelEndAdornment,\n        name,\n        onBlur,\n        onFieldBlur,\n        onFocus,\n        // onFocusField is a securedField related function that allows a label click to set focus on a securedField (equates to CardInput setFocusOn)\n        // TODO should rename it to make its purpose clear => setFocusOnSecuredField\n        onFocusField,\n        showValidIcon,\n        useLabelElement,\n        showErrorElement,\n        showContextualElement,\n        staticValue,\n        contextualText,\n        // Redeclare prop names to avoid internal clashes\n        filled: propsFilled,\n        focused: propsFocused,\n        i18n,\n        contextVisibleToScreenReader,\n        renderAlternativeToLabel,\n        onInputContainerClick\n    } = props;\n\n    // Controls whether any error element has an aria-hidden=\"true\" attr (which means it is the error for a securedField)\n    // or whether it has an id attr that can be pointed to by an aria-describedby attr on an input element\n    const contextVisibleToSR = contextVisibleToScreenReader ?? true;\n    const showError = showErrorElement && typeof errorMessage === 'string' && errorMessage.length > 0;\n    const showContext = showContextualElement && !showError && contextualText && contextualText.length > 0;\n\n    const uniqueId = useRef(getUniqueId(`adyen-checkout-${name}`));\n    const staticValueId = useMemo(() => (staticValue ? `input-static-value-${uuid()}` : null), [staticValue]);\n\n    const [focused, setFocused] = useState(false);\n    const [filled, setFilled] = useState(false);\n\n    // The means by which focussed/filled is set for securedFields\n    if (propsFocused != null) setFocused(!!propsFocused);\n    if (propsFilled != null) setFilled(!!propsFilled);\n\n    // The means by which focussed/filled is set for other fields - this function is passed down to them and triggered\n    const onFocusHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        },\n        [onFocus]\n    );\n\n    const onBlurHandler = useCallback(\n        (event: h.JSX.TargetedEvent<HTMLInputElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n            // When we also need to fire a specific function when a field blurs // TODO - what is the use case?\n            onFieldBlur?.(event);\n        },\n        [onBlur, onFieldBlur]\n    );\n\n    const renderLabelOrAlternativeContents = useCallback(() => {\n        return (\n            <Fragment>\n                {typeof label === 'string' && (\n                    <span\n                        className={classNames({\n                            'adyen-checkout__label__text': true,\n                            'adyen-checkout__label__text--error': errorMessage\n                        })}\n                        data-id={name}\n                        data-testid={name}\n                    >\n                        {label}\n                    </span>\n                )}\n\n                {/*TODO - in what scenario is label a function? */}\n                {/*@ts-ignore - function is callable*/}\n                {typeof label === 'function' && label()}\n\n                {labelEndAdornment && <span className=\"adyen-checkout__label-adornment--end\">{labelEndAdornment}</span>}\n\n                {helper && <span className={'adyen-checkout__helper-text'}>{helper}</span>}\n            </Fragment>\n        );\n    }, [label, errorMessage, labelEndAdornment, helper]);\n\n    const renderInputRelatedElements = useCallback(() => {\n        const errorElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text--error': true, 'adyen-checkout-contextual-text--hidden': !showError })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_ERROR_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n            >\n                {errorMessage}\n            </span>\n        );\n        const contextualElem = (\n            <span\n                className={classNames({ 'adyen-checkout-contextual-text': true, 'adyen-checkout-contextual-text--hidden': !showContext })}\n                {...(contextVisibleToSR && { id: `${uniqueId.current}${ARIA_CONTEXT_SUFFIX}` })}\n                aria-hidden={contextVisibleToSR ? undefined : 'true'}\n            >\n                {contextualText}\n            </span>\n        );\n\n        return (\n            <Fragment>\n                {/* The <div> element has a child <input> element that allows keyboard interaction */}\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={classNames([\n                        'adyen-checkout__input-wrapper',\n                        ...inputWrapperModifiers.map(m => `adyen-checkout__input-wrapper--${m}`)\n                    ])}\n                    dir={dir}\n                    onClick={onInputContainerClick}\n                >\n                    {staticValue && (\n                        <span id={staticValueId} className=\"adyen-checkout__field-static-value\">\n                            {staticValue}\n                        </span>\n                    )}\n\n                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {\n                        const propsFromFieldComponent = {\n                            isValid,\n                            onFocusHandler,\n                            onBlurHandler,\n                            isInvalid: !!errorMessage,\n                            'aria-owns': staticValueId,\n                            ...(name && { uniqueId: uniqueId.current }),\n                            showErrorElement: showErrorElement\n                        };\n\n                        return cloneElement(child as VNode, propsFromFieldComponent);\n                    })}\n\n                    {isLoading && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading\">\n                            <Spinner size=\"small\" />\n                        </span>\n                    )}\n\n                    {isValid && showValidIcon !== false && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid\">\n                            <Icon type={`${PREFIX}checkmark_black`} alt={i18n?.get('field.valid')} />\n                        </span>\n                    )}\n\n                    {errorMessage && (\n                        <span className=\"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid\">\n                            <Icon type={`${PREFIX}field_error`} alt={i18n?.get('error.title')} />\n                        </span>\n                    )}\n                </div>\n                {errorElem}\n                {contextualElem}\n            </Fragment>\n        );\n    }, [children, errorMessage, contextualText, isLoading, isValid, onFocusHandler, onBlurHandler]);\n\n    /**\n     * Use cases:\n     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element\n     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)\n     */\n    const LabelOrAlternative = useCallback(\n        ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {\n            const defaultWrapperProps = {\n                onClick: onFocusField,\n                className: classNames({\n                    'adyen-checkout__label': true,\n                    'adyen-checkout__label--focused': focused,\n                    'adyen-checkout__label--filled': filled,\n                    'adyen-checkout__label--disabled': disabled\n                })\n            };\n\n            return useLabelElement ? (\n                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute\n                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId, id: `${uniqueId}-label` })}>\n                    {children}\n                </label>\n            ) : (\n                renderAlternativeToLabel(defaultWrapperProps, children, uniqueId) // defaults to null\n\n                // Example usage:\n                // const alternativeLabelContent = (defaultWrapperProps, children, uniqueId) => {\n                //     return (\n                //         <div {...defaultWrapperProps} role={'label'} htmlFor={uniqueId}>\n                //             {children}\n                //         </div>\n                //     );\n                // };\n                // <Field name={'myField'} useLabelElement={false} renderAlternativeToLabel={alternativeLabelContent}>\n            );\n        },\n        []\n    );\n\n    /**\n     * RENDER\n     */\n    return (\n        <div\n            data-testid=\"form-field\"\n            className={classNames(\n                'adyen-checkout__field',\n                className,\n                classNameModifiers?.map(m => `adyen-checkout__field--${m}`),\n                {\n                    'adyen-checkout__field--error': errorMessage,\n                    'adyen-checkout__field--valid': isValid,\n                    'adyen-checkout__field--inactive': readOnly || disabled\n                }\n            )}\n        >\n            <LabelOrAlternative\n                onFocusField={onFocusField}\n                name={name}\n                disabled={disabled}\n                filled={filled}\n                focused={focused}\n                useLabelElement={useLabelElement}\n                uniqueId={uniqueId.current}\n                isSecuredField={!contextVisibleToSR}\n                renderAlternativeToLabel={renderAlternativeToLabel}\n            >\n                {renderLabelOrAlternativeContents()}\n            </LabelOrAlternative>\n            {renderInputRelatedElements()}\n        </div>\n    );\n};\n\nField.defaultProps = {\n    className: '',\n    classNameModifiers: [],\n    inputWrapperModifiers: [],\n    useLabelElement: true,\n    showErrorElement: true,\n    showContextualElement: true,\n    renderAlternativeToLabel: () => null\n};\n\nexport default Field;\n"],"names":["Field","props","children","className","classNameModifiers","dir","disabled","readOnly","errorMessage","helper","inputWrapperModifiers","isLoading","isValid","label","labelEndAdornment","name","onBlur","onFieldBlur","onFocus","onFocusField","showValidIcon","useLabelElement","showErrorElement","showContextualElement","staticValue","contextualText","filled","propsFilled","focused","propsFocused","i18n","contextVisibleToScreenReader","renderAlternativeToLabel","onInputContainerClick","contextVisibleToSR","showError","length","showContext","uniqueId","useRef","getUniqueId","staticValueId","useMemo","uuid","setFocused","useState","setFilled","onFocusHandler","useCallback","event","onBlurHandler","renderLabelOrAlternativeContents","h","Fragment","span","classNames","data-id","data-testid","renderInputRelatedElements","errorElem","id","current","ARIA_ERROR_SUFFIX","aria-hidden","undefined","contextualElem","ARIA_CONTEXT_SUFFIX","div","map","m","onClick","toChildArray","child","propsFromFieldComponent","isInvalid","cloneElement","Spinner","size","Icon","type","PREFIX","alt","get","LabelOrAlternative","isSecuredField","defaultWrapperProps","htmlFor","defaultProps"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useMemo } from 'preact/hooks';\n\ninterface FieldsetProps {\n    children: ComponentChildren;\n    classNameModifiers?: string[];\n    classNamesFields?: string[];\n    label?: string;\n    description?: string;\n    readonly?: boolean;\n    id?: string;\n}\n\nexport default function Fieldset({\n    children,\n    classNameModifiers: classNameFieldsetModifiers = [],\n    classNamesFields = [],\n    label,\n    readonly = false,\n    description,\n    id\n}: Readonly<FieldsetProps>) {\n    const { i18n } = useCoreContext();\n\n    const describedById = useMemo(() => getUniqueId('fieldset-description'), []);\n\n    return (\n        <fieldset\n            id={id}\n            className={cx([\n                'adyen-checkout__fieldset',\n                ...classNameFieldsetModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n                { 'adyen-checkout__fieldset--readonly': readonly }\n            ])}\n            aria-describedby={description ? describedById : null}\n        >\n            {label && <legend className=\"adyen-checkout__fieldset__title\">{i18n.get(label)}</legend>}\n            {description && (\n                <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n                    {i18n.get(description)}\n                </p>\n            )}\n            <div className={cx('adyen-checkout__fieldset__fields', classNamesFields)}>{children}</div>\n        </fieldset>\n    );\n}\n"],"names":["Fieldset","children","classNameModifiers","classNameFieldsetModifiers","classNamesFields","label","readonly","description","id","i18n","useCoreContext","describedById","useMemo","getUniqueId","h","fieldset","className","cx","map","m","aria-describedby","legend","get","p","div"],"mappings":"2UAiBe,SAASA,GAASC,SAC7BA,EACAC,mBAAoBC,EAA6B,GAAEC,iBACnDA,EAAmB,GAAEC,MACrBA,EAAKC,SACLA,GAAW,EAAKC,YAChBA,EAAWC,GACXA,IAEA,MAAMC,KAAEA,GAASC,IAEXC,EAAgBC,EAAQ,IAAMC,EAAY,wBAAyB,IAEzE,OACIC,EAACC,WAAAA,CACGP,GAAIA,EACJQ,UAAWC,EAAG,CACV,8BACGd,EAA2Be,IAAIC,GAAK,6BAA6BA,KACpE,CAAE,qCAAsCb,KAE5Cc,mBAAkBb,EAAcI,EAAgB,MAE/CN,GAASS,EAACO,SAAAA,CAAOL,UAAU,mCAAmCP,EAAKa,IAAIjB,IACvEE,GACGO,EAACS,IAAAA,CAAEf,GAAIG,EAAeK,UAAU,yCAC3BP,EAAKa,IAAIf,IAGlBO,EAACU,MAAAA,CAAIR,UAAWC,EAAG,mCAAoCb,IAAoBH,GAGvF"}
+{"version":3,"file":"Fieldset.js","sources":["../../../../../../src/components/internal/FormFields/Fieldset/Fieldset.tsx"],"sourcesContent":["import { h, ComponentChildren } from 'preact';\nimport cx from 'classnames';\nimport { useCoreContext } from '../../../../core/Context/CoreProvider';\nimport './Fieldset.scss';\nimport { getUniqueId } from '../../../../utils/idGenerator';\nimport { useMemo } from 'preact/hooks';\n\ninterface FieldsetProps {\n    children: ComponentChildren;\n    classNameModifiers?: string[];\n    classNamesFields?: string[];\n    label?: string;\n    description?: string;\n    readonly?: boolean;\n    id?: string;\n    renderLabelAsSectionHeading?: boolean;\n}\n\nexport default function Fieldset({\n    children,\n    classNameModifiers: classNameFieldsetModifiers = [],\n    classNamesFields = [],\n    label,\n    readonly = false,\n    description,\n    id,\n    renderLabelAsSectionHeading = false\n}: Readonly<FieldsetProps>) {\n    const { i18n } = useCoreContext();\n\n    const describedById = useMemo(() => getUniqueId('fieldset-description'), []);\n\n    return (\n        <fieldset\n            id={id}\n            className={cx([\n                'adyen-checkout__fieldset',\n                ...classNameFieldsetModifiers.map(m => `adyen-checkout__fieldset--${m}`),\n                { 'adyen-checkout__fieldset--readonly': readonly }\n            ])}\n            aria-describedby={description ? describedById : null}\n        >\n            {label && (\n                <legend className=\"adyen-checkout__fieldset__title\">\n                    {renderLabelAsSectionHeading ? <h2 className=\"adyen-checkout__fieldset__title-heading\">{i18n.get(label)}</h2> : i18n.get(label)}\n                </legend>\n            )}\n            {description && (\n                <p id={describedById} className=\"adyen-checkout__fieldset__description\">\n                    {i18n.get(description)}\n                </p>\n            )}\n            <div className={cx('adyen-checkout__fieldset__fields', classNamesFields)}>{children}</div>\n        </fieldset>\n    );\n}\n"],"names":["Fieldset","children","classNameModifiers","classNameFieldsetModifiers","classNamesFields","label","readonly","description","id","renderLabelAsSectionHeading","i18n","useCoreContext","describedById","useMemo","getUniqueId","h","fieldset","className","cx","map","m","aria-describedby","legend","h2","get","p","div"],"mappings":"2UAkBe,SAASA,GAASC,SAC7BA,EACAC,mBAAoBC,EAA6B,GAAEC,iBACnDA,EAAmB,GAAEC,MACrBA,EAAKC,SACLA,GAAW,EAAKC,YAChBA,EAAWC,GACXA,EAAEC,4BACFA,GAA8B,IAE9B,MAAMC,KAAEA,GAASC,IAEXC,EAAgBC,EAAQ,IAAMC,EAAY,wBAAyB,IAEzE,OACIC,EAACC,WAAAA,CACGR,GAAIA,EACJS,UAAWC,EAAG,CACV,8BACGf,EAA2BgB,IAAIC,GAAK,6BAA6BA,KACpE,CAAE,qCAAsCd,KAE5Ce,mBAAkBd,EAAcK,EAAgB,MAE/CP,GACGU,EAACO,SAAAA,CAAOL,UAAU,mCACbR,EAA8BM,EAACQ,KAAAA,CAAGN,UAAU,2CAA2CP,EAAKc,IAAInB,IAAeK,EAAKc,IAAInB,IAGhIE,GACGQ,EAACU,IAAAA,CAAEjB,GAAII,EAAeK,UAAU,yCAC3BP,EAAKc,IAAIjB,IAGlBQ,EAACW,MAAAA,CAAIT,UAAWC,EAAG,mCAAoCd,IAAoBH,GAGvF"}