@adyen/adyen-web 6.0.0-beta.0 → 6.0.0

package/dist/es/components/Card/components/CardInput/CardInput.js

@@ -1,2 +1,2 @@
-import{createElement as e,Fragment as r}from"../../../../external/preact/dist/preact.js";import{useRef as s,useMemo as t,useState as o,useCallback as n,useEffect as a}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../../../internal/SecuredFields/SFP/SecuredFieldsProvider.js";import l from"./defaultProps.js";import{AddressModeOptions as d}from"./types.js";import{ENCRYPTED_CARD_NUMBER as u,DATE_POLICY_REQUIRED as c,CVC_POLICY_REQUIRED as m}from"../../../internal/SecuredFields/lib/constants.js";import{cardInputFormatters as p,cardInputValidationRules as h,getRuleByNameAndMode as f}from"./validate.js";import y from"../../../internal/SecuredFields/binLookup/extensions.js";import b from"../../../../utils/useForm/useForm.js";import{handlePartialAddressMode as N,extractPropsForSFP as S,extractPropsForCardFields as g,getLayout as A}from"./utils.js";import F from"../../../internal/Address/Specifications.js";import{StoredCardFieldsWrapper as C}from"./components/StoredCardFieldsWrapper.js";import{CardFieldsWrapper as j}from"./components/CardFieldsWrapper.js";import{getAutoJumpHandler as k,getFocusHandler as x,getAddressHandler as R}from"./handlers.js";import P from"../../../../external/classnames/index.js";import{getPartialAddressValidationRules as v}from"../../../internal/Address/validate.js";import w from"../../../../core/Context/useImage.js";import{getArrayDifferences as I}from"../../../../utils/arrayUtils.js";import B from"../../../internal/FormInstruction/FormInstruction.js";import{PREFIX as V}from"../../../internal/Icon/constants.js";import E from"./useSRPanelForCardInputErrors.js";const O=l=>{const O=s(null),q=s(!1),M=w(),D=s(null),_=e=>{D.current=e},L=s({});Object.keys(L.current).length||l.setComponentRef(L.current);const T=s(0),K=s(!1),H=t((()=>new F(l.specifications)),[l.specifications]);L.current.sfp=O;const[U,z]=o("ready"),[W,$]=o({}),[G,J]=o({...l.holderNameRequired&&{holderName:!1}}),[Q,X]=o({...l.hasHolderName&&{holderName:l.data.holderName??""}}),[Y,Z]=o(""),[ee,re]=o(!1),[se,te]=o(c),[oe,ne]=o(m),[ae,ie]=o(null),[le,de]=o([]),[ue,ce]=o(l.storedPaymentMethodId?l.brand:""),me=l.billingAddressMode!==d.none&&l.billingAddressRequired,pe=N(l.billingAddressMode),he=s(pe&&l.data?.billingAddress?.country),[fe,ye]=o(!1),[be,Ne]=o(me?l.data.billingAddress:null),[Se,ge]=o(!1),[Ae,Fe]=o(""),[Ce,je]=o({value:null}),[ke,xe]=o(null),{handleChangeFor:Re,triggerValidation:Pe,data:ve,valid:we,errors:Ie,setSchema:Be,setData:Ve,setValid:Ee,setErrors:Oe}=b({schema:[],defaultData:l.data,formatters:p,rules:h}),qe=!!Object.keys(l.installmentOptions).length&&"debit"!==l.fundingSource,Me=l.showInstallmentAmounts??!0,De="kr"===(ae??l.countryCode),_e=l.configuration.koreanAuthenticationRequired&&De,Le=Se&&"auto"===l.configuration.socialSecurityNumberMode||"show"===l.configuration.socialSecurityNumberMode,Te=(e,r)=>{l.onFocus({fieldType:e,event:r})},Ke=(e,r)=>{l.onBlur({fieldType:e,event:r})},He=x(Z,Te,Ke),Ue=()=>A({props:l,showKCP:_e,showBrazilianSSN:Le,...l.billingAddressRequired&&{countrySpecificSchemas:H.getAddressSchemaForCountry(be?.country),billingAddressRequiredFields:l.billingAddressRequiredFields}}),ze=n((e=>{const r="webInternalElement"!==e.fieldType?e.fieldType:e.name;xe(r)}),[]),We=R(Ve,Ee,Oe),$e=k(K,O,Ue()),Ge=t((()=>y(l,{sfp:O},{dualBrandSelectElements:le,setDualBrandSelectElements:de,setSelectedBrandValue:ce,issuingCountryCode:ae,setIssuingCountryCode:ie},T)),[le,ae]);L.current.showValidation=()=>{q.current=!0,Xe?.(),O.current.showValidation(),Pe(["holderName","socialSecurityNumber","taxNumber"]),D?.current&&D.current.showValidation()},L.current.processBinLookupResponse=(e,r)=>{Ge.processBinLookup(e,r)},L.current.setStatus=z,a((()=>(L.current.setFocusOn=O.current.setFocusOn,L.current.updateStyles=O.current.updateStyles,L.current.handleUnsupportedCard=O.current.handleUnsupportedCard,()=>{O.current.destroy()})),[]),a((()=>{const e=[...l.hasHolderName?["holderName"]:[],...Le?["socialSecurityNumber"]:[],..._e?["taxNumber"]:[],...me?["billingAddress"]:[]];Be(e)}),[l.hasHolderName,Le,_e]),a((()=>{X({...Q,holderName:ve.holderName??"",taxNumber:ve.taxNumber}),Fe(ve.socialSecurityNumber),me&&Ne({...ve.billingAddress}),J({...G,holderName:!l.holderNameRequired||we.holderName,socialSecurityNumber:!!we.socialSecurityNumber&&we.socialSecurityNumber,taxNumber:!!we.taxNumber&&we.taxNumber,billingAddress:!!we.billingAddress&&we.billingAddress});const e=!!Ie.billingAddress&&Object.entries(Ie.billingAddress).reduce(((e,[,r])=>e||null!=r),!1);$({...W,holderName:l.holderNameRequired&&Ie.holderName?Ie.holderName:null,socialSecurityNumber:Le&&Ie.socialSecurityNumber?Ie.socialSecurityNumber:null,taxNumber:_e&&Ie.taxNumber?Ie.taxNumber:null,billingAddress:me&&e?Ie.billingAddress:null})}),[ve,we,Ie]);const{sortedErrorList:Je,previousSortedErrors:Qe,clearSRPanel:Xe}=E({errors:W,props:l,isValidating:q,retrieveLayout:Ue,specifications:H,billingAddress:be,sfp:O});a((()=>{const e=G.holderName,r=ee,s=!me||G.billingAddress,t=!_e||!!G.taxNumber&&!!G.encryptedPassword,o=!Le||!!G.socialSecurityNumber,n=r&&e&&s&&t&&o,a=O.current.mapErrorsToValidationRuleResult(),i={...W,...a};if(Je){const e=I(Je,Qe,"field");e?.forEach((e=>{const r={fieldType:e.field,errorCode:e.errorCode};l.onValidationErrorAnalytics(r)}))}l.onChange({data:Q,valid:G,errors:i,isValid:n,billingAddress:be,selectedBrandValue:ue,storePaymentMethod:fe,socialSecurityNumber:Ae,installments:Ce})}),[Q,G,W,ue,fe,Ce]);const Ye=l.storedPaymentMethodId?C:j;return e(r,null,e(i,{ref:O,...S(l),styles:{...l.styles},koreanAuthenticationRequired:l.configuration.koreanAuthenticationRequired,hasKoreanFields:!(!l.configuration.koreanAuthenticationRequired||"kr"!==l.countryCode),onChange:(e,r)=>{if(e.autoCompleteName){if(!l.hasHolderName)return;const r=f("holderName","blur")(e.autoCompleteName)?e.autoCompleteName:null;r&&(Ve("holderName",r),Ee("holderName",!0),Oe("holderName",null))}else l.autoFocus&&T.current>0&&"handleOnFieldValid"===r?.event&&r?.fieldType===u&&e.valid.encryptedCardNumber&&$e(),X({...Q,...e.data}),$({...W,...e.errors}),J({...G,...e.valid}),re(e.isSfpValid),ne(e.cvcPolicy),ge(e.showSocialSecurityNumber),te(e.expiryDatePolicy)},onBrand:l.onBrand,onFocus:He,type:l.brand,disableIOSArrowKeys:l.disableIOSArrowKeys?ze:null,render:({setRootNode:r,setFocusOn:s},t)=>e("div",{ref:r,className:P({"adyen-checkout__card-input":!0,"adyen-checkout-card-input__wrapper":!0,[`adyen-checkout__card-input--${l.fundingSource??"credit"}`]:!0,"adyen-checkout__card-input--loading":"loading"===U}),role:"form"},e(B,null),e(Ye,{...g(l),data:Q,valid:G,errors:W,handleChangeFor:Re,focusedElement:Y,setFocusOn:s,sfpState:t,cvcPolicy:oe,hasInstallments:qe,showAmountsInInstallments:Me,handleInstallments:je,brandsIcons:l.brandsIcons,formData:ve,formErrors:Ie,formValid:we,expiryDatePolicy:se,dualBrandSelectElements:le,extensions:Ge,selectedBrandValue:ue,showKCP:_e,showBrazilianSSN:Le,socialSecurityNumber:Ae,handleOnStoreDetails:ye,setAddressRef:_,billingAddress:be,billingAddressValidationRules:pe&&v(he.current),partialAddressSchema:pe,handleAddress:We,onAddressLookup:l.onAddressLookup,onAddressSelected:l.onAddressSelected,addressSearchDebounceMs:l.addressSearchDebounceMs,iOSFocusedField:ke,onFieldFocusAnalytics:Te,onFieldBlurAnalytics:Ke}))}),l.showPayButton&&l.payButton({status:U,variant:l.isPayButtonPrimaryVariant?"primary":"secondary",icon:M({imageFolder:"components/"})(`${V}lock`)}))};O.defaultProps=l;export{O as default};
+import{createElement as e,Fragment as r}from"../../../../external/preact/dist/preact.js";import{useRef as s,useMemo as t,useState as o,useCallback as n,useEffect as a}from"../../../../external/preact/hooks/dist/hooks.js";import i from"../../../internal/SecuredFields/SFP/SecuredFieldsProvider.js";import l from"./defaultProps.js";import{AddressModeOptions as d}from"./types.js";import{ENCRYPTED_CARD_NUMBER as u,DATE_POLICY_REQUIRED as c,CVC_POLICY_REQUIRED as m}from"../../../internal/SecuredFields/lib/constants.js";import{cardInputFormatters as p,cardInputValidationRules as h,getRuleByNameAndMode as f}from"./validate.js";import y from"../../../internal/SecuredFields/binLookup/extensions.js";import b from"../../../../utils/useForm/useForm.js";import{handlePartialAddressMode as N,extractPropsForSFP as S,extractPropsForCardFields as g,getLayout as A}from"./utils.js";import F from"../../../internal/Address/Specifications.js";import{StoredCardFieldsWrapper as C}from"./components/StoredCardFieldsWrapper.js";import{CardFieldsWrapper as j}from"./components/CardFieldsWrapper.js";import{getAutoJumpHandler as k,getFocusHandler as x,getAddressHandler as R}from"./handlers.js";import P from"../../../../external/classnames/index.js";import{getPartialAddressValidationRules as v}from"../../../internal/Address/validate.js";import w from"../../../../core/Context/useImage.js";import{getArrayDifferences as I}from"../../../../utils/arrayUtils.js";import B from"../../../internal/FormInstruction/FormInstruction.js";import{PREFIX as V}from"../../../internal/Icon/constants.js";import E from"./useSRPanelForCardInputErrors.js";const O=l=>{const O=s(null),q=s(!1),M=w(),D=s(null),_=e=>{D.current=e},L=s({});Object.keys(L.current).length||l.setComponentRef(L.current);const T=s(0),K=s(!1),H=t((()=>new F(l.specifications)),[l.specifications]);L.current.sfp=O;const[U,z]=o("ready"),[W,$]=o({}),[G,J]=o({...l.holderNameRequired&&{holderName:!1}}),[Q,X]=o({...l.hasHolderName&&{holderName:l.data.holderName??""}}),[Y,Z]=o(""),[ee,re]=o(!1),[se,te]=o(c),[oe,ne]=o(m),[ae,ie]=o(null),[le,de]=o([]),[ue,ce]=o(l.storedPaymentMethodId?l.brand:""),me=l.billingAddressMode!==d.none&&l.billingAddressRequired,pe=N(l.billingAddressMode),he=s(pe&&l.data?.billingAddress?.country),[fe,ye]=o(!1),[be,Ne]=o(me?l.data.billingAddress:null),[Se,ge]=o(!1),[Ae,Fe]=o(""),[Ce,je]=o({value:null}),[ke,xe]=o(null),{handleChangeFor:Re,triggerValidation:Pe,data:ve,valid:we,errors:Ie,setSchema:Be,setData:Ve,setValid:Ee,setErrors:Oe}=b({schema:[],defaultData:l.data,formatters:p,rules:h}),qe=!!Object.keys(l.installmentOptions).length&&"debit"!==l.fundingSource,Me=l.showInstallmentAmounts??!0,De="kr"===(ae??l.countryCode),_e=l.configuration.koreanAuthenticationRequired&&De,Le=Se&&"auto"===l.configuration.socialSecurityNumberMode||"show"===l.configuration.socialSecurityNumberMode,Te=(e,r)=>{l.onFocus({fieldType:e,event:r})},Ke=(e,r)=>{l.onBlur({fieldType:e,event:r})},He=x(Z,Te,Ke),Ue=()=>A({props:l,showKCP:_e,showBrazilianSSN:Le,...l.billingAddressRequired&&{countrySpecificSchemas:H.getAddressSchemaForCountry(be?.country),billingAddressRequiredFields:l.billingAddressRequiredFields}}),ze=n((e=>{const r="webInternalElement"!==e.fieldType?e.fieldType:e.name;xe(r)}),[]),We=R(Ve,Ee,Oe),$e=k(K,O,Ue()),Ge=t((()=>y(l,{sfp:O},{dualBrandSelectElements:le,setDualBrandSelectElements:de,setSelectedBrandValue:ce,issuingCountryCode:ae,setIssuingCountryCode:ie},T)),[le,ae]);L.current.showValidation=()=>{q.current=!0,Xe?.(),O.current.showValidation(),Pe(["holderName","socialSecurityNumber","taxNumber"]),D?.current&&D.current.showValidation()},L.current.processBinLookupResponse=(e,r)=>{Ge.processBinLookup(e,r)},L.current.setStatus=z,a((()=>(L.current.setFocusOn=O.current.setFocusOn,L.current.updateStyles=O.current.updateStyles,L.current.handleUnsupportedCard=O.current.handleUnsupportedCard,()=>{O.current.destroy()})),[]),a((()=>{const e=[...l.hasHolderName?["holderName"]:[],...Le?["socialSecurityNumber"]:[],..._e?["taxNumber"]:[],...me?["billingAddress"]:[]];Be(e)}),[l.hasHolderName,Le,_e]),a((()=>{X({...Q,holderName:ve.holderName??"",taxNumber:ve.taxNumber}),Fe(ve.socialSecurityNumber),me&&Ne({...ve.billingAddress}),J({...G,holderName:!l.holderNameRequired||we.holderName,socialSecurityNumber:!!we.socialSecurityNumber&&we.socialSecurityNumber,taxNumber:!!we.taxNumber&&we.taxNumber,billingAddress:!!we.billingAddress&&we.billingAddress});const e=!!Ie.billingAddress&&Object.entries(Ie.billingAddress).reduce(((e,[,r])=>e||null!=r),!1);$({...W,holderName:l.holderNameRequired&&Ie.holderName?Ie.holderName:null,socialSecurityNumber:Le&&Ie.socialSecurityNumber?Ie.socialSecurityNumber:null,taxNumber:_e&&Ie.taxNumber?Ie.taxNumber:null,billingAddress:me&&e?Ie.billingAddress:null})}),[ve,we,Ie]);const{sortedErrorList:Je,previousSortedErrors:Qe,clearSRPanel:Xe}=E({errors:W,props:l,isValidating:q,retrieveLayout:Ue,specifications:H,billingAddress:be,sfp:O});if(Je){const e=I(Je,Qe,"field");e?.forEach((e=>{const r={fieldType:e.field,errorCode:e.errorCode};l.onValidationErrorAnalytics(r)}))}a((()=>{const e=G.holderName,r=ee,s=!me||G.billingAddress,t=!_e||!!G.taxNumber&&!!G.encryptedPassword,o=!Le||!!G.socialSecurityNumber,n=r&&e&&s&&t&&o,a=O.current.mapErrorsToValidationRuleResult(),i={...W,...a};l.onChange({data:Q,valid:G,errors:i,isValid:n,billingAddress:be,selectedBrandValue:ue,storePaymentMethod:fe,socialSecurityNumber:Ae,installments:Ce})}),[Q,G,W,ue,fe,Ce]);const Ye=l.storedPaymentMethodId?C:j;return e(r,null,e(i,{ref:O,...S(l),styles:{...l.styles},koreanAuthenticationRequired:l.configuration.koreanAuthenticationRequired,hasKoreanFields:!(!l.configuration.koreanAuthenticationRequired||"kr"!==l.countryCode),onChange:(e,r)=>{if(e.autoCompleteName){if(!l.hasHolderName)return;const r=f("holderName","blur")(e.autoCompleteName)?e.autoCompleteName:null;r&&(Ve("holderName",r),Ee("holderName",!0),Oe("holderName",null))}else l.autoFocus&&T.current>0&&"handleOnFieldValid"===r?.event&&r?.fieldType===u&&e.valid.encryptedCardNumber&&$e(),X({...Q,...e.data}),$({...W,...e.errors}),J({...G,...e.valid}),re(e.isSfpValid),ne(e.cvcPolicy),ge(e.showSocialSecurityNumber),te(e.expiryDatePolicy)},onBrand:l.onBrand,onFocus:He,type:l.brand,disableIOSArrowKeys:l.disableIOSArrowKeys?ze:null,render:({setRootNode:r,setFocusOn:s},t)=>e("div",{ref:r,className:P({"adyen-checkout__card-input":!0,"adyen-checkout-card-input__wrapper":!0,[`adyen-checkout__card-input--${l.fundingSource??"credit"}`]:!0,"adyen-checkout__card-input--loading":"loading"===U}),role:"form"},e(B,null),e(Ye,{...g(l),data:Q,valid:G,errors:W,handleChangeFor:Re,focusedElement:Y,setFocusOn:s,sfpState:t,cvcPolicy:oe,hasInstallments:qe,showAmountsInInstallments:Me,handleInstallments:je,brandsIcons:l.brandsIcons,formData:ve,formErrors:Ie,formValid:we,expiryDatePolicy:se,dualBrandSelectElements:le,extensions:Ge,selectedBrandValue:ue,showKCP:_e,showBrazilianSSN:Le,socialSecurityNumber:Ae,handleOnStoreDetails:ye,setAddressRef:_,billingAddress:be,billingAddressValidationRules:pe&&v(he.current),partialAddressSchema:pe,handleAddress:We,onAddressLookup:l.onAddressLookup,onAddressSelected:l.onAddressSelected,addressSearchDebounceMs:l.addressSearchDebounceMs,iOSFocusedField:ke,onFieldFocusAnalytics:Te,onFieldBlurAnalytics:Ke}))}),l.showPayButton&&l.payButton({status:U,variant:l.isPayButtonPrimaryVariant?"primary":"secondary",icon:M({imageFolder:"components/"})(`${V}lock`)}))};O.defaultProps=l;export{O as default};
 //# sourceMappingURL=CardInput.js.map

package/dist/es/components/Card/components/CardInput/CardInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardInput.js","sources":["../../../../../../src/components/Card/components/CardInput/CardInput.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport { useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport { OnChangeEventDetails, SFPState } from '../../../internal/SecuredFields/SFP/types';\nimport defaultProps from './defaultProps';\nimport './CardInput.scss';\nimport { AddressModeOptions, CardInputDataState, CardInputErrorState, CardInputProps, CardInputRef, CardInputValidState } from './types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, ENCRYPTED_CARD_NUMBER } from '../../../internal/SecuredFields/lib/constants';\nimport { BinLookupResponse } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SortedErrorObject } from '../../../../core/Errors/types';\nimport { handlePartialAddressMode, extractPropsForCardFields, extractPropsForSFP, getLayout } from './utils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler } from './handlers';\nimport { InstallmentsObj } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';\nimport { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\n\nconst CardInput = (props: CardInputProps) => {\n    const sfp = useRef(null);\n    const isValidating = useRef(false);\n    const getImage = useImage();\n\n    const billingAddressRef = useRef(null);\n    const setAddressRef = ref => {\n        billingAddressRef.current = ref;\n    };\n\n    const cardInputRef = useRef<CardInputRef>({});\n    // Just call once to create the object by which we expose the members expected by the parent Card comp\n    if (!Object.keys(cardInputRef.current).length) {\n        props.setComponentRef(cardInputRef.current);\n    }\n\n    const hasPanLengthRef = useRef(0);\n    const isAutoJumping = useRef(false);\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    // Store ref to sfp (useful for 'deep' debugging)\n    cardInputRef.current.sfp = sfp;\n\n    /**\n     * STATE HOOKS\n     */\n    const [status, setStatus] = useState('ready');\n\n    const [errors, setErrors] = useState<CardInputErrorState>({});\n    const [valid, setValid] = useState<CardInputValidState>({\n        ...(props.holderNameRequired && { holderName: false })\n    });\n    const [data, setData] = useState<CardInputDataState>({\n        ...(props.hasHolderName && { holderName: props.data.holderName ?? '' })\n    });\n\n    const [focusedElement, setFocusedElement] = useState('');\n    const [isSfpValid, setIsSfpValid] = useState(false);\n    const [expiryDatePolicy, setExpiryDatePolicy] = useState(DATE_POLICY_REQUIRED);\n    const [cvcPolicy, setCvcPolicy] = useState(CVC_POLICY_REQUIRED);\n    const [issuingCountryCode, setIssuingCountryCode] = useState<string>(null);\n\n    const [dualBrandSelectElements, setDualBrandSelectElements] = useState([]);\n    const [selectedBrandValue, setSelectedBrandValue] = useState(props.storedPaymentMethodId ? props.brand : ''); // If this is a storedCard comp initialise state with the storedCard's brand\n\n    const showBillingAddress = props.billingAddressMode !== AddressModeOptions.none && props.billingAddressRequired;\n\n    const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n    // Keeps the value of the country set initially by the merchant, before the Address Component mutates it\n    const partialAddressCountry = useRef<string>(partialAddressSchema && props.data?.billingAddress?.country);\n\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n    const [billingAddress, setBillingAddress] = useState<AddressData>(showBillingAddress ? props.data.billingAddress : null);\n    const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n    const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n    const [installments, setInstallments] = useState<InstallmentsObj>({ value: null });\n\n    // re. Disable arrows for iOS: The name of the element calling for other elements to be disabled\n    // - either a securedField type (like 'encryptedCardNumber') when call is coming from SF\n    // or else the name of an internal, Adyen-web, element (like 'holderName')\n    const [iOSFocusedField, setIOSFocusedField] = useState(null);\n\n    /**\n     * LOCAL VARS\n     */\n    const {\n        handleChangeFor,\n        triggerValidation,\n        data: formData,\n        valid: formValid,\n        errors: formErrors,\n        setSchema,\n        setData: setFormData,\n        setValid: setFormValid,\n        setErrors: setFormErrors\n    } = useForm<CardInputDataState>({\n        schema: [],\n        defaultData: props.data,\n        formatters: cardInputFormatters,\n        rules: cardInputValidationRules\n    });\n\n    const hasInstallments = !!Object.keys(props.installmentOptions).length && props.fundingSource !== 'debit';\n    const showAmountsInInstallments = props.showInstallmentAmounts ?? true;\n\n    const cardCountryCode: string = issuingCountryCode ?? props.countryCode;\n    const isKorea = cardCountryCode === 'kr'; // If issuingCountryCode or the merchant defined countryCode is set to 'kr'\n    const showKCP = props.configuration.koreanAuthenticationRequired && isKorea;\n\n    const showBrazilianSSN: boolean =\n        (showSocialSecurityNumber && props.configuration.socialSecurityNumberMode === 'auto') ||\n        props.configuration.socialSecurityNumberMode === 'show';\n\n    /**\n     * HANDLERS\n     */\n    // Handlers for focus & blur on all fields. Can be renamed to onFieldFocus once the onFocusField is renamed in Field.tsx\n    const onFieldFocusAnalytics = (who: string, e: Event | CbObjOnFocus) => {\n        props.onFocus({ fieldType: who, event: e });\n    };\n    const onFieldBlurAnalytics = (who: string, e: Event | CbObjOnFocus) => {\n        props.onBlur({ fieldType: who, event: e });\n    };\n\n    // Make SecuredFields aware of the focus & blur handlers\n    const handleFocus = getFocusHandler(setFocusedElement, onFieldFocusAnalytics, onFieldBlurAnalytics);\n\n    const retrieveLayout = (): string[] => {\n        return getLayout({\n            props,\n            showKCP,\n            showBrazilianSSN,\n            ...(props.billingAddressRequired && {\n                countrySpecificSchemas: specifications.getAddressSchemaForCountry(billingAddress?.country),\n                billingAddressRequiredFields: props.billingAddressRequiredFields\n            })\n        });\n    };\n\n    /**\n     * re. Disabling arrow keys in iOS:\n     * Only by disabling all fields in the Card PM except for the active securedField input can we force the iOS soft keyboard arrow keys to disable\n     *\n     * NOTE: only called if ua.__IS_IOS = true && this.config.disableIOSArrowKeys = true (as referenced in CSF)\n     *\n     * @param obj - has fieldType prop saying whether this function is being called in response to an securedFields click ('encryptedCardNumber' etc)\n     * - in which case we should disable all non-SF fields\n     * or,\n     * due to an internal action ('webInternalElement') - in which case we can enable all non-SF fields\n     */\n    const handleTouchstartIOS = useCallback((obj: TouchStartEventObj) => {\n        const elementType = obj.fieldType !== 'webInternalElement' ? obj.fieldType : obj.name;\n        setIOSFocusedField(elementType);\n    }, []);\n\n    const handleAddress = getAddressHandler(setFormData, setFormValid, setFormErrors);\n\n    const doPanAutoJump = getAutoJumpHandler(isAutoJumping, sfp, retrieveLayout());\n\n    const handleSecuredFieldsChange = (sfState: SFPState, eventDetails?: OnChangeEventDetails): void => {\n        /**\n         * Handling auto complete value for holderName (but only if the component is using a holderName field)\n         */\n        if (sfState.autoCompleteName) {\n            if (!props.hasHolderName) return;\n            const holderNameValidationFn = getRuleByNameAndMode('holderName', 'blur');\n            const acHolderName = holderNameValidationFn(sfState.autoCompleteName) ? sfState.autoCompleteName : null;\n            if (acHolderName) {\n                setFormData('holderName', acHolderName);\n                setFormValid('holderName', true); // only if holderName is valid does this fny get called - so we know it's valid and w/o error\n                setFormErrors('holderName', null);\n            }\n            return;\n        }\n\n        /**\n         * Decide if we can shift focus to the expiryDate field.\n         *\n         * We can if... the config prop, autoFocus, is true AND we have a panLength value from binLookup\n         * AND we are responding to a handleOnFieldValid message about the PAN that says it is valid\n         */\n        if (\n            props.autoFocus &&\n            hasPanLengthRef.current > 0 &&\n            eventDetails?.event === 'handleOnFieldValid' &&\n            eventDetails?.fieldType === ENCRYPTED_CARD_NUMBER &&\n            sfState.valid.encryptedCardNumber\n        ) {\n            doPanAutoJump();\n        }\n\n        /**\n         * Process SFP state\n         */\n        setData({ ...data, ...sfState.data });\n        setErrors({ ...errors, ...sfState.errors });\n        setValid({ ...valid, ...sfState.valid });\n\n        setIsSfpValid(sfState.isSfpValid);\n\n        // Values relating to /binLookup response\n        setCvcPolicy(sfState.cvcPolicy);\n        setShowSocialSecurityNumber(sfState.showSocialSecurityNumber);\n        setExpiryDatePolicy(sfState.expiryDatePolicy);\n    };\n\n    // Farm the handlers for binLookup related functionality out to another 'extensions' file\n    const extensions = useMemo(\n        () =>\n            CIExtensions(\n                props,\n                { sfp },\n                {\n                    dualBrandSelectElements,\n                    setDualBrandSelectElements,\n                    setSelectedBrandValue,\n                    issuingCountryCode,\n                    setIssuingCountryCode\n                },\n                hasPanLengthRef\n            ),\n        [dualBrandSelectElements, issuingCountryCode]\n    );\n\n    /**\n     * EXPOSE METHODS expected by Card.tsx\n     */\n    cardInputRef.current.showValidation = () => {\n        // set flag\n        isValidating.current = true;\n\n        /**\n         * Clear errors prior to validating so that the screenreader will read them *all* again, and in the right order\n         * - only using aria-atomic on the error panel will read them in the wrong order\n         */\n        clearSRPanel?.(); // TODO - recheck if this is still true\n\n        // Validate SecuredFields\n        sfp.current.showValidation();\n\n        // Validate holderName & SSN & KCP (taxNumber) but *not* billingAddress\n        triggerValidation(['holderName', 'socialSecurityNumber', 'taxNumber']);\n\n        // Validate Address\n        if (billingAddressRef?.current) billingAddressRef.current.showValidation();\n    };\n\n    cardInputRef.current.processBinLookupResponse = (binLookupResponse: BinLookupResponse, isReset: boolean) => {\n        extensions.processBinLookup(binLookupResponse, isReset);\n    };\n\n    cardInputRef.current.setStatus = setStatus;\n\n    /**\n     * EFFECT HOOKS\n     */\n    useEffect(() => {\n        // componentDidMount - expose more methods expected by Card.tsx\n        cardInputRef.current.setFocusOn = sfp.current.setFocusOn;\n        cardInputRef.current.updateStyles = sfp.current.updateStyles;\n        cardInputRef.current.handleUnsupportedCard = sfp.current.handleUnsupportedCard;\n\n        // componentWillUnmount\n        return () => {\n            sfp.current.destroy();\n        };\n    }, []);\n\n    /**\n     * Handle form schema updates\n     */\n    useEffect(() => {\n        const newSchema = [\n            ...(props.hasHolderName ? ['holderName'] : []),\n            ...(showBrazilianSSN ? ['socialSecurityNumber'] : []),\n            ...(showKCP ? ['taxNumber'] : []),\n            ...(showBillingAddress ? ['billingAddress'] : [])\n        ];\n        setSchema(newSchema);\n    }, [props.hasHolderName, showBrazilianSSN, showKCP]);\n\n    /**\n     * Handle updates from useForm\n     */\n    useEffect(() => {\n        setData({ ...data, holderName: formData.holderName ?? '', taxNumber: formData.taxNumber });\n\n        setSocialSecurityNumber(formData.socialSecurityNumber);\n\n        if (showBillingAddress) setBillingAddress({ ...formData.billingAddress });\n\n        setValid({\n            ...valid,\n            holderName: props.holderNameRequired ? formValid.holderName : true,\n            // Setting value to false if it's falsy keeps in line with existing, expected behaviour\n            // - but there is an argument to allow 'undefined' as a value to indicate the non-presence of the field\n            socialSecurityNumber: formValid.socialSecurityNumber ? formValid.socialSecurityNumber : false,\n            taxNumber: formValid.taxNumber ? formValid.taxNumber : false,\n            billingAddress: formValid.billingAddress ? formValid.billingAddress : false\n        });\n\n        // Check if billingAddress errors object has any properties that aren't null or undefined\n        const addressHasErrors = formErrors.billingAddress\n            ? Object.entries(formErrors.billingAddress).reduce((acc, [, error]) => acc || error != null, false)\n            : false;\n\n        // Errors\n        setErrors({\n            ...errors,\n            holderName: props.holderNameRequired && !!formErrors.holderName ? formErrors.holderName : null,\n            socialSecurityNumber: showBrazilianSSN && !!formErrors.socialSecurityNumber ? formErrors.socialSecurityNumber : null,\n            taxNumber: showKCP && !!formErrors.taxNumber ? formErrors.taxNumber : null,\n            billingAddress: showBillingAddress && addressHasErrors ? formErrors.billingAddress : null\n        });\n    }, [formData, formValid, formErrors]);\n\n    // Use the custom hook to set (or clear) errors in the SRPanel\n    const {\n        sortedErrorList: currentErrorsSortedByLayout,\n        previousSortedErrors,\n        clearSRPanel\n    } = useSRPanelForCardInputErrors({\n        errors,\n        props,\n        isValidating,\n        retrieveLayout,\n        specifications,\n        billingAddress,\n        sfp\n    });\n\n    /**\n     * Main 'componentDidUpdate' handler\n     */\n    useEffect(() => {\n        const holderNameValid: boolean = valid.holderName;\n\n        const sfpValid: boolean = isSfpValid;\n        const addressValid: boolean = showBillingAddress ? valid.billingAddress : true;\n\n        const koreanAuthentication: boolean = showKCP ? !!valid.taxNumber && !!valid.encryptedPassword : true;\n\n        const socialSecurityNumberValid: boolean = showBrazilianSSN ? !!valid.socialSecurityNumber : true;\n\n        const isValid: boolean = sfpValid && holderNameValid && addressValid && koreanAuthentication && socialSecurityNumberValid;\n\n        const sfStateErrorsObj = sfp.current.mapErrorsToValidationRuleResult();\n        const mergedErrors = { ...errors, ...sfStateErrorsObj }; // maps sfErrors AND solves race condition problems for sfp from showValidation\n\n        // Analytics\n        if (currentErrorsSortedByLayout) {\n            const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n            newErrors?.forEach(errorItem => {\n                const aObj: FieldErrorAnalyticsObject = {\n                    fieldType: errorItem.field,\n                    errorCode: errorItem.errorCode\n                };\n\n                props.onValidationErrorAnalytics(aObj);\n            });\n        }\n\n        props.onChange({\n            data,\n            valid,\n            errors: mergedErrors,\n            isValid,\n            billingAddress,\n            selectedBrandValue,\n            storePaymentMethod,\n            socialSecurityNumber,\n            installments\n        });\n    }, [data, valid, errors, selectedBrandValue, storePaymentMethod, installments]);\n\n    /**\n     * RENDER\n     */\n    const FieldToRender = props.storedPaymentMethodId ? StoredCardFieldsWrapper : CardFieldsWrapper;\n\n    return (\n        <Fragment>\n            <SecuredFieldsProvider\n                ref={sfp}\n                {...extractPropsForSFP(props)}\n                styles={{ ...props.styles }}\n                koreanAuthenticationRequired={props.configuration.koreanAuthenticationRequired}\n                hasKoreanFields={!!(props.configuration.koreanAuthenticationRequired && props.countryCode === 'kr')}\n                onChange={handleSecuredFieldsChange}\n                onBrand={props.onBrand}\n                onFocus={handleFocus}\n                type={props.brand}\n                disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n                render={({ setRootNode, setFocusOn }, sfpState) => (\n                    <div\n                        ref={setRootNode}\n                        className={classNames({\n                            'adyen-checkout__card-input': true,\n                            'adyen-checkout-card-input__wrapper': true,\n                            [`adyen-checkout__card-input--${props.fundingSource ?? 'credit'}`]: true,\n                            'adyen-checkout__card-input--loading': status === 'loading'\n                        })}\n                        role={'form'}\n                    >\n                        <FormInstruction />\n\n                        <FieldToRender\n                            // Extract exact props that we need to pass down\n                            {...extractPropsForCardFields(props)}\n                            // Pass on vars created in CardInput:\n                            // Base (shared w. StoredCard)\n                            data={data}\n                            valid={valid}\n                            errors={errors}\n                            handleChangeFor={handleChangeFor}\n                            focusedElement={focusedElement}\n                            setFocusOn={setFocusOn}\n                            sfpState={sfpState}\n                            cvcPolicy={cvcPolicy}\n                            hasInstallments={hasInstallments}\n                            showAmountsInInstallments={showAmountsInInstallments}\n                            handleInstallments={setInstallments}\n                            // For Card\n                            brandsIcons={props.brandsIcons}\n                            formData={formData}\n                            formErrors={formErrors}\n                            formValid={formValid}\n                            expiryDatePolicy={expiryDatePolicy}\n                            dualBrandSelectElements={dualBrandSelectElements}\n                            extensions={extensions}\n                            selectedBrandValue={selectedBrandValue}\n                            // For KCP\n                            showKCP={showKCP}\n                            // For SSN\n                            showBrazilianSSN={showBrazilianSSN}\n                            socialSecurityNumber={socialSecurityNumber}\n                            // For Store details\n                            handleOnStoreDetails={setStorePaymentMethod}\n                            // For Address\n                            setAddressRef={setAddressRef}\n                            billingAddress={billingAddress}\n                            billingAddressValidationRules={partialAddressSchema && getPartialAddressValidationRules(partialAddressCountry.current)}\n                            partialAddressSchema={partialAddressSchema}\n                            handleAddress={handleAddress}\n                            onAddressLookup={props.onAddressLookup}\n                            onAddressSelected={props.onAddressSelected}\n                            addressSearchDebounceMs={props.addressSearchDebounceMs}\n                            //\n                            iOSFocusedField={iOSFocusedField}\n                            //\n                            onFieldFocusAnalytics={onFieldFocusAnalytics}\n                            onFieldBlurAnalytics={onFieldBlurAnalytics}\n                        />\n                    </div>\n                )}\n            />\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n                    icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`)\n                })}\n        </Fragment>\n    );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","focusedElement","setFocusedElement","isSfpValid","setIsSfpValid","expiryDatePolicy","setExpiryDatePolicy","DATE_POLICY_REQUIRED","cvcPolicy","setCvcPolicy","CVC_POLICY_REQUIRED","issuingCountryCode","setIssuingCountryCode","dualBrandSelectElements","setDualBrandSelectElements","selectedBrandValue","setSelectedBrandValue","storedPaymentMethodId","brand","showBillingAddress","billingAddressMode","AddressModeOptions","none","billingAddressRequired","partialAddressSchema","handlePartialAddressMode","partialAddressCountry","billingAddress","country","storePaymentMethod","setStorePaymentMethod","setBillingAddress","showSocialSecurityNumber","setShowSocialSecurityNumber","socialSecurityNumber","setSocialSecurityNumber","installments","setInstallments","value","iOSFocusedField","setIOSFocusedField","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","useCallback","obj","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","extensions","CIExtensions","showValidation","clearSRPanel","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","sortedErrorList","currentErrorsSortedByLayout","previousSortedErrors","useSRPanelForCardInputErrors","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","newErrors","getArrayDifferences","forEach","errorItem","aObj","field","errorCode","onValidationErrorAnalytics","onChange","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","acHolderName","getRuleByNameAndMode","holderNameValidationFn","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","onBrand","type","disableIOSArrowKeys","render","setRootNode","sfpState","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","PREFIX","defaultProps"],"mappings":"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"}
+{"version":3,"file":"CardInput.js","sources":["../../../../../../src/components/Card/components/CardInput/CardInput.tsx"],"sourcesContent":["import { h, Fragment } from 'preact';\nimport { useState, useEffect, useRef, useMemo, useCallback } from 'preact/hooks';\nimport SecuredFieldsProvider from '../../../internal/SecuredFields/SFP/SecuredFieldsProvider';\nimport { OnChangeEventDetails, SFPState } from '../../../internal/SecuredFields/SFP/types';\nimport defaultProps from './defaultProps';\nimport './CardInput.scss';\nimport { AddressModeOptions, CardInputDataState, CardInputErrorState, CardInputProps, CardInputRef, CardInputValidState } from './types';\nimport { CVC_POLICY_REQUIRED, DATE_POLICY_REQUIRED, ENCRYPTED_CARD_NUMBER } from '../../../internal/SecuredFields/lib/constants';\nimport { BinLookupResponse } from '../../types';\nimport { cardInputFormatters, cardInputValidationRules, getRuleByNameAndMode } from './validate';\nimport CIExtensions from '../../../internal/SecuredFields/binLookup/extensions';\nimport useForm from '../../../../utils/useForm';\nimport { SortedErrorObject } from '../../../../core/Errors/types';\nimport { handlePartialAddressMode, extractPropsForCardFields, extractPropsForSFP, getLayout } from './utils';\nimport Specifications from '../../../internal/Address/Specifications';\nimport { StoredCardFieldsWrapper } from './components/StoredCardFieldsWrapper';\nimport { CardFieldsWrapper } from './components/CardFieldsWrapper';\nimport { getAddressHandler, getAutoJumpHandler, getFocusHandler } from './handlers';\nimport { InstallmentsObj } from './components/Installments/Installments';\nimport { TouchStartEventObj } from './components/types';\nimport classNames from 'classnames';\nimport { getPartialAddressValidationRules } from '../../../internal/Address/validate';\nimport useImage from '../../../../core/Context/useImage';\nimport { getArrayDifferences } from '../../../../utils/arrayUtils';\nimport FormInstruction from '../../../internal/FormInstruction';\nimport { AddressData } from '../../../../types/global-types';\nimport { CbObjOnFocus } from '../../../internal/SecuredFields/lib/types';\nimport { FieldErrorAnalyticsObject } from '../../../../core/Analytics/types';\nimport { PREFIX } from '../../../internal/Icon/constants';\nimport useSRPanelForCardInputErrors from './useSRPanelForCardInputErrors';\n\nconst CardInput = (props: CardInputProps) => {\n    const sfp = useRef(null);\n    const isValidating = useRef(false);\n    const getImage = useImage();\n\n    const billingAddressRef = useRef(null);\n    const setAddressRef = ref => {\n        billingAddressRef.current = ref;\n    };\n\n    const cardInputRef = useRef<CardInputRef>({});\n    // Just call once to create the object by which we expose the members expected by the parent Card comp\n    if (!Object.keys(cardInputRef.current).length) {\n        props.setComponentRef(cardInputRef.current);\n    }\n\n    const hasPanLengthRef = useRef(0);\n    const isAutoJumping = useRef(false);\n\n    const specifications = useMemo(() => new Specifications(props.specifications), [props.specifications]);\n\n    // Store ref to sfp (useful for 'deep' debugging)\n    cardInputRef.current.sfp = sfp;\n\n    /**\n     * STATE HOOKS\n     */\n    const [status, setStatus] = useState('ready');\n\n    const [errors, setErrors] = useState<CardInputErrorState>({});\n    const [valid, setValid] = useState<CardInputValidState>({\n        ...(props.holderNameRequired && { holderName: false })\n    });\n    const [data, setData] = useState<CardInputDataState>({\n        ...(props.hasHolderName && { holderName: props.data.holderName ?? '' })\n    });\n\n    const [focusedElement, setFocusedElement] = useState('');\n    const [isSfpValid, setIsSfpValid] = useState(false);\n    const [expiryDatePolicy, setExpiryDatePolicy] = useState(DATE_POLICY_REQUIRED);\n    const [cvcPolicy, setCvcPolicy] = useState(CVC_POLICY_REQUIRED);\n    const [issuingCountryCode, setIssuingCountryCode] = useState<string>(null);\n\n    const [dualBrandSelectElements, setDualBrandSelectElements] = useState([]);\n    const [selectedBrandValue, setSelectedBrandValue] = useState(props.storedPaymentMethodId ? props.brand : ''); // If this is a storedCard comp initialise state with the storedCard's brand\n\n    const showBillingAddress = props.billingAddressMode !== AddressModeOptions.none && props.billingAddressRequired;\n\n    const partialAddressSchema = handlePartialAddressMode(props.billingAddressMode);\n    // Keeps the value of the country set initially by the merchant, before the Address Component mutates it\n    const partialAddressCountry = useRef<string>(partialAddressSchema && props.data?.billingAddress?.country);\n\n    const [storePaymentMethod, setStorePaymentMethod] = useState(false);\n    const [billingAddress, setBillingAddress] = useState<AddressData>(showBillingAddress ? props.data.billingAddress : null);\n    const [showSocialSecurityNumber, setShowSocialSecurityNumber] = useState(false);\n    const [socialSecurityNumber, setSocialSecurityNumber] = useState('');\n    const [installments, setInstallments] = useState<InstallmentsObj>({ value: null });\n\n    // re. Disable arrows for iOS: The name of the element calling for other elements to be disabled\n    // - either a securedField type (like 'encryptedCardNumber') when call is coming from SF\n    // or else the name of an internal, Adyen-web, element (like 'holderName')\n    const [iOSFocusedField, setIOSFocusedField] = useState(null);\n\n    /**\n     * LOCAL VARS\n     */\n    const {\n        handleChangeFor,\n        triggerValidation,\n        data: formData,\n        valid: formValid,\n        errors: formErrors,\n        setSchema,\n        setData: setFormData,\n        setValid: setFormValid,\n        setErrors: setFormErrors\n    } = useForm<CardInputDataState>({\n        schema: [],\n        defaultData: props.data,\n        formatters: cardInputFormatters,\n        rules: cardInputValidationRules\n    });\n\n    const hasInstallments = !!Object.keys(props.installmentOptions).length && props.fundingSource !== 'debit';\n    const showAmountsInInstallments = props.showInstallmentAmounts ?? true;\n\n    const cardCountryCode: string = issuingCountryCode ?? props.countryCode;\n    const isKorea = cardCountryCode === 'kr'; // If issuingCountryCode or the merchant defined countryCode is set to 'kr'\n    const showKCP = props.configuration.koreanAuthenticationRequired && isKorea;\n\n    const showBrazilianSSN: boolean =\n        (showSocialSecurityNumber && props.configuration.socialSecurityNumberMode === 'auto') ||\n        props.configuration.socialSecurityNumberMode === 'show';\n\n    /**\n     * HANDLERS\n     */\n    // Handlers for focus & blur on all fields. Can be renamed to onFieldFocus once the onFocusField is renamed in Field.tsx\n    const onFieldFocusAnalytics = (who: string, e: Event | CbObjOnFocus) => {\n        props.onFocus({ fieldType: who, event: e });\n    };\n    const onFieldBlurAnalytics = (who: string, e: Event | CbObjOnFocus) => {\n        props.onBlur({ fieldType: who, event: e });\n    };\n\n    // Make SecuredFields aware of the focus & blur handlers\n    const handleFocus = getFocusHandler(setFocusedElement, onFieldFocusAnalytics, onFieldBlurAnalytics);\n\n    const retrieveLayout = (): string[] => {\n        return getLayout({\n            props,\n            showKCP,\n            showBrazilianSSN,\n            ...(props.billingAddressRequired && {\n                countrySpecificSchemas: specifications.getAddressSchemaForCountry(billingAddress?.country),\n                billingAddressRequiredFields: props.billingAddressRequiredFields\n            })\n        });\n    };\n\n    /**\n     * re. Disabling arrow keys in iOS:\n     * Only by disabling all fields in the Card PM except for the active securedField input can we force the iOS soft keyboard arrow keys to disable\n     *\n     * NOTE: only called if ua.__IS_IOS = true && this.config.disableIOSArrowKeys = true (as referenced in CSF)\n     *\n     * @param obj - has fieldType prop saying whether this function is being called in response to an securedFields click ('encryptedCardNumber' etc)\n     * - in which case we should disable all non-SF fields\n     * or,\n     * due to an internal action ('webInternalElement') - in which case we can enable all non-SF fields\n     */\n    const handleTouchstartIOS = useCallback((obj: TouchStartEventObj) => {\n        const elementType = obj.fieldType !== 'webInternalElement' ? obj.fieldType : obj.name;\n        setIOSFocusedField(elementType);\n    }, []);\n\n    const handleAddress = getAddressHandler(setFormData, setFormValid, setFormErrors);\n\n    const doPanAutoJump = getAutoJumpHandler(isAutoJumping, sfp, retrieveLayout());\n\n    const handleSecuredFieldsChange = (sfState: SFPState, eventDetails?: OnChangeEventDetails): void => {\n        /**\n         * Handling auto complete value for holderName (but only if the component is using a holderName field)\n         */\n        if (sfState.autoCompleteName) {\n            if (!props.hasHolderName) return;\n            const holderNameValidationFn = getRuleByNameAndMode('holderName', 'blur');\n            const acHolderName = holderNameValidationFn(sfState.autoCompleteName) ? sfState.autoCompleteName : null;\n            if (acHolderName) {\n                setFormData('holderName', acHolderName);\n                setFormValid('holderName', true); // only if holderName is valid does this fny get called - so we know it's valid and w/o error\n                setFormErrors('holderName', null);\n            }\n            return;\n        }\n\n        /**\n         * Decide if we can shift focus to the expiryDate field.\n         *\n         * We can if... the config prop, autoFocus, is true AND we have a panLength value from binLookup\n         * AND we are responding to a handleOnFieldValid message about the PAN that says it is valid\n         */\n        if (\n            props.autoFocus &&\n            hasPanLengthRef.current > 0 &&\n            eventDetails?.event === 'handleOnFieldValid' &&\n            eventDetails?.fieldType === ENCRYPTED_CARD_NUMBER &&\n            sfState.valid.encryptedCardNumber\n        ) {\n            doPanAutoJump();\n        }\n\n        /**\n         * Process SFP state\n         */\n        setData({ ...data, ...sfState.data });\n        setErrors({ ...errors, ...sfState.errors });\n        setValid({ ...valid, ...sfState.valid });\n\n        setIsSfpValid(sfState.isSfpValid);\n\n        // Values relating to /binLookup response\n        setCvcPolicy(sfState.cvcPolicy);\n        setShowSocialSecurityNumber(sfState.showSocialSecurityNumber);\n        setExpiryDatePolicy(sfState.expiryDatePolicy);\n    };\n\n    // Farm the handlers for binLookup related functionality out to another 'extensions' file\n    const extensions = useMemo(\n        () =>\n            CIExtensions(\n                props,\n                { sfp },\n                {\n                    dualBrandSelectElements,\n                    setDualBrandSelectElements,\n                    setSelectedBrandValue,\n                    issuingCountryCode,\n                    setIssuingCountryCode\n                },\n                hasPanLengthRef\n            ),\n        [dualBrandSelectElements, issuingCountryCode]\n    );\n\n    /**\n     * EXPOSE METHODS expected by Card.tsx\n     */\n    cardInputRef.current.showValidation = () => {\n        // set flag\n        isValidating.current = true;\n\n        /**\n         * Clear errors prior to validating so that the screenreader will read them *all* again, and in the right order\n         * - only using aria-atomic on the error panel will read them in the wrong order\n         */\n        clearSRPanel?.(); // TODO - recheck if this is still true\n\n        // Validate SecuredFields\n        sfp.current.showValidation();\n\n        // Validate holderName & SSN & KCP (taxNumber) but *not* billingAddress\n        triggerValidation(['holderName', 'socialSecurityNumber', 'taxNumber']);\n\n        // Validate Address\n        if (billingAddressRef?.current) billingAddressRef.current.showValidation();\n    };\n\n    cardInputRef.current.processBinLookupResponse = (binLookupResponse: BinLookupResponse, isReset: boolean) => {\n        extensions.processBinLookup(binLookupResponse, isReset);\n    };\n\n    cardInputRef.current.setStatus = setStatus;\n\n    /**\n     * EFFECT HOOKS\n     */\n    useEffect(() => {\n        // componentDidMount - expose more methods expected by Card.tsx\n        cardInputRef.current.setFocusOn = sfp.current.setFocusOn;\n        cardInputRef.current.updateStyles = sfp.current.updateStyles;\n        cardInputRef.current.handleUnsupportedCard = sfp.current.handleUnsupportedCard;\n\n        // componentWillUnmount\n        return () => {\n            sfp.current.destroy();\n        };\n    }, []);\n\n    /**\n     * Handle form schema updates\n     */\n    useEffect(() => {\n        const newSchema = [\n            ...(props.hasHolderName ? ['holderName'] : []),\n            ...(showBrazilianSSN ? ['socialSecurityNumber'] : []),\n            ...(showKCP ? ['taxNumber'] : []),\n            ...(showBillingAddress ? ['billingAddress'] : [])\n        ];\n        setSchema(newSchema);\n    }, [props.hasHolderName, showBrazilianSSN, showKCP]);\n\n    /**\n     * Handle updates from useForm\n     */\n    useEffect(() => {\n        setData({ ...data, holderName: formData.holderName ?? '', taxNumber: formData.taxNumber });\n\n        setSocialSecurityNumber(formData.socialSecurityNumber);\n\n        if (showBillingAddress) setBillingAddress({ ...formData.billingAddress });\n\n        setValid({\n            ...valid,\n            holderName: props.holderNameRequired ? formValid.holderName : true,\n            // Setting value to false if it's falsy keeps in line with existing, expected behaviour\n            // - but there is an argument to allow 'undefined' as a value to indicate the non-presence of the field\n            socialSecurityNumber: formValid.socialSecurityNumber ? formValid.socialSecurityNumber : false,\n            taxNumber: formValid.taxNumber ? formValid.taxNumber : false,\n            billingAddress: formValid.billingAddress ? formValid.billingAddress : false\n        });\n\n        // Check if billingAddress errors object has any properties that aren't null or undefined\n        const addressHasErrors = formErrors.billingAddress\n            ? Object.entries(formErrors.billingAddress).reduce((acc, [, error]) => acc || error != null, false)\n            : false;\n\n        // Errors\n        setErrors({\n            ...errors,\n            holderName: props.holderNameRequired && !!formErrors.holderName ? formErrors.holderName : null,\n            socialSecurityNumber: showBrazilianSSN && !!formErrors.socialSecurityNumber ? formErrors.socialSecurityNumber : null,\n            taxNumber: showKCP && !!formErrors.taxNumber ? formErrors.taxNumber : null,\n            billingAddress: showBillingAddress && addressHasErrors ? formErrors.billingAddress : null\n        });\n    }, [formData, formValid, formErrors]);\n\n    // Use the custom hook to set (or clear) errors in the SRPanel\n    const {\n        sortedErrorList: currentErrorsSortedByLayout,\n        previousSortedErrors,\n        clearSRPanel\n    } = useSRPanelForCardInputErrors({\n        errors,\n        props,\n        isValidating,\n        retrieveLayout,\n        specifications,\n        billingAddress,\n        sfp\n    });\n\n    // Analytics: ValidationErrors\n    if (currentErrorsSortedByLayout) {\n        const newErrors = getArrayDifferences<SortedErrorObject, string>(currentErrorsSortedByLayout, previousSortedErrors, 'field');\n        newErrors?.forEach(errorItem => {\n            const aObj: FieldErrorAnalyticsObject = {\n                fieldType: errorItem.field,\n                errorCode: errorItem.errorCode\n            };\n\n            props.onValidationErrorAnalytics(aObj);\n        });\n    }\n\n    /**\n     * Main 'componentDidUpdate' handler\n     */\n    useEffect(() => {\n        const holderNameValid: boolean = valid.holderName;\n\n        const sfpValid: boolean = isSfpValid;\n        const addressValid: boolean = showBillingAddress ? valid.billingAddress : true;\n\n        const koreanAuthentication: boolean = showKCP ? !!valid.taxNumber && !!valid.encryptedPassword : true;\n\n        const socialSecurityNumberValid: boolean = showBrazilianSSN ? !!valid.socialSecurityNumber : true;\n\n        const isValid: boolean = sfpValid && holderNameValid && addressValid && koreanAuthentication && socialSecurityNumberValid;\n\n        const sfStateErrorsObj = sfp.current.mapErrorsToValidationRuleResult();\n        const mergedErrors = { ...errors, ...sfStateErrorsObj }; // maps sfErrors AND solves race condition problems for sfp from showValidation\n\n        props.onChange({\n            data,\n            valid,\n            errors: mergedErrors,\n            isValid,\n            billingAddress,\n            selectedBrandValue,\n            storePaymentMethod,\n            socialSecurityNumber,\n            installments\n        });\n    }, [data, valid, errors, selectedBrandValue, storePaymentMethod, installments]);\n\n    /**\n     * RENDER\n     */\n    const FieldToRender = props.storedPaymentMethodId ? StoredCardFieldsWrapper : CardFieldsWrapper;\n\n    return (\n        <Fragment>\n            <SecuredFieldsProvider\n                ref={sfp}\n                {...extractPropsForSFP(props)}\n                styles={{ ...props.styles }}\n                koreanAuthenticationRequired={props.configuration.koreanAuthenticationRequired}\n                hasKoreanFields={!!(props.configuration.koreanAuthenticationRequired && props.countryCode === 'kr')}\n                onChange={handleSecuredFieldsChange}\n                onBrand={props.onBrand}\n                onFocus={handleFocus}\n                type={props.brand}\n                disableIOSArrowKeys={props.disableIOSArrowKeys ? handleTouchstartIOS : null}\n                render={({ setRootNode, setFocusOn }, sfpState) => (\n                    <div\n                        ref={setRootNode}\n                        className={classNames({\n                            'adyen-checkout__card-input': true,\n                            'adyen-checkout-card-input__wrapper': true,\n                            [`adyen-checkout__card-input--${props.fundingSource ?? 'credit'}`]: true,\n                            'adyen-checkout__card-input--loading': status === 'loading'\n                        })}\n                        role={'form'}\n                    >\n                        <FormInstruction />\n\n                        <FieldToRender\n                            // Extract exact props that we need to pass down\n                            {...extractPropsForCardFields(props)}\n                            // Pass on vars created in CardInput:\n                            // Base (shared w. StoredCard)\n                            data={data}\n                            valid={valid}\n                            errors={errors}\n                            handleChangeFor={handleChangeFor}\n                            focusedElement={focusedElement}\n                            setFocusOn={setFocusOn}\n                            sfpState={sfpState}\n                            cvcPolicy={cvcPolicy}\n                            hasInstallments={hasInstallments}\n                            showAmountsInInstallments={showAmountsInInstallments}\n                            handleInstallments={setInstallments}\n                            // For Card\n                            brandsIcons={props.brandsIcons}\n                            formData={formData}\n                            formErrors={formErrors}\n                            formValid={formValid}\n                            expiryDatePolicy={expiryDatePolicy}\n                            dualBrandSelectElements={dualBrandSelectElements}\n                            extensions={extensions}\n                            selectedBrandValue={selectedBrandValue}\n                            // For KCP\n                            showKCP={showKCP}\n                            // For SSN\n                            showBrazilianSSN={showBrazilianSSN}\n                            socialSecurityNumber={socialSecurityNumber}\n                            // For Store details\n                            handleOnStoreDetails={setStorePaymentMethod}\n                            // For Address\n                            setAddressRef={setAddressRef}\n                            billingAddress={billingAddress}\n                            billingAddressValidationRules={partialAddressSchema && getPartialAddressValidationRules(partialAddressCountry.current)}\n                            partialAddressSchema={partialAddressSchema}\n                            handleAddress={handleAddress}\n                            onAddressLookup={props.onAddressLookup}\n                            onAddressSelected={props.onAddressSelected}\n                            addressSearchDebounceMs={props.addressSearchDebounceMs}\n                            //\n                            iOSFocusedField={iOSFocusedField}\n                            //\n                            onFieldFocusAnalytics={onFieldFocusAnalytics}\n                            onFieldBlurAnalytics={onFieldBlurAnalytics}\n                        />\n                    </div>\n                )}\n            />\n            {props.showPayButton &&\n                props.payButton({\n                    status,\n                    variant: props.isPayButtonPrimaryVariant ? 'primary' : 'secondary',\n                    icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`)\n                })}\n        </Fragment>\n    );\n};\n\nCardInput.defaultProps = defaultProps;\n\nexport default CardInput;\n"],"names":["CardInput","props","sfp","useRef","isValidating","getImage","useImage","billingAddressRef","setAddressRef","ref","current","cardInputRef","Object","keys","length","setComponentRef","hasPanLengthRef","isAutoJumping","specifications","useMemo","Specifications","status","setStatus","useState","errors","setErrors","valid","setValid","holderNameRequired","holderName","data","setData","hasHolderName","focusedElement","setFocusedElement","isSfpValid","setIsSfpValid","expiryDatePolicy","setExpiryDatePolicy","DATE_POLICY_REQUIRED","cvcPolicy","setCvcPolicy","CVC_POLICY_REQUIRED","issuingCountryCode","setIssuingCountryCode","dualBrandSelectElements","setDualBrandSelectElements","selectedBrandValue","setSelectedBrandValue","storedPaymentMethodId","brand","showBillingAddress","billingAddressMode","AddressModeOptions","none","billingAddressRequired","partialAddressSchema","handlePartialAddressMode","partialAddressCountry","billingAddress","country","storePaymentMethod","setStorePaymentMethod","setBillingAddress","showSocialSecurityNumber","setShowSocialSecurityNumber","socialSecurityNumber","setSocialSecurityNumber","installments","setInstallments","value","iOSFocusedField","setIOSFocusedField","handleChangeFor","triggerValidation","formData","formValid","formErrors","setSchema","setFormData","setFormValid","setFormErrors","useForm","schema","defaultData","formatters","cardInputFormatters","rules","cardInputValidationRules","hasInstallments","installmentOptions","fundingSource","showAmountsInInstallments","showInstallmentAmounts","isKorea","countryCode","showKCP","configuration","koreanAuthenticationRequired","showBrazilianSSN","socialSecurityNumberMode","onFieldFocusAnalytics","who","e","onFocus","fieldType","event","onFieldBlurAnalytics","onBlur","handleFocus","getFocusHandler","retrieveLayout","getLayout","countrySpecificSchemas","getAddressSchemaForCountry","billingAddressRequiredFields","handleTouchstartIOS","useCallback","obj","elementType","name","handleAddress","getAddressHandler","doPanAutoJump","getAutoJumpHandler","extensions","CIExtensions","showValidation","clearSRPanel","processBinLookupResponse","binLookupResponse","isReset","processBinLookup","useEffect","setFocusOn","updateStyles","handleUnsupportedCard","destroy","newSchema","taxNumber","addressHasErrors","entries","reduce","acc","error","sortedErrorList","currentErrorsSortedByLayout","previousSortedErrors","useSRPanelForCardInputErrors","newErrors","getArrayDifferences","forEach","errorItem","aObj","field","errorCode","onValidationErrorAnalytics","holderNameValid","sfpValid","addressValid","koreanAuthentication","encryptedPassword","socialSecurityNumberValid","isValid","sfStateErrorsObj","mapErrorsToValidationRuleResult","mergedErrors","onChange","FieldToRender","StoredCardFieldsWrapper","CardFieldsWrapper","h","Fragment","SecuredFieldsProvider","extractPropsForSFP","styles","hasKoreanFields","sfState","eventDetails","autoCompleteName","acHolderName","getRuleByNameAndMode","holderNameValidationFn","autoFocus","ENCRYPTED_CARD_NUMBER","encryptedCardNumber","onBrand","type","disableIOSArrowKeys","render","setRootNode","sfpState","div","className","classNames","role","FormInstruction","extractPropsForCardFields","handleInstallments","brandsIcons","handleOnStoreDetails","billingAddressValidationRules","getPartialAddressValidationRules","onAddressLookup","onAddressSelected","addressSearchDebounceMs","showPayButton","payButton","variant","isPayButtonPrimaryVariant","icon","imageFolder","PREFIX","defaultProps"],"mappings":"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"}

package/dist/es/components/Card/components/CardInput/components/CVC.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./CVCHint.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as r}from"../../../../../core/Context/CoreProvider.js";import{CVC_POLICY_HIDDEN as c,CVC_POLICY_OPTIONAL as i,ENCRYPTED_SECURITY_CODE as n,CVC_POLICY_REQUIRED as l}from"../../../../internal/SecuredFields/lib/constants.js";import s from"./DataSfSpan.js";import{alternativeLabelContent as d}from"./IframeLabelAlternative.js";function u(u){const{label:m,onFocusField:_=(()=>{}),error:f="",className:p="",classNameModifiers:y=[],focused:C,filled:h,isValid:x,frontCVC:F=!1,cvcPolicy:b=l,showContextualElement:k,contextualText:v}=u,{i18n:j}=r(),V=t(p,{"adyen-checkout__field__cvc":!0,"adyen-checkout__card__cvc__input--hidden":b===c,"adyen-checkout__field__cvc--optional":b===i}),N=t({"adyen-checkout__input":!0,"adyen-checkout__input--small":!0,"adyen-checkout__card__cvc__input":!0,"adyen-checkout__input--error":f,"adyen-checkout__input--focus":C,"adyen-checkout__input--valid":x}),T=b!==i?m:j.get("creditCard.securityCode.label.optional");return e(a,{label:T,focused:C,filled:h,classNameModifiers:[...y,"securityCode"],onFocusField:()=>_(n),className:V,errorMessage:f,isValid:x,dir:"ltr",name:n,i18n:j,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:d,showContextualElement:k,contextualText:v},e(s,{encryptedFieldType:n,className:N}),e(o,{frontCVC:F,fieldLabel:T}))}export{u as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import o from"./CVCHint.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as r}from"../../../../../core/Context/CoreProvider.js";import{CVC_POLICY_HIDDEN as i,CVC_POLICY_OPTIONAL as c,ENCRYPTED_SECURITY_CODE as l,CVC_POLICY_REQUIRED as n}from"../../../../internal/SecuredFields/lib/constants.js";import s from"./DataSfSpan.js";import{alternativeLabelContent as d}from"./FieldLabelAlternative.js";function u(u){const{label:_,onFocusField:m=()=>{},error:f="",className:p="",classNameModifiers:y=[],focused:C,filled:h,isValid:x,frontCVC:F=!1,cvcPolicy:b=n,showContextualElement:k,contextualText:v}=u,{i18n:j}=r(),V=t(p,{"adyen-checkout__field__cvc":!0,"adyen-checkout__card__cvc__input--hidden":b===i,"adyen-checkout__field__cvc--optional":b===c}),N=t({"adyen-checkout__input":!0,"adyen-checkout__input--small":!0,"adyen-checkout__card__cvc__input":!0,"adyen-checkout__input--error":f,"adyen-checkout__input--focus":C,"adyen-checkout__input--valid":x}),T=b!==c?_:j.get("creditCard.securityCode.label.optional");return e(a,{label:T,focused:C,filled:h,classNameModifiers:[...y,"securityCode"],onFocusField:()=>m(l),className:V,errorMessage:f,isValid:x,dir:"ltr",name:l,i18n:j,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:d,showContextualElement:k,contextualText:v},e(s,{encryptedFieldType:l,className:N}),e(o,{frontCVC:F,fieldLabel:T}))}export{u as default};
 //# sourceMappingURL=CVC.js.map

package/dist/es/components/Card/components/CardInput/components/CVC.js.map

@@ -1 +1 @@
-{"version":3,"file":"CVC.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CVC.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport CVCHint from './CVCHint';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CVCProps } from './types';\nimport {\n    CVC_POLICY_HIDDEN,\n    CVC_POLICY_OPTIONAL,\n    CVC_POLICY_REQUIRED,\n    ENCRYPTED_SECURITY_CODE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport DataSfSpan from './DataSfSpan';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function CVC(props: CVCProps) {\n    const {\n        label,\n        onFocusField = () => {},\n        error = '',\n        className = '',\n        classNameModifiers = [],\n        focused,\n        filled,\n        isValid,\n        frontCVC = false,\n        cvcPolicy = CVC_POLICY_REQUIRED,\n        showContextualElement,\n        contextualText\n    } = props;\n    const { i18n } = useCoreContext();\n\n    const fieldClassnames = classNames(className, {\n        'adyen-checkout__field__cvc': true,\n        'adyen-checkout__card__cvc__input--hidden': cvcPolicy === CVC_POLICY_HIDDEN,\n        'adyen-checkout__field__cvc--optional': cvcPolicy === CVC_POLICY_OPTIONAL\n    });\n\n    const cvcClassnames = classNames({\n        'adyen-checkout__input': true,\n        'adyen-checkout__input--small': true,\n        'adyen-checkout__card__cvc__input': true,\n        'adyen-checkout__input--error': error,\n        'adyen-checkout__input--focus': focused,\n        'adyen-checkout__input--valid': isValid\n    });\n\n    const fieldLabel = cvcPolicy !== CVC_POLICY_OPTIONAL ? label : i18n.get('creditCard.securityCode.label.optional');\n\n    return (\n        <Field\n            label={fieldLabel}\n            focused={focused}\n            filled={filled}\n            classNameModifiers={[...classNameModifiers, 'securityCode']}\n            onFocusField={() => onFocusField(ENCRYPTED_SECURITY_CODE)}\n            className={fieldClassnames}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={ENCRYPTED_SECURITY_CODE}\n            i18n={i18n}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n            showContextualElement={showContextualElement}\n            contextualText={contextualText}\n        >\n            <DataSfSpan encryptedFieldType={ENCRYPTED_SECURITY_CODE} className={cvcClassnames} />\n\n            <CVCHint frontCVC={frontCVC} fieldLabel={fieldLabel} />\n        </Field>\n    );\n}\n"],"names":["CVC","props","label","onFocusField","error","className","classNameModifiers","focused","filled","isValid","frontCVC","cvcPolicy","CVC_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","fieldClassnames","classNames","CVC_POLICY_HIDDEN","CVC_POLICY_OPTIONAL","cvcClassnames","fieldLabel","get","h","Field","ENCRYPTED_SECURITY_CODE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","CVCHint"],"mappings":"4jBAee,SAASA,EAAIC,GACxB,MAAMC,MACFA,EAAKC,aACLA,EAAe,SAAQC,MACvBA,EAAQ,GAAEC,UACVA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,QACvBA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,SACPA,GAAW,EAAKC,UAChBA,EAAYC,EAAmBC,sBAC/BA,EAAqBC,eACrBA,GACAb,GACEc,KAAEA,GAASC,IAEXC,EAAkBC,EAAWb,EAAW,CAC1C,8BAA8B,EAC9B,2CAA4CM,IAAcQ,EAC1D,uCAAwCR,IAAcS,IAGpDC,EAAgBH,EAAW,CAC7B,yBAAyB,EACzB,gCAAgC,EAChC,oCAAoC,EACpC,+BAAgCd,EAChC,+BAAgCG,EAChC,+BAAgCE,IAG9Ba,EAAaX,IAAcS,EAAsBlB,EAAQa,EAAKQ,IAAI,0CAExE,OACIC,EAACC,EAAAA,CACGvB,MAAOoB,EACPf,QAASA,EACTC,OAAQA,EACRF,mBAAoB,IAAIA,EAAoB,gBAC5CH,aAAc,IAAMA,EAAauB,GACjCrB,UAAWY,EACXU,aAAcvB,EACdK,QAASA,EACTmB,IAAK,MACLC,KAAMH,EACNX,KAAMA,EACNe,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BpB,sBAAuBA,EACvBC,eAAgBA,GAEhBU,EAACU,EAAAA,CAAWC,mBAAoBT,EAAyBrB,UAAWgB,IAEpEG,EAACY,EAAAA,CAAQ1B,SAAUA,EAAUY,WAAYA,IAGrD"}
+{"version":3,"file":"CVC.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CVC.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport CVCHint from './CVCHint';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CVCProps } from './types';\nimport {\n    CVC_POLICY_HIDDEN,\n    CVC_POLICY_OPTIONAL,\n    CVC_POLICY_REQUIRED,\n    ENCRYPTED_SECURITY_CODE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport DataSfSpan from './DataSfSpan';\nimport { alternativeLabelContent } from './FieldLabelAlternative';\n\nexport default function CVC(props: CVCProps) {\n    const {\n        label,\n        onFocusField = () => {},\n        error = '',\n        className = '',\n        classNameModifiers = [],\n        focused,\n        filled,\n        isValid,\n        frontCVC = false,\n        cvcPolicy = CVC_POLICY_REQUIRED,\n        showContextualElement,\n        contextualText\n    } = props;\n    const { i18n } = useCoreContext();\n\n    const fieldClassnames = classNames(className, {\n        'adyen-checkout__field__cvc': true,\n        'adyen-checkout__card__cvc__input--hidden': cvcPolicy === CVC_POLICY_HIDDEN,\n        'adyen-checkout__field__cvc--optional': cvcPolicy === CVC_POLICY_OPTIONAL\n    });\n\n    const cvcClassnames = classNames({\n        'adyen-checkout__input': true,\n        'adyen-checkout__input--small': true,\n        'adyen-checkout__card__cvc__input': true,\n        'adyen-checkout__input--error': error,\n        'adyen-checkout__input--focus': focused,\n        'adyen-checkout__input--valid': isValid\n    });\n\n    const fieldLabel = cvcPolicy !== CVC_POLICY_OPTIONAL ? label : i18n.get('creditCard.securityCode.label.optional');\n\n    return (\n        <Field\n            label={fieldLabel}\n            focused={focused}\n            filled={filled}\n            classNameModifiers={[...classNameModifiers, 'securityCode']}\n            onFocusField={() => onFocusField(ENCRYPTED_SECURITY_CODE)}\n            className={fieldClassnames}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={ENCRYPTED_SECURITY_CODE}\n            i18n={i18n}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n            showContextualElement={showContextualElement}\n            contextualText={contextualText}\n        >\n            <DataSfSpan encryptedFieldType={ENCRYPTED_SECURITY_CODE} className={cvcClassnames} />\n\n            <CVCHint frontCVC={frontCVC} fieldLabel={fieldLabel} />\n        </Field>\n    );\n}\n"],"names":["CVC","props","label","onFocusField","error","className","classNameModifiers","focused","filled","isValid","frontCVC","cvcPolicy","CVC_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","fieldClassnames","classNames","CVC_POLICY_HIDDEN","CVC_POLICY_OPTIONAL","cvcClassnames","fieldLabel","get","h","Field","ENCRYPTED_SECURITY_CODE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","CVCHint"],"mappings":"2jBAee,SAASA,EAAIC,GACxB,MAAMC,MACFA,EAAKC,aACLA,EAAe,OAAQC,MACvBA,EAAQ,GAAEC,UACVA,EAAY,GAAEC,mBACdA,EAAqB,GAAEC,QACvBA,EAAOC,OACPA,EAAMC,QACNA,EAAOC,SACPA,GAAW,EAAKC,UAChBA,EAAYC,EAAmBC,sBAC/BA,EAAqBC,eACrBA,GACAb,GACEc,KAAEA,GAASC,IAEXC,EAAkBC,EAAWb,EAAW,CAC1C,8BAA8B,EAC9B,2CAA4CM,IAAcQ,EAC1D,uCAAwCR,IAAcS,IAGpDC,EAAgBH,EAAW,CAC7B,yBAAyB,EACzB,gCAAgC,EAChC,oCAAoC,EACpC,+BAAgCd,EAChC,+BAAgCG,EAChC,+BAAgCE,IAG9Ba,EAAaX,IAAcS,EAAsBlB,EAAQa,EAAKQ,IAAI,0CAExE,OACIC,EAACC,EAAAA,CACGvB,MAAOoB,EACPf,QAASA,EACTC,OAAQA,EACRF,mBAAoB,IAAIA,EAAoB,gBAC5CH,aAAc,IAAMA,EAAauB,GACjCrB,UAAWY,EACXU,aAAcvB,EACdK,QAASA,EACTmB,IAAK,MACLC,KAAMH,EACNX,KAAMA,EACNe,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BpB,sBAAuBA,EACvBC,eAAgBA,GAEhBU,EAACU,EAAAA,CAAWC,mBAAoBT,EAAyBrB,UAAWgB,IAEpEG,EAACY,EAAAA,CAAQ1B,SAAUA,EAAUY,WAAYA,IAGrD"}

package/dist/es/components/Card/components/CardInput/components/CVCHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"CVCHint.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CVCHint.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { CVCHintProps } from './types';\n\nexport default function CVCHint({ frontCVC = false, fieldLabel }: CVCHintProps) {\n    const hintClassnames = classNames({\n        'adyen-checkout__card__cvc__hint__wrapper': true,\n        'adyen-checkout__field__cvc--front-hint': !!frontCVC,\n        'adyen-checkout__field__cvc--back-hint': !frontCVC\n    });\n\n    /* eslint-disable max-len */\n    return (\n        <span className={hintClassnames}>\n            <svg\n                className={'adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--front'}\n                width=\"27\"\n                height=\"18\"\n                viewBox=\"0 0 27 18\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden={!frontCVC}\n                aria-describedby={'adyen-checkout__cvc__front-hint-img'}\n                role={'img'}\n            >\n                <title id={'adyen-checkout__cvc__front-hint-img'}>{fieldLabel}</title>\n                <path\n                    d=\"M0 3C0 1.34315 1.34315 0 3 0H24C25.6569 0 27 1.34315 27 3V15C27 16.6569 25.6569 18 24 18H3C1.34315 18 0 16.6569 0 15V3Z\"\n                    fill=\"#E6E9EB\"\n                />\n                <rect x=\"4\" y=\"12\" width=\"19\" height=\"2\" fill=\"#B9C4C9\" />\n                <rect x=\"4\" y=\"4\" width=\"4\" height=\"4\" rx=\"1\" fill=\"white\" />\n                <rect className={'adyen-checkout__card__cvc__hint__location'} x=\"16.5\" y=\"4.5\" width=\"7\" height=\"5\" rx=\"2.5\" stroke=\"#C12424\" />\n            </svg>\n\n            <svg\n                className={'adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--back'}\n                width=\"27\"\n                height=\"18\"\n                viewBox=\"0 0 27 18\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden={!!frontCVC}\n                aria-describedby={'adyen-checkout__cvc__back-hint-img'}\n                role={'img'}\n            >\n                <title id={'adyen-checkout__cvc__back-hint-img'}>{fieldLabel}</title>\n                <path\n                    d=\"M27 4.00001V3.37501C27 2.4799 26.6444 1.62146 26.0115 0.988518C25.3786 0.355581 24.5201 0 23.625 0H3.375C2.47989 0 1.62145 0.355581 0.988514 0.988518C0.355579 1.62146 0 2.4799 0 3.37501V4.00001H27Z\"\n                    fill=\"#E6E9EB\"\n                />\n                <path\n                    d=\"M0 6.99994V14.6666C0 15.5507 0.355579 16.3985 0.988514 17.0237C1.62145 17.6488 2.47989 18 3.375 18H23.625C24.5201 18 25.3786 17.6488 26.0115 17.0237C26.6444 16.3985 27 15.5507 27 14.6666V6.99994H0Z\"\n                    fill=\"#E6E9EB\"\n                />\n                <rect y=\"4.00012\" width=\"27\" height=\"3.00001\" fill=\"#687282\" />\n                <path\n                    d=\"M4 11C4 10.4477 4.44772 10 5 10H21C22.1046 10 23 10.8954 23 12C23 13.1046 22.1046 14 21 14H5C4.44771 14 4 13.5523 4 13V11Z\"\n                    fill=\"white\"\n                />\n                <rect className={'adyen-checkout__card__cvc__hint__location'} x=\"16.5\" y=\"9.5\" width=\"7\" height=\"5\" rx=\"2.5\" stroke=\"#C12424\" />\n            </svg>\n        </span>\n    );\n    /* eslint-enable max-len */\n}\n"],"names":["CVCHint","frontCVC","fieldLabel","hintClassnames","classNames","h","span","className","svg","width","height","viewBox","fill","xmlns","aria-hidden","aria-describedby","role","title","id","path","d","rect","x","y","rx","stroke"],"mappings":"yIAIe,SAASA,GAAQC,SAAEA,GAAW,EAAKC,WAAEA,IAChD,MAAMC,EAAiBC,EAAW,CAC9B,4CAA4C,EAC5C,2CAA4CH,EAC5C,yCAA0CA,IAI9C,OACII,EAACC,OAAAA,CAAKC,UAAWJ,GACbE,EAACG,MAAAA,CACGD,UAAW,yEACXE,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,eAAcb,EACdc,mBAAkB,sCAClBC,KAAM,OAENX,EAACY,QAAAA,CAAMC,GAAI,uCAAwChB,GACnDG,EAACc,OAAAA,CACGC,EAAE,0HACFR,KAAK,YAETP,EAACgB,OAAAA,CAAKC,EAAE,IAAIC,EAAE,KAAKd,MAAM,KAAKC,OAAO,IAAIE,KAAK,YAC9CP,EAACgB,OAAAA,CAAKC,EAAE,IAAIC,EAAE,IAAId,MAAM,IAAIC,OAAO,IAAIc,GAAG,IAAIZ,KAAK,UACnDP,EAACgB,OAAAA,CAAKd,UAAW,4CAA6Ce,EAAE,OAAOC,EAAE,MAAMd,MAAM,IAAIC,OAAO,IAAIc,GAAG,MAAMC,OAAO,aAGxHpB,EAACG,MAAAA,CACGD,UAAW,wEACXE,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,gBAAeb,EACfc,mBAAkB,qCAClBC,KAAM,OAENX,EAACY,QAAAA,CAAMC,GAAI,sCAAuChB,GAClDG,EAACc,OAAAA,CACGC,EAAE,wMACFR,KAAK,YAETP,EAACc,OAAAA,CACGC,EAAE,wMACFR,KAAK,YAETP,EAACgB,OAAAA,CAAKE,EAAE,UAAUd,MAAM,KAAKC,OAAO,UAAUE,KAAK,YACnDP,EAACc,OAAAA,CACGC,EAAE,6HACFR,KAAK,UAETP,EAACgB,OAAAA,CAAKd,UAAW,4CAA6Ce,EAAE,OAAOC,EAAE,MAAMd,MAAM,IAAIC,OAAO,IAAIc,GAAG,MAAMC,OAAO,aAIhI"}
+{"version":3,"file":"CVCHint.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CVCHint.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport { CVCHintProps } from './types';\n\nexport default function CVCHint({ frontCVC = false, fieldLabel }: CVCHintProps) {\n    const hintClassnames = classNames({\n        'adyen-checkout__card__cvc__hint__wrapper': true,\n        'adyen-checkout__field__cvc--front-hint': !!frontCVC,\n        'adyen-checkout__field__cvc--back-hint': !frontCVC\n    });\n\n     \n    return (\n        <span className={hintClassnames}>\n            <svg\n                className={'adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--front'}\n                width=\"27\"\n                height=\"18\"\n                viewBox=\"0 0 27 18\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden={!frontCVC}\n                aria-describedby={'adyen-checkout__cvc__front-hint-img'}\n                role={'img'}\n            >\n                <title id={'adyen-checkout__cvc__front-hint-img'}>{fieldLabel}</title>\n                <path\n                    d=\"M0 3C0 1.34315 1.34315 0 3 0H24C25.6569 0 27 1.34315 27 3V15C27 16.6569 25.6569 18 24 18H3C1.34315 18 0 16.6569 0 15V3Z\"\n                    fill=\"#E6E9EB\"\n                />\n                <rect x=\"4\" y=\"12\" width=\"19\" height=\"2\" fill=\"#B9C4C9\" />\n                <rect x=\"4\" y=\"4\" width=\"4\" height=\"4\" rx=\"1\" fill=\"white\" />\n                <rect className={'adyen-checkout__card__cvc__hint__location'} x=\"16.5\" y=\"4.5\" width=\"7\" height=\"5\" rx=\"2.5\" stroke=\"#C12424\" />\n            </svg>\n\n            <svg\n                className={'adyen-checkout__card__cvc__hint adyen-checkout__card__cvc__hint--back'}\n                width=\"27\"\n                height=\"18\"\n                viewBox=\"0 0 27 18\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden={!!frontCVC}\n                aria-describedby={'adyen-checkout__cvc__back-hint-img'}\n                role={'img'}\n            >\n                <title id={'adyen-checkout__cvc__back-hint-img'}>{fieldLabel}</title>\n                <path\n                    d=\"M27 4.00001V3.37501C27 2.4799 26.6444 1.62146 26.0115 0.988518C25.3786 0.355581 24.5201 0 23.625 0H3.375C2.47989 0 1.62145 0.355581 0.988514 0.988518C0.355579 1.62146 0 2.4799 0 3.37501V4.00001H27Z\"\n                    fill=\"#E6E9EB\"\n                />\n                <path\n                    d=\"M0 6.99994V14.6666C0 15.5507 0.355579 16.3985 0.988514 17.0237C1.62145 17.6488 2.47989 18 3.375 18H23.625C24.5201 18 25.3786 17.6488 26.0115 17.0237C26.6444 16.3985 27 15.5507 27 14.6666V6.99994H0Z\"\n                    fill=\"#E6E9EB\"\n                />\n                <rect y=\"4.00012\" width=\"27\" height=\"3.00001\" fill=\"#687282\" />\n                <path\n                    d=\"M4 11C4 10.4477 4.44772 10 5 10H21C22.1046 10 23 10.8954 23 12C23 13.1046 22.1046 14 21 14H5C4.44771 14 4 13.5523 4 13V11Z\"\n                    fill=\"white\"\n                />\n                <rect className={'adyen-checkout__card__cvc__hint__location'} x=\"16.5\" y=\"9.5\" width=\"7\" height=\"5\" rx=\"2.5\" stroke=\"#C12424\" />\n            </svg>\n        </span>\n    );\n     \n}\n"],"names":["CVCHint","frontCVC","fieldLabel","hintClassnames","classNames","h","span","className","svg","width","height","viewBox","fill","xmlns","aria-hidden","aria-describedby","role","title","id","path","d","rect","x","y","rx","stroke"],"mappings":"yIAIe,SAASA,GAAQC,SAAEA,GAAW,EAAKC,WAAEA,IAChD,MAAMC,EAAiBC,EAAW,CAC9B,4CAA4C,EAC5C,2CAA4CH,EAC5C,yCAA0CA,IAI9C,OACII,EAACC,OAAAA,CAAKC,UAAWJ,GACbE,EAACG,MAAAA,CACGD,UAAW,yEACXE,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,eAAcb,EACdc,mBAAkB,sCAClBC,KAAM,OAENX,EAACY,QAAAA,CAAMC,GAAI,uCAAwChB,GACnDG,EAACc,OAAAA,CACGC,EAAE,0HACFR,KAAK,YAETP,EAACgB,OAAAA,CAAKC,EAAE,IAAIC,EAAE,KAAKd,MAAM,KAAKC,OAAO,IAAIE,KAAK,YAC9CP,EAACgB,OAAAA,CAAKC,EAAE,IAAIC,EAAE,IAAId,MAAM,IAAIC,OAAO,IAAIc,GAAG,IAAIZ,KAAK,UACnDP,EAACgB,OAAAA,CAAKd,UAAW,4CAA6Ce,EAAE,OAAOC,EAAE,MAAMd,MAAM,IAAIC,OAAO,IAAIc,GAAG,MAAMC,OAAO,aAGxHpB,EAACG,MAAAA,CACGD,UAAW,wEACXE,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BACNC,gBAAeb,EACfc,mBAAkB,qCAClBC,KAAM,OAENX,EAACY,QAAAA,CAAMC,GAAI,sCAAuChB,GAClDG,EAACc,OAAAA,CACGC,EAAE,wMACFR,KAAK,YAETP,EAACc,OAAAA,CACGC,EAAE,wMACFR,KAAK,YAETP,EAACgB,OAAAA,CAAKE,EAAE,UAAUd,MAAM,KAAKC,OAAO,UAAUE,KAAK,YACnDP,EAACc,OAAAA,CACGC,EAAE,6HACFR,KAAK,UAETP,EAACgB,OAAAA,CAAKd,UAAW,4CAA6Ce,EAAE,OAAOC,EAAE,MAAMd,MAAM,IAAIC,OAAO,IAAIc,GAAG,MAAMC,OAAO,aAKpI"}

package/dist/es/components/Card/components/CardInput/components/CardNumber.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../external/classnames/index.js";import a from"./BrandIcon.js";import r from"./DualBrandingIcon/DualBrandingIcon.js";import d from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import i from"./DataSfSpan.js";import{ENCRYPTED_CARD_NUMBER as t}from"../../../../internal/SecuredFields/lib/constants.js";import{alternativeLabelContent as c}from"./IframeLabelAlternative.js";function l(l){const{i18n:s}=o(),{error:u="",isValid:_=!1,onFocusField:m=(()=>{}),dualBrandingElements:f,dualBrandingChangeHandler:p,dualBrandingSelected:b}=l;return e(d,{label:l.label,focused:l.focused,filled:l.filled,classNameModifiers:["cardNumber"],onFocusField:()=>m(t),errorMessage:u,isValid:_,dir:"ltr",name:t,showValidIcon:!1,i18n:s,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:c},e(i,{encryptedFieldType:t,className:n({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__card__cardNumber__input":!0,"adyen-checkout__input--error":u,"adyen-checkout__input--focus":l.focused,"adyen-checkout__input--valid":_,"adyen-checkout__card__cardNumber__input--noBrand":!l.showBrandIcon})}),l.showBrandIcon&&!f&&e(a,{brandsConfiguration:l.brandsConfiguration,brand:l.brand}),f&&!u&&e("div",{className:n(["adyen-checkout__card__dual-branding__buttons",{"adyen-checkout__card__dual-branding__buttons--active":_}])},f.map((n=>e(r,{key:n.id,brand:n.id,brandsConfiguration:l.brandsConfiguration,onClick:p,dataValue:n.id,notSelected:""!==b&&b!==n.id})))))}export{l as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import n from"../../../../../external/classnames/index.js";import a from"./BrandIcon.js";import r from"./DualBrandingIcon/DualBrandingIcon.js";import d from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import i from"./DataSfSpan.js";import{ENCRYPTED_CARD_NUMBER as t}from"../../../../internal/SecuredFields/lib/constants.js";import{alternativeLabelContent as c}from"./FieldLabelAlternative.js";function l(l){const{i18n:s}=o(),{error:u="",isValid:_=!1,onFocusField:m=()=>{},dualBrandingElements:f,dualBrandingChangeHandler:p,dualBrandingSelected:b}=l;return e(d,{label:l.label,focused:l.focused,filled:l.filled,classNameModifiers:["cardNumber"],onFocusField:()=>m(t),errorMessage:u,isValid:_,dir:"ltr",name:t,showValidIcon:!1,i18n:s,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:c},e(i,{encryptedFieldType:t,className:n({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__card__cardNumber__input":!0,"adyen-checkout__input--error":u,"adyen-checkout__input--focus":l.focused,"adyen-checkout__input--valid":_,"adyen-checkout__card__cardNumber__input--noBrand":!l.showBrandIcon})}),l.showBrandIcon&&!f&&e(a,{brandsConfiguration:l.brandsConfiguration,brand:l.brand}),f&&!u&&e("div",{className:n(["adyen-checkout__card__dual-branding__buttons",{"adyen-checkout__card__dual-branding__buttons--active":_}])},f.map((n=>e(r,{key:n.id,brand:n.id,brandsConfiguration:l.brandsConfiguration,onClick:p,dataValue:n.id,notSelected:""!==b&&b!==n.id})))))}export{l as default};
 //# sourceMappingURL=CardNumber.js.map

package/dist/es/components/Card/components/CardInput/components/CardNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardNumber.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardNumber.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport BrandIcon from './BrandIcon';\nimport DualBrandingIcon from './DualBrandingIcon/DualBrandingIcon';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CardNumberProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport { ENCRYPTED_CARD_NUMBER } from '../../../../internal/SecuredFields/lib/constants';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function CardNumber(props: CardNumberProps) {\n    const { i18n } = useCoreContext();\n    const { error = '', isValid = false, onFocusField = () => {}, dualBrandingElements, dualBrandingChangeHandler, dualBrandingSelected } = props;\n\n    return (\n        <Field\n            label={props.label}\n            focused={props.focused}\n            filled={props.filled}\n            classNameModifiers={['cardNumber']}\n            onFocusField={() => onFocusField(ENCRYPTED_CARD_NUMBER)}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={ENCRYPTED_CARD_NUMBER}\n            showValidIcon={false}\n            i18n={i18n}\n            contextVisibleToScreenReader={false} // securedFields have their own, internal, aria-describedby element\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n        >\n            <DataSfSpan\n                encryptedFieldType={ENCRYPTED_CARD_NUMBER}\n                className={classNames({\n                    'adyen-checkout__input': true,\n                    'adyen-checkout__input--large': true,\n                    'adyen-checkout__card__cardNumber__input': true,\n                    'adyen-checkout__input--error': error,\n                    'adyen-checkout__input--focus': props.focused,\n                    'adyen-checkout__input--valid': isValid,\n                    'adyen-checkout__card__cardNumber__input--noBrand': !props.showBrandIcon\n                })}\n            ></DataSfSpan>\n\n            {props.showBrandIcon && !dualBrandingElements && <BrandIcon brandsConfiguration={props.brandsConfiguration} brand={props.brand} />}\n\n            {dualBrandingElements && !error && (\n                <div\n                    className={classNames([\n                        'adyen-checkout__card__dual-branding__buttons',\n                        { 'adyen-checkout__card__dual-branding__buttons--active': isValid }\n                    ])}\n                >\n                    {dualBrandingElements.map(element => (\n                        <DualBrandingIcon\n                            key={element.id}\n                            brand={element.id}\n                            brandsConfiguration={props.brandsConfiguration}\n                            onClick={dualBrandingChangeHandler}\n                            dataValue={element.id}\n                            notSelected={dualBrandingSelected !== '' && dualBrandingSelected !== element.id}\n                        />\n                    ))}\n                </div>\n            )}\n        </Field>\n    );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","dualBrandingSelected","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brandsConfiguration","brand","div","map","element","DualBrandingIcon","key","id","onClick","dataValue","notSelected"],"mappings":"yiBAWe,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MAAEA,EAAQ,GAAEC,QAAEA,GAAU,EAAKC,aAAEA,EAAe,SAAQC,qBAAEA,EAAoBC,0BAAEA,EAAyBC,qBAAEA,GAAyBR,EAExI,OACIS,EAACC,EAAAA,CACGC,MAAOX,EAAMW,MACbC,QAASZ,EAAMY,QACfC,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,cACrBT,aAAc,IAAMA,EAAaU,GACjCC,aAAcb,EACdC,QAASA,EACTa,IAAK,MACLC,KAAMH,EACNI,eAAe,EACflB,KAAMA,EACNmB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,GAE1Bd,EAACe,EAAAA,CACGC,mBAAoBV,EACpBW,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgCxB,EAChC,+BAAgCH,EAAMY,QACtC,+BAAgCR,EAChC,oDAAqDJ,EAAM4B,kBAIlE5B,EAAM4B,gBAAkBtB,GAAwBG,EAACoB,EAAAA,CAAUC,oBAAqB9B,EAAM8B,oBAAqBC,MAAO/B,EAAM+B,QAExHzB,IAAyBH,GACtBM,EAACuB,MAAAA,CACGN,UAAWC,EAAW,CAClB,+CACA,CAAE,uDAAwDvB,MAG7DE,EAAqB2B,KAAIC,GACtBzB,EAAC0B,EAAAA,CACGC,IAAKF,EAAQG,GACbN,MAAOG,EAAQG,GACfP,oBAAqB9B,EAAM8B,oBAC3BQ,QAAS/B,EACTgC,UAAWL,EAAQG,GACnBG,YAAsC,KAAzBhC,GAA+BA,IAAyB0B,EAAQG,QAOzG"}
+{"version":3,"file":"CardNumber.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/CardNumber.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport BrandIcon from './BrandIcon';\nimport DualBrandingIcon from './DualBrandingIcon/DualBrandingIcon';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { CardNumberProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport { ENCRYPTED_CARD_NUMBER } from '../../../../internal/SecuredFields/lib/constants';\nimport { alternativeLabelContent } from './FieldLabelAlternative';\n\nexport default function CardNumber(props: CardNumberProps) {\n    const { i18n } = useCoreContext();\n    const { error = '', isValid = false, onFocusField = () => {}, dualBrandingElements, dualBrandingChangeHandler, dualBrandingSelected } = props;\n\n    return (\n        <Field\n            label={props.label}\n            focused={props.focused}\n            filled={props.filled}\n            classNameModifiers={['cardNumber']}\n            onFocusField={() => onFocusField(ENCRYPTED_CARD_NUMBER)}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={ENCRYPTED_CARD_NUMBER}\n            showValidIcon={false}\n            i18n={i18n}\n            contextVisibleToScreenReader={false} // securedFields have their own, internal, aria-describedby element\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n        >\n            <DataSfSpan\n                encryptedFieldType={ENCRYPTED_CARD_NUMBER}\n                className={classNames({\n                    'adyen-checkout__input': true,\n                    'adyen-checkout__input--large': true,\n                    'adyen-checkout__card__cardNumber__input': true,\n                    'adyen-checkout__input--error': error,\n                    'adyen-checkout__input--focus': props.focused,\n                    'adyen-checkout__input--valid': isValid,\n                    'adyen-checkout__card__cardNumber__input--noBrand': !props.showBrandIcon\n                })}\n            ></DataSfSpan>\n\n            {props.showBrandIcon && !dualBrandingElements && <BrandIcon brandsConfiguration={props.brandsConfiguration} brand={props.brand} />}\n\n            {dualBrandingElements && !error && (\n                <div\n                    className={classNames([\n                        'adyen-checkout__card__dual-branding__buttons',\n                        { 'adyen-checkout__card__dual-branding__buttons--active': isValid }\n                    ])}\n                >\n                    {dualBrandingElements.map(element => (\n                        <DualBrandingIcon\n                            key={element.id}\n                            brand={element.id}\n                            brandsConfiguration={props.brandsConfiguration}\n                            onClick={dualBrandingChangeHandler}\n                            dataValue={element.id}\n                            notSelected={dualBrandingSelected !== '' && dualBrandingSelected !== element.id}\n                        />\n                    ))}\n                </div>\n            )}\n        </Field>\n    );\n}\n"],"names":["CardNumber","props","i18n","useCoreContext","error","isValid","onFocusField","dualBrandingElements","dualBrandingChangeHandler","dualBrandingSelected","h","Field","label","focused","filled","classNameModifiers","ENCRYPTED_CARD_NUMBER","errorMessage","dir","name","showValidIcon","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","className","classNames","showBrandIcon","BrandIcon","brandsConfiguration","brand","div","map","element","DualBrandingIcon","key","id","onClick","dataValue","notSelected"],"mappings":"wiBAWe,SAASA,EAAWC,GAC/B,MAAMC,KAAEA,GAASC,KACXC,MAAEA,EAAQ,GAAEC,QAAEA,GAAU,EAAKC,aAAEA,EAAe,OAAQC,qBAAEA,EAAoBC,0BAAEA,EAAyBC,qBAAEA,GAAyBR,EAExI,OACIS,EAACC,EAAAA,CACGC,MAAOX,EAAMW,MACbC,QAASZ,EAAMY,QACfC,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,cACrBT,aAAc,IAAMA,EAAaU,GACjCC,aAAcb,EACdC,QAASA,EACTa,IAAK,MACLC,KAAMH,EACNI,eAAe,EACflB,KAAMA,EACNmB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,GAE1Bd,EAACe,EAAAA,CACGC,mBAAoBV,EACpBW,UAAWC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,2CAA2C,EAC3C,+BAAgCxB,EAChC,+BAAgCH,EAAMY,QACtC,+BAAgCR,EAChC,oDAAqDJ,EAAM4B,kBAIlE5B,EAAM4B,gBAAkBtB,GAAwBG,EAACoB,EAAAA,CAAUC,oBAAqB9B,EAAM8B,oBAAqBC,MAAO/B,EAAM+B,QAExHzB,IAAyBH,GACtBM,EAACuB,MAAAA,CACGN,UAAWC,EAAW,CAClB,+CACA,CAAE,uDAAwDvB,MAG7DE,EAAqB2B,KAAIC,GACtBzB,EAAC0B,EAAAA,CACGC,IAAKF,EAAQG,GACbN,MAAOG,EAAQG,GACfP,oBAAqB9B,EAAM8B,oBAC3BQ,QAAS/B,EACTgC,UAAWL,EAAQG,GACnBG,YAAsC,KAAzBhC,GAA+BA,IAAyB0B,EAAQG,QAOzG"}

package/dist/es/components/Card/components/CardInput/components/DualBrandingIcon/DualBrandingIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualBrandingIcon.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/DualBrandingIcon/DualBrandingIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getCardImageUrl, getFullBrandName } from '../../utils';\nimport { DualBrandingIconProps } from '../types';\nimport './DualBrandingIcon.scss';\nimport useImage from '../../../../../../core/Context/useImage';\n\nconst DualBrandingIcon = ({ brand, onClick, dataValue, notSelected, brandsConfiguration = {} }: DualBrandingIconProps) => {\n    const getImage = useImage();\n    const imageName = brand === 'card' ? 'nocard' : brand;\n    const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n    const handleError = e => {\n        e.target.style.cssText = 'display: none';\n    };\n\n    return (\n        <img\n            className={`adyen-checkout-card-input__icon ${\n                notSelected ? 'adyen-checkout__card__cardNumber__brandIcon--not-selected' : ''\n            } adyen-checkout__card__cardNumber__brandIcon`}\n            onError={handleError}\n            alt={getFullBrandName(brand)}\n            src={imageUrl}\n            onClick={onClick}\n            data-value={dataValue}\n        />\n    );\n};\n\nexport default DualBrandingIcon;\n"],"names":["DualBrandingIcon","brand","onClick","dataValue","notSelected","brandsConfiguration","getImage","useImage","imageName","imageUrl","icon","getCardImageUrl","h","img","className","onError","e","target","style","cssText","alt","getFullBrandName","src","data-value"],"mappings":"kNAMA,MAAMA,EAAmB,EAAGC,QAAOC,UAASC,YAAWC,cAAaC,sBAAsB,CAAA,MACtF,MAAMC,EAAWC,IACXC,EAAsB,SAAVP,EAAmB,SAAWA,EAC1CQ,EAAWJ,EAAoBJ,IAAQS,MAAQC,EAAgBH,EAAWF,GAKhF,OACIM,EAACC,MAAAA,CACGC,UAAW,mCACPV,EAAc,4DAA8D,iDAEhFW,QATYC,IAChBA,EAAEC,OAAOC,MAAMC,QAAU,eAAA,EASrBC,IAAKC,EAAiBpB,GACtBqB,IAAKb,EACLP,QAASA,EACTqB,aAAYpB"}
+{"version":3,"file":"DualBrandingIcon.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/DualBrandingIcon/DualBrandingIcon.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { getCardImageUrl, getFullBrandName } from '../../utils';\nimport { DualBrandingIconProps } from '../types';\nimport './DualBrandingIcon.scss';\nimport useImage from '../../../../../../core/Context/useImage';\n\nconst DualBrandingIcon = ({ brand, onClick, dataValue, notSelected, brandsConfiguration = {} }: DualBrandingIconProps) => {\n    const getImage = useImage();\n    const imageName = brand === 'card' ? 'nocard' : brand;\n    const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage);\n    const handleError = e => {\n        e.target.style.cssText = 'display: none';\n    };\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions\n        <img\n            className={`adyen-checkout-card-input__icon ${\n                notSelected ? 'adyen-checkout__card__cardNumber__brandIcon--not-selected' : ''\n            } adyen-checkout__card__cardNumber__brandIcon`}\n            onError={handleError}\n            alt={getFullBrandName(brand)}\n            src={imageUrl}\n            onClick={onClick}\n            data-value={dataValue}\n        />\n    );\n};\n\nexport default DualBrandingIcon;\n"],"names":["DualBrandingIcon","brand","onClick","dataValue","notSelected","brandsConfiguration","getImage","useImage","imageName","imageUrl","icon","getCardImageUrl","h","img","className","onError","e","target","style","cssText","alt","getFullBrandName","src","data-value"],"mappings":"kNAMA,MAAMA,EAAmB,EAAGC,QAAOC,UAASC,YAAWC,cAAaC,sBAAsB,CAAA,MACtF,MAAMC,EAAWC,IACXC,EAAsB,SAAVP,EAAmB,SAAWA,EAC1CQ,EAAWJ,EAAoBJ,IAAQS,MAAQC,EAAgBH,EAAWF,GAKhF,OAEIM,EAACC,MAAAA,CACGC,UAAW,mCACPV,EAAc,4DAA8D,iDAEhFW,QAVYC,IAChBA,EAAEC,OAAOC,MAAMC,QAAU,eAAA,EAUrBC,IAAKC,EAAiBpB,GACtBqB,IAAKb,EACLP,QAASA,EACTqB,aAAYpB"}

package/dist/es/components/Card/components/CardInput/components/ExpirationDate.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import n from"./DataSfSpan.js";import{DATE_POLICY_HIDDEN as o,DATE_POLICY_OPTIONAL as r,ENCRYPTED_EXPIRY_DATE as l,DATE_POLICY_REQUIRED as d}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as s}from"./IframeLabelAlternative.js";function _(_){const{label:p,focused:m,filled:u,onFocusField:f,className:x="",error:h="",isValid:y=!1,expiryDatePolicy:k=d,showContextualElement:F,contextualText:j}=_,{i18n:b}=i(),N=c(),g=t(x,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":k===o,"adyen-checkout__field__exp-date--optional":k===r}),C=k!==r?p:`${p} ${b.get("field.title.optional")}`;return e(a,{label:C,classNameModifiers:["expiryDate"],className:g,focused:m,filled:u,onFocusField:()=>f(l),errorMessage:h,isValid:y,dir:"ltr",name:"encryptedExpiryDate",i18n:b,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:F,contextualText:j},e(n,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":h,"adyen-checkout__input--focus":m,"adyen-checkout__input--valid":y})}),e("span",{className:t("adyen-checkout__field__exp-date_hint_wrapper",{"adyen-checkout__field__exp-date_hint_wrapper--hidden":h||y})},e("img",{src:N({imageFolder:"components/"})("expiry_date_hint"),className:"adyen-checkout__field__exp-date_hint",alt:C})))}export{_ as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as i}from"../../../../../core/Context/CoreProvider.js";import n from"./DataSfSpan.js";import{DATE_POLICY_HIDDEN as o,DATE_POLICY_OPTIONAL as r,ENCRYPTED_EXPIRY_DATE as l,DATE_POLICY_REQUIRED as d}from"../../../../internal/SecuredFields/lib/constants.js";import c from"../../../../../core/Context/useImage.js";import{alternativeLabelContent as s}from"./FieldLabelAlternative.js";function _(_){const{label:p,focused:m,filled:u,onFocusField:x,className:f="",error:h="",isValid:y=!1,expiryDatePolicy:k=d,showContextualElement:F,contextualText:j}=_,{i18n:b}=i(),N=c(),g=t(f,{"adyen-checkout__field__exp-date":!0,"adyen-checkout__card__exp-date__input--hidden":k===o,"adyen-checkout__field__exp-date--optional":k===r}),C=k!==r?p:`${p} ${b.get("field.title.optional")}`;return e(a,{label:C,classNameModifiers:["expiryDate"],className:g,focused:m,filled:u,onFocusField:()=>x(l),errorMessage:h,isValid:y,dir:"ltr",name:"encryptedExpiryDate",i18n:b,contextVisibleToScreenReader:!1,useLabelElement:!1,renderAlternativeToLabel:s,showContextualElement:F,contextualText:j},e(n,{encryptedFieldType:l,className:t("adyen-checkout__input","adyen-checkout__input--small","adyen-checkout__card__exp-date__input",{"adyen-checkout__input--error":h,"adyen-checkout__input--focus":m,"adyen-checkout__input--valid":y})}),e("span",{className:t("adyen-checkout__field__exp-date_hint_wrapper",{"adyen-checkout__field__exp-date_hint_wrapper--hidden":h||y})},e("img",{src:N({imageFolder:"components/"})("expiry_date_hint"),className:"adyen-checkout__field__exp-date_hint",alt:C})))}export{_ as default};
 //# sourceMappingURL=ExpirationDate.js.map

package/dist/es/components/Card/components/CardInput/components/ExpirationDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpirationDate.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/ExpirationDate.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { ExpirationDateProps } from './types';\nimport DataSfSpan from './DataSfSpan';\n\nimport {\n    DATE_POLICY_HIDDEN,\n    DATE_POLICY_OPTIONAL,\n    DATE_POLICY_REQUIRED,\n    ENCRYPTED_EXPIRY_DATE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport useImage from '../../../../../core/Context/useImage';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\n\nexport default function ExpirationDate(props: ExpirationDateProps) {\n    const {\n        label,\n        focused,\n        filled,\n        onFocusField,\n        className = '',\n        error = '',\n        isValid = false,\n        expiryDatePolicy = DATE_POLICY_REQUIRED,\n        showContextualElement,\n        contextualText\n    } = props;\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const fieldClassnames = classNames(className, {\n        'adyen-checkout__field__exp-date': true,\n        'adyen-checkout__card__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN,\n        'adyen-checkout__field__exp-date--optional': expiryDatePolicy === DATE_POLICY_OPTIONAL\n    });\n\n    const fieldLabel = expiryDatePolicy !== DATE_POLICY_OPTIONAL ? label : `${label} ${i18n.get('field.title.optional')}`;\n\n    return (\n        <Field\n            label={fieldLabel}\n            classNameModifiers={['expiryDate']}\n            className={fieldClassnames}\n            focused={focused}\n            filled={filled}\n            onFocusField={() => onFocusField(ENCRYPTED_EXPIRY_DATE)}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={'encryptedExpiryDate'}\n            i18n={i18n}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n            showContextualElement={showContextualElement}\n            contextualText={contextualText}\n        >\n            <DataSfSpan\n                encryptedFieldType={ENCRYPTED_EXPIRY_DATE}\n                className={classNames('adyen-checkout__input', 'adyen-checkout__input--small', 'adyen-checkout__card__exp-date__input', {\n                    'adyen-checkout__input--error': error,\n                    'adyen-checkout__input--focus': focused,\n                    'adyen-checkout__input--valid': isValid\n                })}\n            />\n            <span\n                className={classNames('adyen-checkout__field__exp-date_hint_wrapper', {\n                    'adyen-checkout__field__exp-date_hint_wrapper--hidden': error || isValid\n                })}\n            >\n                <img\n                    src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n                    className=\"adyen-checkout__field__exp-date_hint\"\n                    alt={fieldLabel}\n                />\n            </span>\n        </Field>\n    );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","h","Field","classNameModifiers","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","span","img","src","imageFolder","alt"],"mappings":"wlBAgBe,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,MACdA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAX,GACEY,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWZ,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDG,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBlB,EAAQ,GAAGA,KAASW,EAAKS,IAAI,0BAE5F,OACIC,EAACC,EAAAA,CACGtB,MAAOmB,EACPI,mBAAoB,CAAC,cACrBnB,UAAWW,EACXd,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAaqB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAM,sBACNhB,KAAMA,EACNiB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BtB,sBAAuBA,EACvBC,eAAgBA,GAEhBW,EAACW,EAAAA,CACGC,mBAAoBT,EACpBpB,UAAWY,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCJ,EAChC,+BAAgCK,MAGxCe,EAACa,OAAAA,CACG9B,UAAWY,EAAW,+CAAgD,CAClE,uDAAwDX,GAASC,KAGrEe,EAACc,MAAAA,CACGC,IAAKvB,EAAS,CAAEwB,YAAa,eAAxBxB,CAAyC,oBAC9CT,UAAU,uCACVkC,IAAKnB,KAKzB"}
+{"version":3,"file":"ExpirationDate.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/ExpirationDate.tsx"],"sourcesContent":["import { h } from 'preact';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { ExpirationDateProps } from './types';\nimport DataSfSpan from './DataSfSpan';\n\nimport {\n    DATE_POLICY_HIDDEN,\n    DATE_POLICY_OPTIONAL,\n    DATE_POLICY_REQUIRED,\n    ENCRYPTED_EXPIRY_DATE\n} from '../../../../internal/SecuredFields/lib/constants';\nimport useImage from '../../../../../core/Context/useImage';\nimport { alternativeLabelContent } from './FieldLabelAlternative';\n\nexport default function ExpirationDate(props: ExpirationDateProps) {\n    const {\n        label,\n        focused,\n        filled,\n        onFocusField,\n        className = '',\n        error = '',\n        isValid = false,\n        expiryDatePolicy = DATE_POLICY_REQUIRED,\n        showContextualElement,\n        contextualText\n    } = props;\n    const { i18n } = useCoreContext();\n    const getImage = useImage();\n\n    const fieldClassnames = classNames(className, {\n        'adyen-checkout__field__exp-date': true,\n        'adyen-checkout__card__exp-date__input--hidden': expiryDatePolicy === DATE_POLICY_HIDDEN,\n        'adyen-checkout__field__exp-date--optional': expiryDatePolicy === DATE_POLICY_OPTIONAL\n    });\n\n    const fieldLabel = expiryDatePolicy !== DATE_POLICY_OPTIONAL ? label : `${label} ${i18n.get('field.title.optional')}`;\n\n    return (\n        <Field\n            label={fieldLabel}\n            classNameModifiers={['expiryDate']}\n            className={fieldClassnames}\n            focused={focused}\n            filled={filled}\n            onFocusField={() => onFocusField(ENCRYPTED_EXPIRY_DATE)}\n            errorMessage={error}\n            isValid={isValid}\n            dir={'ltr'}\n            name={'encryptedExpiryDate'}\n            i18n={i18n}\n            contextVisibleToScreenReader={false}\n            useLabelElement={false}\n            renderAlternativeToLabel={alternativeLabelContent}\n            showContextualElement={showContextualElement}\n            contextualText={contextualText}\n        >\n            <DataSfSpan\n                encryptedFieldType={ENCRYPTED_EXPIRY_DATE}\n                className={classNames('adyen-checkout__input', 'adyen-checkout__input--small', 'adyen-checkout__card__exp-date__input', {\n                    'adyen-checkout__input--error': error,\n                    'adyen-checkout__input--focus': focused,\n                    'adyen-checkout__input--valid': isValid\n                })}\n            />\n            <span\n                className={classNames('adyen-checkout__field__exp-date_hint_wrapper', {\n                    'adyen-checkout__field__exp-date_hint_wrapper--hidden': error || isValid\n                })}\n            >\n                <img\n                    src={getImage({ imageFolder: 'components/' })('expiry_date_hint')}\n                    className=\"adyen-checkout__field__exp-date_hint\"\n                    alt={fieldLabel}\n                />\n            </span>\n        </Field>\n    );\n}\n"],"names":["ExpirationDate","props","label","focused","filled","onFocusField","className","error","isValid","expiryDatePolicy","DATE_POLICY_REQUIRED","showContextualElement","contextualText","i18n","useCoreContext","getImage","useImage","fieldClassnames","classNames","DATE_POLICY_HIDDEN","DATE_POLICY_OPTIONAL","fieldLabel","get","h","Field","classNameModifiers","ENCRYPTED_EXPIRY_DATE","errorMessage","dir","name","contextVisibleToScreenReader","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","span","img","src","imageFolder","alt"],"mappings":"ulBAgBe,SAASA,EAAeC,GACnC,MAAMC,MACFA,EAAKC,QACLA,EAAOC,OACPA,EAAMC,aACNA,EAAYC,UACZA,EAAY,GAAEC,MACdA,EAAQ,GAAEC,QACVA,GAAU,EAAKC,iBACfA,EAAmBC,EAAoBC,sBACvCA,EAAqBC,eACrBA,GACAX,GACEY,KAAEA,GAASC,IACXC,EAAWC,IAEXC,EAAkBC,EAAWZ,EAAW,CAC1C,mCAAmC,EACnC,gDAAiDG,IAAqBU,EACtE,4CAA6CV,IAAqBW,IAGhEC,EAAaZ,IAAqBW,EAAuBlB,EAAQ,GAAGA,KAASW,EAAKS,IAAI,0BAE5F,OACIC,EAACC,EAAAA,CACGtB,MAAOmB,EACPI,mBAAoB,CAAC,cACrBnB,UAAWW,EACXd,QAASA,EACTC,OAAQA,EACRC,aAAc,IAAMA,EAAaqB,GACjCC,aAAcpB,EACdC,QAASA,EACToB,IAAK,MACLC,KAAM,sBACNhB,KAAMA,EACNiB,8BAA8B,EAC9BC,iBAAiB,EACjBC,yBAA0BC,EAC1BtB,sBAAuBA,EACvBC,eAAgBA,GAEhBW,EAACW,EAAAA,CACGC,mBAAoBT,EACpBpB,UAAWY,EAAW,wBAAyB,+BAAgC,wCAAyC,CACpH,+BAAgCX,EAChC,+BAAgCJ,EAChC,+BAAgCK,MAGxCe,EAACa,OAAAA,CACG9B,UAAWY,EAAW,+CAAgD,CAClE,uDAAwDX,GAASC,KAGrEe,EAACc,MAAAA,CACGC,IAAKvB,EAAS,CAAEwB,YAAa,eAAxBxB,CAAyC,oBAC9CT,UAAU,uCACVkC,IAAKnB,KAKzB"}

package/dist/es/components/Card/components/CardInput/components/{IframeLabelAlternative.js → FieldLabelAlternative.js}

@@ -1,2 +1,2 @@
 import{createElement as e}from"../../../../../external/preact/dist/preact.js";const t=(t,r)=>e("div",{...t,"aria-hidden":"true"},r);export{t as alternativeLabelContent};
-//# sourceMappingURL=IframeLabelAlternative.js.map
+//# sourceMappingURL=FieldLabelAlternative.js.map

package/dist/es/components/Card/components/CardInput/components/FieldLabelAlternative.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabelAlternative.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/FieldLabelAlternative.tsx"],"sourcesContent":["import { h } from 'preact';\n\nexport const alternativeLabelContent = (defaultWrapperProps, children) => {\n    return (\n        <div {...defaultWrapperProps} aria-hidden={'true'}>\n            {children}\n        </div>\n    );\n};\n"],"names":["alternativeLabelContent","defaultWrapperProps","children","h","div","aria-hidden"],"mappings":"8EAEO,MAAMA,EAA0B,CAACC,EAAqBC,IAErDC,EAACC,MAAAA,IAAQH,EAAqBI,cAAa,QACtCH"}

package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as n}from"../../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import r from"../../../../../internal/FormFields/Select/Select.js";function o(o){const{i18n:m}=a(),{amount:u,brand:d,onChange:v,type:c}=o,p=o.installmentOptions[d]||o.installmentOptions.card,g=1===p?.values?.length,[f,b]=l(p?.preselectedValue||p?.values[0]),[h,F]=l("onetime"),E=p?.plans?.includes("revolving"),j=e=>{const l=e.target.value;b(Number(l))},C=e=>{const l=e.currentTarget.getAttribute("value");F(l)},N=e=>{let l,n;var t;return"amount"===c?(l="installmentOption",n={count:e,values:{times:e,partialValue:(t=e,m.amount(u.value/t,u.currency))}}):(l="installmentOptionMonths",n={count:e,values:{times:e}}),{id:e,name:u.value?m.get(l,n):`${e}`}};return n((()=>{p?.values?.includes(f)||b(p?.preselectedValue??p?.values[0])}),[d]),n((()=>{const e={value:f,...E&&"revolving"===h&&{plan:h,value:1},...E&&"onetime"===h&&{value:1}};v(p?e:{value:null})}),[f,p,h]),p?0===u.value?null:e("div",{className:"adyen-checkout__installments"},E?e(s,{classNameModifiers:["revolving-plan"],label:""},e(i,{items:[{id:"onetime",name:"installments.oneTime"},{id:"installments",name:"installments.installments"},{id:"revolving",name:"installments.revolving"}],onChange:C,value:h}),e(t,{className:"installments"!==h?"revolving-plan-installments__disabled":"revolving-plan-installments",classNameModifiers:["revolving-plan-installments"],name:"",useLabelElement:!1,showErrorElement:!1},e(r,{filterable:!1,items:p.values.map(N),selectedValue:f,onChange:j,name:"installments",disabled:"installments"!==h}))):e(t,{label:m.get("installments"),classNameModifiers:["installments"],name:"",useLabelElement:!1,showErrorElement:!1,readOnly:g},e(r,{filterable:!1,items:p.values.map(N),selectedValue:f,onChange:j,name:"installments",readonly:g}))):null}o.defaultProps={brand:"",amount:{},onChange:()=>{}};export{o as default};
+import{createElement as e}from"../../../../../../external/preact/dist/preact.js";import{useState as l,useEffect as t}from"../../../../../../external/preact/hooks/dist/hooks.js";import n from"../../../../../internal/FormFields/Field/Field.js";import{useCoreContext as a}from"../../../../../../core/Context/CoreProvider.js";import s from"../../../../../internal/FormFields/Fieldset/Fieldset.js";import i from"../../../../../internal/FormFields/RadioGroup/RadioGroup.js";import o from"../../../../../internal/FormFields/Select/Select.js";import{alternativeLabelContent as m}from"../FieldLabelAlternative.js";function r(r){const{i18n:u}=a(),{amount:d,brand:v,onChange:c,type:p}=r,g=r.installmentOptions[v]||r.installmentOptions.card,f=1===g?.values?.length,[b,h]=l(g?.preselectedValue||g?.values[0]),[F,C]=l("onetime"),j=g?.plans?.includes("revolving"),x=e=>{const l=e.target.value;h(Number(l))},E=e=>{const l=e.currentTarget.getAttribute("value");C(l)},N=e=>{let l,t;var n;return"amount"===p?(l="installmentOption",t={count:e,values:{times:e,partialValue:(n=e,u.amount(d.value/n,d.currency))}}):(l="installmentOptionMonths",t={count:e,values:{times:e}}),{id:e,name:d.value?u.get(l,t):`${e}`}};return t((()=>{g?.values?.includes(b)||h(g?.preselectedValue??g?.values[0])}),[v]),t((()=>{const e={value:b,...j&&"revolving"===F&&{plan:F,value:1},...j&&"onetime"===F&&{value:1}};c(g?e:{value:null})}),[b,g,F]),g?0===d.value?null:e("div",{className:"adyen-checkout__installments"},j?e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installmentsPseudoLabel",useLabelElement:!1,showContextualElement:!1,renderAlternativeToLabel:m},e(s,{classNameModifiers:["revolving-plan"],label:""},e(i,{items:[{id:"onetime",name:"installments.oneTime"},{id:"installments",name:"installments.installments"},{id:"revolving",name:"installments.revolving"}],onChange:E,value:F,ariaLabel:u.get("installments")}),e(n,{className:"installments"!==F?"revolving-plan-installments__disabled":"revolving-plan-installments",classNameModifiers:["revolving-plan-installments"],name:"",useLabelElement:!1,showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(N),selectedValue:b,onChange:x,name:"installments",disabled:"installments"!==F})))):e(n,{label:u.get("installments"),classNameModifiers:["installments"],name:"installments",showContextualElement:!1},e(o,{filterable:!1,items:g.values.map(N),selectedValue:b,onChange:x,name:"installments",readonly:f,allowIdOnButton:!0}))):null}r.defaultProps={brand:"",amount:{},onChange:()=>{}};export{r as default};
 //# sourceMappingURL=Installments.js.map

package/dist/es/components/Card/components/CardInput/components/Installments/Installments.js.map

@@ -1 +1 @@
-{"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\n\nexport interface InstallmentsObj {\n    value: number;\n    plan?: 'revolving';\n}\n\n/**\n * Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n    const { i18n } = useCoreContext();\n    const { amount, brand, onChange, type } = props;\n    const installmentOptions = props.installmentOptions[brand] || props.installmentOptions.card;\n    const readOnly = installmentOptions?.values?.length === 1;\n    const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue || installmentOptions?.values[0]);\n    const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n    // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n    const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n    const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n    const onSelectInstallment = e => {\n        const selectedInstallments = e.target.value;\n        setInstallmentAmount(Number(selectedInstallments));\n    };\n\n    const onRadioSelect = e => {\n        const selectedBtn = e.currentTarget.getAttribute('value');\n        setRadioBtnValue(selectedBtn);\n    };\n\n    const installmentItemsMapper = (value: number): InstallmentsItem => {\n        let translationKey;\n        let translationObj;\n\n        if (type === 'amount') {\n            translationKey = 'installmentOption';\n            translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n        } else {\n            translationKey = `installmentOptionMonths`;\n            translationObj = { count: value, values: { times: value } };\n        }\n\n        return {\n            id: value,\n            name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n        };\n    };\n\n    useEffect(() => {\n        if (installmentOptions?.values?.includes(installmentAmount)) {\n            return;\n        }\n\n        setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n    }, [brand]);\n\n    useEffect(() => {\n        const stateObj: InstallmentsObj = {\n            value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n            ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n            ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n        };\n\n        onChange(installmentOptions ? stateObj : { value: null });\n    }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n    if (!installmentOptions) return null;\n    if (amount.value === 0) return null;\n\n    // Alternate interface for installments with the possibility of a \"revolving\" plan\n    if (hasRadioButtonUI) {\n        return (\n            <div className=\"adyen-checkout__installments\">\n                <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n                    <RadioGroup\n                        items={[\n                            { id: 'onetime', name: 'installments.oneTime' },\n                            { id: 'installments', name: 'installments.installments' },\n                            { id: 'revolving', name: 'installments.revolving' }\n                        ]}\n                        onChange={onRadioSelect}\n                        value={radioBtnValue}\n                    />\n\n                    <Field\n                        className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n                        classNameModifiers={['revolving-plan-installments']}\n                        name={''}\n                        useLabelElement={false}\n                        showErrorElement={false}\n                    >\n                        <Select\n                            filterable={false}\n                            items={installmentOptions.values.map(installmentItemsMapper)}\n                            selectedValue={installmentAmount}\n                            onChange={onSelectInstallment}\n                            name={'installments'}\n                            disabled={radioBtnValue !== 'installments'}\n                        />\n                    </Field>\n                </Fieldset>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"adyen-checkout__installments\">\n            <Field\n                label={i18n.get('installments')}\n                classNameModifiers={['installments']}\n                name={''}\n                useLabelElement={false}\n                showErrorElement={false}\n                readOnly={readOnly}\n            >\n                <Select\n                    filterable={false}\n                    items={installmentOptions.values.map(installmentItemsMapper)}\n                    selectedValue={installmentAmount}\n                    onChange={onSelectInstallment}\n                    name={'installments'}\n                    readonly={readOnly}\n                />\n            </Field>\n        </div>\n    );\n}\n\nInstallments.defaultProps = {\n    brand: '',\n    amount: {},\n    onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Fieldset","classNameModifiers","label","RadioGroup","items","Field","useLabelElement","showErrorElement","Select","filterable","map","selectedValue","disabled","readonly","defaultProps"],"mappings":"uhBAiBA,SAASA,EAAaC,GAClB,MAAMC,KAAEA,GAASC,KACXC,OAAEA,EAAMC,MAAEA,EAAKC,SAAEA,EAAQC,KAAEA,GAASN,EACpCO,EAAqBP,EAAMO,mBAAmBH,IAAUJ,EAAMO,mBAAmBC,KACjFC,EAAkD,IAAvCF,GAAoBG,QAAQC,QACtCC,EAAmBC,GAAwBC,EAASP,GAAoBQ,kBAAoBR,GAAoBG,OAAO,KACvHM,EAAeC,GAAoBH,EAAS,WAG7CI,EAAmBX,GAAoBY,OAAOC,SAAS,aAGvDC,EAAsBC,IACxB,MAAMC,EAAuBD,EAAEE,OAAOC,MACtCZ,EAAqBa,OAAOH,GAAAA,EAG1BI,EAAgBL,IAClB,MAAMM,EAAcN,EAAEO,cAAcC,aAAa,SACjDb,EAAiBW,EAAAA,EAGfG,EAA0BN,IAC5B,IAAIO,EACAC,EAdiB,IAACC,EAwBtB,MARa,WAAT5B,GACA0B,EAAiB,oBACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,EAAOY,cAlBvCH,EAkBsET,EAlB1CxB,EAAKE,OAAOA,EAAOsB,MAAQS,EAAS/B,EAAOmC,eAoBzFN,EAAiB,0BACjBC,EAAiB,CAAEE,MAAOV,EAAOf,OAAQ,CAAE0B,MAAOX,KAG/C,CACHc,GAAId,EACJe,KAAMrC,EAAOsB,MAAQxB,EAAKwC,IAAIT,EAAgBC,GAAkB,GAAGR,IACvE,EAqBJ,OAlBAiB,GAAU,KACFnC,GAAoBG,QAAQU,SAASR,IAIzCC,EAAqBN,GAAoBQ,kBAAoBR,GAAoBG,OAAO,GAAE,GAC3F,CAACN,IAEJsC,GAAU,KACN,MAAMC,EAA4B,CAC9BlB,MAAOb,KACHM,GAAsC,cAAlBF,GAAiC,CAAE4B,KAAM5B,EAAeS,MAAO,MACnFP,GAAsC,YAAlBF,GAA+B,CAAES,MAAO,IAGpEpB,EAASE,EAAqBoC,EAAW,CAAElB,MAAO,MAAK,GACxD,CAACb,EAAmBL,EAAoBS,IAEtCT,EACgB,IAAjBJ,EAAOsB,MAAoB,KAKvBoB,EAACC,MAAAA,CAAIC,UAAU,gCAFnB7B,EAGQ2B,EAACG,EAAAA,CAASC,mBAAoB,CAAC,kBAAmBC,MAAO,IACrDL,EAACM,EAAAA,CACGC,MAAO,CACH,CAAEb,GAAI,UAAWC,KAAM,wBACvB,CAAED,GAAI,eAAgBC,KAAM,6BAC5B,CAAED,GAAI,YAAaC,KAAM,2BAE7BnC,SAAUsB,EACVF,MAAOT,IAGX6B,EAACQ,EAAAA,CACGN,UAA6B,iBAAlB/B,EAAmC,wCAA0C,8BACxFiC,mBAAoB,CAAC,+BACrBT,KAAM,GACNc,iBAAiB,EACjBC,kBAAkB,GAElBV,EAACW,EAAAA,CACGC,YAAY,EACZL,MAAO7C,EAAmBG,OAAOgD,IAAI3B,GACrC4B,cAAe/C,EACfP,SAAUgB,EACVmB,KAAM,eACNoB,SAA4B,iBAAlB5C,MAU1B6B,EAACQ,EAAAA,CACGH,MAAOjD,EAAKwC,IAAI,gBAChBQ,mBAAoB,CAAC,gBACrBT,KAAM,GACNc,iBAAiB,EACjBC,kBAAkB,EAClB9C,SAAUA,GAEVoC,EAACW,EAAAA,CACGC,YAAY,EACZL,MAAO7C,EAAmBG,OAAOgD,IAAI3B,GACrC4B,cAAe/C,EACfP,SAAUgB,EACVmB,KAAM,eACNqB,SAAUpD,MAvDM,IA4DpC,CAEAV,EAAa+D,aAAe,CACxB1D,MAAO,GACPD,OAAQ,CAAC,EACTE,SAAU"}
+{"version":3,"file":"Installments.js","sources":["../../../../../../../../src/components/Card/components/CardInput/components/Installments/Installments.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport Field from '../../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../../core/Context/CoreProvider';\nimport { InstallmentsItem, InstallmentsProps } from '../types';\nimport Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';\nimport RadioGroup from '../../../../../internal/FormFields/RadioGroup';\nimport Select from '../../../../../internal/FormFields/Select';\nimport { alternativeLabelContent } from '../FieldLabelAlternative';\nimport './Installments.scss';\n\nexport interface InstallmentsObj {\n    value: number;\n    plan?: 'revolving';\n}\n\n/**\n * Installments generic dropdown\n */\nfunction Installments(props: InstallmentsProps) {\n    const { i18n } = useCoreContext();\n    const { amount, brand, onChange, type } = props;\n    const installmentOptions = props.installmentOptions[brand] || props.installmentOptions.card;\n    const readOnly = installmentOptions?.values?.length === 1;\n    const [installmentAmount, setInstallmentAmount] = useState(installmentOptions?.preselectedValue || installmentOptions?.values[0]);\n    const [radioBtnValue, setRadioBtnValue] = useState('onetime');\n\n    // hasRadioButtonUI determines if we have 3 radio buttons in the UI ('onetime', 'installments' and 'revolving')\n    const hasRadioButtonUI = installmentOptions?.plans?.includes('revolving');\n    const getPartialAmount = (divider: number): string => i18n.amount(amount.value / divider, amount.currency);\n\n    const onSelectInstallment = e => {\n        const selectedInstallments = e.target.value;\n        setInstallmentAmount(Number(selectedInstallments));\n    };\n\n    const onRadioSelect = e => {\n        const selectedBtn = e.currentTarget.getAttribute('value');\n        setRadioBtnValue(selectedBtn);\n    };\n\n    const installmentItemsMapper = (value: number): InstallmentsItem => {\n        let translationKey;\n        let translationObj;\n\n        if (type === 'amount') {\n            translationKey = 'installmentOption';\n            translationObj = { count: value, values: { times: value, partialValue: getPartialAmount(value) } };\n        } else {\n            translationKey = `installmentOptionMonths`;\n            translationObj = { count: value, values: { times: value } };\n        }\n\n        return {\n            id: value,\n            name: amount.value ? i18n.get(translationKey, translationObj) : `${value}`\n        };\n    };\n\n    useEffect(() => {\n        if (installmentOptions?.values?.includes(installmentAmount)) {\n            return;\n        }\n\n        setInstallmentAmount(installmentOptions?.preselectedValue ?? installmentOptions?.values[0]);\n    }, [brand]);\n\n    useEffect(() => {\n        const stateObj: InstallmentsObj = {\n            value: installmentAmount, // No radio button interface or \"installments\" radio button selected\n            ...(hasRadioButtonUI && radioBtnValue === 'revolving' && { plan: radioBtnValue, value: 1 }),\n            ...(hasRadioButtonUI && radioBtnValue === 'onetime' && { value: 1 })\n        };\n\n        onChange(installmentOptions ? stateObj : { value: null });\n    }, [installmentAmount, installmentOptions, radioBtnValue]);\n\n    if (!installmentOptions) return null;\n    if (amount.value === 0) return null;\n\n    // Alternate interface for installments with the possibility of a \"revolving\" plan\n    if (hasRadioButtonUI) {\n        return (\n            <div className=\"adyen-checkout__installments\">\n                <Field\n                    label={i18n.get('installments')}\n                    classNameModifiers={['installments']}\n                    name={'installmentsPseudoLabel'}\n                    useLabelElement={false}\n                    showContextualElement={false}\n                    renderAlternativeToLabel={alternativeLabelContent}\n                >\n                    <Fieldset classNameModifiers={['revolving-plan']} label={''}>\n                        <RadioGroup\n                            items={[\n                                { id: 'onetime', name: 'installments.oneTime' },\n                                { id: 'installments', name: 'installments.installments' },\n                                { id: 'revolving', name: 'installments.revolving' }\n                            ]}\n                            onChange={onRadioSelect}\n                            value={radioBtnValue}\n                            ariaLabel={i18n.get('installments')}\n                        />\n\n                        <Field\n                            className={radioBtnValue !== 'installments' ? 'revolving-plan-installments__disabled' : 'revolving-plan-installments'}\n                            classNameModifiers={['revolving-plan-installments']}\n                            name={''}\n                            useLabelElement={false}\n                            showContextualElement={false}\n                        >\n                            <Select\n                                filterable={false}\n                                items={installmentOptions.values.map(installmentItemsMapper)}\n                                selectedValue={installmentAmount}\n                                onChange={onSelectInstallment}\n                                name={'installments'}\n                                disabled={radioBtnValue !== 'installments'}\n                            />\n                        </Field>\n                    </Fieldset>\n                </Field>\n            </div>\n        );\n    }\n\n    return (\n        <div className=\"adyen-checkout__installments\">\n            <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} showContextualElement={false}>\n                <Select\n                    filterable={false}\n                    items={installmentOptions.values.map(installmentItemsMapper)}\n                    selectedValue={installmentAmount}\n                    onChange={onSelectInstallment}\n                    name={'installments'}\n                    readonly={readOnly}\n                    allowIdOnButton={true}\n                />\n            </Field>\n        </div>\n    );\n}\n\nInstallments.defaultProps = {\n    brand: '',\n    amount: {},\n    onChange: () => {}\n};\n\nexport default Installments;\n"],"names":["Installments","props","i18n","useCoreContext","amount","brand","onChange","type","installmentOptions","card","readOnly","values","length","installmentAmount","setInstallmentAmount","useState","preselectedValue","radioBtnValue","setRadioBtnValue","hasRadioButtonUI","plans","includes","onSelectInstallment","e","selectedInstallments","target","value","Number","onRadioSelect","selectedBtn","currentTarget","getAttribute","installmentItemsMapper","translationKey","translationObj","divider","count","times","partialValue","currency","id","name","get","useEffect","stateObj","plan","h","div","className","Field","label","classNameModifiers","useLabelElement","showContextualElement","renderAlternativeToLabel","alternativeLabelContent","Fieldset","RadioGroup","items","ariaLabel","Select","filterable","map","selectedValue","disabled","readonly","allowIdOnButton","defaultProps"],"mappings":"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"}

package/dist/es/components/Card/components/CardInput/components/KCPAuthentication.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import s from"./DataSfSpan.js";import n from"../../../../internal/FormFields/InputTelephone.js";import{alternativeLabelContent as d}from"./IframeLabelAlternative.js";import{CREDITCARD_TAX_NUMBER_INVALID as l}from"../../../../../core/Errors/constants.js";function i(i){const{i18n:c}=o(),u=r((()=>i.value?.length>6?c.get("creditCard.taxNumber.labelAlt"):c.get("creditCard.taxNumber.label")),[i.value]);return e("div",{className:"adyen-checkout__card__kcp-authentication"},e(a,{label:u,filled:i.filled,classNameModifiers:["kcp-taxNumber"],errorMessage:i.error&&c.get(l),isValid:i.isValid,dir:"ltr",name:"kcpTaxNumberOrDOB",onFocus:e=>i.onFieldFocusAnalytics("taxNumber",e),onBlur:e=>i.onFieldBlurAnalytics("taxNumber",e)},e(n,{name:"kcpTaxNumberOrDOB",className:"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input",maxLength:10,minLength:6,autoComplete:"false",value:i.value,required:!0,onBlur:i.onBlur,onInput:i.onInput,disabled:i.disabled,placeholder:i.placeholder})),e(a,{label:c.get("creditCard.password.label"),focused:"encryptedPassword"===i.focusedElement,filled:i.filled,classNameModifiers:["50","koreanAuthentication-encryptedPassword"],onFocusField:()=>i.onFocusField("encryptedPassword"),errorMessage:i.encryptedPasswordState.errors&&c.get(String(i.encryptedPasswordState.errors)),isValid:i.encryptedPasswordState.valid,dir:"ltr",name:"encryptedPassword",useLabelElement:!1,renderAlternativeToLabel:d},e(s,{encryptedFieldType:"encryptedPassword",className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":i.encryptedPasswordState.errors,"adyen-checkout__input--valid":i.encryptedPasswordState.valid,"adyen-checkout__input--focus":"encryptedPassword"===i.focusedElement})})))}export{i as default};
+import{createElement as e}from"../../../../../external/preact/dist/preact.js";import{useMemo as r}from"../../../../../external/preact/hooks/dist/hooks.js";import t from"../../../../../external/classnames/index.js";import a from"../../../../internal/FormFields/Field/Field.js";import{useCoreContext as o}from"../../../../../core/Context/CoreProvider.js";import s from"./DataSfSpan.js";import d from"../../../../internal/FormFields/InputTelephone.js";import{alternativeLabelContent as n}from"./FieldLabelAlternative.js";import{CREDITCARD_TAX_NUMBER_INVALID as l}from"../../../../../core/Errors/constants.js";function i(i){const{i18n:c}=o(),u=r((()=>i.value?.length>6?c.get("creditCard.taxNumber.labelAlt"):c.get("creditCard.taxNumber.label")),[i.value]);return e("div",{className:"adyen-checkout__card__kcp-authentication"},e(a,{label:u,filled:i.filled,classNameModifiers:["kcp-taxNumber"],errorMessage:i.error&&c.get(l),isValid:i.isValid,dir:"ltr",name:"kcpTaxNumberOrDOB",onFocus:e=>i.onFieldFocusAnalytics("taxNumber",e),onBlur:e=>i.onFieldBlurAnalytics("taxNumber",e)},e(d,{name:"kcpTaxNumberOrDOB",className:"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input",maxLength:10,minLength:6,autoComplete:"false",value:i.value,required:!0,onBlur:i.onBlur,onInput:i.onInput,disabled:i.disabled,placeholder:i.placeholder})),e(a,{label:c.get("creditCard.password.label"),focused:"encryptedPassword"===i.focusedElement,filled:i.filled,classNameModifiers:["50","koreanAuthentication-encryptedPassword"],onFocusField:()=>i.onFocusField("encryptedPassword"),errorMessage:i.encryptedPasswordState.errors&&c.get(String(i.encryptedPasswordState.errors)),isValid:i.encryptedPasswordState.valid,dir:"ltr",name:"encryptedPassword",useLabelElement:!1,renderAlternativeToLabel:n},e(s,{encryptedFieldType:"encryptedPassword",className:t({"adyen-checkout__input":!0,"adyen-checkout__input--large":!0,"adyen-checkout__input--error":i.encryptedPasswordState.errors,"adyen-checkout__input--valid":i.encryptedPasswordState.valid,"adyen-checkout__input--focus":"encryptedPassword"===i.focusedElement})})))}export{i as default};
 //# sourceMappingURL=KCPAuthentication.js.map

package/dist/es/components/Card/components/CardInput/components/KCPAuthentication.js.map

@@ -1 +1 @@
-{"version":3,"file":"KCPAuthentication.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/KCPAuthentication.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { KCPProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport InputTelephone from '../../../../internal/FormFields/InputTelephone';\nimport { alternativeLabelContent } from './IframeLabelAlternative';\nimport { CREDITCARD_TAX_NUMBER_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function KCPAuthentication(props: KCPProps) {\n    const { i18n } = useCoreContext();\n\n    const taxNumberLabel = useMemo((): string => {\n        if (props.value?.length > 6) return i18n.get('creditCard.taxNumber.labelAlt');\n\n        return i18n.get('creditCard.taxNumber.label');\n    }, [props.value]);\n\n    return (\n        <div className=\"adyen-checkout__card__kcp-authentication\">\n            <Field\n                label={taxNumberLabel}\n                filled={props.filled}\n                classNameModifiers={['kcp-taxNumber']}\n                errorMessage={props.error && i18n.get(CREDITCARD_TAX_NUMBER_INVALID)}\n                isValid={props.isValid}\n                dir={'ltr'}\n                name={'kcpTaxNumberOrDOB'}\n                onFocus={e => props.onFieldFocusAnalytics('taxNumber', e)}\n                onBlur={e => props.onFieldBlurAnalytics('taxNumber', e)}\n            >\n                <InputTelephone\n                    name={'kcpTaxNumberOrDOB'}\n                    className=\"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input\"\n                    maxLength={10}\n                    minLength={6}\n                    autoComplete={'false'}\n                    value={props.value}\n                    required={true}\n                    onBlur={props.onBlur}\n                    onInput={props.onInput}\n                    disabled={props.disabled}\n                    placeholder={props.placeholder}\n                />\n            </Field>\n\n            <Field\n                label={i18n.get('creditCard.password.label')}\n                focused={props.focusedElement === 'encryptedPassword'}\n                filled={props.filled}\n                classNameModifiers={['50', 'koreanAuthentication-encryptedPassword']}\n                onFocusField={() => props.onFocusField('encryptedPassword')}\n                errorMessage={props.encryptedPasswordState.errors && i18n.get(String(props.encryptedPasswordState.errors))}\n                isValid={props.encryptedPasswordState.valid}\n                dir={'ltr'}\n                name={'encryptedPassword'}\n                useLabelElement={false}\n                renderAlternativeToLabel={alternativeLabelContent}\n            >\n                <DataSfSpan\n                    encryptedFieldType=\"encryptedPassword\"\n                    className={classNames({\n                        'adyen-checkout__input': true,\n                        'adyen-checkout__input--large': true,\n                        'adyen-checkout__input--error': props.encryptedPasswordState.errors,\n                        'adyen-checkout__input--valid': props.encryptedPasswordState.valid,\n                        'adyen-checkout__input--focus': props.focusedElement === 'encryptedPassword'\n                    })}\n                />\n            </Field>\n        </div>\n    );\n}\n"],"names":["KCPAuthentication","props","i18n","useCoreContext","taxNumberLabel","useMemo","value","length","get","h","div","className","Field","label","filled","classNameModifiers","errorMessage","error","CREDITCARD_TAX_NUMBER_INVALID","isValid","dir","name","onFocus","e","onFieldFocusAnalytics","onBlur","onFieldBlurAnalytics","InputTelephone","maxLength","minLength","autoComplete","required","onInput","disabled","placeholder","focused","focusedElement","onFocusField","encryptedPasswordState","errors","String","valid","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","classNames"],"mappings":"+lBAWe,SAASA,EAAkBC,GACtC,MAAMC,KAAEA,GAASC,IAEXC,EAAiBC,GAAQ,IACvBJ,EAAMK,OAAOC,OAAS,EAAUL,EAAKM,IAAI,iCAEtCN,EAAKM,IAAI,+BACjB,CAACP,EAAMK,QAEV,OACIG,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACG,EAAAA,CACGC,MAAOT,EACPU,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,iBACrBC,aAAcf,EAAMgB,OAASf,EAAKM,IAAIU,GACtCC,QAASlB,EAAMkB,QACfC,IAAK,MACLC,KAAM,oBACNC,QAASC,GAAKtB,EAAMuB,sBAAsB,YAAaD,GACvDE,OAAQF,GAAKtB,EAAMyB,qBAAqB,YAAaH,IAErDd,EAACkB,EAAAA,CACGN,KAAM,oBACNV,UAAU,mEACViB,UAAW,GACXC,UAAW,EACXC,aAAc,QACdxB,MAAOL,EAAMK,MACbyB,UAAU,EACVN,OAAQxB,EAAMwB,OACdO,QAAS/B,EAAM+B,QACfC,SAAUhC,EAAMgC,SAChBC,YAAajC,EAAMiC,eAI3BzB,EAACG,EAAAA,CACGC,MAAOX,EAAKM,IAAI,6BAChB2B,QAAkC,sBAAzBlC,EAAMmC,eACftB,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,KAAM,0CAC3BsB,aAAc,IAAMpC,EAAMoC,aAAa,qBACvCrB,aAAcf,EAAMqC,uBAAuBC,QAAUrC,EAAKM,IAAIgC,OAAOvC,EAAMqC,uBAAuBC,SAClGpB,QAASlB,EAAMqC,uBAAuBG,MACtCrB,IAAK,MACLC,KAAM,oBACNqB,iBAAiB,EACjBC,yBAA0BC,GAE1BnC,EAACoC,EAAAA,CACGC,mBAAmB,oBACnBnC,UAAWoC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgC9C,EAAMqC,uBAAuBC,OAC7D,+BAAgCtC,EAAMqC,uBAAuBG,MAC7D,+BAAyD,sBAAzBxC,EAAMmC,oBAM9D"}
+{"version":3,"file":"KCPAuthentication.js","sources":["../../../../../../../src/components/Card/components/CardInput/components/KCPAuthentication.tsx"],"sourcesContent":["import { h } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport classNames from 'classnames';\nimport Field from '../../../../internal/FormFields/Field';\nimport { useCoreContext } from '../../../../../core/Context/CoreProvider';\nimport { KCPProps } from './types';\nimport DataSfSpan from './DataSfSpan';\nimport InputTelephone from '../../../../internal/FormFields/InputTelephone';\nimport { alternativeLabelContent } from './FieldLabelAlternative';\nimport { CREDITCARD_TAX_NUMBER_INVALID } from '../../../../../core/Errors/constants';\n\nexport default function KCPAuthentication(props: KCPProps) {\n    const { i18n } = useCoreContext();\n\n    const taxNumberLabel = useMemo((): string => {\n        if (props.value?.length > 6) return i18n.get('creditCard.taxNumber.labelAlt');\n\n        return i18n.get('creditCard.taxNumber.label');\n    }, [props.value]);\n\n    return (\n        <div className=\"adyen-checkout__card__kcp-authentication\">\n            <Field\n                label={taxNumberLabel}\n                filled={props.filled}\n                classNameModifiers={['kcp-taxNumber']}\n                errorMessage={props.error && i18n.get(CREDITCARD_TAX_NUMBER_INVALID)}\n                isValid={props.isValid}\n                dir={'ltr'}\n                name={'kcpTaxNumberOrDOB'}\n                onFocus={e => props.onFieldFocusAnalytics('taxNumber', e)}\n                onBlur={e => props.onFieldBlurAnalytics('taxNumber', e)}\n            >\n                <InputTelephone\n                    name={'kcpTaxNumberOrDOB'}\n                    className=\"adyen-checkout__card__kcp-taxNumber__input adyen-checkout__input\"\n                    maxLength={10}\n                    minLength={6}\n                    autoComplete={'false'}\n                    value={props.value}\n                    required={true}\n                    onBlur={props.onBlur}\n                    onInput={props.onInput}\n                    disabled={props.disabled}\n                    placeholder={props.placeholder}\n                />\n            </Field>\n\n            <Field\n                label={i18n.get('creditCard.password.label')}\n                focused={props.focusedElement === 'encryptedPassword'}\n                filled={props.filled}\n                classNameModifiers={['50', 'koreanAuthentication-encryptedPassword']}\n                onFocusField={() => props.onFocusField('encryptedPassword')}\n                errorMessage={props.encryptedPasswordState.errors && i18n.get(String(props.encryptedPasswordState.errors))}\n                isValid={props.encryptedPasswordState.valid}\n                dir={'ltr'}\n                name={'encryptedPassword'}\n                useLabelElement={false}\n                renderAlternativeToLabel={alternativeLabelContent}\n            >\n                <DataSfSpan\n                    encryptedFieldType=\"encryptedPassword\"\n                    className={classNames({\n                        'adyen-checkout__input': true,\n                        'adyen-checkout__input--large': true,\n                        'adyen-checkout__input--error': props.encryptedPasswordState.errors,\n                        'adyen-checkout__input--valid': props.encryptedPasswordState.valid,\n                        'adyen-checkout__input--focus': props.focusedElement === 'encryptedPassword'\n                    })}\n                />\n            </Field>\n        </div>\n    );\n}\n"],"names":["KCPAuthentication","props","i18n","useCoreContext","taxNumberLabel","useMemo","value","length","get","h","div","className","Field","label","filled","classNameModifiers","errorMessage","error","CREDITCARD_TAX_NUMBER_INVALID","isValid","dir","name","onFocus","e","onFieldFocusAnalytics","onBlur","onFieldBlurAnalytics","InputTelephone","maxLength","minLength","autoComplete","required","onInput","disabled","placeholder","focused","focusedElement","onFocusField","encryptedPasswordState","errors","String","valid","useLabelElement","renderAlternativeToLabel","alternativeLabelContent","DataSfSpan","encryptedFieldType","classNames"],"mappings":"8lBAWe,SAASA,EAAkBC,GACtC,MAAMC,KAAEA,GAASC,IAEXC,EAAiBC,GAAQ,IACvBJ,EAAMK,OAAOC,OAAS,EAAUL,EAAKM,IAAI,iCAEtCN,EAAKM,IAAI,+BACjB,CAACP,EAAMK,QAEV,OACIG,EAACC,MAAAA,CAAIC,UAAU,4CACXF,EAACG,EAAAA,CACGC,MAAOT,EACPU,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,iBACrBC,aAAcf,EAAMgB,OAASf,EAAKM,IAAIU,GACtCC,QAASlB,EAAMkB,QACfC,IAAK,MACLC,KAAM,oBACNC,QAASC,GAAKtB,EAAMuB,sBAAsB,YAAaD,GACvDE,OAAQF,GAAKtB,EAAMyB,qBAAqB,YAAaH,IAErDd,EAACkB,EAAAA,CACGN,KAAM,oBACNV,UAAU,mEACViB,UAAW,GACXC,UAAW,EACXC,aAAc,QACdxB,MAAOL,EAAMK,MACbyB,UAAU,EACVN,OAAQxB,EAAMwB,OACdO,QAAS/B,EAAM+B,QACfC,SAAUhC,EAAMgC,SAChBC,YAAajC,EAAMiC,eAI3BzB,EAACG,EAAAA,CACGC,MAAOX,EAAKM,IAAI,6BAChB2B,QAAkC,sBAAzBlC,EAAMmC,eACftB,OAAQb,EAAMa,OACdC,mBAAoB,CAAC,KAAM,0CAC3BsB,aAAc,IAAMpC,EAAMoC,aAAa,qBACvCrB,aAAcf,EAAMqC,uBAAuBC,QAAUrC,EAAKM,IAAIgC,OAAOvC,EAAMqC,uBAAuBC,SAClGpB,QAASlB,EAAMqC,uBAAuBG,MACtCrB,IAAK,MACLC,KAAM,oBACNqB,iBAAiB,EACjBC,yBAA0BC,GAE1BnC,EAACoC,EAAAA,CACGC,mBAAmB,oBACnBnC,UAAWoC,EAAW,CAClB,yBAAyB,EACzB,gCAAgC,EAChC,+BAAgC9C,EAAMqC,uBAAuBC,OAC7D,+BAAgCtC,EAAMqC,uBAAuBG,MAC7D,+BAAyD,sBAAzBxC,EAAMmC,oBAM9D"}

package/dist/es/components/Card/components/CardInput/defaultProps.js

@@ -1,2 +1,2 @@
-import{AddressModeOptions as e}from"./types.js";var o={type:"scheme",setComponentRef:()=>{},hasHolderName:!1,holderNameRequired:!1,enableStoreDetails:!1,hasCVC:!0,showBrandIcon:!0,positionHolderNameOnTop:!1,billingAddressRequired:!1,billingAddressMode:e.full,billingAddressRequiredFields:["street","houseNumberOrName","postalCode","city","stateOrProvince","country"],installmentOptions:{},configuration:{koreanAuthenticationRequired:!1,socialSecurityNumberMode:"auto"},autoFocus:!0,isPayButtonPrimaryVariant:!0,disableIOSArrowKeys:!1,showContextualElement:!0,exposeExpiryDate:!1,onLoad:()=>{},onConfigSuccess:()=>{},onAllValid:()=>{},onFieldValid:()=>{},onBrand:()=>{},onError:()=>{},onBinValue:()=>{},onBlur:()=>{},onFocus:()=>{},onChange:()=>{},data:{billingAddress:{}},styles:{},placeholders:{}};export{o as default};
+import{AddressModeOptions as e}from"./types.js";var o={type:"scheme",setComponentRef:()=>{},autoFocus:!0,billingAddressAllowedCountries:[],billingAddressMode:e.full,billingAddressRequired:!1,billingAddressRequiredFields:["street","houseNumberOrName","postalCode","city","stateOrProvince","country"],configuration:{koreanAuthenticationRequired:!1,socialSecurityNumberMode:"auto"},data:{billingAddress:{}},disableIOSArrowKeys:!1,enableStoreDetails:!1,exposeExpiryDate:!1,forceCompat:!1,hasHolderName:!1,holderNameRequired:!1,hasCVC:!0,hideCVC:!1,installmentOptions:{},keypadFix:!0,legacyInputMode:!1,maskSecurityCode:!1,minimumExpiryDate:null,name:null,placeholders:{},positionHolderNameOnTop:!1,showBrandIcon:!0,showInstallmentAmounts:null,styles:{},isPayButtonPrimaryVariant:!0,showContextualElement:!0,onLoad:()=>{},onConfigSuccess:()=>{},onAllValid:()=>{},onFieldValid:()=>{},onBrand:()=>{},onError:()=>{},onBinValue:()=>{},onBlur:()=>{},onFocus:()=>{},onChange:()=>{},onBinLookup:()=>{},onEnterKeyPressed:()=>{}};export{o as default};
 //# sourceMappingURL=defaultProps.js.map

package/dist/es/components/Card/components/CardInput/defaultProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultProps.js","sources":["../../../../../../src/components/Card/components/CardInput/defaultProps.ts"],"sourcesContent":["import { SocialSecurityMode } from '../../types';\nimport { AddressModeOptions } from './types';\n\nexport default {\n    type: 'scheme',\n\n    setComponentRef: () => {},\n\n    // Settings\n    hasHolderName: false,\n    holderNameRequired: false,\n    enableStoreDetails: false,\n    hasCVC: true,\n    showBrandIcon: true,\n    positionHolderNameOnTop: false,\n    billingAddressRequired: false,\n    billingAddressMode: AddressModeOptions.full,\n    billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'],\n    installmentOptions: {},\n    configuration: { koreanAuthenticationRequired: false, socialSecurityNumberMode: 'auto' as SocialSecurityMode },\n    autoFocus: true,\n    isPayButtonPrimaryVariant: true,\n    disableIOSArrowKeys: false,\n    showContextualElement: true,\n    exposeExpiryDate: false,\n\n    // Events\n    onLoad: (): any => {},\n    onConfigSuccess: (): any => {},\n    onAllValid: (): any => {},\n    onFieldValid: (): any => {},\n    onBrand: (): any => {},\n    onError: (): any => {},\n    onBinValue: (): any => {},\n    onBlur: (): any => {},\n    onFocus: (): any => {},\n    onChange: (): any => {},\n\n    // Values\n    data: {\n        billingAddress: {}\n    },\n\n    // Customization\n    styles: {},\n    placeholders: {}\n};\n"],"names":["defaultProps","type","setComponentRef","hasHolderName","holderNameRequired","enableStoreDetails","hasCVC","showBrandIcon","positionHolderNameOnTop","billingAddressRequired","billingAddressMode","AddressModeOptions","full","billingAddressRequiredFields","installmentOptions","configuration","koreanAuthenticationRequired","socialSecurityNumberMode","autoFocus","isPayButtonPrimaryVariant","disableIOSArrowKeys","showContextualElement","exposeExpiryDate","onLoad","onConfigSuccess","onAllValid","onFieldValid","onBrand","onError","onBinValue","onBlur","onFocus","onChange","data","billingAddress","styles","placeholders"],"mappings":"gDAGA,IAAeA,EAAA,CACXC,KAAM,SAENC,gBAAiB,OAGjBC,eAAe,EACfC,oBAAoB,EACpBC,oBAAoB,EACpBC,QAAQ,EACRC,eAAe,EACfC,yBAAyB,EACzBC,wBAAwB,EACxBC,mBAAoBC,EAAmBC,KACvCC,6BAA8B,CAAC,SAAU,oBAAqB,aAAc,OAAQ,kBAAmB,WACvGC,mBAAoB,CAAC,EACrBC,cAAe,CAAEC,8BAA8B,EAAOC,yBAA0B,QAChFC,WAAW,EACXC,2BAA2B,EAC3BC,qBAAqB,EACrBC,uBAAuB,EACvBC,kBAAkB,EAGlBC,OAAQ,OACRC,gBAAiB,OACjBC,WAAY,OACZC,aAAc,OACdC,QAAS,OACTC,QAAS,OACTC,WAAY,OACZC,OAAQ,OACRC,QAAS,OACTC,SAAU,OAGVC,KAAM,CACFC,eAAgB,CAAC,GAIrBC,OAAQ,CAAC,EACTC,aAAc,CAAC"}
+{"version":3,"file":"defaultProps.js","sources":["../../../../../../src/components/Card/components/CardInput/defaultProps.ts"],"sourcesContent":["import { SocialSecurityMode } from '../../types';\nimport { AddressModeOptions } from './types';\n\nexport default {\n    type: 'scheme',\n\n    setComponentRef: () => {},\n\n    // Settings\n    autoFocus: true,\n    billingAddressAllowedCountries: [],\n    billingAddressMode: AddressModeOptions.full,\n    billingAddressRequired: false,\n    billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city', 'stateOrProvince', 'country'],\n\n    configuration: { koreanAuthenticationRequired: false, socialSecurityNumberMode: 'auto' as SocialSecurityMode },\n    data: {\n        billingAddress: {}\n    },\n    disableIOSArrowKeys: false,\n    enableStoreDetails: false,\n    exposeExpiryDate: false,\n    forceCompat: false,\n    hasHolderName: false,\n    holderNameRequired: false,\n    hasCVC: true,\n    hideCVC: false,\n    installmentOptions: {},\n    keypadFix: true,\n    legacyInputMode: false,\n    maskSecurityCode: false,\n    minimumExpiryDate: null,\n    name: null, // Affects Dropin only, the name displayed in the PMList item\n    placeholders: {},\n    positionHolderNameOnTop: false,\n    showBrandIcon: true,\n    showInstallmentAmounts: null,\n    styles: {},\n\n    isPayButtonPrimaryVariant: true,\n    showContextualElement: true,\n\n    // Events\n    onLoad: (): any => {},\n    onConfigSuccess: (): any => {},\n    onAllValid: (): any => {},\n    onFieldValid: (): any => {},\n    onBrand: (): any => {},\n    onError: (): any => {},\n    onBinValue: (): any => {},\n    onBlur: (): any => {},\n    onFocus: (): any => {},\n    onChange: (): any => {},\n\n    // Strictly speaking a Card level props, but needed here for analytics.configData\n    onBinLookup: () => {},\n    onEnterKeyPressed: () => {}\n};\n"],"names":["CardInputDefaultProps","type","setComponentRef","autoFocus","billingAddressAllowedCountries","billingAddressMode","AddressModeOptions","full","billingAddressRequired","billingAddressRequiredFields","configuration","koreanAuthenticationRequired","socialSecurityNumberMode","data","billingAddress","disableIOSArrowKeys","enableStoreDetails","exposeExpiryDate","forceCompat","hasHolderName","holderNameRequired","hasCVC","hideCVC","installmentOptions","keypadFix","legacyInputMode","maskSecurityCode","minimumExpiryDate","name","placeholders","positionHolderNameOnTop","showBrandIcon","showInstallmentAmounts","styles","isPayButtonPrimaryVariant","showContextualElement","onLoad","onConfigSuccess","onAllValid","onFieldValid","onBrand","onError","onBinValue","onBlur","onFocus","onChange","onBinLookup","onEnterKeyPressed"],"mappings":"gDAGA,IAAeA,EAAA,CACXC,KAAM,SAENC,gBAAiB,OAGjBC,WAAW,EACXC,+BAAgC,GAChCC,mBAAoBC,EAAmBC,KACvCC,wBAAwB,EACxBC,6BAA8B,CAAC,SAAU,oBAAqB,aAAc,OAAQ,kBAAmB,WAEvGC,cAAe,CAAEC,8BAA8B,EAAOC,yBAA0B,QAChFC,KAAM,CACFC,eAAgB,CAAC,GAErBC,qBAAqB,EACrBC,oBAAoB,EACpBC,kBAAkB,EAClBC,aAAa,EACbC,eAAe,EACfC,oBAAoB,EACpBC,QAAQ,EACRC,SAAS,EACTC,mBAAoB,CAAC,EACrBC,WAAW,EACXC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAmB,KACnBC,KAAM,KACNC,aAAc,CAAC,EACfC,yBAAyB,EACzBC,eAAe,EACfC,uBAAwB,KACxBC,OAAQ,CAAC,EAETC,2BAA2B,EAC3BC,uBAAuB,EAGvBC,OAAQ,OACRC,gBAAiB,OACjBC,WAAY,OACZC,aAAc,OACdC,QAAS,OACTC,QAAS,OACTC,WAAY,OACZC,OAAQ,OACRC,QAAS,OACTC,SAAU,OAGVC,YAAa,OACbC,kBAAmB"}